放假的电话

《CSS揭秘》读书笔记

一些些关于《CSS揭秘》的记录。

浏览器CSS兼容性

最基础的,在必要的时候使用前缀跟fallback

1
2
background: rgb(255, 128, 0);
background: -moz-linear-gradient(0deg, yellow, red); background: -o-linear-gradient(0deg, yellow, red); background: -webkit-linear-gradient(0deg, yellow, red); background: linear-gradient(90deg, yellow, red);

可以通过一些网站,检查CSS的兼容性。或者,通过代码检查

1
2
3
4
5
6
7
var dummy = document.createElement('p');
dummy.style.backgroundImage = 'linear-gradient(red,tan)';
if (dummy.style.backgroundImage) {
root.classList.add('lineargradients');
} else {
root.classList.add('no-lineargradients');
}

在检查完后,可以用js动态在根元素上添加一些特殊的标记类,来使用不同的CSS,例如

1
2
3
4
5
6
h1 { color: gray;}
.text-shadow h1{
color: transparent;
text-shadow: 0 0 .3em gray;
}

这样,带text-shadow类的根元素里的h1,就可以用新的属性。

除此以外,还可以用@support,不过,也不是所有浏览器都支持@support

1
2
3
4
5
6
@supports (text-shadow: 0 0 .3em gray) {
h1 {
color: transparent;
text-shadow: 0 0 .3em gray;
}
}

注意,浏览器可以解析某个 CSS 特性并不代表它已经实现(或正确实现)了这个特性。

相信你的眼睛

我们的眼睛在看到一个完美垂直居中的物体时,会感觉它并不居中。 实际上,我们应该把这个物体从几何学的中心点再稍微向上挪一点,才能取 得理想的视觉效果。

字母的形状在两端都比较整齐,而顶部和底部则往 往参差不齐,从而导致你的眼睛把这些参差不齐的空缺部分感知为多出来的内边距。

padding

半透明边框

如果设置了半透明的边框,会看到背后的background!原因是默认的background的大小,一直延伸到边框的外边界。可以通过下面的代码修改background-clip

1
2
3
// background-clip: border-box;
background-clip: padding-box;

多重边框

box-shadow

要实现多重边框,可以用box-shadow。因为box-shadow支持用逗号分隔,可以画无限多个。不过要注意,box-shadow跟border不一样,并不会影响布局,所以要调整margin来达到需要的效果。另外,它也不会响应事件。

如果需要响应事件,可以通过inset,把box-shadow画在内圈。不过,要调整padding来留出足够的空间。

outline

如果只要2层的边框,可以通过outline来描边,好处是outline更灵活,不仅仅只能画实线。如果需要,还可以用outline-offset来调整距离。

灵活的背景定位

使用background-position的扩展语法

注意,为了能fallback,还是要把bottom,right写进background。不然的话,图片会出现在左上角。

1
2
background: url(code-pirate.svg) no-repeat bottom right #58a;
background-position: right 20px bottom 10px;

使用background-origin

默认的background-position,到底left,top是相对于什么来说的呢?是padding-box!。如果我们想让图片跟边界的距离一直是padding的值,可以通过修改background-origin,例如:

1
2
3
4
padding: 10px;
background: url("code-pirate.svg") no-repeat #58a
bottom right; /* 或 100% 100% */
background-origin: content-box;

这么做,以content-box为基准,边距默认就是padding的大小。

calc()

啥也别说了,算吧:

1
background-position: calc(100% - 20px) calc(100% - 10px);

背景条纹

水平条纹

1
2
background: linear-gradient(#fb3 30%, #58a 0);
background-size: 100% 30px;

解释如下:

  1. 如果gradient的位置值,比前一个小,就默认用前一个位置值。
  2. background默认会铺满,所以设置一个高度,会不断重复,直到铺满, 除非设置了background-repeat: no-repeat

    垂直条纹

    默认的gradient的方向是to bottm,我们可以通过设定方向来画垂直条纹:
    1
    2
    3
    background: linear-gradient( to right, /* 或 90deg */
    #fb3 30%, #58a 0);
    background-size: 100% 30px;

斜向条纹

斜方向条纹需要的是不是2条,而是4条来作贴片。注意,size是因为旋转导致的。如果希望他们的宽度还是30px,就需要放大一些。

1
2
3
4
background: linear-gradient(45deg,
#fb3 25%, #58a 0, #58a 50%,
#fb3 0, #fb3 75%, #58a 0);
background-size: 42.426406871px 42.426406871px;

更好的斜向条纹

上代码

1
2
background: repeating-linear-gradient(45deg,
#fb3, #fb3 15px, #58a 0, #58a 30px);

好处很明显,第一,宽度直接定义30px,不需要计算。第二,角度随意。不过要注意,这个方法,需要4个颜色

灵活的同色系条纹

如果条纹是同色写的,不需要给每个颜色设定不同的颜色值。我么可以通过设定最深的颜色为背景色,再加上透明白色条纹来实现这个效果。

伪随机背景

注意下面的代码

1
2
3
4
5
6
background: hsl(20, 40%, 90%);
background-image:
linear-gradient(90deg, #fb3 11px, transparent 0),
linear-gradient(90deg, #ab4 23px, transparent 0),
linear-gradient(90deg, #655 41px, transparent 0);
background-size: 41px 100%, 61px 100%, 83px 100%;

由于长度互为质数,重复周期为41x61x83,所以很难让人发现规律!这个被Alex Walker定名为“蝉原则”。

自适应的椭圆

border-radius接受分别设置水平和垂直半径,只要用斜线分开。也就是说,可以写成这样:

1
border-radius: 10px / 20px;

同时,它还接受百分比,即宽度用于水平半径的解析,而高度 用于垂直半径的解析。所以对于一个矩形,我们可以设置它的border-radius为:

1
2
3
4
5
border-radius: 50% / 50%;
简写为
border-radius: 50%;