<!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

CSS 条件判断、等宽字体以及ch单位的更多相关文章

  1. shell编程学习笔记（八）：Shell中的if条件判断

    编程语言中都有条件判断,shell编程也不例外,下面我们来看一下shell中应该怎么使用if条件判断 以下蓝色字体部分为Linux命令,红色字体的内容为输出的内容: # cd /opt/scripts ...

  2. ch 与等宽字体

    难题 有的时候,特别想通过字符来判断元素的长度,比如: 多行文本溢出时,文字变省略号 文字一个个的显示 效果分别如下: 第一种情况下,如果可以通过字符的数量判断长度是否溢出,从而把最后几个字符替换成省 ...

  3. 等宽字体延伸到的 ch 长度单位和动画 animation-timing-function

    新知识点get! 等宽字体(monospaced font)是指字符宽度相同的电脑字体.与此相对,字符宽度不尽相同的电脑字体称为比例字体(proportional font). 东亚字体基本都是等宽字 ...

  4. CSS3条件判断——@supports/window.CSS.supports()（转）

    CSS3条件判断,听起来"不明觉厉",如果你对CSS稍为熟悉一点的话,你会发现CSS中的"@media"就是条件判断之一.是的,在CSS3的条件判断规范文档中包 ...

  5. css3条件判断_@supports的用法 以及 Window.CSS.supports()的使用

    为了判断浏览器是否支持css3的一些新属性样式,当不兼容该样式的时候,我们可以更优雅的降级处理.这就需要使用到css3的条件判断功能:在css中支持@supports标记.或者在js中使用CSS.su ...

  6. css3条件判断_@supports的用法/Window.CSS.supports()的使用

    为了判断浏览器是否支持css3的一些新属性样式,当不兼容该样式的时候,我们可以更优雅的降级处理.这就需要使用到css3的条件判断功能:在css中支持@supports标记.或者在js中使用CSS.su ...

  7. css与jquery、图标字体

    *)还能这样选择 header #search input[type="text"] *)按钮常用颜色:#008cBA(字母大小写没有区别) *)清除浮动后,text-align没 ...

  8. wordpress 函数、条件判断以及文件的总结

    WordPress基本模板文件 一套完整的WordPress模板应至少具有如下文件: style.css : CSS(样式表)文件 index.php : 主页模板 archive.php : Arc ...

  9. python Django教程 之模板渲染、循环、条件判断、常用的标签、过滤器

    python3.5 manage.py runserver python Django教程 之模板渲染.循环.条件判断.常用的标签.过滤器 一.Django模板渲染模板 1. 创建一个 zqxt_tm ...

随机推荐

  1. 小米Note3 MIUI9可以用的XPosed框架

    资源来自论坛里的:http://www.miui.com/thread-6449305-1-1.html 首先需要刷入TWRP,资源在这个帖子里:http://www.miui.com/thread- ...

  2. react 入坑笔记（一）

    一些概念: 1.组件:概念等同于 vue 中的组件,字面意思,不过 vue 中组件是以 .vue 结尾,通过 vue-loader 编译成 js,而 react 组件就是 js. 2.jsx:js 语 ...

  3. iframe与src一个性质 当js中修改了src的值后会重新向后台发送请求 ；为了防止浏览器缓存问题 当我们修改src时候 需要添加不同的值 这样浏览器就不会从缓存中取值 而是重新发起后台请求

  4. 微信小程序——部署云函数【三】

    部署login云函数 不部署的话,点击获取openid会报错,报错如下 解决方案呢,很明显的已经告诉我们了 搭建云环境 开通 同意协议 新建环境 每个小程序账号可以创建两个免费环境 确定 部署后再次请 ...

  5. 【XSY2720】区间第k小 整体二分 可持久化线段树

    题目描述 给你你个序列,每次求区间第\(k\)小的数. 本题中,如果一个数在询问区间中出现了超过\(w\)次,那么就把这个数视为\(n\). 强制在线. \(n\leq 100000,a_i<n ...

  6. jsp配置

    jsp.server.xml <Host name="localhost" appBase="webapps" unpackWARs="true ...

  7. Django进阶-auth集成认证模块

    auth认证模块是Django内置集成的一个用户认证模块. auth认证模块方法 方法 释义 auth.authenticate() 认证校验 auth.login(request,user) 封装认 ...

  8. 实验八 应用层协议Ⅱ-FTP协议分析

    实验八 应用层协议Ⅱ-FTP协议分析 一.实验目的 1．掌握FTP协议的实现原理. 2．了解控制通道和数据通道. 二.实验内容 用WareShark追踪ftp连接. 1．三次握手 2．ftp服务器回发 ...

  9. POJ 1845 Sumdiv（逆元）

    题目链接:Sumdiv 题意:给定两个自然数A,B,定义S为A^B所有的自然因子的和,求出S mod 9901的值. 题解:了解下以下知识点   1.整数的唯一分解定理 任意正整数都有且只有唯一的方式 ...

  10. luogu1397 [NOI2013]矩阵游戏 (等比数列求和)

    一个比较显然的等比数列求和,但有一点问题就是n和m巨大.. 考虑到他们是在幂次上出现,所以可以模上P-1(费马小定理) 但是a或c等于1的时候,不能用等比数列求和公式,这时候就要乘n和m,又要变成模P ...