<!DOCTYPE>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
@supports(display: none){
dot{
display: inline-block;
width:3ch;
text-indent:-1ch;
vertical-align: bottom;
overflow:hidden;
animation: dot 2s infinite step-start both;
font-family: Consolas,Monaco,monospace;
}
} @keyframes dot{
33%{text-indent:0;}
66%{text-indent:-2ch;}
}
</style>
</head>
<body>
<a href="javascript:;" class="grebtn">订单提交中<dot>...</dot></a>
</body>
</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:; }
...
}
上面的代码表示的是，如果浏览器同时支持“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