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- 20rem) and (column-span: all) { div { column-width: 20rem } div h2 { column-span: all } div h2 + p { margin-top: 0; } ... }
上面的代码表示的是,如果浏览器同时支持“column-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