1 <!DOCTYPE> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <style> 6 @supports(display: none){ 7 dot{ 8 display: inline-block; 9 width:3ch; 10 text-indent:-1ch; 11 vertical-align: bottom; 12 overflow:hidden; 13 animation: dot 2s infinite step-start both; 14 font-family: Consolas,Monaco,monospace; 15 } 16 } 17 18 @keyframes dot{ 19 33%{text-indent:0;} 20 66%{text-indent:-2ch;} 21 } 22 </style> 23 </head> 24 <body> 25 <a href="javascript:;" class="grebtn">訂單提交中<dot>...</dot></a> 26 </body> 27 </html>
上述為@supports、等寬字體、ch相對單位的綜合實例。
以下為詳細介紹：
一、CSS3條件判斷
這里主要是@supports的用法起源：根據不同瀏覽器對CSS的支持，定義不同的樣式。即，漸進增強式設計。通俗的說就是，讓用高級瀏覽器的用戶體驗到更好的效果。
實例1：基本用法
@supports (display:flex) { section { display: flex } ... }
這段代碼的意思是：如果瀏覽器支持“display：flex”，則給section設置“display：flex”樣式。
實例2：not邏輯聲明
@supports not (display: flex){ #container div{float:left;} }
這段代碼的意思是：如果瀏覽器不支持“display：flex”，則給#container設置“float:left”樣式。
實例3：and邏輯聲明
@supports (column-width: 20rem) and (column-span: all) { div { column-width: 20rem } div h2 { column-span: all } div h2 + p { margin-top: 0; } ... }
上面的代碼表示的是，如果瀏覽器同時支持“column-width:20rem”和“column-span:all”兩個條件，瀏覽器將會調用其中的樣式。
實例4：or邏輯聲明
@supports (display: -webkit-flex) or (display: -moz-flex) or (display: flex) { section { display: -webkit-flex; display: -moz-flex; display: flex; … } }
上面的代碼表示的是，如果瀏覽器支持3個條件中的任意一種，瀏覽器將會調用其中的樣式。
在js中的寫法：
var supportsFlexAndAppearance = window.CSS.supports("(display: flex) and (-webkit-appearance: caret)");
簡單介紹至此，回到開篇代碼：如果瀏覽器支持“display：none”,則給<dot>(自定義標簽)添加對應樣式，很好理解
二、等寬字體
一般而言，東亞字體都是等寬，但是英文不一定等寬，取決於具體的字體。
為了易讀性，一般顯示源代碼都會用等寬字體。下面舉例說明：
iiiii
MMMMM
胖瘦很明顯有木有（Comic Sans MS）
iiiii
mmmmm
一般寬度，這就是等寬字體，更加規則好看（Courier New）
常見的等寬字體：Consolas,Monaco,monospace
三、相對單位ch
這是一個很少見的單位，了解一下也無妨
1ch表示一個0字符的寬度，所以000000所占據的寬度就是6ch