Article: The Future Generation of CSS Selectors: Level 4

Extract from SitePoint article “The Future Generation of CSS Selectors: Level 4” by Louis Lazaris (@louislazaris)

Back in January 2014 I wrote the article The Current Generation of CSS3 Selectors. The goal of that article was to introduce the new generation of selectors that often fell under the “CSS3” umbrella. That group of selectors has been well documented in a lot of places, and browser support for those features is quite strong (all browsers including IE9+).

The future of CSS selectors is also looking bright, with the Selectors Level 4 specification currently in Working Draft status, and an Editor’s Draft of the same spec still in progress (the editor’s draft is generally viewed as more authoritative).

This article will focus on the new selectors not discussed in my previous article. Browser support for many of these is pretty poor, so I don’t recommend using many of these in production. View this post as a peek into what’s to come when the spec is further along and browsers start their implementations. I’ve included demos for those that have support.

:read-only and :read-write

These selectors are pretty straightforward. Any element that’s editable by the user is in the “read-write” state. Otherwise, the element is in the “read-only” state.

Take the following HTML:

<input type="text" readonly>
<input type="text" disabled>
<input type="text">
<div contenteditable></div

Now consider this CSS:

:read-only {
  outline: solid 1px blue;
}
 
:read-write {
  outline: solid 1px red;
}

Here’s a breakdown of what this CSS does in relation to the HTML:

  • The first two elements will have a blue outline because they are set
    to “readonly” and “disabled” in the HTML, respectively.
  • The third element will have a red outline because it’s naturally
    editable (“read-write”), as are all inputs by default. A textarea
    would be the same.
  • The last element (the div) will have a red outline because of the
    contenteditable attribute.

In the CSS I’m using these selectors universally (i.e. without applying them to any elements). This means the red outline would be applied to all divs, spans, and other naturally uneditable elements. It’s more likely that this would be used on specific form elements or elements with a class applied, to be more specific.

The :read-write pseudo-class is listed as “at-risk” in the Editor’s Draft, so it may be removed.

Browser Support for :read-only and :read-write
Chrome, Opera, Firefox, Safari.

Note: As shown in the demo below, the browsers that support these selectors identify the “disabled” input as “read-write”, which is not correct, according to the spec.

Continue reading this article on SitePoint …

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.