最全的 CSS2.1 和 CSS3+ 的区别一览
来源:互联网 发布:mysql创建用户命令 编辑:程序博客网 时间:2024/04/30 12:59
大家都知道我们习惯性称作的 CSS3 对于 CSS2.1 有很多的修改和补充。抛开浏览器的兼容性问题,这篇文章把所有的变化整理到一篇文章中便于学习和查阅。尽管我尽量确保收录了所有的新特性,但是不能保证没有遗漏,欢迎大家留言。
新属性
下面是 CSS3 新增的 CSS3 属性列表。
animation
(and eight associated longhand properties)background-clip
background-origin
background-size
border-radius
(and four associated longhand properties)border-image
(and six associated longhand properties)box-decoration-break
box-shadow
box-sizing
columns
(and thirteen associated multi-column properties)clear-after
flex
(and eleven associated flexbox properties)font-stretch
font-size-adjust
font-synthesis
font-kerning
font-variant-caps
hanging-punctuation
hyphens
icon
image-resolution
image-orientation
line-break
object-fit
object-position
opacity
outline-offset
overflow-wrap
/word-wrap
backface-visibility
perspective
perspective-origin
pointer-events
(for HTML)resize
tab-size
text-align-last
text-decoration-line
text-decoration-skip
text-decoration-position
text-decoration-style
text-emphasis
(and three associated properties)text-justify
text-orientation
text-overflow
transform
transform-style
text-shadow
transition
(and four associated longhand properties)word-break
word-spacing
writing-mode
新的值
在 CSS3 中为 CSS2.1 新增的取值,下面是每个属性新值的列表。
- Value “local” for the
background-attachment
property - Value "rgba()" for any property that accepts a color value
- Value "hsl()" for any property that accepts a color value
- Value "hsla()" for any property that accepts a color value
- Value "currentColor" for any property that accepts a color value
- Value "inset()" for the
clip
property - Value "linear-gradient()" for any property that accepts an image value
- Value "radial-gradient()" for any property that accepts an image value
- Value "repeating-linear-gradient()" for any property that accepts an image value
- Value "repeating-radial-gradient()" for any property that accepts an image value
- Value "image()" for any property that accepts an image value
- Multiple comma-separated images for any property that accepts an image value
- Multiple comma-separated background-related values to match multiple background image declarations
- Value "center" for the
position
property - Value "page" for the
position
property - Value "space" for the
background-repeat
property - Value "round" for the
background-repeat
property - 15 new values for the
cursor
property - Values "flex" and "inline-flex" for the
display
property - Values "all-small-caps", "petite-caps", "all-petite-caps", "titling-caps", and "unicase" for the
font-variant
property - Multiple, space-separated values for the
letter-spacing
property - New values for the
text-align
property, including "<string>", "match-parent", "start", "end", and "start end" text-decoration
is now a shorthand property- Keywords "hanging" and "each-line" declared along with length or percentage values for the
tfext-indent
property - Value "full-width" for the
text-transform
property rem
units for lengthscalc()
units for lengthstoggle()
units- Angle units (
deg
,grad
,rad
,turn
) - Time units (
s
,ms
)
新选择器
下面是 CSS3 中新增的选择器。
- Substring matching attribute selectors (
[att^=val]
,[att$=val]
,[att*=val]
) :target
pseudo-class- New pseudo-classes:
:enabled
,:disabled
,:checked
, and:indeterminate
:root
pseudo-class- New expression-based structural pseudo-classes:
:nth-child()
,:nth-last-child()
,:nth-of-type()
,:nth-last-of-type()
- Other new structural pseudo-classes:
:last-child
,:first-of-type
,:last-of-type
,:only-child
,:only-of-type
,:empty
- The negation pseudo-class
:not()
- Four pseudo-elements with double-colon syntax (
::first-line
,::first-letter
,::before
,::after
) - The following-sibling combinator (
p ~ img
) ::selection
pseudo-class (removed from the spec, but everyone uses it)
其它新特性
其它 CSS2.1 没有包含的特性。
@font-face
- Media Queries
- Keyframe animations using
@keyframes
- Conditional styles using
@supports
- Namespacing using
@namespace
- Regions
- Filters
仍在变化中的特性
上面的列表并不详尽,还有很多仍然在发展中的规范,并没有太多的浏览器支持,下面是这些新模块的列表。
- Counter Styles Level 3
- Device Adaptation
- Display Module Level 3
- Line Grid
- Mobile Text Size Adjustment
- CSS Variables
- Box Alignment
- The "all" property
- Exclusions and Shapes
- Generated Content for Paged Media
- Grid Layout
- Grid Template Layout
- Line Layout Module
- New features in Lists and Counters
- Overflow Module
- New features in Paged Media
- New features in CSS Sizing
- Media Queries Level 4
- Selectors Level 4
- ch units
- Viewport relative lengths
- New resolution units
- Compositing and Blending
- New features in CSS speech
- The unicode-range descriptor for
@font-face
- New features in CSS Images and Replaced Content
- CSS Masking
您可能感兴趣的相关文章
- 20个非常绚丽的 CSS3 特性应用演示
- 23个纯 CSS3 打造的精美LOGO图案
- 35个让人惊讶的 CSS3 动画效果演示
- 推荐12个漂亮的 CSS3 按钮实现方案
- 24款非常实用的 CSS3 工具终极收藏
本文链接:前端文摘:史上最全的 CSS2.1 和 CSS3+ 的区别一览
编译来源:梦想天空 ◆ 关注Web前端开发技术 ◆ 分享网页设计资源
作者:山边小溪
阅读全文
0 0
- 最全的 CSS2.1 和 CSS3+ 的区别一览
- css2 和 css3的区别
- html5和html4,css3和css2的区别
- css2和css3中长度单位px和em,rem的定义与区别
- 小强的HTML5移动开发之路(4)——CSS2和CSS3
- 小强的HTML5移动开发之路(4)——CSS2和CSS3
- 小强的HTML5移动开发之路(4)——CSS2和CSS3
- DIV + CSS3 和 html5 + CSS3的区别
- CSS3跟CSS2相比较,有哪些重大的变化
- CSS3及CSS2中易忘记的选择器记录
- Python2和Python3的重要区别一览
- HTML4+CSS2与HTML5+CSS3区别
- HTML4+CSS2与HTML5+CSS3区别
- HTML4+CSS2与HTML5+CSS3区别?
- css2的特性—:after 和:before
- CSS2.0中最常用的18条技巧
- CSS2.0中最常用的18条技巧
- CSS2.0中最常用的18条技巧
- 收藏一下地址
- 关于 python 的 IDE
- Redis单机版安装图文教程
- [leetcode]86. Partition List@Java解题报告
- python基础学习-集合数据类型
- 最全的 CSS2.1 和 CSS3+ 的区别一览
- VMware 安装 Ubuntu 详细步骤
- VS之VC++设置bin路径
- ##Angular
- Android中intent启动Activity中intent.setFlags()的作用
- lintcode:落单的数
- 从超级菜鸟变成Linux系统高手
- GitLab 升级 502 Error executing action `run` 'ruby_block[resource: /var/opt/gitlab/git-data/repositor
- C语言内存分配