Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

CSS3

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

CSS3 это последнее эволюционное изменение языка Cascading Style Sheets, и оно направлено на расширение CSS2.1. Оно привносит давно ожидаемые новшества, такие как закруглённые углы, тени, градиенты, переходы или анимация, а также новые макеты, такие как multi-columns, «резиновый» дизайн или сеточный макет. Экспериментальный функционал помечен специальными префиксами разработчика, и он не должен использоваться в производственной среде, либо должен использоваться с особой осторожностью, так как его синтаксис и поведение может быть изменено в будующем.

Модули и процесс стандартизации

CSS Level 2 потребовалось 9 лет, с августа 2002 до июня 2011, чтобы получить статус рекомендации. Это случилось по причине того, что несколько вторичных особенностей задерживали всю спецификацию. Чтобы ускорить стандартизацию беспроблемных частей, Рабочая группа CSS W3C в своём решении известном как Пекинская доктрина, разделила CSS на меньшие компоненты, называемые модулями. Каждый из таких модулей теперь является независимой частью языка и проходит стандартизацию в своем темпе, независимо от других частей. Когда одни модули уже имеют статус рекомендации W3C, другие всё ещё находятся в стадии разработки. Так же появляются новые модули, когда в этом есть необходимость.

CSS Modules and Snapshots as defined since CSS3 Официально не существует стандарта CSS3 как такового. Каждый модуль стандартизируется независимо, стандарт CSS состоит из CSS2.1 с поправками и расширяется завершенными модулями, необязательно с одинаковым номером уровня. В каждый момент времени может быть определён снэпшот стандарта CSS, состоящий из CSS2.1 и набора сформировавшихся модулей.

Консорциум W3 периодически публикует такие снэпшоты, как в 2007 или 2010.

Хотя на сегодняшний день нет стандартизованных модулей с уровнем выше чем 3, это изменится в будущем. Некоторые модули, такие как Selectors 4 или CSS Borders and Backgrounds Level 4, уже имеют редакторский набросок, хотя и не имеют статуса Первого Опубликованного Рабочего Наброска.

Статус модулей CSS

Стабильные модули

Несколько модулей CSS уже достаточно стабильны и достигли одного из трёх уровней рекомендации CSSWG: Кандидат в рекомендации, Предлагаемый к рекомендации и Рекомендован. Они могут быть использованы без префиксов и достаточно стабильны, хотя некоторые фичи могуть не пройти стадию Кандидат в рекомендации.

Эти модули расширяют и исправляют CSS2.1, составляя ядро спецификации. Вместе с ними, они составляют текущий снэпшот спецификации CSS.

CSS Color Module Level 3 Рекомендация с 7 июня 2011

Добавляет свойство opacity и функции hsl(), hsla(), rgba(), rgb() для создания значений <color>. Также определяет ключевое слово currentColor как цвет.

Цвет transparent теперь настоящий цвет (благодаря поддержке альфа-канала) и является псевдонимом для rgba(0,0,0,0.0) .

Объявляет устаревшими ключевые слова системных цветов, теперь они не должны использоваться в реальных проектах.

Selectors Level 3 Рекомендация с 29 сентября 2011

Добавлено:

Следующая итерация спецификации Селекторов уже создаётся, хотя она всё ещё не получила статус Первого Публичного Рабочего Черновика.

CSS Namespaces Module Рекомендация с 29 сентября 2011

Adds the support for the XML Namespaces by defining the notion of CSS qualified name, using the ' | ' syntax and adding the @namespace CSS at-rule.

Media Queries Рекомендация с 19 июня 2012

Исходные типы media (такие как print, screen и тд.) расширяются до полноценного языка, позволяющего выполнять запросы на определение параметров устройства просмотра. Например, like only screen and (color).

Медиа-запросы применяются не только в CSS, но также в атрибутах некоторых HTML элементов. Например, media для тега <link>.

The next iteration of this specification is in the work, allowing to tailor a Web site regarding the input methods available on the user agent, with new media features like hover or pointer. Detection of EcmaScript support, using the script media features is also proposed.

CSS Style Attributes Рекомендация since November 7th, 2013
Formally defines the syntax of the content of the HTML style global attribute.
CSS Backgrounds and Borders Module Level 3 Кандидат в рекомендации

Adds:

The CSS4 iteration of the Backgrounds and Borders specification is already in progress, though it still hasn't reached the First Public Working Draft stage, it plans to add the ability to clip a border (with the CSS border-clip, border-clip-top, border-clip-right, border-clip-bottom, and border-clip-left properties) or to control the shape of the border in a corner (using the CSS border-corner-shape property).

CSS Multi-column Layout Module Кандидат в рекомендации
Adds support for easy multi-column layouts using the CSS 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, and break-inside.
CSS Speech Module Кандидат в рекомендации
Defines the speech media type, an aural formatting model and numerous properties specific for speech-rendering user agents.
CSS Image Values and Replaced Content Module Level 3 Кандидат в рекомендации

Defines the <image> data type.

Extends the url() syntax to support image slices using media fragments.

Adds:

  • The dppx unit to the <resolution> data type.
  • The image() function as a more flexible alternative to url() to define an image from an url.
    At risk : due to insufficient browser support, standardization of the image() function may be postponed to the next iteration of this module .
  • Support for linear-gradient(), repeating-linear-gradient(), radial-gradient() and repeating-radial-gradient().
  • The ability to define how a replaced element should fit in its element, using the CSS object-fit property.
    At risk : due to insufficient browser support, standardization of the object-fit and property may be postponed to the next iteration of this module .
  • The ability to override the resolution and orientation of an external image using the CSS image-resolution and image-orientation properties.
    At risk : due to insufficient browser support, standardization of the image-resolution and image-orientation properties may be postponed to the next iteration of this module .

The CSS Image Values and Replaced Content Level 4 which will supersede CSS Image Level 3 is in development and is a Рабочий черновик.

CSS Values and Units Module Level 3 Кандидат в рекомендации

Makes initial and inherit keywords usable on any CSS property.

Formally defines the CSS data types of CSS 2.1, that were implicitely defined by their grammar token and some textual precisions.

Adds:

  • Definition for new font-relative length units: rem and ch .
  • Definition for viewport-relative length units: vw, vh, vmax, and vmin .
  • Precision about the real size of the absolute length units, which are not really absolute, but defined in relation with the reference pixel .
  • Definition for <angle>, <time>, <frequency>, <resolution>.
  • Normative value to the definition of <color>, <image>, and <position>.
  • Definition for the calc(), attr(), and toggle() functional notations.
    At risk: due to insufficient browser support, standardization of the calc(), attr(), and toggle() functional notations may be postponed to the next iteration of this module.

Several types definition, like <ident> and <custom-ident>, have been deferred to CSS Values and Units Module Level 4.

CSS Flexible Box Layout Module Кандидат в рекомендации
Add a flexbox layout to the CSS display property and several new CSS properties to control it: flex, flex-align, flex-direction, flex-flow, flex-item-align, flex-line-pack, flex-order, flex-pack, and flex-wrap.
CSS Conditional Rules Module Level 3 Кандидат в рекомендации
Adds features for conditional processing of parts of style sheets, conditioned on capabilities of the browser or the document the style sheet is being applied to. It consists mainly in allowing nested at-rules inside @media and the adding of a new CSS at-rule, @supports, and a new DOM method CSS.supports().
CSS Text Decoration Level 3 Кандидат в рекомендации

Extends:

Adds:

Precises:

  • The paint order of the decorations.

At risk: due to insufficient browser support, standardization of the text-decoration-skip, line positioning rules and the ability to place both emphasis marks and ruby above the same base text may be postponed to the next iteration of this module.

CSS Fonts Module Level 3 Кандидат в рекомендации

Amends the CSS2.1 Font matching algorithm to be closer to what is really implemented.

Adds:

CSS Cascading and Inheritance Level 3 Кандидат в рекомендации

Adds:

  • The initial, unset values for properties.
  • The CSS all property.
  • The scoping mechanism.

Precises:

  • Interaction of media-dependent @import statements and style sheet loading requirements.
CSS Writing Modes Module Level 3 Кандидат в рекомендации
Defines the writing modes of both horizontal and vertical scripts and precises how the CSS direction and unicode-bidi properties interact with the new CSS text-orientation property, and extends them where needed.
CSS Shapes Module Level 1 Кандидат в рекомендации
Defines geometric shapes, which can be applied to floats. These shapes describe areas, around which inline content wraps instead of wrapping around the bounding box.
CSS Masking Level 1 Кандидат в рекомендации
Defines a way for partially or fully hiding portions of visual elements. It describes how to use another graphical element or image as a luminance or alpha mask.

Modules in the refining phase

Specifications that are deemed to be in the refining phase are already fairly stable. Though changes are still expected, they shouldn't create incompatibilities with current implementations; they should mainly define behavior in edge cases.

Web Animations Рабочий черновик
 
CSS Counter Styles Level 3 Кандидат в рекомендации
 
Compositing and blending Level 1 Кандидат в рекомендации
 
CSS Syntax Level 3 Кандидат в рекомендации
Precises how charsets are determined; minor changes in parsing and tokenization algorithms.
CSS Will Change Module Level 1 Рабочий черновик
 
CSS Transitions Рабочий черновик
Allows the definition of transitions effects between two properties values by adding the CSS transition, transition-delay, transition-duration, transition-property, and transition-timing-function properties.
CSS Animations Рабочий черновик
Allows the definition of animations effects by adding the CSS animation, animation-delay,animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-play-state, and animation-timing-function properties, as well as the @keyframes at-rule.
CSS Transforms Level 1 Рабочий черновик

Adds:

  • the support of bi-dimensional transforms to be applied to any element using the CSS transform and transform-origin properties. The supported transforms are: matrix(), translate(), translateX(), translateY(), scale(), scaleX(), scaleY(), rotate(), skewX(), and skewY().
  • the support of tri-dimensional transforms to be applied to any element by adding the CSS transform-style, perspective, perspective-origin, and backface-visibility properties and extended the transform property with the following transforms are: matrix 3d(), translate3d(), translateZ()scale3d(), scaleZ(), rotate3d(), rotateX()rotateY(), rotateZ(), and perspective().

Note: this specification is a merge of CSS 2D-Transforms, CSS 3D-Transforms and SVG transforms.

CSS Fragmentation Module Level 3 Кандидат в рекомендации
Defines how partitions of a Web page should happen, that is page, column breaks, and widows and orphans handling.

Adds:

  • Support for defining the behavior of decorations, that is borders and background colors or images, when a box is breaked (at a page, column or line-break) with the CSS box-decoration-break property.
CSS Text Level 3 Рабочий черновик

Extends:

  • the CSS text-transform property with the value full-width.
  • the CSS text-align property with the value start, end, start end, and match-parent for a better support of documents with multiple directionalities of text.
  • the CSS text-align property with a <string> value to align on that character. This is useful to align number on the decimal point.
  • the CSS word-spacing and letter-spacing properties with range constraints to control flexibility in justification.

Adds:

A few features present in early CSS Text Level 3 draft have being postponed to the next iteration of this module .

CSS Custom Properties for Cascading Variables Module Level 1 Рабочий черновик
Defines a mechanism allowing to define variables in CSS.
Compositing and blending Level 1 Кандидат в рекомендации
 

Modules in the revising phase

Modules that are in the revising phase are much less stable than those in the refining phase. Often the syntax is still under scrutiny and may evolve a lot, in a non-compatible way. Alternative syntaxes are tested and often implemented.

CSS Basic User Interface Module Level 3 Кандидат в рекомендации

Adds:

  • The ability to tweak the box model using the CSS box-sizing property.
    At risk: due to insufficient browser support, standardization of the padding-box value may be postponed to the next iteration of this module .
  • Allow the styling of forms according their content using the CSS :indeterminate, :default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only, and :read-write pseudo-classes and the ::value, ::choices, ::repeat-item, and ::repeat-index pseudo-elements.
    At risk: due to insufficient browser support, standardization of the pseudo-elements ::value, ::choices, ::repeat-item, and ::repeat-index may be postponed to the next iteration of this module .
  • Support for icons, defined by the CSS icon property simultaneously with the new icon value of the CSS content property.
    At risk: due to insufficient browser support, standardization of the icon property and the icon value may be postponed to CSS4.
  • Support for the CSS outline-offset property giving more control on the position of the outline.
  • Support for the CSS resize property allowing Web authors to control if and how elements should be resized.
  • Support for the CSS text-overflow property defining how text overflows, if needed.
    At risk: due to insufficient browser support, the 2-value syntax of this property as well as the support for <string> values may be postponed to the next iteration of this module .
  • The ability to define the hotspot of a cursor as well as the new 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, extending the cursor property.
  • The ability to specify the sequential navigation order (that is the tabbing order ) using the CSS nav-index, nav-up, nav-right, nav-left, nav-down properties.
    At risk: due to insufficient browser support, standardization of the navigation properties may be postponed to the next iteration of this module .
  • The ability to control the usage of an IME editor, using the CSS ime-mode property.
    At risk: due to insufficient browser support, standardization of the ime-mode property may be postponed to the next iteration of this module .

An early list of what could be in the next iteration of the CSS Basic User Interface Module is available.

CSS Grid Layout Рабочий черновик
Add a grid layout to the CSS display property and several new CSS properties to control it: 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, and grid-template-columns.
CSS Box Alignment Module Рабочий черновик
 
CSS Paged Media Module Level 3 Рабочий черновик
 
CSS Object Model (CSSOM) View Module Рабочий черновик
 
Selectors Level 4 Рабочий черновик
 

Modules in the exploring phase

CSS Image Values and Replaced Content Module Level 4 Рабочий черновик

Extends:

  • the image() functional notation to describe the directionality of the image (rtl or ltr), allowing for bidi-sensitive images.
  • the image-orientation property by adding the keyword from-image, allowing to follow EXIF data stored into images to be considered.

Adds:

  • the image-set() functional notation to allow the definition to equivalent images at different resolution allowing for resolution-negotiated selection of images.
  • the element() functional notation allowing the use of part of the page as image.
  • the cross-fade() functional notation allowing to refer to intermediate images when transitioning between two images and defines the interpolation between two images.
  • the conic-gradient() and repeating-conic-gradient() functional notation describing a new type of gradient.
  • the image-rendering property that allow to define how resize of the object should be handled.
CSS Device Adaptation Рабочий черновик
Adds a new at-rule, @viewport, allowing to specify the size, zoom factor, and orientation of the viewport that is used as the base for the initial containing block.
CSS Generated Content for Paged Media Module Рабочий черновик
Adds the ability to tailor printed version of a document by allowing to control header, footer but also references tables like indexes or tables of content.
CSS Exclusions Module Level 1 Рабочий черновик
Extends the floats mechanism to define exclusion regions in any positioning scheme. Adds the notion of shapes, in which content must flows.
CSS Lists and Counters Module Level 3 Рабочий черновик
Extends the list counter mechanism so that list markers can be styled and Web developers can define new list counter schemes.
CSS Regions Module Level 1 Рабочий черновик
Defines a new mechanism allowing content to flow across, eventually non-contiguous, multiple areas called regions.
CSS Device Adaptation Рабочий черновик
Adds a new at-rule, @viewport, allowing to specify the size, zoom factor, and orientation of the viewport that is used as the base for the initial containing block.
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 Кандидат в рекомендации
 
CSS Inline Layout Рабочий черновик
 

Modules in the rewriting phase

Modules that are in the rewriting phase are outdated and require to be rewritten. The syntax is still under scrutiny and may evolve a lot, in a non-compatible way. Alternative syntaxes are tested and often implemented.

CSS Basic Box Model Рабочий черновик
 
CSS Generated Content Module Level 3 Рабочий черновик
 
Unknown Неизвестно
 

 

Метки документа и участники

 Внесли вклад в эту страницу: nurtrom, mrstork, prayash, Aleksej, teoli, iDarkLord
 Обновлялась последний раз: nurtrom,