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

https://platform.twitter.com/widgets.js

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</li>
    <li>0-to-auto transitions</li>
    <li>Parent selectors</li>
    <li>Async <code>@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

https://platform.twitter.com/widgets.js

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

https://platform.twitter.com/widgets.js

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

https://platform.twitter.com/widgets.js

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

The post 2019 CSS Wishlist appeared first on CSS-Tricks.