CSS基础测试13 - GitHub徽章

[JaimeCheng]

题目：

原issue

回答：

<!-- 我的回答 8分 -->
<form class="social-form">
  <details class="select-menu">
    <summary class="select-menu-button btn"aria-haspopup="menu" role="button"> 
      <span>
        <svg viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">
          <path fill-rule="evenodd"
            d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z">
          </path>
        </svg>
        Unwatch
      </span>
    </summary>
  </details>
  <a class="social-count" href="#">64</a>
</form>
<form class="social-form">
  <button type="submit" class="btn btn-with-count"> 
    <svg viewBox="0 0 14 16" version="1.1" width="14" height="16"
      aria-hidden="true">
      <path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z">
      </path>
    </svg>
    Star
  </button>
  <a class="social-count" href="#">445</a>
</form>
<form class="social-form">
  <button type="submit" class="btn btn-with-count">
    <svg viewBox="0 0 10 16" version="1.1" width="10" height="16" aria-hidden="true">
      <path fill-rule="evenodd"
        d="M8 1a1.993 1.993 0 00-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 002 1a1.993 1.993 0 00-1 3.72V6.5l3 3v1.78A1.993 1.993 0 005 15a1.993 1.993 0 001-3.72V9.5l3-3V4.72A1.993 1.993 0 008 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z">
      </path>
    </svg>
    Fork
  </button>
  <a class="social-count" href="#">25</a>
</form>

* {
  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
}
[role=button]:focus, button { outline: none; box-shadow: none; }
summary::-webkit-details-marker { display:none; }
svg { display: inline-block; vertical-align: text-bottom; fill: currentColor; }
.select-menu { cursor: pointer; }
.btn {
  float: left;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  border-radius: 3px 0 0 3px;
  color: #24292e;
  background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
  border: 1px solid rgba(27,31,35,.2);
}
.select-menu-button:after {
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: -2px;
  content: "";
  border: 4px solid transparent;
  border-top-color: currentcolor;
}
.social-count {
  float: left;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  color: #24292e;
  border: 1px solid rgba(27,31,35,.2);
  border-left: 0;
  border-radius: 0 3px 3px 0;
  text-decoration: none;
  margin-right: 10px;
}

[]() | []()

总结：

1. 还是多次强调的语义化；
2. 按钮组不允许换行；
3. 收获最大的是：使用树结构伪类，不要使用标签或类选择器；
4. table布局，天然一行显示，兼容到IE8。

> 在线demo <

[JaimeCheng]

zxx: 本期要点

1. 90后都快30岁了，所以，按钮，我们没有任何理由使用标签，除非你要兼容IE7，所以标签使用应该是 button + a。
2. 可以考虑多按钮，多链接时候的样式表现，会更健壮，扩展性更强。
3. 每个按钮组是不能换行的，按钮组可以使用flex布局，如果考虑兼容，可以里面内联 + white-space:nowrap;
4. 按钮组的实现方法，大家实现有3种（inline-block，float，inline-flex），如果考虑要点3， float布局是不推荐的，因为当下是无法阻止float内容不换行的。table布局其实是上上之选，天然一行显示，兼容到IE8。
5. 每个按钮控制不要使用标签选择器，而是树结构伪类，例如:first-child，:last-child，例如圆角：:first-child{border-radius: 3px 0 0 3px;}:last-child{border-radius: 0 3px 3px 0;}。此时就非常强，不要使用标签以及类名进行判断。
6. 同样的，中间的线要走合并，每一个元素都要有完整的边框，（如margin负值合并），而不是根据标签类型进行缺省。