CSS3新增了哪些玩意儿?
CSS3 是层叠样式表(Cascading Style Sheets)语言的最新版本,旨在扩展CSS2.1。
从形式上来说,CSS3 标准自身已经不存在了。每个模块都被独立的标准化,现在标准 CSS 包括了修订后的 CSS2.1 以及完整模块对它的扩充,模块的 level(级别)数并不一致。
稳定模块
CSS Color Module Level 3
这个模块增加了opacity
属性,以及使用hsl()
、hsla()
、rgb()
和rgba()
函数来创建颜色值。并将currentColor
关键字定义为合法的颜色值。
transparent
颜色是一个透明颜色,它是rgba(0, 0, 0, 0)
的别名。
Selectors Level 3
子串匹配选择器
- E[attribute^=“value”]
- E[attribute$=“value”]
- E[attribute*=“value”]
兄弟选择器
- E~F
新的伪类:
:target
:enabled
和:disabled
:checked
:indeterminate
:root
:nth-child
和:nth-last-child
:nth-of-type
和:nth-last-of-type
:last-child
:first-of-type
和:last-of-type
:only-child
和:only-of-type
:empty
和:not
伪元素:
::after
::before
::first-letter
::first-line
CSS Namespaces Module
增加@namespace规则
Media Queries
扩充媒体类型,允许使用only
、screen
和color
,HTML的某些元素也可以定义media属性
CSS Style Attributes
正式定义了style全局属性内容的语法。
CSS Backgrounds and Borders Module Level 3
背景支持各种类型的图片,并不局限于之前定义的url()
。
支持`multiple background images(多背景图片)。
background-repeat
属性的space
和round
值,还有支持两个值的语法。
background-attachment
的local
值。
CSS属性:
background-origin
background-size
background-clip
支持带弧度的border corner(边框角)CSS属性:
border-radius
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
支持边框使用图片:
border-image
border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat
支持元素的阴影
box-shadow
CSS Multi-column Layout Module
增加简单的多列布局
columns
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
break-after
break-before
break-inside
CSS Speech Module
定义 speech 媒体类型,一个aural formatting model(听觉格式化模型) 和多个用于speech-rendering(语音呈现) 用户代理的属性。
CSS Images Module Level 3
定义<image>
数据类型。
扩充url()
语法使其支持使用media fragments(媒体片段) 来切割图片。
增加:
-
<resolution>
数据类型的dppx
单位。 -
image()
函数,作为url()
的更具灵活性的替代版本,使用 url 来定义图片。有风险:由于缺少足够的浏览器支持,image()
函数的标准化可能会被推迟到该模块的下一个迭代中。 -
支持
linear-gradient()
,repeating-linear-gradient()
,radial-gradient()
和repeating-radial-gradient()
。 -
使用
object-fit
属性来定义一个“替换元素”的“内容(Content)”如何适应包含这个“替换元素”的盒子。有风险: 由于缺少足够的浏览器支持,object-fit
及其属性的标准化可能会被推迟到该模块的下一个迭代中。 -
使用
image-resolution
和image-orientation
属性来覆盖一个外部图片的分辨率和方向。有风险:由于缺少足够的浏览器支持,可能会被推迟到该模块的下一个迭代中。
CSS Values and Units Module Level 3
使initial
和inherit
关键字能够被用于任意CSS属性中。正式定义了CSS 2.1中的CSS数据类型,之前是隐晦的由它们的语法记号和文本来定义。
增加:
- 新的相对字体长度单位:
rem
和ch
。 - 相对视口长度单位:
vw
,vh
,vmax
和vmin
。 - 精确了绝对长度单位的实际尺寸,此前它们并非是绝对值,而是使用了reference pixel(参考像素)来定义。
- 定义
<angle>
,<time>
,<frequency>
,<resolution>
。 - 规范
<color>
,<image>
和<position>
定义的值。 calc()
,attr()
和toggle()
函数符号的定义。 有风险:由于缺少足够的浏览器支持,标准化可能会被推迟到该模块的下一个迭代中。
CSS Flexible Box Layout Module
为display
属性增加了flexbox layout(伸缩盒布局)及多个新CSS属性来控制它:
flex
flex-align
flex-direction
flex-flow
flex-item-align
flex-line-pack
flex-order
flex-pack
flex-wrap
CSS Conditional Rules Module Level 3
增加了对样式表部分内容进行条件处理的功能,若浏览器或文档的能力符合条件,则该部分的样式生效。它主要是允许了在@media
中嵌套@
规则,增加了一个新的@
规则, @supports
和一个新的DOM方法CSS.supports()
。
CSS Text Decoration Module Level 3
扩展:
text-decoration
属性作为 text-decoration-line
,text-decoration-color
, 和text-decoration-style
属性的简写形式。并增加了 text-decoration-skip
,和 text-underline-position
属性。
增加:
text-emphasis
text-emphasis-style
text-emphasis-color
text-emphasis-position
text-shadow
明确:
装饰的绘制顺序。
有风险:由于缺少足够的浏览器支持,text-decoration-skip
行定位规则和在相同的基础文本上放置重点符号和ruby
的能力的标准化可能会被推迟到该模块的下一个迭代中。
CSS Fonts Module Level 3
修正 CSS2.1 字体匹配算法,以便接近于真实的实现。
增加:
通过@font-face
来支持可下载字体。
借助font-kerning
属性来控制contextual inter-glyph spacing(上下文 inter-glyph 间距)。
借助font-language-override
属性来选择语言指定的字形。
借助font-feature-settings
属性来选择带有OpenType 特性的字形。
借助font-size-adjust
属性来控制当使用fallback fonts(备用字体) 时的宽高比。
选择替代字体,使用font-stretch
,font-variant-alternates
,font-variant-caps
,font-variant-east-asian
,font-variant-ligatures
,font-variant-numeric
,和font-variant-position
属性。还扩展了相关的font-variant
速记属性,并引入了@font-features-values
规则。
当这些字体在font-synthesis
属性中找不到时自动生成斜体或粗体的控制。
CSS Cascading and Inheritance Level 3
增加:
-
属性的初始值和未设定值。
-
all
属性。 -
域机制。
明确:
与媒体依赖的@import
声明交互与样式表的加载要求。
CSS Writing Modes Module Level 3
定义了水平和垂直脚本书写模式,概况了direction
和 unicode-bidi
属性是如何与新text-orientation
属性相互之间产生影响的,并在需要它们的地方扩展它们。
CSS Shapes Module Level 1
定义了可用于浮动(float)的几何图形。这些图形描述了行内元素可被包裹的区域,而非包裹其边界框(bounding box)。
CSS Masking Module Level 1
定义了部分或完整隐藏可视元素的一种方式。其描述了如何使用另一图形元素或图片作为亮度遮罩(luminance)或透明度遮罩(alpha)。
处于改善阶段的模块
处于改善阶段(refining phase)的规范已基本稳定。虽然还有可能被修改,但不会和当前的实现产生冲突;其主要定义在个别特殊情况的行为。
Web Animations
CSS Counter Styles Level 3
Compositing and Blending Level 1
CSS Syntax Level 3
澄清如何确定字符集; 分析和标记化算法的最小变化。
CSS Will Change Module Level 1
CSS Transitions
支持定义属性值间的transitions effects(过渡效果)
transition
transition-delay
transition-duration
transition-property
transition-timing-function
CSS Animations
允许定义动画效果
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
@keyframes
CSS Transforms Level 1
增加:
支持适用于任何元素的bi-dimensional transforms(二维变形),使用transform
和transform-origin
属性。
支持的变形有:
matrix()
translate()
translateX()
translateY()
scale()
scaleX()
scaleY()
rotate()
skewX()
skewY()
支持适用于任何元素的tri-dimensional transforms(三维变形),使用transform-style
,perspective
, perspective-origin
,和backface-visibility
属性和扩展的transform
属性.
使用以下变形:
matrix3d()
translate3d()
translateZ()
scale3d()
scaleZ()
rotate3d()
rotateX()
rotateY()
rotateZ()
perspective()
注意:该规范是CSS 2D-Transforms
,CSS 3D-Transforms
和SVG transforms
合并的结果。
CSS Fragmentation Module Level 3
定义了网页的分割将如何实行,即分页、分栏,以及窗口和孤儿页面的处理。
增加:
通过box-decoration-break
属性定义一个盒(box)被在页、栏或行被分割时,诸如边框与背景颜色或图片等修饰行为的支持。
CSS Text Module Level 3
扩展:
-
text-transform
属性的值full-width
。 -
text-align
属性的值start
,end
,start end
,和match-parent
,为包含多个方向文本的文档提供良好支持。 -
text-align
属性的<string>
值来根据该字符对齐。对于数字的小数点对齐特别有用。 -
word-spacing
和letter-spacing
属性拥有范围限制,来控制两端对齐时的灵活性。
增加:
-
text-space-collapse
和tab-size
属性来控制空白该如何显示。 -
line-break
,word-break
,hyphens
,text-wrap
,overflow-wrap
,和text-align-last
属性来控制折行和单词边界。 -
text-justify
属性来控制两端对齐的行为,这是为了对更多语言类型增加支持。 -
text-indent
和hanging-punctuation
属性来控制 edge effect(边缘影响)。
一部分出现在早期CSS Text Level 3草案中的特性被推迟到了该规范的下个迭代中。
CSS Custom Properties for Cascading Variables Module Level 1
定义了允许在CSS中定义变量的机制。
Compositing and Blending Level 1
处于修正阶段的模块
处于修正阶段的模块没处于改善阶段的模块稳定。它们的语法一般还需要详细审查,可能还会有些大变化,还有可能不兼容之前的规范。替代语法已通过测试并被广泛实践。
CSS Basic User Interface Module Level 3
增加:
使用box-sizing
属性来转换盒模型的能力。
处于风险中:由于缺少足够的浏览器支持,标准化可能会被推迟到该模块的下一个迭代中。
根据表单内容来设置样式
:indeterminate
:default
:valid
:invalid
:in-range
:out-of-range
:required
:optional
:read-only
:read-write
::value
::choices
::repeat-item
::repeat-index
处于风险中:由于缺少足够的浏览器支持 ,伪元素 ::value
,::choices
,::repeat-item
,和 ::repeat-index
的标准化可能会被推迟到该模块的下一个迭代中。
支持图标,通过icon
属性定义,同时在content
属性中设置新图标的值。
处于风险中:由于缺少足够的浏览器支持,标准化可能会被推迟到CSS 4中。
支持outline-offset
属性,这样可以对outline
的位置做更多的控制。
支持resize
属性,Web开发者可以控制元素是否能够以及如何调整大小。
支持text-overflow
属性,定义文本溢出的行为。
处于风险中:由于缺少足够的浏览器支持,该属性的双值语法也和<string>
值一样,它们的标准化可能会被推迟到该模块的下一个迭代中。
定义鼠标hotspot(热点)的功能,扩展了cursor
属性,增加了新值:
none
context-menu
cell
vertical-text
alias
copy
no-drop
not-allowed
nesw-resize
nwse-resize
col-resize
row-resize
all-scroll
zoom-in
zoom-out
指定sequential navigation order(连续导航顺序,即 tabbing order(移动顺序))的功能
nav-index
nav-up
nav-right
nav-left
nav-down
处于风险中:由于缺少足够的浏览器支持,导航属性的标准化可能会被推迟到该模块的下一个迭代中。
控制IME editor(输入法编辑器)使用的功能,使ime-mode
属性。
处于风险中:由于缺少足够的浏览器支持标准化可能会被推迟到该模块的下一个迭代中。
CSS Grid Layout
添加了 grid 布局给 CSS display 属性,以及一些新的属性来控制它:
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-position
grid-auto-rows
grid-column
grid-column-start
grid-column-end
grid-row
grid-row-start
grid-row-end
grid-template
grid-template-areas
grid-template-rows
grid-template-columns
CSS Box Alignment Module Level 3
CSS Paged Media Module Level 3
CSS Object Model (CSSOM) View Module
Selectors Level 4
处于探索阶段的模块
CSS Images Module Level 4
扩展:
image()
函数标记来描述图片(rtl 或 ltr)的方向性,允许bidi-sensitive(双向敏感)的图片。
为image-orientation
属性增加关键字from-image
,允许使用存储在图片中的 EXIF 数据。
增加:
image-set()
函数标记,允许定义不同分辨率下的对应图片实现依据分辨率选择图片。element()
函数标记, 允许将页面的部分当作图片来使用。cross-fade()
函数标记, 允许在两张图片之间过渡时使用中间图片,并定义了两张图片间的 interpolation(插值)。conic-gradient()
和repeating-conic-gradient()
函数标记,描述了一种新的渐变类型。image-rendering
属性允许定义如何处理改变图片大小的行为。
CSS Device Adaptation
增加一个新的@规则,@viewport
,允许为视口指定尺寸(size)、缩放因子(zoom factor)和方向(orientation),这些将作为 initial containing block(初始包含块) 的基础。
CSS Generated Content for Paged Media Module
增加调整打印版本的功能,允许控制页头,页脚,同时引用表索引或表内容。
Unknow
扩展浮动机制,在任何定位方案中生成一个exclusion regions(排斥区域)。增加形状标记,其中的内容必须流动。
CSS Lists Module Level 3
扩展了列表计数机制, 这样可以为列表标记设置样式,并使 Web 开发者定义新的列表计数方案。
CSS Regions Module Level 1
定义了一种可使内容流动至数个非连续空间的机制,称为区域(Regions)。
Filter Effects Module Level 1
CSS Grid Layout
CSS Intrinsic & Extrinsic Sizing Module Level 3
CSS Line Grid Module Level 1
CSS Positioned Layout Module Level 3
CSS Ruby Layout Module Level 1
CSS Object Model (CSSOM)
CSS Overflow Module Level 3
CSS Font Loading Module Level 3
CSS Display Module Level 3
CSS Scoping Module Level 1
Media Queries Level 4
Non-element Selectors Module Level 1
Geometry Interfaces Module Level 1
{ SpecName(“CSS3 Inline”, “”, “”) }
在重写的模块
以下模块已经过时,需要重写。其语法仍然在审查,可能会以不兼容的方式发展出很多。替代语法已通过测试并被广泛实践。
CSS Basic Box Model
CSS Generated Content Module Level 3
本文来源于MDN。