2019 CSS Wishlist | CSS-Tricks

What do you wish CSS could do natively that it can’t do now? First, let’s review the last time we did this in 2013.

❌ “I’d like to be able to select an element based on if it contains another particular selector”
❌ “I’d like to be able to select an element based on the content it contains”
❌ “I’d like multiple pseudo elements”
❌ “I’d like to be able to animate/transition something to height: auto;“
❌ “I’d like things from Sass, like @extend, @mixin, and nesting”
❌ “I’d like ::nth-letter, ::nth-word, etc”
✅ “I’d like all the major browsers to auto-update”

Ouch. Oh well. I’m not sure how hotly requested all those actually are or how feasible it is to even implement them. They’re merely ideas that I thought we be useful in 2013, and as it turns out, I still do.

This time, instead of me making my own list, let’s have a gander around the internet at other people who have rounded up CSS desires.

TL;DR List

In observing several sources of conversation around things people desire in CSS, these seem like the most common asks:

Parent queries. As in, selecting an element any-which-way, then selecting the parent of that element. We have some proof it’s possible with :focus-within.
Container queries. Select a particular element when the element itself is under certain conditions.
Standardized styling of form elements.
Has/Contains Selectors.
Transitions to auto dimensions.
Fixed up handling of viewport units.

Notably, what’s interesting to me is the lack of people asking for style scoping. It came up a little, but not a ton. It seems like such a big part of the CSS-in-JS conversation, so I’m surprised to see so little mention of it in the context of general “what does CSS need?” conversations.

Jen Simmons asked what’s on our lists

Making a wish list of all the things I’d love to see happen in the world of CSS in 2019. What’s on your list? Things you want to learn? Problems you want help solving? New properties you need? Design ideas you wish you could code? Resources you’d love to have? Name your desire.

— Jen Simmons (@jensimmons) November 14, 2018

Notable replies from the thread:

Aspect ratios (it’s weirdly tricky in CSS, coming to HTML probably, and maybe we’ll get it natively in CSS with a property someday)
Exclusions
Regions
Subgrid (it’s coming!)
text-wrap: avoid-widows-and-orphans
Nesting
Outline with radius
Animated background gradients (without faking it by moving them or whatever else)
text-overflow:ellipsis over multiple lines / line clamping
0-to-auto transitions
Parent selectors
Async @import
Math functions like sqrt(), sin() and cos()
font-min-size and font-max-size
Masonry

Tab Atkins wanted to know what parts of CSS give us the most trouble

What parts of CSS give you the most trouble due to browser behavior differences? Collecting some data, please RT. (If answer is different for mobile vs desktop, let me know.)

— 💖Taudry Hepburn💖 (@tabatkins) October 3, 2018

Notable replies from the thread:

Tons and tons of requests for a standardized way to style form elements — not just for styling desire, but for accessibility to prevent trading standards for styling.
Being able to test browser support of more than just property/values with @supports
Improved handling of viewport units and their relationship to other browser UI
Improved handling of multi-column layout handling
Elastic scrolling

Tommy Hodgins did a CSS+JS advent calendar on Twitter that documents interesting possibilities

Dec 1: Parent Selector 🎄🎁 Though CSS doesn't have a :parent selector, you can create your own with a small JavaScript function and use a selector like [–parent] in your CSS stylesheets today!

demo: https://t.co/9N1A1Un8XT
code: https://t.co/NNUuvOi1zH #css #javascript pic.twitter.com/Nv8V3rl2AF

— Tommy Hodgins (@innovati) December 1, 2018

Tommy’s list:

Parent selector
Has selector
Closest selector
First in document (like how querySelector works)
Elder sibling selector
Previous sibling selector
Contains selector
Regex selector
Computed style selector
:nth-letter / :nth-word
Media pseudo selectors
Not-blank valid/invalid selector
Element queries
Attribute comparison selectors
Custom specificity
Visibility selectors
Overflow detection selector
User agent detection selector
Storage queries
Date queries
Protocol queries
Deep hover

We asked as well

Putting together a list of most-wanted native CSS features. There are lots of ideas out there!

Hit me with quick hit ideas. Don't think too hard.

— CSS-Tricks (@css) December 17, 2018

Notable replies from the thread:

Container queries
Has selector
Regions
Color modification functions
Nesting
Shaders
Transition to auto dimensions / transition from display: none;
Previous sibling selector
font-size: fit;
Styling grid-template-areas
Animation between grid-template-areas
Types for custom properties
clip-path accepting paths
inline-styles: ignore;
Aspect ratios
Scoping
// single line comments
Corner shapes

Comments

Bert de Vries

# January 18, 2019

Maybe not completely on topic, but there’s one thing i really would like regarding CSS. I wish there was a way to make visible which CSS rules are never used. Something like a log file which can be switched on and off and lists all selectors that are not used or are always overridden on a given HTML page. I do not know if something like this is possible but it would be very nice to have. Just to clean up the CSS. I’ve never found something like this or any requests for it.

Nicola

Permalink to comment# January 18, 2019

This isn’t as powerful as your comment suggests, but have you seen the coverage tab in chrome dev tools?
Saw this article today:
https://umaar.com/dev-tips/121-css-coverage/

Or:
https://www.vojtechruzicka.com/measuring-javascript-and-css-coverage-with-google-chrome-developer-tools/

Loading...

Peter

# January 18, 2019

What about: Media queries based on viewport orientation (portrait / landscape)

Or is this already possible?

Ana Tudor

Permalink to comment# January 18, 2019

It is! It’s been possible for more than half a decade. Demo.

Loading...
Adam Giese

Permalink to comment# January 18, 2019

This is currently possible! More info here.

A very useful feature!

Loading...

Alex

# January 18, 2019

I wish for a simple
text-align: center center;
for centering horizontal and vertical.
In the year 2019 we still have to use weird hacks or illogical div-nesting.

Brad

Permalink to comment# January 18, 2019

This is a layout issue, not a text alignment one. And it’s not a one-liner, but flexbox accomplishes this very easily.

Loading...
Josiah

Permalink to comment# January 25, 2019

If you know the height of the container that holds the text and the text is on only one line, it’s very easy to do this. Set line height to that of the element’s height.

Granted that’s a very specific use case and doesn’t cover most cases. If you don’t know container height and/or the text is multiple lines, you can use position: relative; top: 50%; transform: translateY(-50%);.

See my demo which shows both methods. I do agree that text-align: center center would be nice. Though it would require modifying an existing rule to become shorthand. Instead of text-align we would need text-align-vertical and text-align-horizontal, and simply text-align would become the shorthand, and if passed only one value would it apply it to both? text-align: center would be the same as text-align: center center? That would be problematic. Because if you did text-align: left would that try to apply “left” to text-align-vertical?

The idea is good but I’m not sure how it would be executed.

Loading...

Luca

# January 18, 2019

I think that if the same things are requested many times from many people and since 2013… maybe W3 should ask itsself if “are we going to meet developer needs?” and re-consider some opinions…
Personally I surely would like to have parent selectors and container queries.. above all

Gibran Malheiros

Permalink to comment# January 22, 2019

Some proposals have huge challenges, take container queries for example, such feature could easily trigger an infinite loop of repaint, if two elements react to changes in a way that triggers the other element to change and so on, like parent and child or two siblings.

Then the parent selector, which I could not find an official proposal, but most articles suggest a syntax with < or :parent. It’s not simple to introduce something like that, imagine the following: a < img to select anchors that have an image child, but then someone writes this: a < img + span or a < img > span, it could be maddening, it’s even going against the “cascade” part of CSS.

Loading...

eat yr Ghost

# January 18, 2019

Parent selectors are very high on my list, something like:

.my-child-element:parent(.my-parent-element) {
    // Style the parent
}

Ana Tudor

# January 18, 2019

Animating gradients without resorting to background-position or background-size. We’ve had this in IE10+ and Edge for more than half a decade, but nobody ever seemed to notice and now it’s going to get all dropped anyway.

Oh, well, it’s not like Chrome doesn’t now have something even better – the ability to animate CSS variables, which means we can animate different components of a gradient differently.

For example, let’s consider the following gradient:

linear-gradient(var(--ang), var(--col-0) var(--pos-0), var(--col-1))

Here we can have a different animation (different set of keyframes, different duration, different timing function, different delay) for each CSS variable, whereas animating the gradient itself (as it is possible in Edge today) means animating everything the same way.

Of course, it’s still all behind a flag (Experimental Web Platform features from chrome://flags) that’s apparently hard to find judging by how often I’m told my Houdini demos don’t work. For anyone wanting to know more, I wrote an article on it right here.

clip-path: path(). It’s already been implemented in Firefox. Quietly, without saying a word about it. It needs the layout.css.clip-path-path.enabled set to true in about:config in order to work.

My honest opinion? Meh. And here’s why: the value in the path() is a string value that, just like the value of the d attribute of an SVG path, only accepts unitless values. What do these values translate to in CSS? Pixels! So the coordinates used for this path are always pixel coordinates relative to the top left of the clipped element. Here’s a test. Needs to be opened in Firefox with the flag mentioned above set to true.

Want anything responsive this way? Sorry, nope. Better option at this point is to use a child SVG and modify its d from the CSS. Only works in Chrome and doesn’t reflect the latest spec changes, but at least it’s responsive! Basic example and something a bit more interesting.

Useful mathematical functions like floor(), abs(), pow(), trigonometric functions. This is one I personally hit the need for a lot. Off the top of my head, some use cases:

Modulo. I may have a bunch of similar items that let’s I say position on a circle (think something of the kind). This is done by setting an index custom property --i on each of them and another custom property --n representing the total number of items on their parent and then setting the item transform to rotate(calc(var(--i)*1turn/var(--n))) translate($r). And now let’s say I want to make every other item black. Currently, I can do this with something like :nth-child(odd) { background: black }, but, if I could use modulo, I could set the background only once (!!!) with background: hsl(348, 83%, calc((var(--i)%2)*47%)). Demo.
abs(). Starting from the same example of items distributed on a circle, let’s say I want to have their opacity increase linearly for the first half of the circle and then decrease linearly for the second half. With abs(), we could have opacity: calc(1 - abs(2*(var(--i) - .5*var(--n))/var(--n))), but now we have to change the sign for half the elements and that means hardcoding the number of elements in a selector like :nth-of-type(-n + 6).
pow(). Let’s say I want to have a secondary rotation. Or let’s say I want to have a cubic increase in the height of items.
Trigonometric functions. My primary use case is for syncing rotation angles and scale factors or translation distances when I animate multiple elements such that corners/ edges match throughout the animation. In this demo, I need to sync the rotation angle of the bright yellow squares and the post-skew scale factor of the orange squares. This is achieved by doing the trigonometric computations in the JS and then setting the values to the custom properties used in the transform. I could also try to fake it with different timing functions for rotation angles and scale factors or translation distances as I did in this demo, but that’s just hardcoding the cubic-bezier() for every case.

Claudio Jesiaj

# January 19, 2019

I think “Cascade” style sheet, has a big problem with the “Cascade” concept.
i.e:

div {.styel1.};
div p {.styel2.};
div p .someclass {.styel3.};
div p .someclass:hover {.styel4.};

why not write on “Cascade”?. Something like this:

 div [
      {.styel1.}
      p [
          {.styel2.}
          .someclass [
               {.styel3.}
               :hover {.styel4.}
          ]
       ]
 ]

Pros:
* you really see the cascade in one place.
* its easy to change and debug
* its more compact, reducing the file size

Gibran Malheiros

Permalink to comment# January 22, 2019

It’s already possible with preprocessors like SASS, but it’d be nice to have it natively on plain CSS.

Loading...

Shalanah Dawson

# January 21, 2019

Leading in the web, leading in the web!!! :)

Enough with line-height, it is seriously terrible.

Leading would allow for vertical rhythm (if you want it), and more importantly to be able to match print to web or web to print more seamlessly (or the whole gamut print to web to print).

I worked hard to find a way to create leading in the web, but it shouldn’t have been hard to do. (https://github.com/shalanah/baseline).

Also, shout-out to having consistent white-space wrapping for text cross browsers.

Gibran Malheiros

# January 22, 2019

Is the “previous sibling selector” the opposite of the “adjacent sibling combinator”?
If yes, I put all my coins into that one!

Philip

# January 22, 2019

CSS blending modes (like multiply, hue, and overlay) becoming mainstream & supported would make things so much better for designers looking to push the visual envelope.

Thibaut Allender

# January 22, 2019

Aspect ratios are probably coming too. There’s a draft, at least:
https://drafts.csswg.org/css-sizing-4/#ratios

lamka02sk

# January 27, 2019

I would like to have something to check if element is in sticky position. For example :sticky selector.

This comment thread is closed. If you have important information to share, please contact us.