The specifications for Media Queries and Selectors have recently been updated with some new goodie goodness. These specifications  are only in the Editor’s Draft stage, which means they haven’t been officially published yet (more on that can be found here).  But they give a hint on what may come with CSS level 4.


Media queries

Some new queries has been added to the level 4 specification. I’ll go over two of the most interesting ones.

1. Luminosity

This might be the most interesting of all new Media Queries. And by interesting, I mean holy-shit-I-need-this-now interesting. The query detects the surrounding light of a device, allowing you to adjust your styling accordingly.

A usage example of this might be to change a websites contrast depending on the lightning of the users environment. Out in the sun, at the office or in the bedroom.

This query has three different values; dim, normal and washed.

@media(luminosity: dim) {
  body {
    background: black;
    color: gray;
  }
}

@media(luminosity: washed) {
  body {
    background: white;
    color: black;
  }
}

Just think of presenting this feature to a client.
“-Mr. CEO, would you please view your new website on your phone?”
“-Looks good right?”
“-Now, flip that light switch over there..”
Wait for applauds.
High five someone.

2. Pointer

This is a great media query in a usability aspect. It detects the presence and accuracy of a pointer device (like a mouse, trackpad or joystick if you swing that way).
The pointer query has three values; none, coarse and fine.

  • None, meaning that the user doesn’t have one. Like an old cellphone with no touch interface.
  • Coarse, meaning it’s a non accurate device. In most cases this is a touch based device like a smartphone.
  • Fine is the most accurate value, which can be a mouse or a trackpad.

A usage example of this is to make checkboxes, buttons and input fields larger when the pointer query returns the coarse value.


Selectors

The level 4 specification for selectors also have some neat new features.

3. :local-link

This selector will target all internal links on a website. Combining it with the :not selector, to be able to target external links, this might come in handy in some projects.

4. :matches

This mighty fine selector allows us to group items to a selector.
Instead of writing:

li a:hover, li a:active, li a:focus {
  color: tomato;
}

We can now write:

li a:matches (:hover, :active, :focus) {
  color: tomato;
}

Neat!

5. :past, :current, :future

These selectors are focused on screen reader usability. It allows us to style words that have been spoken, are spoken and are going to be spoken.

p              { color: white; }
p:past         { background: rgba(0,0,0,.3); }
p:current      { background: black; }
p:future       { background: rgba(0,0,0,.6); }

6. The almighty parent selector

Normally, we always target the last item in a selector list. But with this selector we can completely change the subject of a selector. Which is awesome, and powerful. Some would say awesomely powerful.
Check it befo’ you wreck it:

/* Will change the li's background*/
li! a.active { background: tomato; }

/* Changes the background of the whole form when an input doesn't validate*/
form! input.error { background: red; }

How about that? Say goodbye to Javascript, we ain’t be needing that anymore. We can target parent selectors now!

One issue with this selector, that hasn’t been addressed in the specification is specificity. Eg. ul li a.active would have a specificity of 0,0,1,3. But how would the parent selector affect that? Would ul li! a.active have a specificity of 0,0,1,3 and the parent 0,0,0,2?
I hope that things get clearer as the specification gets refined.


To sum up

As I said before, these new features are only in the early stages of standardisation. Some might be rejected, some might not. But I think it’s interesting to see what W3C is going for right now. All thats left is a good way to vertical align elements.