What ELSE is on your CSS wishlist? | By The Digital Insider

on

What else do we want or need CSS to do? It’s like being out late at night someplace you shouldn’t be and a stranger in a trenchcoat walks up and whispers in your ear.





“Psst. You wanna buy some async @imports? I’ve got the specificity you want.”





You know you shouldn’t entertain the idea but you do it anyway. All your friends doing Cascade Layers. What are you, a square?





I keep thinking of how amazing it is to write CSS today. There was an email exchange just this morning where I was discussing a bunch of ideas for a persistent set of controls in the UI that would have sounded bonkers even one year ago if it wasn’t for new features, like anchor positioning, scroll timelines, auto-height transitions, and popovers. We’re still in the early days of all these things — among many, many more — and have yet to see all the awesome possibilities come to fruition. Exciting times!









Chris kept a CSS wishlist, going back as far as 2013 and following up on it in 2019. We all have things we’d like to see CSS do and we always will no matter how many sparkly new features we get. Let’s revisit the ones from 2013:






  1. ✅ “I’d like to be able to select an element based on if it contains another particular selector.” Hello, :has()!




  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;” Yep, we got that!




  5. 🟠 “I’d like things from Sass, like @extend, @mixin, and nesting.” We got the nesting part down with some progress on mixins.




  6. ❌ “I’d like ::nth-letter, ::nth-word, etc.”




  7. ✅ “I’d like all the major browsers to auto-update.” This one was already fulfilled.





So, about a score of 3.5 out of 7. It could very well be that some of these things fell out of favor at some point (haven’t heard any crying for a new pseudo-element since the first wishlist). Chris re-articulated the list this way:







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






And we’ve got the vast majority of those under wraps! We have ways to query parents and containers. We’re exploring stylable selects and field-sizing. We know about :has() and we’re still going gaga over transitions to intrinsic sizes. We’ve openly opined whether there’s too much CSS (there isn’t).





But what else is on your CSS wishlist? Ironically enough, Adam Argyle went through this exercise just this morning and I love the way he’s broken things down into a user-facing wishlist and a developer-facing wishlist. I mean, geez, a CSS carousel? Yes, please! I love his list and all lists like it.





We’ll round things up and put a list together — so let us know!


#Amazing, #AnchorPositioning, #Articles, #AutoUpdate, #BackUp, #Carousel, #Cascade, #CascadeLayers, #Container, #Containers, #Content, #CSS, #Developer, #Dimensions, #Ear, #Email, #Exercise, #Features, #Focus, #Form, #How, #Ideas, #It, #List, #Lists, #Matter, #Mixins, #One, #Positioning, #Query, #Sass, #Scroll, #Selectors, #Specificity, #Square, #Transition, #UI, #Units, #Word
Published on The Digital Insider at https://is.gd/DhlhYj.

Comments

Post a Comment

Comments are moderated.