Web技巧（17）

上週又斷檔一期了，這周不能再斷了。這兩天翻閱了@hj_chen在新家坡組織的Talk.css沙龍中的一些PPT，有些內容仍是蠻有意思了。國外氛圍真不錯，其實國內也有很多同窗在搞沙龍。前面社區活動也很多，這周參加了騰訊Live前端大會。下個月@裕波在成都舉辦第五屆FEDay。

想去參加的能夠點擊上面的連接購票了喲。

廣告插入完了，咱們接着今天的內容。

CSS繪製圖形

CSS繪製圖形在社區中已經不是什麼新東西了，上次團隊週會也有同窗問起我，怎麼用CSS來繪製圖形呢，有沒有什麼工具？有沒有什麼技巧。其實使用CSS來繪製圖形並無什麼捷徑，只是一些內功。內功練習好了，繪製圖形仍是很簡單的。好比@wentin就曾用純CSS繪製了512個圖標：

前兩天@張鑫旭 老司機也整了一個CSS繪製圖標的庫：

@張鑫旭 老司機還專門爲這方面寫了兩篇文章：《常見純CSS圖標的代碼分離與整理》和《是時候了，無外鏈的CSS開發策略》。

@hj_chen在Talk.css中也分享過這方面的主題《Creating art with CSS》：

在PPT後面還提供了不少有關於如何使用CSS繪製圖標的相關教程：

• Single Div Drawings with CSS
• A Beginner’s Guide to Pure CSS Images
• How I started drawing CSS Images
• How to create pure CSS illustrations and animate them: Part1、Part2和Part3
• Pure CSS Drawing Essentials

除此以外，社區中還有兩個很是有意思的東東。好比@Lynn Fisher整理的 使用一個div繪製各類圖形 和 CSSBattle（使用最少的代碼量繪製圖形）：

若是你去查閱了別人的代碼，你會發如今CSS中，能夠經過border、box-shadow和漸變繪製一些圖形或紋理圖案。

這樣來介紹background-blend-mode

記得在Web技巧的第五期中介紹了CSS混合模式的計算方式，在第六期中介紹了混合模式在CSS中的使用場景。@Natalie在她的教程《background-blend-mode property》一文中使用另外一種方式來介紹background-blend-mode：

See the Pen background-blend-mode example by Airen ( @airen) on CodePen.

交錯的CSS transition效果

首先用下列的效果來告訴你們什麼是交錯的CSS transition效果：

See the Pen Staggered Animations by Chris Coyier ( @chriscoyier) on CodePen.

其中最關鍵的是在不一樣的列表上的transition-delay使用了不一樣的值：

@media (hover: hover) {
    .list li a span {
        transform: translateY(100px);
        transition: 0.2s;
    }
    .list:hover span {
        transform: translateY(0);
    }
    .list li:nth-child(1) span {
        transition-delay: 0.0s;
    }
    .list li:nth-child(2) span {
        transition-delay: 0.05s;
    }
    .list li:nth-child(3) span {
        transition-delay: 0.1s;
    }
    .list li:nth-child(4) span {
        transition-delay: 0.15s;
    }
    .list li:nth-child(5) span {
        transition-delay: 0.2s;
    }
    .list li:nth-child(6) span {
        transition-delay: 0.25s;
    }
}
複製代碼

看上去沒啥特殊之處。但這裏有一個咱們平時不怎麼關注的點，即在@media的條件設置中還可使用(hover:hover)。原來這是CSS Media Queries Level 4中的新特性。

在該規範中新增了兩個特性：鼠標懸停和指針。

若是你對這方面的新特性感興趣的話，還能夠閱讀下面相關文章：

• What the hell’s up with @media not?
• Detect a touch device with only CSS
• Introducing CSS Interaction Media Queries
• Using Media Queries For Responsive Design In 2018
• Useful CSS Media Query Features

另外，在CSS Media Query Level 5的版本中新增的特性會讓媒體查詢變得更容易，更靈活。好比：

// BEFORE
@media (min-width: 20em), (min-height: 40em) {
    @media not all and (pointer: none) { … }
}
@media (min-width: 20em) and (max-width: 40em) { … }

// AFTER
@media ((min-width: 20em) or (min-height: 40em)) and (not (pointer: none)) { …}
@media (20em <= width <= 40em) { … }
複製代碼

CSS的@規則中你不知道的知識點

在圖解CSS系列中，有一個章節是專門來介紹 條件CSS 相關的屬性，好比@media、@supports、@viewport等。這幾個屬性又是CSS的@規則中的一部分屬性。

其中有些@規則的知識咱們平時是並不怎麼關注的。好比@規則中選擇器的權重。就拿@media、@keframes和@supports來舉例吧。

好比下面這個示例：

body {
    background: red;
}
@media (min-width: 1px) {
    body {
        background: black;
    }
}
複製代碼

結果頁面的背景顏色是black。這是由於@media增長了選擇器的權重？帶着這個疑問再看下面這個示例：

@media (min-width: 1px) {
    body {
        background: black;
    }
}
body {
    background: red;
}
複製代碼

結果背景是red。如此來看，@media並不影響選擇器權重。

再來看@keyframes：

@keyframes winner {
    100% { background: green; }
}
body {
    background: red !important;
    animation: winner forwards;
}
複製代碼

你可能會認爲最終背景色是red，尤爲是有!important加持的狀況之下。在Chrome中它是green（不過在Firefox是red，聽說自2014年起這就是Firefox的一個坑）。其實@keyframes並無增長選擇器的權重，只不過@keyframes中的樣式覆蓋了規則外的樣式。給你形成一個假象：@keyframes的選擇器權重更大。

相關的介紹能夠閱讀 @Chris Coyier的《How much specificity do @rules have, like @keyframes and @media?》一文。

在上面的基礎上擴展一下，那@supports對選擇器權重會有影響嗎？好比下面這個示例，最終的背景顏色是什麼呢？

@supports (--a: b){
    body {
        background: red;
    }
}

body {
    background: green;
}

@supports (--a: b){
    body {
        background: yellow;
    }
}
複製代碼

若是看不出來，能夠嘗試着在瀏覽器中跑一下上面的示例代碼。

@規則中還有一個比較有意思的東西，那就是@support和@media能夠相互嵌套，並且不依賴於任何的CSS處理器：

@supports (--a: b) {
    @media (min-width: 1px) {
        body {
            background: red;
        }
    }
}
複製代碼

或者：

@media (min-width: 1px) {
    @supports (--a: b) {
        body {
            background: #f36;
        }
    }
}
複製代碼

甚至還能夠更復雜一些：

@media (min-width: 2px) {
    @media (min-width: 1px) {
        @supports (--a: b) {
            @supports (display: flex) {
                body {
                    background: pink;
                }
            }
        }
    }
}
複製代碼

雖然這樣寫，瀏覽器能夠識別。但要注意喲，嵌套的層級越深給本身挖的坑會更深。

See the Pen Nest and Specificity in @rules by Airen ( @airen) on CodePen.

斜線體和字體變量

在字體變體font-variation-*一文中，介紹了字體變量的使用。好比下面這樣的一個效果，就是font-variation-*實現的：

See the Pen Grassy Text with Variable fonts. by Airen ( @airen) on CodePen.

在font-variable-settings中咱們可使用slnt來設置斜體文本效果。除了該方法以外，咱們可使用font-style:oblique來替代該方法。另外還可使用字體變量wght來給文本加粗。換句話說：

font-variable-settings: "wght" 500;
// 等效於
font-weight: 500

font-variable-settings: "slnt" 4;
// 等效於
font-style: oblique 4deg
複製代碼

即：

/* BEFORE */
h2 {
    font-variation-settings: "wght" 500, "slnt" 4;
}

/* AFTER */
h2 {
    font-weight: 500;
    font-style: oblique 4deg;
}
複製代碼

See the Pen Using font-style: oblique on variable fonts by Šime Vidas ( @simevidas) on CodePen.

有關於這方面的更多的介紹能夠閱讀：

• CSS oblique value for slanted text
• variable web TYPOGRAPHY
• Variable fonts guide

若是把CSS animation和 Splitting JS結合在一塊兒，還能夠作一些更有意思的文本效果，好比：

See the Pen Variable font animation by Michelle Barker ( @michellebarker) on CodePen.

上面的Demo來自於《Variable Font Animation with CSS and Splitting JS》一文。

@Mandy Michael建立了VariableFonts.dev，用不一樣的字體建立了使人驚豔的字體變量的動效。

亞像素渲染和邊框

亞像素渲染一直是一個頭痛的問題。社區有關於這方面的討論也比較多：

• Sub-Pixel Problems in CSS
• Not so pixel perfect in Firefox
• Sub-Pixel Font Rendering Technology: How it works?
• Subpixel rendering and image resizing
• Improving Font Rendering With CSS
• CSS Sub-pixel Background Misalignments
• Antialiasing 101
• Browser Rounding and Fractional Pixels

特別是在一些佈局方案中，好比Flexible佈局，vw佈局或者%單位的運用等，不一樣的瀏覽器轉換出來的值都帶有不一樣位數的小數。

就最近，@hj_chen在墨爾本首屆Talk.CSS大會上就聊到亞像素和border相關的話題。首先和你們聊了不一樣瀏覽器中盒模型中padding最小值會有何不一樣，直接上文章中的圖吧：

Firefox中的截圖

Chrome中的截圖

Safari中的截圖

回到文章中有關於border-width的討論。這裏多的不說，直接W3C規範中的一段描述貼過來：

The lengths corresponding to thin, medium, and thick are not specified, but the values are constant throughout a document and thin ≤ medium ≤ thick. A UA could, e.g., make the thickness depend on the medium font size: one choice might be 1, 3 & 5px when the medium font size is 17px or less. Negative <length> values are not allowed.

詳細的討論仍是閱讀原文吧!

Flexbox中的兩個小技巧

在第五屆CSS Conf大會上，@hj_chen分享的《新時代CSS佈局》的話題：

這裏面有一個關於Flexbox的小技巧，估計你們在平時使用的過程當中會忽略：

經以下面這樣的一個Demo:

See the Pen Flexbox Nav by willcodes ( @willcodes) on CodePen.

有關於Flexbox中關於margin更多的使用能夠看下面這個示例：

See the Pen css: Flexbox - margin property by goerk ( @goerk) on CodePen.

若是你對這方面感興趣的話，還能夠閱讀下面相關教程：

• The peculiar magic of flexbox and auto margins
• Everything You Need To Know About Alignment In Flexbox
• 探祕 flex 上下文中神奇的自動 margin

在《你所不知道的CSS Overflow Module》一文中和你們一塊兒聊了有關於CSS Overflow Module中的相關知識。但咱們有一個關於Flexbox容器上使用overflow和padding的場景忽略了。即：忽略滾動容器末端邊緣的padding。好比：

.container {
    display: flex;
    overflow-x: scroll;
    padding: 1em; /* browsers ignore the padding-right component */
}
複製代碼

你將看到的效果會以下：

解決這個問題，很簡單：

.container::after {
    content: '';
    padding-right: 0.02px; /* smallest size that is cross browser */
}
複製代碼

有關於方面能夠閱讀《Flexbox and padding》一文，詳細介紹了其中的爲何？下面的案例就是來自於該教程中的：

See the Pen Flex container padding hack by Chen Hui Jing ( @huijing) on CodePen.

再見了<iframe>

BBC已經將<iframe>移到Shadow DOM中了，聽說性能提升了近25%。@Toby Cox在Medium上就寫了一篇有關於這方面的文章。要是感興趣的話，能夠閱讀《Goodbye iframes》。

tab-size也來了

如今可使用tab-size來調整tab字符顯示的空格量：

pre {
    tab-size: 8; /* default. Pretty big! */

    tab-size: 2;
    tab-size: 13px; /* you can set a width-per-tab also */
}
複製代碼

來看一個示例：

See the Pen Demos of `tab-size` by Chris Coyier ( @chriscoyier) on CodePen.

上面的示例來自於@Chris Coyier的《tab-size》一文。

Day/Night Ambient Light Animation

最後給你們展現一個@Mandy Michael的一個案例，根據環境能切換白天和晚上。有意思吧：

See the Pen Day/Night Ambient Light Animation by Mandy Michael ( @mandymichael) on CodePen.