My CSS wish list

posted on 14.02.2023

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);
}

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
}

test

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.