《CSS揭秘》读书笔记1

@support

看到@support是不是感觉很熟悉？@support和@media一样，都是css中的条件规则。

@support的作用是检查浏览器是否支持相应的css3样式，示例如下：

@support (text-shadow: 0 0 .3em gray) {
    h1 {
        text-shadow: 0 0 .3em gray;
    }
}

意思是说如果浏览器支持text-shadow这个样式，就为h1元素增加text-shadow。这个有点像js中的能力检测，不关心具体各个浏览器的兼容情况，只对浏览器是否兼容某个特性做出判断，如果支持就应用，比较省心，也没有其他副作用。但是如果真的有这么省心就好了（微笑），让我们来看看兼容性：

(点击查看大图)

啊哦， IE 都不支持呢（再次微笑）。

HSLA

hsla是一种颜色表示方式，类似rgba。

HSLA（H，S，L，A）：

H： Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360 ；

S： Saturation(饱和度)。取值为：0.0% - 100.0% ；

L： Lightness(亮度)。取值为：0.0% - 100.0% ；

A： Alpha透明度。取值0~1之间。

tip： 类似rgba和rgb，hsla也有类似的hsl哦。

来看下兼容性：

(点击查看大图)

用法就和rgba等等的颜色一样，虽然从IE9就开始支持，但实际看了下，好像是不太好操作到生产中去哦，权当涨姿势了。

currentColor

哎呦，这个厉害了！currentColor是原生css的变量欸！而且看看兼容性：

(点击查看大图)

IE9！可以称为良好咯！

currentColor继承上下文的color样式，但是实测color样式本身就是继承的（再次微笑），那用个*毛啊！！否也，我们转念一想，首先这货首先作为一个伪变量，尤其是css中的变量，已经活的很不容易了，我们不能歧视它；其次，有些地方的颜色默认不继承，比如background-color，那我们就可以用到这哥们了！

比如这个常见的hover效果：

div{
    color: #333;
}
div .icon{
    background-color: #333;
}
div:hover{
    color: #666;
}
div:hover .icon{
    background-color: #666;
}

用currentColor写那就厉害了：

div{
    color: #333;
}
div:hover{
    color: #666;
}
div .icon{
    background-color: currentColor;
}

这只是个简单范例，但可以看到的确是减少了代码量，而且很有逼格~~

第一次笔记的感受

感觉自己已经很久没有写东西了，拿起书来也不知道到底要写什么比较好。看了下其他人以前的读书笔记，好像叫“读书摘抄”比较合适，我自己是觉得如果能把自己的心得记下来才比较好，希望以后自己能向这方面努力。

今天是圣诞节，一晚上吃了三顿，和朋友们在一起果然是最开心的！最后回到宿舍开了酒，还有室友带的蛋糕，除了写字比较累（啧啧啧），其他真是圆满！

(点击查看大图)

祝大家节日快乐呀！嘻嘻(●’◡’●)！