CSS 条件判断、等宽字体以及ch单位

时间 2019-12-20

标签 css 条件判断等宽字体以及单位栏目 CSS 繁體版

原文原文链接

 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相对单位的综合实例。javascript

如下为详细介绍：html

1、CSS3条件判断java

这里主要是@supports的用法起源：根据不一样浏览器对CSS的支持，定义不一样的样式。即，渐进加强式设计。通俗的说就是，让用高级浏览器的用户体验到更好的效果。
web

实例1：基本用法浏览器

@supports (display:flex) {
  section { display: flex }
  ...
}

这段代码的意思是：若是浏览器支持“display：flex”，则给section设置“display：flex”样式。app

实例2：not逻辑声明字体

@supports not (display: flex){
  #container div{float:left;}
}

这段代码的意思是：若是浏览器不支持“display：flex”，则给#container设置“float:left”样式。flex

实例3：and逻辑声明spa

@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>(自定义标签)添加对应样式，很好理解

2、等宽字体

通常而言，东亚字体都是等宽，可是英文不必定等宽，取决于具体的字体。

为了易读性，通常显示源代码都会用等宽字体。下面举例说明：

iiiii

MMMMM

胖瘦很明显有木有（Comic Sans MS）

iiiii

mmmmm

通常宽度，这就是等宽字体，更加规则好看（Courier New）

常见的等宽字体：Consolas,Monaco,monospace

3、相对单位ch

这是一个不多见的单位，了解一下也无妨

1ch表示一个0字符的宽度，因此000000所占据的宽度就是6ch