首页 > 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 平台全支持。

主流浏览器对CSS3属性的支持列表
图1:CSS3 属性兼容列表

CSS3 选择器支持情况如图 2 所示。除了 IE 家族和 Firefox3,其他几乎全部支持,Chrome、Safari、Firefox 3.6、Opera 10.5 最好。

主流浏览器对CSS3选择器的支持列表
图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样式下一页 >