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 journ...

本節主要講述Braces to Pixels(從括號到畫素)

Doesn’t CSS seem like magic? Well, in this third installment of “ofollow,noindex">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從大括號到畫素的過程。另外, 我們還將快速瞭解終端使用者的互動如何影響這一過程。我們有很多東西要介紹, 所以拿一杯 < 插入你最喜歡的飲料的名字在這裡 >飲料, 讓我們開始吧。

Parsing

解析器

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 thestyle attribute of a DOM element. All the CSS is parsed out and tokenized in accordance with thesyntax 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、