2013 CSS Wishlist

I’m pretty happy with CSS. I know it’s common to complain about CSS and how it was never meant to build web pages like we do now and it’s ill-suited to many tasks and yadda yadda. But I dunno. I work with it every single day and I feel like it’s getting the job done pretty well. Maybe I don’t have those fancy big thinker thoughts that can foresee alternate universes where more perfect languages exist. Or something.

As Hakim says:

Considering CSS was made to style text documents, it’s pretty impressive what we can do with it today.

— Hakim El Hattab (@hakimel) January 24, 2013

So what does 2013 hold for CSS? Tab Atkins works directly on the CSS specs and has outlined his own plan for the year. It all sounds like good stuff to me. In particular I like the focus on flexbox and grid. Those will give very powerful layout tools that will serve us as long as the web is 2D. And the focus on native @extend which would be amazing.

Honestly, I trust Tab’s own instincts on how CSS needs to be evolved more than my own since he’s so involved in it and has a mind for systems. You can’t just jam in everything any ol’ author tells you they want or you’ll end up with a mess. Now, that being said, as an author, here’s some things I’d like them to jam in there.

1. I’d like to be able to select an element based on if it contains another particular selector

For instance, select a blockquote if it contains a paragraph.

blockquote::contains("p") {
  /* Not like this, since it's not a pseudo element, but something like it */
}

I feel like this comes up all the time and it seems weird it’s not possible. This is in the same vein as the parent selector that I also still want and is a whole can of worms.

2. I’d like to be able to select an element based on the content it contains

Content, meaning literally text content whether it’s in another element or not. Like:

h1::match-string("coyier") {
  /* Not this again, since it's not a pseudo element, but something like it */
}

I feel like I should be able to target elements if they contain my name if I want to. Or imagine a site like Twitter. You should be able to style a tweet that contains a certain word a certain way if you want. Or search results.

3. I’d like multiple pseudo elements

As in:

.speech-bubble::before(2) {
  /* Or ::before::before or something, smart people can decide */
}

As we’ve discussed here, it’s a good idea. Web components / Shadow DOM is cool but it’s too complex for something as simple as just needing one extra meaningless element to tack on and complete some visual design tidbit.

4. I’d like to be able to animate/transition something to height: auto;

As in:

.flash-message {
  height: 0;
  opacity: 0;
  transition: all 0.2s ease;
}
.flash-message.loaded {
  height: auto;  /* nope */
  opacity: 1;    /* yep */
}

The browser would be able to know the height of an element if it had height: auto; (instead of whatever it currently has) on it, right? So figure it out and animate to that value.

5. I’d like a good bit of the stuff from Sass

In order of how awesome it would be:

1. @extend – i.e. this selector inherits the stuff from this selector
2. @mixin / @include – i.e. reusable/alterable chunks
3. nesting – i.e. .module { background: black; h2 { color: white; } }

I would draw the line at things like loops that take CSS too far into programming and instant readability. I’m not even huge on variables being native, although I think it’s too late on that one. The color functions would be sweet if they could be done in a simple, obvious, readable way.

6. I’d like ::nth-letter, ::nth-word, etc

::nth-everything, really. Letters, words, lines, and with all their cousin selectors. For fancy stuff like this:

article.poem p:first-child::nth-line(-n+2) {
  font-variant-caps: small-caps;
  color: red;
}

I understand the biggest blocker here is languages. For instance in some languages one character represents and entire word and that fuzzies these concepts. It seems to me like things that could be overcame though.

The greatest of all wishes…

Would be that all major browsers, mobile included, built in fancy auto updating that upgrades the browser without any user intervention at all. Like Google Chrome desktop. Five years from now it would be sweet if we didn’t even talk about browser versions at all anymore. We referred to them just by name, because obviously everyone using them is on the latest version.