Share this:

❌ "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.

Share this:

Comments

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.

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?

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

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.

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 backgroundonly 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).

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.

👋

CSS-Tricks* is created, written by, and maintained by Chris Coyier and a team of swell people. It is built on WordPress and powered up by Jetpack. It is made possible through sponsorships from products and services we like.