Supporting CSS4 standards within Less

With the advent of CSS2 and CSS3, it is natural to assume that CSS4 will arrive at some point in the future. You are probably wondering how it might affect CSS preprocessors—let's take a look at what CSS4 is likely to mean for Less.

Officially, there is no such thing as CSS4. Strange as it might seem, we won't see the appearance of a new global standard; CSS4 instead will be grouped under smaller headings, of which each will have its own level. There is still a long way to go, but one of the groupings that is closest to being finalized is CSS4 Selectors.

Note

You can see more details about the proposed changes for CSS Selectors in the W3C's draft proposal at the possibilities of using Selectors at http://vandelaydesign.com/blog/design/some-interesting-possibilities-with-css4/.

Although these have been around since the beginning of CSS, CSS4 brings a number of new logical operators, such as :not and :matches, as well as some new local pseudo classes in the form of :any-link or :local-link. The latter, in particular, brings some useful features to styling links, as shown in the following code example:

nav:local-link(0){
   color: red;
}

nav:local-link(1){
   color: green;
}

nav:local-link(2){
   color: blue;
}

nav:local-link(3){
   color: yellow;
}

nav:local-link(4){
   color: gray;
}

We can rewrite this using the following code in Less:

nav {
  &:local-link(0) { color: red; }
  &:local-link(1) { color: green; }
  &:local-link(2) { color: blue; }
  &:local-link(3) { color: yellow; }
  &:local-link(4) { color: gray; }
}

If we compile this code, we can see the results within a page that has a breadcrumb trail—take, for example, the URL as http://internetlink.com/2014/08/21/some-title/, and this in the form of a breadcrumb trail as follows:

• Home (http://internetlink.com/)
• 2014 (http://internetlink.com/2014/)
• August 2014 (http://internetlink.com/2014/08/)
• 21 August 2014 (http://internetlink.com/2014/08/21/)
• Article (http://internetlink.com/2014/08/21/some-title/)

The first link will be red, the second will be green, the third blue, then yellow, and finally gray.

Supporting future CSS standards within Less

Support for future CSS standards (or CSS4, as it is frequently termed) is still very much in its early stages within Less. Some progress has been made to allow the use of selectors in Less, which can be used with the ampersand symbol, as we saw earlier in the Supporting CSS4 standards within Less section in this chapter.

At the time of writing this book, the developers have refrained from adding too many new features for CSS4, as most of the current proposed changes are still in the draft state and are subject to change. The main feature added so far is that of support for attributes, which appeared in Version 1.4 of Less—others will appear once the specification has been finalized and support has appeared in more than one browser. The key thing to note though is that any CSS4 standard with CSS3 syntax is automatically supported in Less.

There will still be a need for Less once CSS4 standards become mainstream; Less will evolve to include the new standards while still allowing us to be more efficient when writing CSS.

Tip

How much support does my browser offer for CSS4?

As an aside, you may like to test your browser of choice to see how much support it offers for CSS4; browse to http://css4-selectors.com/browser-selector-test/ and then click on Start test! to see the results.