I prefer it when individuals share what they want for CSS. In the previous few weeks, I learn two superior wishlists by Dave Rupert and Eric Meyer. In 2022, we received many new CSS options, my favourite of them are container queries, CSS :has, and subgrid.
I considered brain-dumping all of the issues that I would like CSS to have someday.
Flex wrapping detection
After I use flex-wrap: wrap, typically I want there’s a solution to detect if the flex gadgets are wrapped into a brand new line.
For instance, say I’ve a piece header that comprises a title and a hyperlink. We are able to make this little element responsive with flex-wrap: wrap. The cherry on prime shall be to know when the gadgets wrap into a brand new line.
I would want so as to add swap the place of a visible impact. For instance, a border that’s on the underside by default, and is on the left when the occasions are wrapped.
.section-header {
show: flex;
flex-wrap: wrap;
}
Presently, we will’t detect when the gadgets are wrapped. The one means is by utilizing media queries to do the modifications we wish.
I want we will have one thing like this:
.section-header {
container-type: type flex-wrap;
show: flex;
flex-wrap: wrap;
}
@container type(wrap) {
}The above isn’t the most effective readable CSS syntax, however you get the thought.
Flexbox hole help
Presently, there isn’t any solution to take a look at if hole is supported when used with a flexbox container.
I haven’t dinged into the explanation(s) however it’s a bummer. I need to examine with @helps, similar to this:
@helps (hole: 10px) {
.component {
show: flex;
hole: 10px;
}
}The above doesn’t work now.
Logical CSS gradients
CSS logical properties are nice for constructing multilingual web sites. Since Arabic is my native language, I construct a number of right-to-left expertise, and every time I take advantage of logical properties, I want we’ve got them in gradients.
Can we get that, please?
.hero {
background-image: linear-gradient(to inline-end, #000, clear);
}Detect when sticky is energetic
I can consider a easy utilization the place I need to know when place: sticky is energetic. In different phrases, when an merchandise is caught.
.site-header {
place: sticky;
prime: 0;
}
.site-header:sticky {
box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.1);
}
Easing gradients
Let’s face that, CSS gradients on their very own don’t look easy. Every time I take advantage of one, I’ve to change it to have a little bit of easing.
I depend on this useful gizmo to generate eased gradients.
.hero {
linear-gradient(to backside, #304365, ease-in-out, clear);
};The easing syntax is presently a CSSWG proposal, however no browser picked it up but.
Animate text-decoration
I want that we’ve got a solution to animate hyperlink underlines with out utilizing CSS background or pseudo-elements.
Why not have one thing like text-decoration-size?
a {
text-decoration-size: 0%;
transition: text-decoration-size 0.3s;
}
a:hover {
text-decoration-size: 100%;
}Main trim
One of many challenges when working with some typefaces is having a unique main worth which could end in inconsistent spacing earlier than and after a font.
Presently, there’s a hack that I [wrote about]((https://ishadeed.com/article/button-label-alignment/), which is to make use of a pseudo-element and vertically align it.
.button:earlier than {
content material: "";
show: inline-block;
top: 16px;
vertical-align: center;
}What’s higher is to make use of leading-trim, a recommended CSS property that didn’t see the sunshine until at the moment.
.button {
leading-trim: each;
}Right here is the article that I keep in mind about leading-trim.
Presently, we will stop scroll chaining by utilizing overscroll-behavoir: include. Think about having a modal, and when scrolling, the physique component will scroll too.
That is supported now, however one factor I don’t like about it’s that it gained’t work if the component has quick content material.
That’s it. What are the CSS options that you need at the moment?
