[关闭]
@lizlalala 2016-09-08T06:42:48.000000Z 字数 1473 阅读 860

css secrets(1)

css


1,hsla 表示半透明的白色

  1. background-color:hsla(0,0,100%,.2)

分别指:

2, currentColor 存储text color,类似于em 存储font-size.
他默认会作为border-color,text-shadow,outline-color,box-shadow等的initial color,如果没有特别声明的话。

3,应对视觉误差

4,避免响应式布局
尽量少用media。 query。原因有三点:

那么该怎么做才能作为媒体查询的替代方案呢:
- 用百分比替代写死的宽度,或者用viewport-relative units(vw,vh,vmin,vmax)
- background-size:cover使得图片全屏,但是需要注意的是,在手机端,这些应该是要被scale down的,而不是拉伸的。
- 尽量用column-width替代column-count,这样的话对小屏友好,可以使得一行只有一列。

5,尽可能用缩写,short hand. 一方面可以压缩代码,另一方面可以迅速的reset其他你不需要的属性设置。
- 比如设置background:rebeccapuple,background-color:rebeccapurple,两者就不一样,有时候后者还会受其他属性的影响,比如background-image,同时存在。

eg1.

  1. //bad
  2. border-width: 10px 10px 10px 0;
  1. //good
  2. border-width: 10px;
  3. border-left-width: 0;
  1. //bad
  2. background: url(tr.png) no-repeat top right / 2em 2em,
  3. url(br.png) no-repeat bottom right / 2em 2em,
  4. url(bl.png) no-repeat bottom left / 2em 2em;
  5. //good
  6. background: url(tr.png) top right,
  7. url(br.png) bottom right,
  8. url(bl.png) bottom left;
  9. background-size: 2em 2em;
  10. background-repeat: no-repeat;

6,是否该用css预处理器。
优缺点都有,见仁见智。不过需要注意的是,原生的css写法有时候有预处理器没有的优势。比如
cal 100%-50px,这种要在执行时才能知道的属性是没有办法在预编译的时候识别的。但是原生的就可以。

然后插播了一条广告,一个css 预处理器 myth,只用写css,不用考虑兼容性,它自动回帮你做css polyfill的处理。


不是很明白的部分

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注