浏览器对CSS3的支持(CSS3浏览器兼容性一览表)

浏览器对CSS3的支持(CSS3浏览器兼容性一览表)

首页 > 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常用方法介绍

🌸 相关推荐

猎魔传说
28365备用网址

猎魔传说

📅 07-02 👀 8583
苹果手机看黄网会中毒吗
28365备用网址

苹果手机看黄网会中毒吗

📅 07-23 👀 8767
dnf刷图吃什么药
彩票365软件是什么样的

dnf刷图吃什么药

📅 07-12 👀 1920