《CSS揭秘》笔记

2020-04-22 本文已影响0人 Yezzle

最近在看《CSS揭秘》一书，还没看完，想把里面比较好的一些分享出来，然后自己也可以一边看一边记边更新

css标准： DRY1①、可维护、灵活性、轻量级

DRY 是 Don’t Repeat Yourself 的首字母缩写，意思是不应该重复你已经做过的事。它是一种广为流传的编程理念，旨在提升代码某方面的可维护性：在改变某个参数时，做到只改尽量少的地方，最好是一处

浏览器兼容信息查询网站： Can I Use...?（http://caniuse.com） WebPlatform.org（http://webplatform.org） Mozilla Developer Network（http://developer.mozilla.org）
浏览器回退机制(浏览器前缀)： 应该把标准语法排在最后

.bg {
    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特性还是实验特性，浏览器为了提前支持实验特性并获得反馈，就在属性值前面加上自己的前缀。这就导致了上面这种意想不到的问题，所以后面新的css特性，要求开发人员需要手动从设置里面开启选项才能体验，然后提供反馈，而这些将不能用在生产环境中，因为你不可能要求用户去手动开启这个设置选项。
最常见的前缀分别是 Firefox 的 -moz-、IE 的 -ms-、Opera 的 -o- 以及 Safari 和 Chrome 的 -webkit-。

自动加前缀的工具或方法：1. CSS3, Please!（http://css3please.com）和 pleeease（http://pleee- ase.io/playground.html）2. Autopreﬁxer 3. 在css预处理器(LESS、Sass等)中为常用属性加前缀mixin
可以通过检查css属性支持度，在根元素(<html>)添加一些辅助类来提供完善的回退机制：

h1 { color: gray; } 
 
.textshadow h1 {
    color: transparent;     
    text-shadow: 0 0 .3em gray; 
}

尝试灰常新的css属性，可以用@supports规则实现回退：

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

==慎用@supports== 在上面的例子中，我们想要的文本投影效果只会在那些支持 text-shadow 且同时支持 @supports 规则的浏览器中生效。这个范围明显比我们所期望的要窄。

用JavaScript检查css属性支持度并添加辅助类的方法：

核心思想就是在任意元素的element.style上检查该属性是否存在：

var root = document.documentElement;

if ('textShadow' in root.style) { 
    root.classList.add('textshadow'); 
}  else {    
    root.classList.add('no-textshadow'); 
}

或者如下封装以检测多个属性：

function testProperty(property) { 
    var root = document.documentElement; 
 
    if (property in root.style) {
        root.classList.add(property.toLowerCase());
        return true;
    } 
 
    root.classList.add('no-' + property.toLowerCase());
    return false; 
}

检测属性值是否支持，并添加辅助类：

如果我们想要检测某个具体的属性值是否支持，那就需要把它赋给对应的属性，然后再检查浏览器是不是还保存着这个值。很显然，这个过程会改变元素的样式，因此我们需要一个隐藏元素

function testValue(id, value, property) { 
    var dummy = document.createElement('p');
    dummy.style[property] = value; 
 
    if (dummy.style[property]) {
        root.classList.add(id);
        return true;
    } 
 
    root.classList.add('no-' + id);
    return false;
}

css编码技巧： 1. 尽量将带数字属性的值与字体相关，比如行高应该写1.5而不是30px：

{
    font-size: 20px;
    line-height: 1.5;
}

但是border-width属性慎重考虑

利用展开属性合并和合并属性复写，这样可以提高该代码的可维护性：

{
    border: 10px 10px 10px 0;
}
/*拆分为下面的写法虽然增加了代码量，但是提高了可读性和维护性：*/
{
    border: 10px;
    border-left-width:0;
}

利用颜色关键字currentColor, 他将会被解析为一个颜色值，虽然功能很有限，但它真的是个变量

hr {
   height: .5em;
   background: currentColor;
}

currentColor 本身就是很多 CSS 颜色属性的初始值，比如 border-color 和 outline-color，以及 text-shadow 和 box-shadow 的颜色值，等等。

利用inherit关键字继承属性从而不需要重复指定:

input, select, button { font: inherit; }

把试觉错觉放到你的设计中：左边是完美居中的，而右边稍微上移一点儿，但在人类眼睛看来恰好居中

关于响应式的建议：避免媒体查询

使用百分比长度取代固定长度. 如果实在做不到，可以尝试使用与视口相关的单位（vw、vh、vmin 和 vmax），它们的值解析为视口宽度或高度的百分比

当你需要在较大分辨率下得到固定宽度时，使用 max-width 而不是width，因为它可以适应较小的分辨率，而无需使用媒体查询

css预处理器缺点：1. CSS 的文件体积和复杂度可能会失控。 2. 调试难度会增加。 3. 预处理器编译解析阶段耗时，虽然通常很快。 4. 增加团队学习成本。 5. 抽象遗漏法则：：“所有重大的抽象机制在某种程度上都存在泄漏的情况。预处理器有它们自己的bug
css自定义变量：申明的时候使用‘--’开头，使用的时候使用var()：

ul { --accent-color: purple; }
ol { --accent-color: rebeccapurple; }
li { background: var(--accent-color); }

因为自定义变量有自己的作用域，上面的写法可以做的不同的列表li颜色自动变化。这是预处理器做不到的

实现半透明边框：

{
  border: 10px solid hsla(0,0%,100%,.5); 
  background: white; 
  background-clip: padding-box; /*调整背景区域为padding-box, 默认是border-box(边框的外边缘)*/
}

box-shadow实现多重投影：

{
  background: yellowgreen; 
  box-shadow: 0 0 0 10px #655,  0 0 0 15px deeppink,  0 2px 5px 15px rgba(0,0,0,.6);

《CSS揭秘》笔记

猜你喜欢

热点阅读