CSS.supports API介绍

CSS.supports API用于通过JavaScript检测当前浏览器是否支持某属性及某属性的值。

一、接口用法
1.supports(DOMString property, DOMString value), returns boolean
2.supports(DOMString conditionText), returns boolean

第一种方法接收2个参数,第一个参数是属性的名称(如display、width、margin等);第二个参数是属性的值(如inline-block、100px、-10px等)
第二种方法接收1个参数,为条件字符串,支持or和and运算符,如”(display:inline-block)”、”(width: 100px) or (margin: -10px)”
注意:必须使用括号将每个条件包裹起来,即使只有一个条件

二、规范说明
当supports()方法通过两个参数property和value调用时,如果property是客户端支持的CSS属性名字面量,并且value可以正确的解析为对应属性支持的值,必须返回true。字面量匹配意思是不会对CSS进行处理,前后的空格不会被去除,所以如果有前后空格会导致方法返回false(例如下面的调用会返回false,因为width前面多了一个空格:CSS.supports(‘ width’, ‘100px’))。

当通过单独的一个条件字符串参数进行调用,如果条件字符串能够解析计算为一个支持的属性和值,则返回true;否则返回false。

三、其他说明
1.属性值和属性名不区分大小写
2.如果属性名包含连字符“-”,直接写原始值即可,不需要转换为驼峰方式

四、示例

CSS.supports('width', '-10px');//false,width不能小于0
CSS.supports('height', '50');//false,height需要有单位
CSS.supports('position', 'sticky');//false,也可能为true,测试浏览器不支持sticky
CSS.supports('Z-INDEX', '50');//true,不区分大小写
CSS.supports(' z-index', '50');//false,属性名前面不应该有空格
CSS.supports('z-index', '  50  ');//true,属性值前后可以有空格
CSS.supports('display:none');//false,没有用括号,应为CSS.supports('(display:none)')
CSS.supports('(    display  :  none  )');//true,这种写法前后可以有空格
CSS.supports('(display:none) and (width:-10px)');//false,第二个条件不支持所以整体为false

五、兼容性
IE:不支持
Edge:支持
Firefox:23+
Chrome:28+
Safari:9+
Opera:15+
iOS Safari:9.2+
Android:4.4+

CSS3动画事件

animationstart、animationend以及transitionend分别用于监听css3的关键帧动画的开始、结束以及css3过渡结束事件。

本文Demo:https://www.lyz810.com/demo/cssAnimationEvent/index.html

一、animationstart和animationend事件
animationstart事件在Animation动画开始时触发,对于低版本的webkit内核浏览器使用webkitAnimationStart事件
animationend事件在Animation动画停止时触发,对于低版本的webkit内核浏览器使用webkitAnimationEnd事件
用法示例:

document.querySelector('#test').addEventListener('animationstart', function(){
  console.log('动画开始');
});
document.querySelector('#test').addEventListener('animationend', function(){
  console.log('动画结束');
});

二、animationiteration事件
animationiteration事件会在Animation动画循环播放时触发,主要用于infinite类型的动画,会在每次循环播放完毕时触发。
无限循环的动画会触发animationstart、animationiteration两个事件。
对于低版本的webkit内核浏览器使用webkitAnimationIteration事件。
用法示例:

css:
@keyframes ani{
  from{margin-left: 0;}
  to{margin-left: 300px;}
}
#test{animation:ani 3s infinite;}

js:
document.querySelector('#test').addEventListener('animationiteration', function(){
  console.log('动画播放循环一次');
});

三、transitionend事件
transitionend事件在transition动画结束后触发。
用法示例:

document.querySelector('#test').addEventListener('transitionend', function(){
  console.log('过渡动画完毕');
});

ol自定义序号样式的方法

ol为有序列表元素,它的默认样式在前面会自动添加序号如1.、2.、3.等,本文介绍如何通过css及html5新增属性改变需要的样式以及编号规则等。

一、编号倒序(HTML5新增)
reversed属性可以指定编号为倒序:

  1. 第一项
  2. 第二项
  3. 第三项
  4. 第四项

二、指定编号起始值(HTML5新增)
start属性可以指定编号的初始值:

  1. 第一项
  2. 第二项
  3. 第三项
  4. 第四项

三、指定编号位置(内、外)
css属性list-style-position:inside;可以指定编号的位置,下面的列表的编号为inside(默认为outside),可以与上面两个例子对比一下,对齐方式有所不同。

  1. 第一项
  2. 第二项
  3. 第三项
  4. 第四项

四、自定义编号的值

<style>
ol.example{counter-reset: num;}
ol.example li{counter-increment: num; list-style:none;}
ol.example li::before{content: '第' counter(num) '条:';}
</style>

五、自定义编号增量

<style>
ol.example{counter-reset: num;}
ol.example li{counter-increment: num 2; list-style:none;}
ol.example li::before{content: '第' counter(num) '条:';}
</style>

六、自定义编号初始值
下面的例子中example的第一个li为12,后面依次是14、16、18,counter-reset和counter-increment两个属性的第二个值也可以为负值

counter-reset属性第二个值的默认值为0,表示初始值为0;counter-increment属性第二个值的默认值为1,表示增量为1。

<style>
ol.example{counter-reset: num 10;}
ol.example li{counter-increment: num 2; list-style:none;}
ol.example li::before{content: '第' counter(num) '条:';}
</style>