CSS速記效率

background-color: #BADA55;和background: #BADA55;之間效率有什麼不同？我意識到這是相當微不足道的，但瀏覽器如何提取每個值的方式有所不同。此外，在一個稍有相關的說明，CSS3Please我注意到，他們指定他們使用background-image線性漸變。有沒有任何理由不簡單地使用background？CSS速記效率

來源

2012-07-27 Spencer

如果我告訴你它是1微秒，那會怎麼樣？ – PhD 2012-07-27 21:01:23

我不知道，但15secs我花了這個問題閱讀，我永遠不會回來:( – Gerrat 2012-07-27 21:04:18

@phD如果你有一個情況，你正在一個巨大的顯示設備上呈現（牆到牆或體育場展示）有數百萬個單元格，每個單元格都有自己的css，這將是一個大問題 – 2012-07-27 21:04:43

該規範沒有提到瀏覽器應如何實現屬性解析，特別是速記屬性。所有這一切都是一個grammar，語法沒有說明它的實現。如果瀏覽器解析一個速記聲明，那麼我懷疑它完全依賴於實現並且不容易回答（當然，除非你有源代碼）。

事實上，我們有很多專門針對IE的CSS黑客攻擊的主要原因是因爲它理解CSS的方式有多不同（通常很差）。

有沒有什麼理由不簡單地使用background？

答案就在你前面的句子：

此外，在一個稍微有關說明，在CSS3Please我注意到，爲線性漸變，他們使用background-image指定它們。

確實; CSS漸變被認爲是用於背景的圖像，並記錄在Image Values module中。他們適用的個人背景資產是background-image。

如果使用速記屬性僅指定顏色或僅指定漸變，則請輸入it will use the initial value for the rest of the values。如果這種使用風格的差異很重要，那麼性能上的差異就完全不存在了，因爲它不再是一個公平的比較。

在這個例子中，第二background速記聲明將完全覆蓋第一個，讓你使用純色和無梯度的background-image初始值是none：

background: radial-gradient(white, rgba(255, 255, 255, 0)) /* transparent */; 
background: /* none */ green;

的目的簡寫符號是在單個聲明中指定多個相關屬性的值，因此爲了適用梯度和顏色，應將其重寫爲：

background: radial-gradient(black, transparent) green;

來源

2012-07-27 21:09:53 BoltClock

你是第二個例子應該是：background: #BADA55;，但無論哪種方式都很好，應該而不是是你需要擔心的事情。

如果你很好奇瀏覽器如何解析CSS，我可以告訴你：它取決於（曾經與IE一起工作？）。對於Chrome，您可以看到源on GitHub，並且可以找到Firefox源here。

來源

2012-07-27 21:02:55 PeeHaa

回答

相關問題