【翻译】-16个有用的CSS技巧

[bytemofan]

CSS 专业技巧

原文

一个帮助你提高css技巧的tips集合

对于其他非常好的清单请查看@sindresorhus创建的清单awesome lists

使用CSS reset

CSS reset能够帮助你统一不同浏览器的初始化样式，使得你的浏览器环境就像白板一样干净！你可以使用CSS reset库 Normalize，也可以使用一个更简化的复位方法：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

这样所有元素的margin和padding都被剥离重置，并且使用box-sizing使得你可以使用CSS盒模型来管理你的布局。

Demo

Note: 如果你参考下边的技巧继承 box-sizing，你可能不会在复位CSS中使用box-sizing

继承box-sizing

让box-sizing属性继承自html:

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

这使得你可以在插件或者组件中更容易的改变元素的box-sizing的行为。

使用:not()来决定表单是否使用边框

与其加上边框:

/* add border */
.nav li {
  border-right: 1px solid #666;
}

然后去掉最后一个元素的边框：

/* remove border */
.nav li:last-child {
  border-right: none;
}

不如使用伪类选择器:not()来达成想要的效果：

.nav li:not(:last-child) {
  border-right: 1px solid #666;
}

当然，你也可以使用.nav li + li或者.nav li:first-child ~ li来达成，但:not()选择器的方式更清晰明了，一目了然！

Demo

为body添加行高line-height

你不需要去为每一个元素如<p>、<h*>一一添加行高，你只需要在body上添加就够了！

body {
  line-height: 1.5;
}

这样文本元素可以很容易地从body中继承。

Demo

垂直居中任何元素

这不是黑魔法，实际上你真的可以居中任何元素：

html, body {
  height: 100%;
  margin: 0;
}

body {
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-flex;
  display: flex;
}

这还不够？水平居中，垂直居中...任何元素，任何时间，任何地方？CSS-Tricks有一篇好文章讲到了各种居中的技巧。

Node：注意flexbox在IE11下有一些bug。

Demo

逗号分隔的列表

确保列表的每一项都是用逗号来分隔：

ul > li:not(:last-child)::after {
  content: ",";
}

使用:not()伪类去掉最后一项的逗号。

Note：这个技巧对于无障碍屏幕阅读器，对于从浏览器复制/粘贴css生成的不兼容代码，得小心行事！

使用负的nth-child来选择元素

使用负的选择器nth-child来选择1~n个元素。

li {
  display: none;
}

/* select items 1 through 3 and display them */
li:nth-child(-n+3) {
  display: block;
}

或许你已经学会了如何去使用:not()，试试这个：

/* select items 1 through 3 and display them */
li:not(:nth-child(-n+3)) {
  display: none;
}

看吧，这非常容易！

Demo

使用SVG图标

没有理由不使用SVG图标：

.logo {
  background: url("logo.svg");
}

SVG在所有分辨率类型的设备下缩放良好，并且IE9+以及其它浏览器也都缩放良好。所以，放弃使用.png、.jpg、.gif等等其它图片格式的图标吧！

Note：对于只有图标的按钮，如果SVG文件没有加载成功，这个样式将能帮助保持可访问性：

.no-svg .icon-only:after {
  content: attr(aria-label);
}

使用“形似猫头鹰”的选择器

它可能有一个奇怪的名字，但使用通用选择器（*）与兄弟选择器（+）组合使用时可以提供一个强大的CSS能力：

* + * {
  margin-top: 1.5em;
}

在此示例中，遵循其他元素的文档流中的所有元素将都接收上边距 margin-top: 1.5em 的样式。

关于更多的“形似猫头鹰”选择器的东西，可以阅读Heydon Pickering's的文章

Demo

使用max-height来创建纯CSS的滑块

使用max-height和overflow-hidden来实现纯CSS滑块：

.slider {
  max-height: 200px;
  overflow-y: hidden;
  width: 300px;
}

.slider:hover {
  max-height: 600px;
  overflow-y: scroll;
}

移入滑块元素时增大它的 max-height 的值，便可以显示溢出部分。

等宽单元格

Tables布局可能是一个痛苦的工作，所以试着去使用table-layout:fixed去使每一个单元格等宽。

.calendar{
      table-layout:fixed;
}

无痛的表格布局。 Demo

使用flexbox来清除多余的外边距

与其使用 nth-， first-， 和 last-child 去除列之间多余的间隙，不如使用 flexbox 的 space-between 属性：

.list {
  display: flex;
  justify-content: space-between;
}

.list .person {
  flex-basis: 23%;
}

这样列之间的间隙相等，且首尾没有间隙。

使用属性选择器选择空链接

当一个<a>元素没有文本节点，但有href值时，显示它的href值：

a[href^="http"]:empty::before {
  content: attr(href);
}

这是很方便的！ Demo

“预设”链接样式

给“预设”链接一个样式：

a[href]:not([class]) {
  color: #008000;
  text-decoration: underline;
}

通过 CMS 系统插入的链接，通常没有 class 属性，以上样式可以甄别它们，而且不会影响其它样式。

一致的垂直节奏

为内部子元素使用通配符去创建一个一致的垂直节奏。

.intro > * {
  margin-bottom: 1.25rem;
}

一致的垂直节奏可以提供视觉美感，使内容更可读。

内在比例盒子

要创建一个具有内部比例的盒子，你需要去填充一个div的顶部和底部padding。

.container {
  height: 0;
  padding-bottom: 20%;
  position: relative;
}
.container div {
  border: 2px dashed #ddd;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

使用20％的填充使得框等于其宽度的20％的高度。不管视口的宽度，子元素的div将保持其宽高比（100％/ 20％= 5:1）。 Demo

定义加载失败图像的样式

只要一点点CSS就可以美化破碎图片：

img {
  display: block;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 300;
  height: auto;
  line-height: 2;
  position: relative;
  text-align: center;
  width: 100%;
}

然后添加伪元素的样式，显示使用者信息和加载失败图像的URL：

img:before {
  content: "We're sorry, the image below is broken :(";
  display: block;
  margin-bottom: 10px;
}

img:after {
  content: "(url: " attr(src) ")";
  display: block;
  font-size: 12px;
}

了解更多关于这类样式的技巧 Ire Aderinokun的 原帖。

使用rem作为全局的尺寸；使用em作为局部的尺寸

在根元素设置了基本的字体尺寸（html{font-size:100%}）之后，设置文本元素的字体尺寸用em:

h2 {
  font-size: 2em;
}
p {
  font-size: 1em;
}

然后用rem设置模块的字体大小。

article {
  font-size: 1.25rem;
}

aside .module {
  font-size: .9rem;
}

现在，每个模块划分清晰，是的编写样式更容易、灵活，便于维护。

隐藏没有静音、自动播放的影片

这是一个提高用户体验的很好的技巧。避免在加载页面时自动播放视频，且不是静音状态时，则不显示视频：

video[autoplay]:not([muted]) {
  display: none;
}

再一次，我们利用了:not()伪类。

使用:root伪类来实现弹性字体

响应式布局的字体大小应该随着视口的尺寸变化。你可以使用:root根据视口的宽高计算字体的大小：

:root {
  font-size: calc(1vw + 1vh + .5vmin);
}

然后，你可以利用rem来设置字体大小，这里rem的值就是有:root计算得来的。

body {
  font: 1rem/1.6 sans-serif;
}

Demo

为表单元素设置font-size以获得更好的移动端体验

为了避免表单元素（<select>下拉框点击出现下拉框）在移动端浏览器（iOS Safari等等）下缩放，我们需要给表单元素添加一个font-size样式：

input[type="text"],
input[type="number"],
select,
textarea {
  font-size: 16px;
}

浏览器支持情况

这些技巧适用于最新版的 Chrome, Firefox, Safari, Opera, Edge, 以及 IE11。