Sneak Peek Into The Future: Selectors, Level 4 (CSS4) is here

http://coding.smashingmagazine.com/2013/01/21/sneak-peek-future-selectors-level-4/

by treskot • 13 years ago

32 16 13 years ago

coding.smashingmagazine.com

monsterix• 13 years ago

Cool, the show must go on!

Would CSS4 (much prefer) consider stuff like luminance media queries [1], better contrast/color controls to the designer etc.?

[1] http://fremycompany.com/BG/2012/Ambient-light-sensors-and-CS...

zaphoyd• 13 years ago

See http://dev.w3.org/csswg/mediaqueries4/#luminosity

cousin_it• 13 years ago

> This will highlight the word being spoken in yellow.

I must be missing something here. What's the point of making something yellow if the user is using a screen reader?

treskot• 13 years ago

It's just an example of :past, :current, :future the time dimensional pseudo-classes. There is a lot of scope for creative usage.

Especially the :future looks exciting and can be fun to play with.

eclipticplane• 13 years ago

One idea: Video + scrolling transcript. Current phrase is highlighted in yellow, future stuff is hidden (let's say this is an online lecture and users shouldn't be able to skip ahead), and past content that's already been watched is faded out.

geuis• 13 years ago

Oh boy this got me excited. Just to quote from the article:

"PARENT SELECTOR!"

I've been wanting this for years. One quibble is that it shouldn't be an exclamation, it should be a < character. A ! doesn't semantically make sense. Alternatively, perhaps ! keeps its current designation, but < means immediate ancestor. This would match with > meaning direct descendant.

Many of the other things, I don't see much point. They can be easily done with CSS as it is now. But, it's good to have new things coming up so lets withhold judgment till then.

masklinn• 13 years ago

> A ! doesn't semantically make sense.

Makes as much sense as the rest. ! is an operator of selected element in a selector, not a "parent selector". You can combine `!` with children selectors (`E! > F` will select any E with F children, it's equivalent to `xpath(E[F])` no use of the ancestor:: axis), they don't conflict. You don't actually go "back up" the selection chain, the matching engine simply changes which elements are "kept" during the selection process.

> Many of the other things, I don't see much point. They can be easily done with CSS as it is now.

For highly varying values of "easily". :matches requires a preprocessor or lots of repetition; :local-link is pretty much impossible without markup processing; time-dimensional elements emulation require a fair bit of markup and scripting; :indeterminate simply isn't available; and grid-structural pseudo-classes require markup support (and potentially scripting as well if the tables are dynamic)

samwillis• 13 years ago

I remember reading that the reason preventing this before was the performance on the css rendering engines, does anyone know if that was the case?

viseztrance2• 13 years ago

Disappointed. We don't need any parent, local link, n-th selector. Give us a lightweight scripting language where we can define these.

Ygg2• 13 years ago

Isn't Javascript a lightweight scripting language? Plus I've seen some scripting done with CSS3, what exactly is missing?

viseztrance2• 13 years ago

I remember when the parent selector was taboo - this should be handled by javascript, yet here we are, because javascript serves a different purpose. It can be ok as well but not embedded in its current form. I'm not saying that IE got it right with its proprietary inline javascript properties or htc files, but we have css variables. How about we take it to the next step?

nnash• 13 years ago

I really wish people would stop getting so hung up on version numbers and just call the languages what they are - HTML and CSS. These aren't video game consoles or apple products.

jimsilverman• 13 years ago

so confused at "input.checkbox:indeterminate"

1. how does it know an unchecked checkbox has not been used? 2. why was a class of 'checkbox' added to the checkbox?

newishuser2• 13 years ago

anyone know what the #important does in this selector from the article?

    article:matches(.active, .visible, #important) {
       background: red;
    }

I understand what it normally does, but I've never seen it in a selector.

solox3• 13 years ago

It continues to do what it normally does:

  article#important {

newishuser2• 13 years ago

ha, never-mind. I was confusing myself thinking it was some special case a la !important. Just an ID of important.

Sneak Peek Into The Future: Selectors, Level 4 (CSS4) is here

Related Stories