歡迎光臨
每天分享高質量文章

關於CSS 2015年你會因此而激動的東西

CSS是一門不斷發展的語言,在2015年年初之際,我們就先來體驗一下CSS的新特征吧。

本文中,我會介紹一些瀏覽器所支持的新模塊和CSS新特性。不是說所有的特性都能立馬投入使用,有些功能尚在實驗階段。在這裡,你可以玩轉很多的東西——即便尚在實驗階段。

第四代CSS選擇器

第三代選擇器得到了瀏覽器的良好支持,也為我們提供瞭如nth-child的有用的選擇器。第四代選擇器為我們提供了諸多方法來定位CSS的內容。

否定偽類:not

否定偽類選擇器:not在CSS3中就出現了,但在CSS4中得到了升級。在CSS3中,你可以通過一個否定偽類選擇器來選取不需要運用CSS的元素。如果想給除了.intro類以外的文本加粗,可以使用如下規則:

p:not(.intro) { font-weight: normal; }

在CSS4選擇器中,你可以傳入一個用逗號(,)分割的選擇器串列。

p:not(.intro, pre) { font-weight: normal; }

關聯偽類:has

這個偽類選擇器通過一個引數(選擇器串列),去匹配與某一元素對應的任意選擇器。舉個最簡單的例子,在這個例子中任何帶有元素都會加個黑色的邊框:

a:has( > img ) { border: 1px solid #000; }

在第二個例子中,我會把:has和:not結合,選擇不帶有

  • 元素:
  • li:not(:has(p)) { padding-bottom: 1em; }

    匹配任何偽類:matches

    這個偽類選擇器表明我們可以把規則運用在所有的選擇器組中,例如:

    p:matches(.alert, .error, .warn) { color: red; }

    要測試你的瀏覽器是否支持這些選擇器和其他高級選擇器,你可以在css-selectors.com網站上進行測試。這個網站也給你提供了許多資源,你可以找到要添加的選擇器。

    CSS混合樣式

    如果你熟悉Photoshop中的混合樣式,你也許會對CSS的混合樣式和規範感興趣。該規範將混合樣式適用於背景以及瀏覽器html頁面里的任何元素.

    在接下來的CSS中,我們使用了帶有背景圖像的選擇器.box,通過設置background-color為red,background-blend-mode為hue和multiply,我給圖片增添了有趣的效果。

    .box {
    
    background-image: url(balloons.jpg);
    
    }
    
    .box2 {
    
    background-color: red;
    
    background-blend-mode: hue;
    
    }
    
    .box3 {
    
    background-color: blue;
    
    background-blend-mode: multiply;
    
    }

    使用background-blend-mode

    mix-blend-mode屬性可以設置混合文字置於圖片頂部。在下麵的例子中,我添加了h1,然後在.box2中設置了mix-blend-mode的屬性值為screen.

    .box {
    
    background-image: url(balloons-large.jpg);
    
    }
    
    .box h1 {
    
    font-size: 140px;
    
    color: green;
    
    }
    
    .box2 h1 {
    
    mix-blend-mode: screen;
    
    }

    使用mix-blend-mode

    令人驚奇的是,IE瀏覽器支持CSS混合樣式,Safari和Firefox緊追其後,而Opera和Chrome尚在實驗階段。只要在那些暫時不支持這項規範的瀏覽器中有向後兼容方案,不至於留下一堆亂七八糟的東西,我們就可以小心地使用這一規範,它絕對能將你的設計提升一個層次。

    如果你想要全面支持舊版本瀏覽器,那麼就不能在產品中運用混合樣式。別忘記,這些效果都可以在Photoshop中實現。你在Photoshop中完成了圖片的製作,然後將其替代CSS的效果。

    更多混合樣式運用方法參見“如何使用CSS的混合樣式”,“Adobe網站資源”和“Dev Opera網站”.

    CALC()函式

    CALC()函式出現在CSS值和單位模塊3中,這表明你可以在CSS中編寫數學函式。

    如果你想把背景圖放在一個元素的右下角,你就可以使用CALC()函式。要將一個元素定在左上角30px的位置,你可以使用下麵代碼:

    .box {
    
    background-image: url(check.png);
    
    background-position: 30px 30px;
    
    }

    然而,當你不知道容器的尺寸時,你無法將背景圖定位在右下角30px處,calc()函式可以從100%的寬度或高度減去30px來實現:

    .box {
    
    background-image: url(check.png);
    
    background-position: calc(100% - 30px) calc(100% - 30px);
    
    }

    Calc()得到了現代瀏覽器的支持,不過據Can I Use報道,在IE9中設置背景的位置數值會導致瀏覽器崩潰。

    文章CSS Trickery and Cal Function有趣地描述瞭如何使用calc()函式來解決CSS問題。在巧用CSS技巧中有一些簡單運用的案例。

    CSS變數

    CSS前處理器很強大,比如Sass,它支持我們在CSS中使用變數。首先,我們可以通過宣告顏色和字體變數,節省大量時間,然後當要使用某一特定顏色或字體的時候就使用這一變數。如果要調整字體或顏色調色板,只要在一個地方做改動就可以了。

    CSS屬性和變數模塊對CSS變數進行了描述,並將這一功能運用在CSS中:

    :root {
    
    --color-main: #333333;
    
    --color-alert: #ffecef;
    
    }
    
    .error { color: var(--color-alert); }

    遺憾的是,目前只有Firefox瀏覽器支持CSS變數。

    在Mozilla開發群中可以看到更多的例子。

    CSS的exclusion選擇器

    我們都熟悉CSS中的浮動,舉個例子,圖像周圍的文本流會圍繞圖像浮動,然而,浮動的局限性很大。因為浮動項總會升到頂部,因此,當我們設置圖片向左浮動時文字就會浮動到圖像的右側和底部,卻沒有辦法使文字在圖像四周浮動,或是在圖像頂部和邊緣浮動。

    Exclusion使文字環繞在定位物件的四周,它並沒有定義一個給自己定位的新方法,這樣一來就要和其他方法結合使用。下麵的例子中,我將一個元素定位在了文字塊的頂部,然後用.exclusion選擇器設置該元素的wrap-flow的屬性值為both,因此文字會在該元素的四周浮動。

    .main {
    
    position:relative;
    
    }
    
    .exclusion {
    
    position: absolute;
    
    top: 14em;
    
    left: 14em;
    
    width: 320px;
    
    wrap-flow: both;
    
    }

    IE瀏覽器中的Exclusions選擇器

    當前只有IE10+支持wrap-flow:both,而且需要加上前綴-ms。註意,近來exclusion與CSS Shapes規範相似,因此網上有些人會將兩者進行比較。

    Shape選擇器

    Exclusion選擇器使得文字圍繞在矩形物件四周,而Shape選擇器可將文字排列在非矩形物件周圍,比如曲線。

    CSS的Shape規範中定義了shape-outside屬性,該屬性可運用於浮動的元素。下麵的例子中,我使用該屬性設置文字圍繞浮動的圖像排成一個曲線。

    .shape {
    
    width: 300px;
    
    float: left;
    
    shape-outside: circle(50%);
    
    }

    Shapes選擇器可以將文字圍繞圓形圖像進行排列

    支持Shapes的瀏覽器(第1版)包括Chrome和Safari,這就表示你也可以使用這個屬性來設計IOS設備。第2版的規範中,通過shape-inside屬性可設置文字嵌入在元素中,未來新的突破將會更多。

    更多關於Shapes的的信息可參見Sara Soueidan在A List Apart上發表的文章,你還可以在這裡獲取相關資源。

    CSS網格佈局

    最好的留到最後,在IE10出現之前,我對網格佈局規範很感興趣。CSS的網格佈局為CSS創建了合適的網格結構,可以將我們的設計放置在該網格內。

    網格佈局為我們創建了類似於表格佈局的結構,然而,我們可以使用CSS而非HTML中所描述的選擇器來創建佈局,通過媒體查詢來重定義佈局以適應不同的背景關係內容。這樣我們就可以正確區分視覺和原始碼的元素順序。作為一個設計師,你可以自由地改變頁面元素的位置來適應不同斷點下的佈局,而不必為你響應式設計去調整結構。與HTML中基於表格的佈局不同,網格佈局允許你堆疊元素。因此,在需要的情況下,一個元素可以重疊另一元素。

    下麵的例子中,我用.wrap類給元素創建了一個網格,該網格有三行三列,列寬100px,列間距和行間距均為10px。我們在網格中放置盒子,通過網格線來定義該區域中要顯示的元素。

    Grid Example
    
    
    
    
    
    赞(0)

    分享創造快樂