序言
关于“浏览器运行机制”的文章太多了，笔者这次从CSS方向的角度来谈谈浏览器，CSS很简单，它的后知也是非常重要的一环。我希望这篇文章能帮助你重新理解这些关于浏览器的事情。
浏览器
浏览器人是后端开发人员每天处理的工具，正是它拥有后端专业。“浏览器”是指在万维网上显示媒体信息（文本、图像、音频、视频等）并处理用户交互的软件。
浏览器是互联网时代的产物，
随着各种设备操作系统的普及，网络技术的全球化和人们对信息需求的爆发式下降，为浏览器的诞生和普及提供了强大的推动力，也标志着互联网时代的到来。
组成
虽然目前市场上有许多浏览器品牌，但浏览器的结构由以下几部分组成。
历史
浏览器作为跨时代的科技产品，为现代网络人机交互的发展提供了强有力的支撑，历史时刻不容忘记。
至此，世界五大浏览器的格局逐渐显现，也为后期浏览器市场的多变性提供了广泛的技术支持。浏览器发展的历史并不遥远，即使只有短短的20多年，但它在不断更新迭代，为广大互联网用户提供了越来越强大的人机交互功能。
世界五大浏览器：Chrome、Safari、Firefox、Opera、IExplorer/Edge
渲染引擎
“渲染引擎”，
又称“浏览器内核”，是指负责解析网页的句型并将其呈现为可视页面的解析器。它是浏览器的核心和最重要的部分，不同核心对网页句型的分析也不同，因此同一网页句型在不同核心的浏览器中的呈现效果也可能不同，这通常被称为“浏览器差异”。
上面提到的世界五大浏览器在自己的开发过程中都使用一个或多个浏览器内核作为渲染引擎。
IExplorer和Edge同是微软公司开发的浏览器产品，鉴于IExplorer存在很多为人诟病的问题，在后续的系统升级中逐渐使用Edge取代IExplorer在Windows上的位置
因此，在浏览器发展20多年的历史中，只有五个浏览器内核被大规模使用。
下面插入两个短篇故事，其实不是那些大风波，但它们也是浏览器开发史上比较有趣的故事，了解一下也无妨。
壁虎仁起源
虽然壁虎内核的诞生还是和IExplorer有些关系的，
众所周知，IExplorer不使用W3C标准，这引起了Google内部的一些开发人员的不满，他们与Netscape的一些开发人员共同创立了Mozilla，以当时基于Mosaic内核重新开发Gecko内核。
浏览器大战
谷歌的IExplorer之前与其他浏览器发生了两次“世界大战”，因为它的垄断运营导致它在2014年后开始衰落。
第一次是在1995~1998年，当时谷歌发布了IExplorer，但网景的Navigator市场份额达到了86%，促使谷歌将IExplorer植入到世界上最常用的Windows操作系统中，相当于买了一台笔记本电脑，送了一个浏览器，这些操作让IExplorer在很短的时间内超过了Navigator的市场份额。这导致了与Netscape的Navigator的后续斗争，最终Netscape将Navigator借给了AOL，以结束浏览器战争。
第二次是在2003年之后浏览器 支持 css3，当时IExplorer通过自身优势取得了良好的市场成绩，其巨大的使用量使其开始蚕食其他浏览器的市场份额。而很多崭露头角的浏览器，如Safari、Firefox、Opera，以及国内很多浏览器，都在通过各种技术手段积极对抗IExplorer的压制，推出更多的用户功能。
推荐StatCounter，一个计算互联网市场份额的网站，然后产品总监让你兼容IExplorer，你可以把所有的浏览器市场份额统计数据都带进来，然后悄悄地、自信地告诉他们，“现在几乎没有人使用IExplorer了。
渲染过程
要了解浏览器页面的呈现过程，您必须首先知道关键的呈现路径。“关键渲染路径”是指浏览器从最初收到请求获取 HTML、CSS、JS 等资源，到解析、构建、渲染、布局、绘制、合成，最后渲染界面呈现在用户眼前的整个过程。
作者定义并理解了关键的渲染路径，页面的渲染过程分为以下几个部分。
绘制视口复合视口
：复合视口显示在屏幕上
解析文件
.HTML
文档描述页面的结构，浏览器通过 HTML 解析器将 HTML 解析为 DOM 树结构。HTML 文档中的所有内容都是一个节点，每个节点都有分层关系，相互连接形成 DOM 树。创建 DOM 树的过程：读取 HTML 文档的“字节”，将字节转换为“字符”，根据字符确定“令牌”，将标签转换为“节点”，并根据节点构建“DOM 树”。CSS
文档描述了页面的行为，浏览器通过 CSS 解析器将 CSS 解析为 CSSOM 树结构，更类似于 DOM 树结构。CSS文档中的所有内容都是节点，与HTML文档中的节点一一对应，每个节点都有层次关系，相互连接形成CSSOM树。CSSOM树的创建过程：读取CSS文档的“字节”，将字节转换为“chars”，根据字符确定“标记”浏览器 支持 css3，将标签转换为“节点”，基于节点构建“CSSOM树”。与 DOM 树创建过程完全相同。
在构建 DOM 树的过程中，当 HTML 解析器进入
序言
晚上出门没带笔记本，明天的后台晨读课来晚了。希望浏览器在支持CSS和JS方面越来越好。明日后台早读课文章分享@CUGGZ，公众号：后端收费宝授权。
文字从这里开始~~
最近，当我查看 caniuse.com 时，我意识到Chrome和Edge浏览器将在版本109中实验性地支持CSS原生嵌套句子模式！
1月10日，Chrome 109发布;1 月 26 日，Safari 技术预览版 162 发布。两个浏览器版本都带来了对CSS嵌套的实验性支持。Chrome 官方强调在其他样式规则中增加了嵌套 CSS 样式规则的能力，将外部选择器与内部规则相结合，以提高样式表的模块化和可维护性。
让我们来看看CSS嵌套的句子模式是如何使用的！
基本概念
所谓嵌套就是把一个CSS规则放在另一个（嵌套规则）中，子规则的选择器会相对于父规则的选择器。这有助于代码的模块化和可维护性。以前仅在 CSS 预处理器中可用的嵌套功能首先在本机 CSS 中可用。
虽然，CSS 嵌套
类似于 Sass 的嵌套，例如，对于以下 CSS 变体：
table.colortable td {
text-align:center;
}
table.colortable td.c {
text-transform:uppercase;
}
table.colortable td:first-child, table.colortable td:first-child+td {
border:1px solid black;
}
table.colortable th {
text-align:center;
background:black;
color:white;
}如果使用 CSS 嵌套，则会出现这种情况：
table.colortable {
& td {
text-align:center;
&.c { text-transform:uppercase }
&:first-child, &:first-child + td { border:1px solid black }
}
& th {
text-align:center;
background:black;
color:white;
}
}
可以看出，除了消除重复之外，相关规则的分组还增强了生成的 CSS 的可读性和可维护性。
嵌套规则
嵌套规则可以使用嵌套选择器 （&） 直接引用父规则的匹配元素，也可以使用相对选择器句子指定“后代”以外的关系。
.foo {
color: red;
&:hover {
color: blue;
}
}
/* 相当于: */
.foo { color: red; }
.foo:hover { color: blue; } .foo {
color: red;
+ .bar {
color: blue;
}
}
/* 相当于: */
.foo { color: red; }
.foo + .bar { color: blue; }但是，以标识符（类型选择器）开头的嵌套选择器无效：
div {
color: red;
input {
margin: 1em;
}
}
/* 无效，因为 input 是一个标识符 */如果要继续此编译，则需要稍作更改：
div {
color: red;
& input { margin: 1em; }
/* 有效，不再以标识符开头 */
:is(input) { margin: 1em; }
/* 有效，以冒号开头，并且等同于之前的规则 */
}有关更多嵌套规则浏览器 支持 css3，请参阅草稿 CSS 嵌套规范
嵌套选择器
使用嵌套规则时，必须能够引用与父规则匹配的元素。因此，在规范中定义了一个新的选择器，嵌套选择器，写为 &。
在嵌套变体规则的选择器中使用时，嵌套选择器表示与父规则匹配的元素。在任何其他上下文中使用时，它表示与该上下文中的 ：scope 相同的元素。
嵌套选择器可以通过 ：is（） 选择器替换为父变体规则的选择器。如：
a, b {
& c { color: blue; }
}这相当于：
:is(a, b) c { color: blue; }嵌套选择器不能表示伪元素（与 ：is（） 的行为相同）：
.foo, .foo::before, .foo::after {
color: red;
&:hover { color: blue; }
}这里，& 仅表示 .foo 匹配的元素，相当于：
.foo, .foo::before, .foo::after {
color: red;
}
.foo:hover {
color: blue;
}嵌套选择器的特异性（
权重）等于父变体规则的选择器列表中复杂选择器的最大特异性（与 ：is（） 的行为相同）：
#a, b {
& c { color: blue; }
}
.foo c { color: red; }DOM 结构如下：
Blue text
文本将是黑色的，而不是蓝色的。&的特异性是 #a（[1，0，0]）和b（[0，0，1]）的较大者浏览器 支持 css3，因此[1，0，0]，而整个&c选择器具有特异性[1，0，1]，小于.fooc（[0，1，1]的特异性）。
值得注意的是，这与嵌套到非嵌套规则中的自动扩充的结果不同，因为 color：blue 表示它将由 bc 选择器 （[0，0，2]） 而不是 #ac（[1，0，1]） 匹配。
总结
目前，CSS 原生
嵌套句子正在开发者试用中，CSS 工作组正在制定相关规范，Chrome 预计将在版本 112 中发布 CSS 原生嵌套。
由于 CSS 嵌套句子规范仍然不完整，因此可以随时修改。因此，本文中介绍的规则可能会发生变化。期待即将发布的 CSS 原生嵌套句子模式在浏览器中！
关于本文
