在LESS Mixins中實現css行爲屬性

我一直在玩弄LESS一點點，以瞭解如何轉換我在工作中管理的網站。在LESS Mixins中實現css行爲屬性

當我學習CSS的behavior: url(...blah)能力我想我讀過，這是最好使用盡可能少的性能的原因（我現在找不到任何地方，所以不知道這是仍然有效）。

因此，考慮到這一假設，我對將該CSS轉換爲LESS Mixin有點擔心。這確實是一個性能問題，或者我可以安全地做到這一點，而不必擔心網站的用戶界面變慢？

的東西我會轉換的例子...

.FullRoundedBorder 
{ 
    -moz-border-radius: 8px; 
    -webkit-border-radius: 8px; 
    -khtml-border-radius: 8px; 
    border-radius: 8px; 
    behavior: url(/Content/CSS/PIE/PIE.htc); 
}

對於那些還沒有看到它PIE是圓角的邊框跨瀏覽器功能的真棒插件（主要是它修復IE 6-8 ）。

來源

2012-10-04 Jared

「行爲」屬性本身的使用並不是一個主要的性能問題 - 您可能一直在考慮對性能確實非常糟糕的「表達」。

但是，您確實需要檢查您拉入的特定.htc的性能。基本上.htc文件是在CSS選擇器與元素匹配時執行的JavaScript片段。這意味着選擇器匹配的元素越多，腳本運行的次數就越多。

對於像PIE.htc這樣複雜腳本的情況，很容易在太多元素上使用它，導致運行時出現明顯的延遲。像其他任何腳本一樣，您需要仔細考慮您應用它的程度，當然在應用它之後測試您的站點的性能。

我對PIE.htc的使用經驗是，在大約15個或更少的元素上使用它並不明顯，但除此之外，你開始注意到延遲。通常可以採取一些措施來減輕影響，例如使用-pie-lazy-init。

來源

2012-10-04 21:03:17 lojjic

你碰巧知道PIE是否會在沒有必要的瀏覽器上運行？（除了6-8之外的任何東西我都相信） – Jared

它會爲IE9添加線性漸變支持。它不會影響任何其他瀏覽器。他們完全忽略行爲屬性，甚至不抓取腳本。 – zim2411

@ zim2411謝謝我不確定它是否被忽略，如'表達式'或不。 – Jared

-1

我已經廣泛使用Less了。我喜歡它如何將大型CSS分解成更多邏輯和可讀的塊。需要考慮的幾件事：

1）你會在處理較少的服務器端還是客戶端？我更願意在UI/Browser上加載較少的負載，因爲您無法控制用戶正在運行的瀏覽器和瀏覽器類型，並且會在您的UI實現中增加更多的失敗點。簡單總是更好。如果您的用戶界面面向的是小衆用戶，那麼您應該看不到任何性能問題。在大多數情況下，當普通CSS太大而不易維護和閱讀時，我會使用Less。因此，如果用戶基數微不足道，尤其會受到輕微的性能影響。對於高流量的網站，我可能會重寫或轉換回CSS併發布直接的CSS。

2）是不是真的有必要？你是否正在加載一堆翻譯代碼或者在你的服務器上運行一個額外的過程，這樣你就不必再寫一些額外的CSS代碼了？在我的意見中，這是不合理的。當我看到開發人員因爲不想編寫「getElementByID（）」純原生JavaScript而加載整個庫時，我經常質疑使用其他「讓生活變得輕鬆」的庫/工具（如JQuery）。

一切都有它的地方，它用於項目/實施。我建議列出一些好處，然後刪除那些可以使用原生瀏覽器功能（純CSS和JS）輕鬆實現的功能。越來越小，總是越來越快，特別是在移動和傳統平臺上運行時。

我希望這有助於。

來源

2012-10-04 20:57:28

1）它將服務器端2）必要...不，但我喜歡嵌套的能力，因爲客戶端只會看到CSS我認爲這沒有多大意義。我也喜歡dotless的內置縮小功能（我使用的框架越少）。 – Jared

這個問題不是關於使用LESS或不使用LESS，而是關於廣泛使用PIE的潛在性能問題。 – cimmanon

正如@ cimmanon正確指出的那樣，這個答案似乎在切線處消失。也許你可以回到正軌？ – Kev

是的，PIE會降低IE6-8中的UI。你疊加的效果越多，影響就越大。它不應該影響其他瀏覽器。

我在（大！）項目中使用的PIE去年獲得IE6-8一定的影響，但在今年重新訪問項目，我決定放棄所有使用餡餅。我發現它是片狀和不一致的 - 例如，它會隨機地呈現「立即付款」按鈕。 IE用戶因此將無法支付賬單。我轉而回到了Modernizr，其圖片回退爲< IE 9。故事的寓意是：PIE看起來很棒，但是謹慎地使用它，並且只用於非關鍵元素。出錯時很難調試。

如果您發現UI太慢，您也可以輕鬆嘗試並禁用它。如果你的mixin是好的，它應該只是幾行代碼。

來源

2012-10-04 21:03:02 zim2411

我從來沒有看到任何問題（個人），但我也不支持ie6 AT所有這不是一個足夠的市場份額擔心。 – Jared

是的，我們在IE8上看到了問題。當然，這是去年的一個版本，從那時起他們已經更新了。 – zim2411

有趣。如果我有時間的話，我會多考慮一下，但幸運的是，我還沒有看到它。目前，我只是簡單地使用它來圓化一些標籤和'fieldset'元素的頂部邊緣！ – Jared

在LESS Mixins中實現css行爲屬性

回答

相關問題