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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。