CSS Wishlist 2018
Last year I wrote up a wishlist of CSS features I'd love to see make there way into browsers, but it never got released. This year I've come back to it and thought I'd release it with notes of where we got to over the last year.
Got any ideas not listed? Let's talk about them in the comments.
My focus is on functionality/effects we can already achieve, but in less than ideal ways. Luckily, many of these are things that are coming soon!
Element media queries
Like media queries but at an element / selector level. This makes CSS snippets much more portable.
e.g. http://marcj.github.io/css-element-queries/
I'd also started a simple project for this back in 2012 but it used jQuery https://github.com/stilliard/jquery-responsive-containers
Which was inspired by this post from 2011: http://blog.andyhume.net/responsive-containers/
Looking at how CSS-Element-Queries does this, that's pretty close to perfect but I'd still love to see this built in as then sharing modules that auto adjust to the area you give them is amazing!
Update: There's been a lot more talk about this over the last year.
Here's a great write-up of the current state of Element Queries.
A CSS property to handle clearfix
Commonly solved issues with classes are making their way to official css property support. Such as the flexbox and css grid extensions are allowing us to go away from having to use grid classes. This new breed of properties stays more true to an original vision of CSS as being a layer over the content without needing much change to the original content to apply it.
The new display: flow-root; property gives us the .clearfix hack without needing to add class="clearfix" to all elements needing it. Sweet!
Read More:
Update: In 2017 we saw Chrome & Firefox implement this! -> https://caniuse.com/#search=flow-root
Section depth selector that understands document outline
e.g. first<section><h1> vs 2nd level etc.
Similar to https://github.com/w3c/html/issues/774#issuecomment-278404905
https://css-tricks.com/document-outline-dilemma/
Update: Personally this has been less of a concern for me over the last year.
:matches() / :any() pseudo-class
The ability to write a single selector that handles multiple possible inner values is very powerful.
A simple example would be table styling for td & th elements.
Rather than:
.fancy-table th,
.fancy-table td { ... }
We could write:
.fancy-table :matches(th, td) { ... }
https://developer.mozilla.org/en-US/docs/Web/CSS/:any
Update: Safari is currently the only browser to properly support this but fingers crossed for better support this year. Great write up of this feature on CSS-Tricks -> https://css-tricks.com/almanac/selectors/m/matches/
:has() / parent pseudo-class
Ever wanted to select an element that contains another?
You could select list items with sub lists inside to style, or style links that have images inside differently to other links.
https://developer.mozilla.org/en-US/docs/Web/CSS/:has
Update: Still no support for this.
Case insensitive attribute selectors
This always catches me out, attribute selectors are case sensitive by default which means if you're not sure of the case you'll either need to repeat your rule for different cases or come up with another solution, while with the feature you can simply write:
a[href^="http:" i] { ... }
http://css4.rocks/case-sensitivity-selector.php
https://caniuse.com/#search=Case
Update: This has actually been available in Chrome, Firefox & Safari for a while now but still no Edge support.
:blank
A more useful :empty in my opinion.
Where :empty selects where the element is empty, exactly as it says on the tin. Except, sometimes, empty is too strict. Blank space seems like it's empty but that's finally covered with the new :blank pseudo selector.
http://css4.rocks/selectors-level-4/tree-structural-pseudo-classes.php
Update: No news here, but another fantastic write up of this on CSS Tricks -> https://css-tricks.com/almanac/selectors/b/blank/
@extend
Last but certainly not least, ability to extend from other classes. One of the main reasons we either reach for a CSS preprocess or dive into the HTML and throw a few classes on each element is our need to re-use modular styled css components.
https://css-tricks.com/the-extend-concept/
https://tabatkins.github.io/specs/css-extend-rule/
Update: This is probably the feature I'm most excited to see some day, but no news on this yet.