根據預設，系統會將 CSS 視為轉譯封鎖資源，這表示瀏覽器在建構 CSSOM 之前，瀏覽器不會轉譯任何處理的內容。請務必讓 CSS 易於精簡並盡快放送，並使用媒體類型和查詢來解除封鎖算繪作業。
在轉譯樹狀結構中，我們發現關鍵轉譯路徑需要 DOM 和 CSSOM 來建構轉譯樹狀結構。這可能會對效能產生重大影響：HTML 和 CSS 都屬於造成阻斷資源的情形。HTML 很顯而易見，如果沒有 DOM 可以顯示任何內容，但 CSS 要求可能較不明顯。如果我們嘗試顯示一般網頁，而不禁止在 CSS 上顯示，會發生什麼事？
摘要
- 根據預設，系統會將 CSS 視為禁止轉譯資源。
- 我們可以透過媒體類型和媒體查詢，將部分 CSS 資源標示為無法轉譯。
- 瀏覽器會下載所有 CSS 資源，不論封鎖或非封鎖行為為何。
上例顯示無論是否有 CSS 資訊的 NYTimes 網站，可說明為什麼在 CSS 推出後，網頁就會變得相當無法使用。右側內容通常稱為「無樣式內容的閃耀」(FOUC)。在同時具備 DOM 和 CSSOM 之前，瀏覽器會阻止轉譯作業。
CSS 是禁止轉譯資源。盡快將產品交付給客戶，以便最佳化首次轉譯的時間。
不過，如果我們有些 CSS 樣式只能在特定情況下 (例如網頁列印或將頁面投射到大型顯示器) 使用，該怎麼辦？如果我們不需要封鎖這些資源的轉譯功能，應該就沒問題了。
我們可以透過 CSS 的「媒體類型」和「媒體查詢」來解決下列使用情境：
<link href="style.css" rel="stylesheet" />
<link href="print.css" rel="stylesheet" media="print" />
<link href="other.css" rel="stylesheet" media="(min-width: 40em)" />
媒體查詢包含媒體類型，以及可檢查特定媒體功能條件的零或多個運算式。例如，我們的第一個樣式表宣告並不提供媒體類型或查詢，因此適用於所有情況；也就是說，這個樣式一律必須使用轉譯功能。另一方面，第二個樣式表宣告僅適用於正在列印的內容 - 因為也許您想要重新排列版面配置、變更字型等等，因此，此樣式表宣告在網頁首次載入時不需要封鎖網頁轉譯功能。最後，最後一個樣式表宣告會提供一個「媒體查詢」，由瀏覽器執行：如果條件相符，瀏覽器會封鎖轉譯功能，直到樣式表完成下載及處理為止。
我們可以透過媒體查詢，針對特定用途 (例如顯示與列印) 以及動態條件 (例如螢幕方向變更、調整事件大小等) 量身打造簡報。宣告樣式表素材資源時，請特別留意媒體類型和查詢，這將大幅影響重要轉譯路徑的效能。
讓我們來看看幾個實際操作範例：
<link href="style.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet" media="all" />
<link href="portrait.css" rel="stylesheet" media="orientation:portrait" />
<link href="print.css" rel="stylesheet" media="print" />
- 第一個宣告是轉譯封鎖，且在所有條件相符。
- 第二個宣告也具有轉譯封鎖條件：「全部」是預設類型，因此如果您沒有指定任何類型，系統會自動將該類型設為「all」。因此，第一和第二項宣告實際上是相等的。
- 第三個宣告包含動態媒體查詢，系統會在網頁載入時進行評估。視網頁載入時的裝置方向而定，portrait.css 可能會禁止轉譯。
- 最後一個宣告只會在網頁列印時套用，因此瀏覽器首次載入網頁時，不會造成妨礙。
最後請注意，「轉譯封鎖程式」只表示瀏覽器是否需要保留該資源網頁的初始轉譯作業。無論是哪一種情況，瀏覽器仍會下載 CSS 素材資源，但非封鎖資源的優先順序較低。