CSS優化問題

我發現了一個我非常喜歡的css條紋和拼貼組合。問題是，它使得的一切真的，真的很慢。我想知道，有沒有什麼技術可以讓我的CSS更加優化？或者這項技術本身過於苛刻？我使用less。CSS優化問題

.head { 
    .stripes; 
    .angled; 
} 

.stripes {   
     -webkit-background-size: 50px 50px; 
     -moz-background-size: 50px 50px; 
     background-size: 50px 50px; /* Controls the size of the stripes */ 

     -moz-box-shadow: 1px 1px 8px gray; 
     -webkit-box-shadow: 1px 1px 8px gray; 
     box-shadow: 1px 1px 8px gray; 
    } 

.angled { 
     background-color: @light-blue; 
     background-image: -webkit-gradient(linear, 0 100%, 100% 0, 
           color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), 
           color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), 
           color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), 
           to(transparent)); 
     background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, 
          transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, 
          transparent 75%, transparent); 
     background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, 
          transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, 
          transparent 75%, transparent); 
     background-image: -ms-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, 
          transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, 
          transparent 75%, transparent); 
     background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, 
          transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, 
          transparent 75%, transparent); 
     background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, 
          transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, 
          transparent 75%, transparent); 
    }

來源

2012-06-14 Phil

如果你使用的較少，爲什麼不使用內建的漸變函數？ – Rooster

我希望這是一個您正在使用的開源.css文件。 – poepje

我會研究它。速度更快嗎？ – Phil

幾個星期前，我在Firefox，Opera和Chrome上用一種簡單的兩種顏色漸變來測試這種技術，以獲得垂直條紋。對於大型背景尺寸，它的效果非常好，但是當您將其設置爲幾個像素時，瀏覽器需要更多時間來渲染它，特別是在最大化窗口時。 Opera和Chrome處理得相當好。有時你可以看到CPU使用圖上的峯值，但並不是那麼糟糕。另一方面，Firefox在cpu上瘋狂。這可能是梯度和背景大小實現的問題。我認爲現在至少應該使用圖像。您可能想要使用base64並將其放入您的css以避免另一個請求。

來源

2012-06-20 13:05:32 szym

回答

相關問題