当有人看到这文章之后我有一下几点建议
1.我建议你去学webpack学会引入插件自动添加css前缀。
2.ie8以下不要去考虑了,因为我在一家中小型企业上班一共7000多人。我差不多服务了3000-4000人,移动端使用Flex布局遇到最低安卓版本5.x/ie10浏览器。我服务于公司内部,所以PC浏览器大多统一谷歌。而我的自己的博客项目使用webpack构建,所以ie8以下不兼容。除非我修改布局使用的CSS其他样式例如Float进行排版
Css3 动画 (一共9属性,都不兼容 IE 9 以及更早版本的浏览器)
IE9我这里建议使用 属性来兼容,对于IE8,最好不要出现动画
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
请用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%。
@keyframes 不兼容 IE 9 以及更早版本的浏览器
animation 属性是一个简写属性,用于设置六个动画属性:
animation-name 规定需要绑定到选择器的 keyframe 名称。。
animation-duration 规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay:规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction:normal|alternate;规定是否应该轮流反向播放动画。
animation-play-state 规定动画是否正在运行或暂停。
animation-fill-mode 规定对象动画时间之外的状态。
Css3以及Css1 背景 (一共8属性 Css 5个 Css3 3个)
** 关于背景我认为还是不要去管IE9以下浏览器,尽管Css1大部分浏览器都支持,但是对于一些属性浏览器是不支持的,例如background-color:transparent 的属性:transparent 透明IE6-8不支持(rgba也是),当然你可以一起使用Opacity和filter:alpha(opacity= x) x可以采取的值是从0 - 100。较低的值,使得元素更加透明。来解决IE8以及跟早的浏览器。
background-image:一些渐变的属性是从IE10开始支持的。如果你们要去管理,那就要找代替方法去处理这些不兼容的属性。Css3 从IE9开始支持的。
你们还别说百度搜索都不兼容IE7以下.所以大家如果有需要可以查阅方式去解决如果兼容IE7以下浏览器**
background-color:
设置或检索对象的背景颜色。(transparent 默认。背景颜色为透明。)
background-position:
设置或检索对象的背景图像位置。必须先指定background-image属性。
background-repeat:
设置或检索对象的背景图像如何铺排填充。必须先指定background-image属性。
background-attachment:
设置或检索背景图像是随对象内容滚动还是固定的。必须先指定background-image属性。
background-image:
设置或检索对象的背景图像。IE8一下不支持设置多个URLvalue,同样Background也不允许其他属性IE8一下设置多个value
(Css3)background-clip:
指定对象的背景图像向外裁剪的区域。border-box|padding-box|content-box;
(Css3)background-size:
检索或设置对象的背景图像的尺寸大小。
(Css3)background-origin:
S设置或检索对象的背景图像计算background-position时的参考原点(位置)。border-box|padding-box|content-box;
(用于子元素相对父元素的位置)
background-Origin属性指定background-position属性应该是相对位置。
注意如果背景图像background-attachment是"固定",这个属性没有任何效果。