snowdream

前言

作为一个FE，每天都会和浏览器打交道，写的代码最终也会在各种各样的浏览器中进行呈现；那么浏览器到底是什么？它是如何理解我们的代码并渲染得到我们所看到的画面的？

“私、気になります”

浏览器，简单地来说就是一个应用程序，只不过这个应用程序比较特殊，是专门用于从万维网中获取资源的；而网页就是其中一种最常见的资源。

A web browser is a software application for retrieving, presenting and traversing information resources on the World Wide Web. ^[1]

注：以下探讨的是现代浏览器（Modern Browser），不包括IE这种；

前言

shape-outside这个属性实在是太冷门了，要不是去研究<basic-shape>数据类型，还真不会发现这个属性；但是其兼容性也还算可以，PC端完全没问题，移动端iOS是支持比较好的，而安卓端则不太支持：

shape-outside是CSS Shapes Module Level 1规范中提出的一个属性，用于设置浮动元素周围内联元素对其包裹的形状，也就是说借助shape-outside属性可以使得浮动元素周围的文字不再是围绕盒模型进行环绕，而是可以指定任意形状进行环绕，达到更丰富的文字环绕效果；比如：

前言

<basic-shape>是一种特殊的CSS数据类型，用于表示使用基本形状函数，从而应用相应的形状或路径；目前支持<basic-shape>类型的属性有：

• shape-outside：该属性用于指定周围内联元素环绕时所包围的形状；
• clip-path：该属性用于指定所属盒模型的裁剪形状；
• offset-path：该属性用于指定元素移动的路径，属于offset属性中的一个；

前言

现在H5中应用了大量的CSS动效，而这些动效很多都与transform属性相关（没办法，transform就是天生适合产生动效的），借助和分析比较典型的H5案例可以更好地应用transform属性；

前言

transform属性是CSS基于图形学中矩阵变换和投影变换实现的产物，因此理论上基于矩阵变换和投影变换的视角效果都可以使用transform实现；诸如canvas/webGL中常见的立体/3D效果，物理运动效果等等，都可以等价转化为transform中的变换函数，只不过CSS的控制粒度目前只能局限于关键帧，无法对动效进行每一帧的控制（那种通过js来修改css的方式也算不上是控制每一帧，倒是目前还在实现中的CSS Houdini规范可以做到）；

下面只是一些简单的初步探索，后续可能会发现更多有趣的应用。