This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović
I know I’m late to the party, but there are a few things on my CSS wish list I haven’t seen on others, so I thought I’d share.
Visually hidden content
I'd love to see a native implementation of visually hidden text. I’m not the biggest fan of hiding stuff only for some, but it’s inevitable sometimes.
Instead of this:
.visually-hidden {
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}I want this:
.visually-hidden {
visibility: visually-hidden;
}Or another example:
.skip-link {
position: absolute;
visibility: visually-hidden;
}
.skip-link:focus-visible {
visibility: visible;
}Alternative text for pseudo elements
It would be great if I could exclude generated content from the accessibility tree or give it an accessible name.
button::before {
content: "c";
font-family: MyIconFont;
alt: "";
}There is actually an implementation in some browsers that looks like this:
label:has(+[required])::after {
content: '★' / 'required';
}Or even better:
label:has(+[required])::after {
content: '★' / attr(data-label-required);
}Related posts
- Here’s what I didn’t know about “content”
- Alternative Text for CSS Generated Content
- The CSS "content" property accepts alternative text
Block links
So-called block links is something that’s still unsolved in CSS. Let’s say you have a card with a heading, text, image, and a link. In order to avoid accessibility issues, you only want to include a single link and you don’t want to wrap all elements in that link, but you still want the entire card to be clickable. There are different ways of doing that, but there are drawbacks to all of them. I’d basically want to have a native implementation of Heydons pseudo-content trick.
Maybe something like this:
<div class="card">
<h2>Heading</h2>
<img src="" alt="">
<p>asdasd</p>
<a href="#">Link</a>
</div>.card {
container-type: block-link;
}Bleeding backgrounds
When you define a fixed width and a background color for the <body>, the background fills the entire viewport and not just the body. I think that’s because the property is propagated to the viewport, <body> is an exception with this behavior. Anyway, I want a similar behavior for other elements, too, so that I can make the background of an element expand in all directions.
div {
max-width: 960px;
background-color: hotpink;
background-bleed: inline;
}It should kinda work like this solution I stole from Ilya Streltsyn. I have absolutely no idea what’s going on, but it works.
div {
border-image: conic-gradient( hotpink 0 0) fill 1//0 50vw
}PS: Bleeding backgrounds is a fantastic name for a band.
Other wish lists
There’s more on my list, but it has been already covered by others.
- From Chris’ wish list: animate to auto
- From Tyler’s list: View Transitions API
- From Dave’s list: leading-trim
- From Eric’s list: More attr()
- From Ahmad’s list: sticky detection
In the works
And then there’s other stuff already partially implemented that I can’t wait to get better support.
I believe we have no right to complain. We’re super spoiled, especially with the stuff happening around Interop 2022 and 2023, but these are just examples of things that would make my life easier. I’d love to hear what’s on your wish list, too.
My blog doesn't support comments yet, but you can reply via blog@matuzo.at.
This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović
Manuel Matuzović | Sciencx (2023-02-14T08:46:54+00:00) My CSS wish list. Retrieved from https://www.scien.cx/2023/02/14/my-css-wish-list/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.