表情符号切换！

有趣的周五活动！ Natalya 在 CodePen 上 制作了一个超级有趣的 Pen。

您知道如何点击带有 <label> 的 for 属性（与复选框输入匹配），它会将输入切换到选中或未选中状态吗？ 这与 CSS 中的 :checked 选择器和同级组合器相结合，形成了 复选框技巧，您可以用它来做各种有趣的事情。

Natalya 使用它构建了一个切换开关，在关闭/左侧位置显示一个表情符号，并滑动到打开/右侧位置，切换到另一个表情符号。

查看 Pen Kitty Toggle by Natalya (@tallys) on CodePen。

我认为可以将其简化到我能达到的最基本级别，所以如果您想为正在处理的事情获取这个想法，您将拥有一个更清晰的构建块。

查看 Pen Emoji Toggles by Chris Coyier (@chriscoyier) on CodePen。

<!-- 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>

输入本身在视觉上是隐藏的，但绝对定位在所有内容的顶部，以便点击几乎任何地方都会切换复选框，从而更改表情符号及其位置。

代码比这多一点，但这些是 CSS 中最重要的部分

.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 版本

为了制作它的不同版本，需要更改四个具有嵌套状态的不同选择器上的伪元素内容。 这有点令人费解，所以我制作了一个快速的 Sass @mixin 来帮助我。 这就是我喜欢使用预处理器的原因——它不太花哨，它只是帮助抽象化否则会非常冗长的事情。

@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

您可能已经注意到表情符号的 Unicode 值在 CSS 内容中类似于“\01F604”。 幸运的是，Tim Whitlock 有一个 非常可靠的参考页面 提供此信息。

因此，如果“咧嘴笑脸”的 Unicode 是“U+1F601”，则在 CSS 伪内容中，它将变为“\01F601” 因为 CSS 如何转义内容。

里程可能会有所不同

表情符号很奇怪。 我听说这在所有设置上都不能正常工作。 不同的浏览器/平台/版本具有不同的可用表情符号。 我敢肯定我们没有人感到惊讶。