2019 CSS Wishlist

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

:focus-within
auto

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</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

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

— :sparkling_heart:Taudry Hepburn:sparkling_heart: (@tabatkins) October 3, 2018

Notable replies from the thread:

@supports

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

Dec 1: Parent Selector :christmas_tree::gift: 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

— 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

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