What's missing from HTML and CSS?

The Chrome team had a big presence at the CSS Day conference this year. We ran the CSS Helpdesk, answering questions from attendees, but also had a whiteboard where we asked people what they thought was still missing from CSS. In this post I'll share the results of asking that question, and also ask you to tell us what you think is missing from HTML and CSS by completing this short survey. Do you agree with the CSS Day attendees?

A whiteboard covered in sticky notes.
The board of ideas at CSS Day.

The top ten requests

Attendees were asked to write ideas on sticky notes and add them to the board. People could also add their vote to ideas by adding a sticker. The top ten features are as follows.

Support for styling inputs

This was our top feature request with 21 votes. You really want ways to style these common UI elements in a consistent way.

This is an area that we're well aware of at Chrome, as a top pain point for developers, and there's work underway to create better solutions for developers. For example, customizable select elements aim to provide a way to opt into new styling behavior. You could then do things like add images or even more elaborate styling to options. The advantage of this approach is that it would fallback to a regular select menu, allowing this to be a progressive enhancement.

Visually hidden

With 19 votes at CSS Day, this was the second most popular request. The request is for a way to add content only used by screen readers. This might be an HTML element, where the content is not displayed and only read out by a screen reader.

Typically people achieve this today by creating a .visually-hidden class to hide the content but still make it accessible to screen readers.

While this is a popular request, there are people who don't think that this should be implemented. For details read Visually hidden content is a hack that needs to be resolved, not enshrined and this discussion on CSS WG issue 560.

position: sticky inside overflow:hidden

This request received 16 votes. Currently, position: sticky only works when all of the parents are overflow: visible.

There's an open issue from 2017 requesting this, and while the initial use case of enabling the use of overflow: hidden for clearing floats might be less required today, there are many other scenarios detailed in the thread.

Animate to height: auto

At 12 votes, many attendees wanted to animate to height: auto. We're happy to be able to say that this is coming to the web platform with the CSS interpolate-size property and calc-size() function. These will be available from Chrome 129. Look out for a future post with more information about these.

Additional input types

HTML5 brought you many different types for the <input> element—for example type="email" for an email address or type="range" for a range slider. At CSS Day we got 10 votes for more of these types, for example, double range, or autocomplete with custom datalist.

Real random numbers in CSS

Another request with 10 votes was for real random numbers in CSS. This has been requested and worked round in the past for a random animation-duration.

Mixin style classes

CSS has added a number of features previously seen in CSS preprocessors—variables with custom properties, and now CSS Nesting. Reusable mixins however, haven't yet become part of the language, but seven of the CSS Day attendees were keen to see them.

There has been a CSS Working Group resolution to start working on a specification for this feature, and you can add your thoughts and use cases to the discussion in that issue.

Global styles in shadow DOM

Another issue that has a large discussion thread of use cases is the request to allow global CSS styles to apply inside a shadow DOM, six people asked for this at CSS Day. This capability would allow global reset styles to also apply in web components, and single CSS files to work across all components of a site. Take a look at this summary of use cases, and let us know if this is a feature you'd also like to have.

Dividing mixed units

There was a proposal for Interop 2024 requesting the ability to divide by mixed units—for example calc(100vw / 1px). It was deemed too broad for Interop 2024, however many developers, including six people at CSS Day, would like to see this implemented.

nth-letter

CSS has a number of pseudo-elements that act as if you had wrapped a span around some section of content. For example, the ::first-letter pseudo-element targets the first letter of the first line of the block container it's applied to.

Missing from that list is ::nth-letter, and you've been asking for ::nth-letter for about twenty years, so we know this is a long-time ask from web developers. At CSS Day six people voted for this, making it the last of our top ten wanted features.

Do you agree with the CSS Day top ten?

We would love to hear from a broader audience about these issues, do any of these make your top ten? If not, is there something else you would love to see in CSS and HTML? Let us know by filling out this short form and we'll summarize the responses in another post.