CSS3新增了哪些玩意儿?

前端开发
2019年09月04日
0

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

扩充媒体类型,允许使用onlyscreencolor,HTML的某些元素也可以定义media属性

CSS Style Attributes

正式定义了style全局属性内容的语法。

CSS Backgrounds and Borders Module Level 3

背景支持各种类型的图片,并不局限于之前定义的url()

支持`multiple background images(多背景图片)。

background-repeat属性的spaceround值,还有支持两个值的语法。

background-attachmentlocal值。

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-resolutionimage-orientation属性来覆盖一个外部图片的分辨率和方向。有风险:由于缺少足够的浏览器支持,可能会被推迟到该模块的下一个迭代中。

CSS Values and Units Module Level 3

使initialinherit关键字能够被用于任意CSS属性中。正式定义了CSS 2.1中的CSS数据类型,之前是隐晦的由它们的语法记号和文本来定义。

增加:

  • 新的相对字体长度单位:remch
  • 相对视口长度单位:vwvhvmaxvmin
  • 精确了绝对长度单位的实际尺寸,此前它们并非是绝对值,而是使用了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-linetext-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-stretchfont-variant-alternatesfont-variant-capsfont-variant-east-asianfont-variant-ligaturesfont-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

定义了水平和垂直脚本书写模式,概况了directionunicode-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(二维变形),使用transformtransform-origin属性。

支持的变形有:

  • matrix()
  • translate()
  • translateX()
  • translateY()
  • scale()
  • scaleX()
  • scaleY()
  • rotate()
  • skewX()
  • skewY()

支持适用于任何元素的tri-dimensional transforms(三维变形),使用transform-styleperspectiveperspective-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属性的值startendstart end,和match-parent,为包含多个方向文本的文档提供良好支持。

  • text-align属性的<string>值来根据该字符对齐。对于数字的小数点对齐特别有用。

  • word-spacingletter-spacing属性拥有范围限制,来控制两端对齐时的灵活性。

增加:

  • text-space-collapsetab-size属性来控制空白该如何显示。

  • line-breakword-breakhyphenstext-wrapoverflow-wrap,和text-align-last 属性来控制折行和单词边界。

  • text-justify属性来控制两端对齐的行为,这是为了对更多语言类型增加支持。

  • text-indenthanging-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。