css黑科技

当我们面对一些需求的时候可能会问自己能不能只使用 css 完成它，而不用 javascript。最新的 css 属性跟功能能够简单快速的解决很多老问题。

本文总结了 50 多个很有趣的的 css 属性和值，我会简单的介绍他们的用法并提供示例。其中有一些属性目前是试验属性，相信随着浏览器和css标准的发展以后会很快被普遍支持。我还会介绍一些常用属性的鲜为人知的值，可能可以帮助你加深对这些属性的印象。同时文中还会提及一些浏览器特性。

目录

all

all属性可以重置把元素的其他所有属性重置为默认属性。它包括以下3个值：

• initial: 修改所有元素属性或父元素的值为其初始化值
• inherit: 修改所有元素属性或父元素的值为其父元素的值
• unset: 修改所有元素属性或父元素的值为其父元素的值(如果有继承)或其初始值

shape-outside 的更多内容建议参阅这篇文章：css shape-outside 总结

@supports

这个 CSS 语句该语句可以用来做特性查询，检测当前浏览器是否支持某些属性。

你也可以同时检测多种属性：

var()

该功能让我们可以像 Less、Sass 一样定义变量。我们通过--* 的方式来创建一个CSS变量，并通过var(--foo) 的方式来引用一个变量（大小写敏感哦）。例如：

var() 还可以接受第二个参数，表示备选参数，第一个参数获取失败的时候，它就生效了。

目前 IE11、Edge14 和 Opera mini 都还不支持该属性，Edge15 将会提供支持。

table-layout

该属性属性定义了表格布局算法，用于对表格中单元格、行和列进行布局。如果你需要让表格内的所有格的宽度都一样，那这个属性对你很有用。

该属性更详细的内容请参阅Fixed Table Layouts

text-transform

该属性可以让文本变成小写（lowercase）或大写（uppercase），你也可以通过capitalize来单独对每一个单词进行操作。

transition-timing-function

该属性定义缓动元素的过渡曲线，例如ease-in或ease-out，不过它有两个值可能很少人了解：

• steps(n, start|end): 关键字ease这种能实现平滑过渡动画，而stepes可以实现分步过渡，第一个参数必须是正整数，定义动画在第几步（帧）完成；第二个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end。该值可以简写为step-start(n)和step-end(n)
• cubic-bezier(n, n, n, n): 定义你自己的贝塞尔过渡曲线。

vh, vw, vmin, vmax

这些单位被用来计算视口大小（viewport size）。

• vh: 1vh 是 1/100 的视口高度。
• vw: 1vw 是 1/100 的视口宽度
• vmin: vh 和 vw 的最小值。
• vmax: vh 和 vw 的最大值。

例如浏览器的视口大小为 1280*655px，1vh 就等于 6.55px，1vw 等于 12.8px，vmin 是 6.55px(两者间的最小值)，vmax 是 12.8px（两者间的最大值）。

white-space

该属性是用来设置如何处理元素中的空白。

• normal: 连续的空白符会被合并，换行符会被当作空白符来处理。填充line盒子时，必要的话会换行。
• nowrap: 和 normal 一样，连续的空白符会被合并。但文本内的换行无效。
• pre: 连续的空白符会被保留。在遇到换行符或者
  元素时才会换行。
• pre-wrap: 连续的空白符会被保留。在遇到换行符或者
  元素，或者需要为了填充line盒子时才会换行。
• pre-line: 连续的空白符会被合并。在遇到换行符或者
  元素，或者需要为了填充line盒子时会换行。

word-break

该属性指定怎样在单词内断行

• normal: 使用默认的断行规则。
• break-all: 对于non-CJK (中文/日文/韩文) 文本，可在任意字符间断行。
• keep-all: CJK 文本不断行。 Non-CJK 文本表现同 normal。

word-spacing

跟letter-spacing差不多，不过这个是处理词间距，你可以用这个值增加（或减少）两个单词之间的距离。它的默认值是normal，一般为 0.25em。

will-change

这个属性是告诉浏览器该元素要变化了，这样浏览器可以在元素属性真正发生变化之前提前做好对应的优化准备工作。 这种优化可以将一部分复杂的计算工作提前准备好，使页面的反应更为快速灵敏。

• normal: 浏览器执行默认优化。
• scroll-position: 表示开发者希望在不久后改变滚动条的位置或者使之产生动画。
• content: 表示开发者希望在不久后改变元素内容中的某些东西，或者使它们产生动画。

也可以指定明确的属性表示要变化的内容：

在这个属性出现之前，我们通常使用下面的小技巧提高元素的动画性能（这样可以让元素动画通过 GPU 计算） ：

深入了解该属性请参考 MDN will-change 词条

writing-mode

该属性控制文本是横向显示还是竖向显示。

• horizontal-tb: 内容横向、从上至下显示。
• vertical-rl: 内容竖向、从右至左显示。
• vertical-lr: 内容竖向、从左至右显示。

:-webkit-autofill

该选择器会选择被浏览器自动填充的 input 元素（比如自动填充了账号密码等）。它给了你一个机会让你能改变这些被自动填充的 input 的样式。在 Chrome 里这些 input 默认是黄色背景。

-webkit-overflow-scrolling

该属性让我们能在 IOS 设备上实现元素内部的弹性滚动。它有两个值：

• auto: 使用普通滚动，在 IOS 里会有中齿轮感。
• normal: 使用弹性滚动。

-webkit-touch-callout

该属性能隐藏 IOS 设备上默认出现的呼出。例如当你按住某个目标时出现的浮动控制菜单。

• none: 不显示呼出。
• default: 显示呼出。

-webkit-scrollbar

隐藏元素的滚动条。

在 IE10 和 Edga 中使用以下方法：

Animatable

这里有个 CSS 中所有可以被动画的属性的列表。我们常常给透明度（opacity）、背景颜色（background-color）等等属性添加动画。其实也可以其他一些属性添加动画，例如 letter-spacing。