I prefer it when folks share what they need for CSS. In the previous couple of weeks, I learn two superior wishlists by Dave Rupert and Eric Meyer. In 2022, we acquired 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
Once I use flex-wrap: wrap, generally I want there’s a approach to detect if the flex gadgets are wrapped into a brand new line.
For instance, say I’ve a piece header that incorporates a title and a hyperlink. We will make this little part responsive with flex-wrap: wrap. The cherry on high might be to know when the gadgets wrap into a brand new line.
I’d want so as to add change the place of a visible impact. For instance, a border that’s on the underside by default, and is on the left when the instances are wrapped.
.section-header {
show: flex;
flex-wrap: wrap;
}
At present, we will’t detect when the gadgets are wrapped. The one means is through the use of 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) {
/* do the issues you must do when the flex gadgets are wrapped. */
}
The above isn’t the very best readable CSS syntax, however you get the concept.
Flexbox hole assist
At present, there isn’t any approach to check if hole is supported when used with a flexbox container.
I haven’t dinged into the rationale(s) however it’s a bummer. I wish to test with @helps, similar to this:
@helps (hole: 10px) {
.ingredient {
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 numerous right-to-left expertise, and every time I exploit logical properties, I want we now have 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 wish to know when place: sticky is energetic. In different phrases, when an merchandise is caught.
.site-header {
place: sticky;
high: 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 exploit one, I’ve to switch 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 at the moment a CSSWG proposal, however no browser picked it up but.
Animate text-decoration
I want that we now have a approach 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 lead to inconsistent spacing earlier than and after a font.
At present, 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 advised CSS property that didn’t see the sunshine until right now.
.button {
leading-trim: each;
}
Right here is the article that I keep in mind about leading-trim.
At present, we will forestall scroll chaining through the use of overscroll-behavoir: include. Think about having a modal, and when scrolling, the physique ingredient will scroll too.
That is supported now, however one factor I don’t like about it’s that it gained’t work if the ingredient has quick content material.
That’s it. What are the CSS options that you need right now?
