CSS 4: what's new?

It is necessary to immediately make a reservation that the document published on September 29th is called “Selectors Level 4” (Selectors Level 4). Is this a draft specification for CSS 4? It is difficult to understand yet, although some have already managed to call the document by that name.

Immediately, the question may arise: what, if CSS 3 is finished, why should we “drive” like this? Recall that the process of approving new specifications has changed since the days of CSS 2.1: instead of a single standard, the third version is a set of documents called modules. Each develops independently of the second version while maintaining backward compatibility, and then approved as a recommendation. Typically, modules do not rely on each other, although some have dependencies, for example, selector modules and namespaces.

Thus, work on the fourth version of the standard can go along with the development of the third version.
')
Consider the main innovations. Some of them are of great interest to the developer who wants to stay abreast of trends in the layout of a web document.



The specification of level 4 selectors already has a significant number of differences from level 3. Since this is only the first draft, the end result, bearing the status of recommendations for implementation in browsers, is likely to be significantly different.

Some elements were added from other specifications, while others were not included in the specification of selectors.

Pseudo-elements

The first thing that catches your eye is that the specification does not contain pseudo-elements. Most likely in the future they will be described in other modules.

Pseudo-classes

The pseudo-classes of the user interface state from the CSS 3: Basic User Interface module have been added. Their values ​​describe the state of the elements of the graphical interface: the checkbox or its absence in the checkbox, whether the input is mandatory or not :read-write and :read-only - the details necessary to configure the input form in HTML5. Apparently, it was decided to assemble in one module everything by selectors except pseudo-elements.

Changes to existing selectors

In CSS 3, the negative pseudo-class :not can only be applied to simple selectors: pseudo-classes, tags, identifiers, classes, and parameter selectors. Pseudo-elements and combinations such as ul li or ul>li not supported, and the pseudo-class of negation could not be nested :not(:not(...)) into itself.

These restrictions are much weaker in CSS 4: the negative pseudo-class can now be applied to the selector list, to complex selectors. Pseudo-elements and nested negations are still prohibited.

New pseudo-classes

There are several new elements created on the basis of the wishes of webmasters and developments of the creators of browsers.

Pseudo-class match :matches()

:matches() very similar to the Mozilla pseudo-class :moz-any() . Its use is justified if necessary to select a large number of similar selectors. For example, instead of li a:link, li a:hover, li a:visited, li a:focus just need to specify li a:matches(:link, :hover, :visited) . Integrated selectors, attachments and use :not prohibited.

Pseudo-class orientation :dir

Named pseudo-class allows you to select an element based on the direction of the text. The values ​​of rtl (from right to left; these are Arabic and Hebrew) and ltr (from left to right) are listed. Other values ​​are not invalid, but their actions are not specified, which in the future will allow adding new values ​​(probably, they will be from top to bottom and bottom to top).

New pseudo-classes of hyperlinks

Pseudo-class :any-link() points to links regardless of their attendance. A link that has been once visited (pseudo-class :link ) is not considered to be unvisited; therefore, it was necessary to enter such an element, which can be useful if it is necessary to specify a single style of both states. The item has a mark about the possibility of choosing the best name.

Local link pseudo-class

:local-link points to local links. When used simply :local-link without an expression in parentheses, it will point to the element that points to the current page, that is, to the exactly corresponding URL of the document without an anchor fragment. The number in brackets will indicate the number of matching elements in the URL, for example, the document by reference www.example.com/foo/bar/baz www.example.com/foo/bar/baz a:local-link(0) will point to links to the same domain www.example.com www.example.com , a:local-link(1) - for the domain and the first segment in the URL www.example.com/foo www.example.com/foo , a:local-link(2) - for the domain and the first two segments in the URL www.example.com/foo/bar www.example.com/foo/bar .

Temporal pseudo-classes

There are three time-dependent pseudo-classes :past :current and :future , associated with time-dependent reproduction or time lane, that is, with means of speech reproduction of HTML-documents. Accordingly :current will point to the element being processed, which makes it possible to select the fragment being reproduced now :past will point to elements that have already been processed in the past, and :future will highlight the elements that will be processed in the future. Y :current has a version that takes values ​​in brackets.

New pseudo-classes of element trees

The document describes two new similar pseudo-classes:: :nth-match and :nth-last-match , whose input values ​​are the same as :nth-child and :nth-last-child : the same an + b expressions, as well as keywords or a string selector that allows you to select a subset of the results. From the specification to understand the idea is not as easy as an example. Suppose there is a button:nth-match(even of .active) selector button:nth-match(even of .active) . Unlike button:nth-child(even) first defines a subset of elements with the class active , and only then separates even elements.

Pseudo-classes table structure

These are :column() :nth-column() and :nth-last-column . In HTML, cells are listed in a row and separated by the tr tag, and the ratio of the cell to the column is implied in the order of enumeration. Therefore, to define the style of a cell based on its belonging to a column, the pseudo-class is entered :column , which can be applied to one or several selectors. The following draft example will set the yellow color of C , E and D cells:

  : column (col.selected) {background: yellow;  }

 <table>
   <col span = "2">
   <col class = "selected">
   <tr> <td> A <td> B <td> C
   <tr> <td span = "2"> D <td> E
   <tr> <td> F <td span = "2"> G
 </ table> 

Draft :nth-column() and :nth-last-column take arguments in the same way as existing ones :nth-child or :nth-last-child , that is, numeric values, expressions like an+b , even values, and odd . For example :nth-column(odd) will select all cells belonging to odd columns.

Ancestor selector or object selector

If the need for the previous elements sometimes seems far-fetched, then the next element has been suggested for a long time.

CSS properties have always been applied to the last item in the list: ul li.selected will point to items in the list that have the selected class. But there is no way to set the style of the whole list based on the properties of the elements nested in it.

The draft also describes the way in which you can choose which element you want to apply properties to. At the moment, the pointer, which is proposed to add to the desired element, is $ dollar symbol, although discussions are possible on the mailing list.

Suppose it is necessary to set the style of a list in which there is an element with the class selected . The object selector will easily allow you to do this:

$ul li.selected {
background: white;
}

This is the current draft document of the Level 4 Selectors , the state of which can and will undergo significant changes, and it’s still difficult to understand the whole point of the individual fragments.

Prepared on the basis of publications by David Storey , a member of the W3C working group, and Scott Gilbertson , the author for Webmonkey.com.