首页 > CSS教程
阅读:9,901
浏览器对CSS3的支持(CSS3浏览器兼容性一览表)
< 上一页CSS3的优势
CSS样式下一页 >
CSS3 带来众多全新的设计体验,但有一个问题值得考虑:浏览器对 CSS3 特性的兼容情况如何?
因为页面最终离不开用浏览器来渲染,并不是所有浏览器都完全支持 CSS3 的特性。有时花时间写的效果只能在特定的浏览器下有效,这意味着只有部分用户才能欣赏到,这样的工作变得没有什么意义。例如,使用 CSS3 制作背景仅在 Webkit 内核的浏览器下有效果。
想知道用户能够体验到哪些 CSS3的 新特性,必须了解当前浏览器对 CSS3 特性的支持程度如何。
幸运的是,CSS3 特性大部分都已经有了很好的浏览器支持度。各主流浏览器对 CSS3 的支持越来越完善,曾经让多少前端开发人员心碎的 IE 也开始挺进 CSS3 标准行列。
当然,即使 CSS3 标准制定完成,现代浏览器要普及到大部分用户也是一个相当漫长的过程。如果现在就要使用 CSS3 来美化站点,有必要对各大主流浏览器对其新技术的支持情况有一个全面的了解。
本节分别在 Mac 和 Windows 两个平台介绍 Chrome、Firefox、Safari、Opera 和 IE 五大主流浏览器对 CSS3 新特性和 CSS3 选择器的支持情况。
CSS3 属性支持情况如图 1 所示。可以看出,完全支持 CSS3 属性的浏览器有 Chrome 和 Safari,而且不管是 Mac 平台还是 Windows 平台全支持。
图1:CSS3 属性兼容列表
CSS3 选择器支持情况如图 2 所示。除了 IE 家族和 Firefox3,其他几乎全部支持,Chrome、Safari、Firefox 3.6、Opera 10.5 最好。
图2:CSS3 选择器兼容列表
各主流浏览器都定义了私有属性,以便让用户体验 CSS3 的新特性。例如,
Webkit 类型浏览器(如 Safari、Chrome)的私有属性是以-webkit-前缀开始,
Gecko 类型的浏览器(如 Firefox)的私有属性是以-moz-前缀开始,
Konqueror 类型的浏览器的私有属性是以-khtml-前缀开始,
Opera 浏览器的私有属性是以-o-前缀开始,
而 Internet Explorer 浏览器的私有属性是以-ms-前缀开始(目前只有 IE 8+ 支持-ms-前缀)。
附录:主流浏览器对CSS属性支持的详细列表
属性
IE
Firefox
Chrome
Safari
Opera
alignment-adjust
alignment-baseline
@keyframes
10
16
12.1
animation
10
16
12.1
animation-name
10
16
12.1
animation-duration
10
16
12.1
animation-timing-function
10
16
12.1
animation-delay
10
16
12.1
animation-iteration-count
10
16
12.1
animation-direction
10
16
12.1
animation-play-state
10
16
12.1
appearance
3
backface-visibility
10
background-clip
9
4
4
5
10.5
background-origin
9
4
4
5
10.5
background-size
9
4
4
5
10.5
baseline-shift
bookmark-label
bookmark-level
bookmark-target
border-bottom-left-radius
9
4
5
5
10.5
border-bottom-right-radius
9
4
5
5
10.5
border-image
15
16
6
11
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-radius
9
4
5
5
10.5
border-top-left-radius
9
4
5
5
10.5
border-top-right-radius
9
4
5
5
10.5
box-decoration-break
box-align
box-direction
box-flex
12.1
box-flex-group
box-lines
box-ordinal-group
box-orient
box-pack
box-shadow
9
4
10
5.1
10.5
box-sizing
8
10
5.1
9.5
color-profile
column-fill
column-gap
10
11.1
column-rule
10
11.1
column-rule-color
10
11.1
column-rule-style
10
11.1
column-rule-width
10
11.1
column-span
10
11.1
column-width
10
11.1
columns
10
11.1
column-count
10
11.1
crop
dominant-baseline
drop-initial-after-adjust
drop-initial-after-align
drop-initial-before-adjust
drop-initial-before-align
drop-initial-size
drop-initial-value
fit
fit-position
float-offset
@font-face
9
3.6
4
3
10
font-size-adjust
2
font-stretch
grid-columns
grid-rows
hanging-punctuation
hyphenate-after
hyphenate-before
hyphenate-characters
hyphenate-lines
hyphenate-resource
hyphens
icon
image-orientation
image-resolution
inline-box-align
line-stacking
line-stacking-ruby
line-stacking-shift
line-stacking-strategy
mark
mark-after
mark-before
marks
marquee-direction
marquee-play-count
marquee-speed
marquee-style
move-to
nav-down
11.5
nav-index
11.5
nav-left
11.5
nav-right
11.5
nav-up
11.5
opacity
9
2
4
3.1
9
outline-offset
11
overflow-style
overflow-x
9
2
overflow-y
9
2
page
page-policy
perspective
5
perspective-origin
punctuation-trim
rendering-intent
resize
5
4
4
rest
rest-after
rest-before
rotation
rotation-point
ruby-align
ruby-overhang
ruby-position
ruby-span
size
string-set
target
target-name
target-new
target-position
text-align-last
text-emphasis
text-height
text-justify
5
text-outline
text-overflow
6
7
4
3.1
11
text-shadow
10
3.5
4
4
9.5
text-wrap
transform
10
16
12.1
transform-origin
10
16
12.1
transform-style
5
transition
10
16
26
12.1
transition-property
10
16
26
12.1
transition-duration
10
16
26
12.1
transition-timing-function
10
16
26
12.1
transition-delay
10
16
26
12.1
word-break
5.5
15
4
3
word-wrap
5
3.5
4
3.1
10.5
对于某些属性,你会看到浏览器的图标和一个数字,数字表示是第一次支持该属性的浏览器版本。
< 上一页CSS3的优势
CSS样式下一页 >
所有教程
socket
Python基础教程
C#教程
MySQL函数
MySQL
C语言入门
C语言专题
C语言编译器
C语言编程实例
GCC编译器
数据结构
C语言项目案例
C++教程
OpenCV
Qt教程
Unity 3D教程
UE4
STL
Redis
Android教程
JavaScript
PHP
Mybatis
Spring Cloud
Maven
vi命令
Spring Boot
Spring MVC
Hibernate
Linux
Linux命令
Shell脚本
Java教程
设计模式
Spring
Servlet
Struts2
Java Swing
JSP教程
CSS教程
TensorFlow
区块链
Go语言教程
Docker
编程笔记
资源下载
关于我们
汇编语言
大数据
云计算
VIP视频
优秀文章
OpenCV下载和安装(包含所有平台)
C#获取字符串长度(string.Length)
什么是生成树,生成树(生成森林)详解
云计算是什么?它有哪些形式?
汇编语言FPU舍入:计算浮点数的精确结果
C语言frexp()函数:提取浮点数的尾数和指数部分
在Spring中使用Redis
JSP jsp:setProperty:属性值设定标签
JSP Request.getServerPath()方法:获取客户端所请求页面的文件路径
String API常用方法介绍