CSS Master, Sitepoint 2015读书笔记（印象比较深的几点：CSS优先级3元组表示法，多列及flex，Transforms）

CSS Master

[attr~=val] 空格分隔的属性
|= hyphenated,前缀
子串：^= *= $=
伪元素：::before ::after ::selection ...

::first-letter问题 Chrome[42,44)下，父元素inline/table时无效？
::spelling-error 这是不是规范滥用？

*用:target高亮fragment（id属性指向的元素子树）
:not( ... )
:first-child, :last-child, :only-child, :nth-child

注意这里:nth-child(3n)与:nth-child(3n+5)的区别

:empty
* :first-of-type
:enabled/disabled, :required/optional, :checked
* :in-range/out-of-range 脑残么？
不用chain class，难以override？（这里的3元组表示CSS规则的优先级比较正规，0,2,0）
BEM（块元素修改）？<--> Atomic CSS？
调试：Ctrl + Shift + I（进入Inspector？）
font: 16px/1.5 'Helvetica Neue',arial; 这里1.5代表行高
Node.js > CSSO插件
代码质量：CSS Lint, analyze-css, UnCSS
自动化：Grunt, Gulp（后起之秀）
选择一个盒子模型：box-sizing: content-box / border-box;
管理layers：position / z-index
创建新stacking context：opacity（当<1）
多列布局

column-width, column-gap（normal=1em）, column-rule（用于指定列的border）
columns: 10em 3; //先后顺序不重要（这对parser是个考验）
column-span: all/none;

flexbox

display: flex; （直接子元素变为flex项）
flex-wrap: wrap; （超出容器则移到下一行）
.grid > * { flex: 0 0 25%; }
justify-content: space-between / space-around / center（用于footer中的多列？）;
flex = flex-grow + flex-shrink + flex-basis（如何填充可用空间）
order: 0 / 1
垂直对齐项：align-items : center;

align-content？

属性动画

transition: 1s; （这里0.5s怎么解析为500ms？）

transition-duration + transition-property(all) + transition-timing-function(ease) + transition-delay

timing函数：steps(5), cubic-bezier(0, 1.08, .98, -0.58)
*transitionend事件？每个属性都会触发一次，event.propertyName
animation: <keyframe-rule-name> 500ms;

animation-direction: normal | reverse | alternate | ...
animation-fill-mode: 结束时停留到那个状态

Chrome <43：Vendor Prefixing
CSS Transforms

变换如何影响布局：1 变成containing block（CB）, 2 建立新的stacking context（SC），3 局部坐标系in元素的包围盒
处理overlapping问题：pointer-events: none;
变换不影响layout属性，但改变元素的：getClientRects() .getBoundingClientRect()
变换原点：默认为 50% 50% = center;
scale(-2)
rotateX(45deg) + perspective:200px（Foreshortening）;

VS perspective属性（作用于containing元素）

*perspective-origin
*transform-style: flat | preserve-3d;
backface-visibility

条件的CSS

@media only screen and (min-resolution: 1.5dppx) { ... }
@import：阻塞请求
不要用device-width？High DPI上问题
matchMedia("(min-width: 45em)")
@supports(display:flex) 老实说CSS特性查询太丑陋了

SVG：不adhered to盒子模型，不能被定位（要改变位置就必须在SVG DOM树中移动节点）

怎么这书里老是提及UC？

预处理：Less SASS
Scroll snap？Blend modes & Filters（略）