Emoji Toggles!

Fun Friday thing! Natalya hat auf CodePen ein superlustiges Pen erstellt.

Sie wissen, wie das Klicken auf ein <label> mit einem for-Attribut, das mit einer Checkbox übereinstimmt, die Checkbox zu "checked" oder "unchecked" schaltet? Das, kombiniert mit dem :checked-Selektor in CSS und dem Geschwister-Kombinator, bildet The Checkbox Hack, und Sie können damit alle möglichen lustigen Dinge tun.

Natalya hat es verwendet, um einen Schalter zu bauen, bei dem in der Aus-/Linksposition ein Emoji angezeigt wird und er in die Ein-/Rechtsposition gleitet, wo er zu einem anderen Emoji wechselt.

Sehen Sie sich das Pen Kitty Toggle von Natalya (@tallys) auf CodePen an.

Ich dachte, ich reduziere es auf das einfachste Niveau, das mir möglich war, damit Sie, falls Sie diese Idee für etwas verwenden möchten, das Sie gerade entwickeln, einen klareren Baustein hätten.

Sehen Sie sich das Pen Emoji Toggles von Chris Coyier (@chriscoyier) auf CodePen an.

<!-- The wrap for everything, so you can position it wherever.
     Also, so all the other elements are siblings. -->
<div class="emoji-toggle emoji-travel">

  <!-- The input is first, so the ~ selector can select siblings after it. -->
  <input type="checkbox" id="toggle2" class="toggle">

  <!-- The emoji is a psuedo element on this. -->
  <div class="emoji"></div>

  <!-- This is absolutely positioned over everything.
       Also, the split/label comes from using both :before and :after -->
  <label for="toggle2" class="well"></label>

</div>

Das Eingabefeld selbst ist visuell verborgen, aber absolut über allem positioniert, so dass ein Klick fast überall die Checkbox umschaltet und somit das Emoji und seine Position ändert.

Es gibt etwas mehr Code als dieser, aber dies sind die wichtigsten CSS-Teile

.emoji-toggle {
  position: relative;
  .well { // the label
    cursor: pointer;
  }
  .toggle { // the checkbox
    appearance: none;
    background: transparent;
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 100; 

    // "off"
    ~.emoji:before { 
      content: "emoji unicode here";
      position: absolute;
      left: 0;
      top: -15px;
      font-size: 40px;
      z-index: 1;
      transition: 0.2s;
    }

    // "on"
    &:checked {
      ~.emoji:before {
        content: "different emoji unicode here";
        left: 100%;
        margin-left: -1em;
      }
    }

  }
}

Sass für Versionen

Um verschiedene Versionen davon zu erstellen, musste der Inhalt der Pseudoelemente bei vier verschiedenen Selektoren mit verschachtelten Zuständen geändert werden. Es war irgendwie verrückt, also habe ich ein schnelles Sass @mixin gemacht, um mir zu helfen. Dies ist die Art von Dingen, für die ich Präprozessoren liebe – es ist nicht zu ausgefallen, es hilft nur, etwas zu abstrahieren, das sonst sehr wortreich wäre.

@mixin emojiType($leftEmoji, $rightEmoji, $leftLabel, $rightLabel) {
  .toggle {
    ~.emoji:before {
      content: $leftEmoji;
    }
    &:checked {
      ~.emoji:before {
        content: $rightEmoji;
      }
    }
     ~label {
      &:before {
        content: $leftLabel;
      }
      &:after {
        content: $rightLabel;
      }
    }
  }
}

// Usage
.emoji-happy {
  @include emojiType(
    "\01F604", "\01F620", "Happy", "Mad"
  );
}

Unicode für Emojis bekommen

Sie haben vielleicht bemerkt, dass die Unicode-Werte für die Emojis in den CSS-Inhalten wie „\01F604“ aussehen. Glücklicherweise hat Tim Whitlock eine ziemlich solide Referenzseite für diese Informationen.

Wenn also der Unicode für „grinsendes Gesicht“ „U+1F601“ ist, wird dies in CSS-Pseudoinhalten wegen der Art und Weise, wie CSS Sachen escaped, zu „\01F601“ .

Ergebnisse können variieren

Emojis sind seltsam. Ich habe gehört, dass dies nicht auf allen Systemen korrekt funktioniert. Unterschiedliche Browser/Plattformen/Versionen haben unterschiedliche Emojis verfügbar. Ich bin sicher, das überrascht uns niemanden.