摘要：接著只要在中使用就能搞定自適應(yīng)。代碼如下標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題在上述點(diǎn)功能中，可以用變量解決，比如實(shí)現(xiàn)了寬度，高度圓點(diǎn)大小直徑的控件。

未完待續(xù)

如今css3越來(lái)越發(fā)達(dá)，focus-within等屬性也已經(jīng)開(kāi)始在Chrome得到支持。如果有出色的css功底，一點(diǎn)點(diǎn)ps技能，你也能用css3配合原生html標(biāo)簽寫(xiě)出優(yōu)秀的框架。通過(guò)對(duì)css3的實(shí)踐，我發(fā)現(xiàn)自定義原生控件并不是什么難事，于是小試牛刀寫(xiě)了個(gè) 純CSS3實(shí)現(xiàn)Material Design。

關(guān)于本文的所有代碼實(shí)現(xiàn)，以及更多純css控件，請(qǐng)?jiān)?https://github.com/Seasonley/... 中查看。
本文針對(duì)本人開(kāi)發(fā)的純css框架Sultana中重要的幾個(gè)常用組件進(jìn)行深入分析，與大家探討如何一步步構(gòu)思實(shí)現(xiàn)，包括：

var(--x) 寫(xiě)柵格系統(tǒng)

focus-within & a & input 寫(xiě)下拉選擇控件

input radio & date 實(shí)現(xiàn)日期選擇控件

background linear-gradient:一個(gè)有爭(zhēng)議的scroll_indicator實(shí)現(xiàn)方式

css動(dòng)畫(huà) + css變量 寫(xiě)自適應(yīng)大小輪播控件

導(dǎo)航欄之：focus-within 側(cè)邊欄導(dǎo)航滑出

導(dǎo)航欄之：summary折疊導(dǎo)航，秒殺bulma靜態(tài)樣式

input range 可以寫(xiě)五星好評(píng)啦

友好的tooltip，transform 大法

眾所周知Bootstrap柵格系統(tǒng) 提供了不同設(shè)備寬度下的12柵格，那么我們?nèi)绾未驍ootstrap，用css3變量實(shí)現(xiàn)一個(gè)強(qiáng)大的自適應(yīng)柵格呢？

假設(shè)我們考慮4種設(shè)備，如下方表格所示。仿照Bootstrap我們將他們命名為sm,md,lg。

那么col干什么用？最終容器的寬度應(yīng)該轉(zhuǎn)換成單一變量，前面3者都是輔助。假設(shè)我們的布局如下

我們希望不同設(shè)備的col寬度按照變量自適應(yīng)，還可以有display和visiblity這些輔助操作，接下來(lái)看css實(shí)現(xiàn)，以-md為例子，代碼如下。

@media screen and (min-width: 721px) {
    div[su-col] {
        --col: calc(var(--md) / 12);
        display: var(--md-d);
        visibility: var(--md-v);
    }
}

接著只要在su-col中使用var(--col)就能搞定自適應(yīng)。代碼如下。

div[su-col] {
 width: calc(100% * var(--col));
}

是不是很輕松，每一行都是精華。如果直接用--col，那適配變量失效，這通常用在不需要適配的場(chǎng)景下。

flex布局逐漸代替浮動(dòng)布局，那么自定義一些簡(jiǎn)寫(xiě)的class來(lái)讓代碼看起來(lái)更整潔也是非常有必要的。本人提供一個(gè)實(shí)現(xiàn)方式，并不一定受歡迎，不感興趣可以跳過(guò)。

flex屬性縮寫(xiě)參照：

j=justify,a=algin,c=content

100,001,010,101=start,end,center,between

-row=row-reverse

-warp=warp-reverse

!warp=no-warp

html示例

看這個(gè)標(biāo)題就秘制重量級(jí)，下拉控件不好辦，很多css框架都只能div套啊套的，再用js搞點(diǎn)數(shù)據(jù)綁定。不過(guò)既然有focus-within。我們先腦補(bǔ)一下，點(diǎn)擊這個(gè)a標(biāo)簽，a+div里的input[radio]都顯示，不focus則隱藏。這解決了下拉動(dòng)畫(huà)效果。那么鼠標(biāo)經(jīng)過(guò)要高亮，input又不能寫(xiě)文字，也沒(méi)有偽元素可以弄dataset，那只好input+span組合一下了。假設(shè)html部分代碼如下。

    (blank)
    

        
        (blank)
        
        A.da
        
        B.la
    

這樣看來(lái)似乎能寫(xiě)個(gè)導(dǎo)航欄了呢，多個(gè)按鈕拼一下什么的。

如標(biāo)題，接下來(lái)解決選中項(xiàng)的顯示，很簡(jiǎn)單，absolute絕對(duì)定位嘛。

button[su~="-"] input:checked+span {
    position: absolute;
    top: 0px;
}

默認(rèn)來(lái)個(gè)value=""的，文字為(blank)，算是很尷尬的委屈求全了，缺點(diǎn)是選中項(xiàng)不再在下拉列表中顯示了，其次文字是不能點(diǎn)擊選中的，只能點(diǎn)空白處。

有意思，看完上面的奇葩實(shí)現(xiàn)select,你應(yīng)該對(duì)這個(gè)更感興趣一點(diǎn)。作為一個(gè)前端你不會(huì)自己寫(xiě)日期控件，你好意思嗎你？整天用jquery-datepicker你的良心不會(huì)痛嗎？這回我們?cè)俎我换兀胏ss和少量的js代碼來(lái)實(shí)現(xiàn)。尬在哪呢？31個(gè)input[radio]，誰(shuí)會(huì)用啊，可能只有那些禁用js的瀏覽器的需求方需要這個(gè)。

oninput的時(shí)候需要算出閏年+這個(gè)月1號(hào)星期幾，把它放到dataset,由css枚舉1號(hào)的7種星期情況，css枚舉大月小月和閏年2月。（這行描述最重要）
代碼實(shí)現(xiàn)如下

html

    
            
            

                
                
                

                    
                    
                    ...
                    

css

label[su-date] input[type="number"][value="2"]+div input[type="radio"]:last-of-type,
label[su-date] input[type="number"][value="4"]+div input[type="radio"]:last-of-type,
label[su-date] input[type="number"][value="6"]+div input[type="radio"]:last-of-type,
label[su-date] input[type="number"][value="9"]+div input[type="radio"]:last-of-type,
label[su-date] input[type="number"][value="11"]+div input[type="radio"]:last-of-type,
label[su-date] input[type="number"][value="2"]+div input[type="radio"][value="30"],
label[su-date] input[type="number"][value="2"]+div input[type="radio"][value="29"] {
    display: none
}

label[su-date] input[name="ymd"][data-leap="true"]+div input[type="radio"][value="29"] {
    display: block
}

label[su-date] input[name="ymd"][data-day="1"]+div input[type="radio"][value="01"] {
    margin-left: calc(0 * var(--x2))
}

label[su-date] input[name="ymd"][data-day="2"]+div input[type="radio"][value="01"] {
    margin-left: calc(1 * var(--x2))
}

label[su-date] input[name="ymd"][data-day="3"]+div input[type="radio"][value="01"] {
    margin-left: calc(2 * var(--x2))
}

label[su-date] input[name="ymd"][data-day="4"]+div input[type="radio"][value="01"] {
    margin-left: calc(3 * var(--x2))
}

label[su-date] input[name="ymd"][data-day="5"]+div input[type="radio"][value="01"] {
    margin-left: calc(4 * var(--x2))
}

label[su-date] input[name="ymd"][data-day="6"]+div input[type="radio"][value="01"] {
    margin-left: calc(5 * var(--x2))
}

label[su-date] input[name="ymd"][data-day="0"]+div input[type="radio"][value="01"] {
    margin-left: calc(6 * var(--x2))
}

缺點(diǎn):老長(zhǎng)老長(zhǎng)的html和css...
預(yù)覽：

在掘金上看到網(wǎng)易考拉前端寫(xiě)的CSS Scroll Indicator —— 純CSS 滾動(dòng)指示器，實(shí)現(xiàn)方式很巧妙，通過(guò)直角三角形背景的頂部界面與頁(yè)面高度相關(guān)性制造一個(gè)實(shí)際上滾背景，看起來(lái)在伸縮進(jìn)度條的效果。該文提到已知的2個(gè)缺點(diǎn)。

文檔內(nèi)容太少（高度太小）的話(huà)，進(jìn)度條呈箭頭形，不美觀（可考慮加毛玻璃效果來(lái)弱化）

background-size: 100% calc(100% - 99vh); 中的99vh是相對(duì)值，若是視窗高度比較小，進(jìn)度條會(huì)填不滿(mǎn)進(jìn)度條槽（可考慮加min-height來(lái)弱化）

那它放到實(shí)際項(xiàng)目中效果如何呢，本人試驗(yàn)了一下，在篇幅很長(zhǎng)，標(biāo)簽元素嵌套很多的頁(yè)面中加入scroll_indicator,滾動(dòng)過(guò)程中背景重繪十分卡，以至于元素按鈕點(diǎn)開(kāi)都不能及時(shí)響應(yīng)。所以如果是純文本博客或者說(shuō)明文檔之類(lèi)的元素標(biāo)簽和css足夠少的情況下，可以使用該方式實(shí)現(xiàn)靜態(tài)文檔的進(jìn)度條，復(fù)雜的dom和css情況下不建議使用。當(dāng)本人放到自己項(xiàng)目中測(cè)試時(shí)，按住滾動(dòng)條上下快速拖動(dòng)時(shí)，滾動(dòng)條都是跳幀的。。。

Bootstrap輪播控件通過(guò)js實(shí)現(xiàn)，那么css能實(shí)現(xiàn)嗎，顯然是可以的。實(shí)現(xiàn)到什么程度呢？本人枚舉以下可以實(shí)現(xiàn)功能：

自適應(yīng)屏幕，寬高可控

輪播圖片有多帶帶的自定義標(biāo)題標(biāo)簽（不能是偽元素）

要有圓點(diǎn)指示器，圓點(diǎn)大小可自定義，高亮的圓點(diǎn)代表滾動(dòng)到第幾章圖

指示器可點(diǎn)擊，跳轉(zhuǎn)到對(duì)應(yīng)的圖

鼠標(biāo)hover在控件上暫停輪播

看上去很全了，本人講一下具體思路。
輪播需要假設(shè)在absolute的畫(huà)布上橫向滾動(dòng)，改變?cè)氐乃轿灰茢?shù)值margin-left來(lái)實(shí)現(xiàn)。通過(guò)css關(guān)鍵幀動(dòng)畫(huà)能完成。如下：

@keyframes rua {
     0%,20% {margin-left: 0}
    25%,40% {margin-left: calc(0px - 1*var(--w))}
    45%,60% {margin-left: calc(0px - 2*var(--w))}
    65%,80% {margin-left: calc(0px - 3*var(--w))}
    85%,100%{margin-left: calc(0px - 4*var(--w))}
}

指示器可以同新標(biāo)簽，但不能像標(biāo)題元素包裹在圖片容器內(nèi)，因?yàn)橹甘酒魇遣荒軡L動(dòng)的。于是絕對(duì)定位相對(duì)于整個(gè)控件容器內(nèi)就可以。html代碼如下：

在上述5點(diǎn)功能中，
<1><3>可以用css變量解決，比如--w:400px;--h:300px;--p:20px;實(shí)現(xiàn)了寬度400px，高度300px,圓點(diǎn)大小直徑20px的控件。
<2>多帶帶設(shè)a標(biāo)簽
<4>用focus-within實(shí)現(xiàn)點(diǎn)擊后css動(dòng)畫(huà)暫停在某個(gè)關(guān)鍵幀,缺點(diǎn)一是：有幾個(gè)圖就要寫(xiě)幾個(gè)動(dòng)畫(huà)，缺點(diǎn)二是：點(diǎn)擊后雖然選中了，但鼠標(biāo)移出控件不會(huì)繼續(xù)滾動(dòng)，在控件外點(diǎn)擊會(huì)跳回初始動(dòng)畫(huà)關(guān)鍵幀。以一個(gè)圖的動(dòng)畫(huà)為例：

aside[su~="."] button:nth-child(5):focus-within~ul {
    animation: ma5 .5s ease-out forwards;
}
@keyframes ma5 {
    100% {margin-left: calc(-4 * var(--w))}
}

<5>通過(guò)hover的暫停css動(dòng)畫(huà)來(lái)控制

aside[su~="."] button:hover,
aside[su~="."] ul:hover {
    will-change: transform;
    animation-play-state: paused;
}

整體效果還不錯(cuò)：

進(jìn)階方案 css-scroll-snap

在沒(méi)出現(xiàn)focus-within之前，用臨近元素選擇器+css能實(shí)現(xiàn)純css的下拉選項(xiàng)的導(dǎo)航欄，在這里就不多展開(kāi)了。最后一個(gè)focus-within的魔法魅力。我們需要實(shí)現(xiàn)類(lèi)似android側(cè)邊欄滑出的效果。

網(wǎng)上已經(jīng)有人實(shí)現(xiàn)了《CSS :focus-within》 Airen的博客，那我就講一下他是如何實(shí)現(xiàn)的。該文中用到了移動(dòng)端延伸出的冷門(mén)css屬性touch-action: manipulation。CSS屬性 touch-action 用于指定某個(gè)給定的區(qū)域是否允許用戶(hù)操作，以及如何響應(yīng)用戶(hù)操作（比如瀏覽器自帶的劃動(dòng)、縮放等）(MDN)。移動(dòng)端300ms延遲，就可以使用 touch-action: manipulation; 來(lái)解決。我們只需要實(shí)現(xiàn)點(diǎn)擊左上角按鈕后滑出菜單，聲明一下按鈕點(diǎn)擊不影響其手勢(shì)操作就行了。

本控件只要實(shí)現(xiàn)focus-within后動(dòng)畫(huà)彈出菜單。失去焦點(diǎn)的時(shí)候彈回去就行了。其實(shí)和touch-action沒(méi)什么關(guān)系。先定義菜單部分的css，將其扔到左邊屏幕外（margin或者transform都行）:

#nav-content
transform: translateX(-100%);
transition: transform .3s;

再定義選中后的菜單：

#nav-container:focus-within #nav-content {
    transform: none;
}

大致思路就是這樣。講了那么多focus-within的相關(guān)內(nèi)容，但國(guó)內(nèi)部分webkit內(nèi)核瀏覽器還在50以下的階段，還請(qǐng)各位使用chrome63以上版本訪問(wèn)。

先來(lái)看看 bulma 是怎么寫(xiě)的

ul li p a 相互嵌套，沒(méi)錯(cuò)是個(gè)很好的實(shí)現(xiàn)方式，如果加focus-within和相鄰元素選擇也能實(shí)現(xiàn)點(diǎn)擊后的動(dòng)畫(huà)效果，不過(guò)要稍微改變一下嵌套方式，但這不是本文的討論重點(diǎn)。focus-within有它的缺點(diǎn)，對(duì)于一個(gè)菜單來(lái)說(shuō)，用戶(hù)好不容易展開(kāi)找到了，一點(diǎn)別的菜單層級(jí)，之前的全縮回去了，那怎么行。必須要有一個(gè)展開(kāi)后點(diǎn)擊再縮回去的功能。

這就要引出神奇的summary標(biāo)簽，只用配合details用時(shí)，當(dāng)details內(nèi)的summary元素被點(diǎn)擊時(shí)，details全部顯示，再次點(diǎn)擊縮起只剩summary。在張?chǎng)涡翊笊竦慕柚鶫TML5 details,summary無(wú)JS實(shí)現(xiàn)各種交互效果中提到了很多可實(shí)現(xiàn)的控件，樹(shù)，菜單等等。

本人仿照Bulma用summary特性實(shí)現(xiàn)了一個(gè)帶動(dòng)畫(huà)的導(dǎo)航菜單，代碼還算優(yōu)雅，如下圖所示。

進(jìn)階 css-position-sticky

一個(gè)原生的范圍輸入控件，在瀏覽器是十分簡(jiǎn)陋的，所以并木有人想去用原生的。我們看一下螞蟻金服前端團(tuán)隊(duì)是怎么實(shí)現(xiàn)的（ant.desgin）：

貌似是section>ul>li,再加class表示zero full 的小星星，移上去還有動(dòng)畫(huà)，又是一堆class。我們先不考慮動(dòng)畫(huà)的實(shí)現(xiàn)，先來(lái)吐槽這個(gè)dom多了之后渲染class的性能問(wèn)題，li里面又有2個(gè)半的小星星來(lái)支持step=0.5的打分，這些原生瀏覽器都支持的屬性何必用2+5*3=17個(gè)dom元素生成？光說(shuō)不練假把式，趕緊拉出個(gè)代碼來(lái)溜溜。

首先是html，就一行~

其次是css:

input[type="range"][su~="star"] {
    cursor: pointer;width: calc(16px * 5);height: 16px;
    -webkit-appearance: none;-webkit-mask-image: var(--star);
    background: linear-gradient(to right, var(--Primary), var(--Primary)), 
                linear-gradient(to right, var(--Gray), var(--Gray));
    background-repeat: no-repeat;
}

input[type="range"][su~="star"][value="1"] {
background-size: calc(16px * 1) 16px, calc(16px * 5) 16px;
}

input[type="range"][su~="star"][value="2"] {
    background-size: calc(16px * 2) 16px, calc(16px * 5) 16px;
}
...

通過(guò)不同屬性的input背景，將小星星呈現(xiàn)出不同的顏色，linear-gradient渲染出進(jìn)度，如果是半星也好辦，在step=0.5的情況下多枚舉幾個(gè).5的分?jǐn)?shù)情況就行。效果如下：

進(jìn)階：表開(kāi)發(fā)注意事項(xiàng)

transform在上文的實(shí)現(xiàn)android滑動(dòng)菜單有提到，再擴(kuò)展一下它的其他用途。我們可以用來(lái)寫(xiě)tooltip。對(duì)于一個(gè)title屬性的標(biāo)簽，眾所周知鼠標(biāo)懸浮會(huì)顯示一個(gè)方框，內(nèi)容是title屬性的值。那么偽元素的content: attr恰好能配合transform 構(gòu)造不同方位的tooltip。

[su-hint~="bottom"]:after {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
}

[su-hint~="bottom"]:hover:after {
    transform: translateX(-50%) translateY(8px);
}

[su-hint~="right"]:after {
    margin-bottom: -14px;
    left: 100%;
    bottom: 50%;
}

[su-hint~="right"]:hover:after {
    transform: translateX(8px);
}

github上早有強(qiáng)大的自定義tooltip了，如果你愿意犧牲before after 2個(gè)偽元素實(shí)現(xiàn)tooltip的氣泡和箭頭，建議使用hint.css