Fork me on GitHub

Braces to Pixels(从括号到像素)

本节主要讲述Braces to Pixels(从括号到像素)

Doesn’t CSS seem like magic? Well, in this third installment of “URL to Interactive” we’ll look at the journey that your browser goes through to take your CSS from braces to pixels. As a bonus, we’ll also quickly touch on how end-user interaction affects this process. We have a lot of ground to cover, so grab a cup of , and let’s get going.

css 看起来不像是魔术吗? 在这第三部分的 “互动 url”, 我们将介绍您的浏览器将CSS从大括号到像素的过程。另外, 我们还将快速了解最终用户的交互如何影响这一过程。我们有很多东西要介绍, 所以拿一杯 < 插入你最喜欢的饮料的名字在这里 >饮料, 让我们开始吧。



Similar to what we learned about HTML in “Tags to DOM,” once CSS is downloaded by the browser, the CSS parser is spun up to handle any CSS that it encounters. This can be CSS within individual documents, inside of <style> tags, or inline within the styleattribute of a DOM element. All the CSS is parsed out and tokenized in accordance with the syntax specification. At the end of this process, we have a data structure with all the selectors, properties, and properties’ respective values.

与我们在 “dom 标签” 中了解到的 html 类似, 一旦 css 被浏览器下载, css 解析器就会被唤起来处理它遇到的任何 css。这可以是单个文档中的 css、<style> 标记的内部的 css, 也可以是 dom 元素的样式属性中的内联。所有 css 都按照语法规范进行分析和标记。在此过程结束时, 我们有一个数据结构, 其中包含所有选择器、属性和属性的相应值。

For example, consider the following CSS:

例如, 请思考以下 css:

.fancy-button {
background: green;
border: 3px solid red;
font-size: 1em;

That will result in the following data structure for easy utilization later in the process:

这将使得 以下数据结构, 在以后的过程中可以轻松使用:

Selector Property Value
.fancy-button background-color rgb(0,255,0)
.fancy-button border-width 3px
.fancy-button border-style solid
.fancy-button border-color rgb(255,0,0)
.fancy-button font-size 1em

One thing that is worth noting is that the browser exploded the shorthands of background and border into their longhand variants, as shorthands are primarily for developer ergonomics; the browser only deals with the longhands from here on.

有一件事值得注意的是, 浏览器将背景和边框的简写 分解成它们的完整的写法, 因为简写主要用于开发人员的开发习惯;浏览器只处理这里的完整的写法。

After this is done, the engine continues constructing the DOM tree, which Travis Leithead also covers in “Tags to DOM”; so go read that now if you haven’t already, I’ll wait.

在这之后, 引擎开始构建 dom 树, 特拉维斯·莱海德也在 “dom标签” 中介绍了该树;所以现在去读, 如果你还没有, 我会等。



Now that we have parsed out all styles within the readily available content, it’s time to do style computation on them. All values have a standardized computed value that we try to reduce them to. When leaving the computation stage, any dimensional values are reduced to one of three possible outputs: auto, a percentage, or a pixel value. For clarity, let’s take a look at a few examples of what the web developer wrote and what the result will be following computation:

现在我们已经解析了随时可用的内容中的所有样式, 是时候对它们进行样式计算了。所有值都有一个标准化的计算值, 我们尝试将其减少,拆分。结束计算阶段时, 任何维度值都将减少到三个可能的输出之一: 自动、百分比或像素值。为详细起见, 让我们看几个 web 开发人员编写的内容以及计算后的结果的几个示例:

Web Developer Computed Value
font-size: 1em font-size: 16px
width: 50% width: 50%
height: auto height: auto
width: 506.4567894321568px width: 506.46px
line-height: calc(10px + 2em) line-height: 42px
border-color: currentColor border-color: rgb(0,0,0)
height: 50vh height: 540px
display: grid display: grid

Now that we’ve computed all the values in our data store, it’s time to handle the cascade.

现在我们已经计算了数据存储中的所有值, 是时候处理级联了。


级 联

Since the CSS can come from a variety of sources, the browser needs a way to determine which styles should apply to a given element. To do this, the browser uses a formula called specificity, which counts the number of tags, classes, ids, and attribute selectors utilized in the selector, as well as the number of !important declarations present. Styles on an element via the inline style attribute are given a rank that wins over any style from within a