CSS条件判断、等宽字体以及ch单位
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;
好看的css代码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
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论