2019 CSS Wishlist

Avatar of Chris Coyier
Chris Coyier on (Updated on )

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

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.

  1. ❌ “I’d like to be able to select an element based on if it contains another particular selector”
  2. ❌ “I’d like to be able to select an element based on the content it contains”
  3. ❌ “I’d like multiple pseudo elements”
  4. ❌ “I’d like to be able to animate/transition something to height: auto;“
  5. ❌ “I’d like things from Sass, like @extend, @mixin, and nesting”
  6. ❌ “I’d like ::nth-letter, ::nth-word, etc”
  7. ✅ “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

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

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

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

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
Psst! Create a DigitalOcean account and get $200 in free credit for cloud-based hosting and services.

Comments

  1. Bert de Vries
    Permalink to comment#

    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.

  2. Peter
    Permalink to comment#

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

    Or is this already possible?

  3. Alex
    Permalink to comment#

    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#

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

    • Josiah
      Permalink to comment#

      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.

  4. Luca
    Permalink to comment#

    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#

      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.

  5. eat yr Ghost
    Permalink to comment#

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

    .my-child-element:parent(.my-parent-element) {
    // Style the parent
}
  6. Ana Tudor
    Permalink to comment#

    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:

    1. 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.

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

    3. 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.

    4. 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.

  7. Claudio Jesiaj
    Permalink to comment#

    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#

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

  8. Shalanah Dawson
    Permalink to comment#

    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.

  9. Gibran Malheiros
    Permalink to comment#

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

  10. Philip
    Permalink to comment#

    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.

  11. Thibaut Allender
    Permalink to comment#

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

  12. lamka02sk
    Permalink to comment#

    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.