• 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;
     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

  • 相关阅读:
    tomcat 闪退处理
    MVC的各个部分都有那些技术来实现?如何实现?
    jsp和servlet的区别、共同点、各自应用的范围?
    如何从CDN加载jQuery?
    window.onload()函数和jQuery中的document.ready()有什么区别?
    JQuery有几种选择器?
    jQuery 库中的 $() 是什么?
    JS 中 == 和 === 区别是什么?
    如何在JavaScript中每x秒调用一个函数
    undefined,null 和 undeclared 有什么区别?
  • 原文地址:https://www.cnblogs.com/dll-ft/p/5707976.html
Copyright © 2020-2023  润新知