Last year was a bumper year for CSS. The Interop 2022 initiative gathered all of the major browser vendors, and other stakeholders, to solve the top browsers compatibility issues identified by web developers.
A lot of new, significant features were shipped including the most coveted features: container queries and the "parent" selector. Also, some bugs and compatibility issues were addressed for existing features. 🤩
You can see a summary of the Interop 2022 achievements below.
Thank you to those who worked hard to deliver those features amongst others. 🙏
Drinking the water of a well: One should never forget who dug it
-- Chinese proverb
What should we do next?
Chris Coyier posted some ideas on what he would like to see added to CSS in 2023.
Here is a summary of Chris's ideas:
- Style able resize handles
- Regions
- Standardised multi-line
- Mixins & extends
- Inline truncation
- Animate to auto
- Nesting
Adam Argyle added text-wrap to the mix.
Interop 2023 is under development, the project timeline states that a public announcement will be made this week. 🤞
My shortlist
I will refrain from naming new features. I think that there is too much attention and hype surrounding new features. I would love it if we consolidated what we have.
I would to see some existing, partially implemented features finished off. I would like to see some non-standard features get adopted properly.
Let's jump in!
1) Fully support the mask property
I would love to see the mask property implemented fully across browsers. It has been in a frankensteinian state for a long time. If you look on caniuse, it has a list of notes that speak to its historic implementation!
It is partially supported in Edge and Chrome at the moment, and requires a prefix.
In my recent post on a making a circular wipe transition, I highlight some of the pitfalls related to animating a CSS Mask.
2) Fully support background-image: image-set()
Since images account for the biggest portion of the weight of a typical webpage, images have a major impact on the performance of a webpage.
At the moment, there is no explicit responsive solution for background images like there is with the img element. With the img element, you can offer responsive hints via the sizes and srcset attributes. You can provide different resolutions of the same image and let the browser choose the appropriate one according to the device resolution.
There is an existing CSS function for providing a set of background images, the image-set() function.
.hero {
background-image: -webkit-image-set(
url("small-hero.jpg") 1x,
url("large-hero.jpg") 2x);
background-image: image-set(
url("small-hero.jpg") 1x,
url("large-hero.jpg") 2x);
}
However, currently this function is partially supported in most browsers. Also, it requires a prefix.
If you want to have a background image and mitigate this resolution issue, you either need to reach for a media/container query to specify a different resolution image for different viewport/container sizes, or you have to choose one large resolution image to satisfy all resolutions.
The way this shakes out is that often people tend to opt for img or picture element instead of using background-image, even though a background image is more appropriate for the context. For example, a hero section for a webpage often has a large image and may have some overlayed text. Most of the time the Largest Contentful Paint (LCP), one of Google's core web vital metrics, is an image. If you want to improve the UX of your webpage and want Google to rank your webpage more favourable, then you are likely be tempted to reach for an img or picture instead of a background image.
Largest Contentful Paint (LCP) is an important, user-centric metric for measuring perceived load speed because it marks the point in the page load timeline when the page's main content has likely loaded — a fast LCP helps reassure the user that the page is useful.
I was reading a guide on LCP recently on Smashing Magazine, Optimizing The Image Element LCP, there is no mention of image-set() whatsoever!
It seems strange that there are competing new image formats in the form of JPEG XL and AV1 and HEIC, and arguably their chief selling point is a reduction in file size and rendering speed. Yet, the image-set() function offers similar benefit in terms of improving page performance, and it is getting dusty! I would guess that is probably lower hanging fruit in terms of implementation too.
3) Make text stroke a standard property
I would like to see stroked text in CSS, for real. There is a non-standard property called -webkit-text-stroke. I would love to have the ability to align a stroke like design tools permit.
You can create different asthetics with stroked text.
There is a working draft W3C specification CSS Fill and Stroke Module Level 3 to add stroke properties to CSS such as: stroke-color, stroke-width and stroke-align. It looks like it is more oriented to SVG, but I guess it can be applied to text in HTML too. I have an upcoming post on it.
4) Have a standard property for setting a background image for text
It is possible to set a background image for text through background-clip: text.
However, the text value is not in the CSS Backgrounds and Borders Module Level 3 Spec.
It is the prefixed version of the property -webkite-background-clip: text that works in most browsers now.
Can we give it a bona fide specification to ensure it is implemented consistently?
And drop the prefix, of course!
5) Wider adoption of CSS Houdini APIs
CSS Houdini is a set of APIs that expose parts of the CSS engine. This makes it possible for developers to create extensions for CSS. It offers some wild possibilities.
It was added to Chromium-based browsers at the back end of 2020. It seems the trail has gone cold since then.
You can see the state of affairs on https://houdini.how/about. The Paint API and Typed OM API are under development in Safari. The rest of the APIs are categorized as "under consideration" or "no signal" for Firefox and Safari.
Final thoughts
Perhaps, consolidating existing features is not as sexy as shipping new features, but it is no less important. If features are buggy or partially implemented, then their utility is low.
We are moving in a positive direction with collaboration between browser vendors to make collective priorties through the Interop initiative. It is good that developers are having some input to this process too. I hope this continues and improves.
Want changes to CSS would you like see?
You can subscribe to my RSS feed to get my latest articles.
Top comments (9)
Funnily enough, I spent the past hour playing around with masks, background-clip: text, and -webkit-text-stroke - and had the same thoughts.
Caniuse is among my most visited sites. I check almost daily for anything new on has() and @property, and pow(), sqrt(), sin() and the rest of trigonometric functions. Strangely enough, this time Firefox and Safari - which usually lag behind - adopted the trigonometry first.
One of my quiet dreams is to be able to grab the n value from the :nth-child() and use it as a variable. Of course, it's doable by setting the variable --n manually for all children (either one by one or via a Sass loop), but it'd be nice for it to be fully automatic. Do tell me just how unrealistic that is ;)
That is a coincidence! The trigonometric functions would be cool to have!
These days it is hard to say what is unrealistic!
Funny how CSS got me into trigonometry. My main points of interests will always be the graphic enhancements. Most of my life I've dabbled in some form of art: comics, 2D sprites since the C64 days, 3D in the age of 3D Studio 4, then an actual job in CAD - so I love everything 2D and 3D, colors and geometries, and my CSS fun is a reflection of that:
Filters and masks are a huge part of that, so I was over the moon when FF finally rolled out their implementation of the backdrop-filter - but it doesn't seem to work so well with my 3D monstrosities. Still working on that. I also hit a wall trying to get transparent/see-through text on a gradient. Clip-path: text does the opposite. Wish there were a quick way to invert it, as in "clip-direction: inside/outside" - OR using div content as a mask. Haven't tried SVG yet, probably the best course of action, but the masochist in me says this'd be too easy ;)
You should try SVG, especially for the more advanced stuff you can do with filters!
That codepen is cool!
There is a point with 3D where CSS or SVG does not cut it, you can do more with JavaScript through
canvasand WebGL. That might be something to check in the future.I seem to go to extreme lengths to do everything in CSS, against all reason. Did this today :|
Do I hate myself? I think I'm still punishing myself for giving up on Basic in 1988 on my C64 ;)
SVG does feel like a superpower in comparison - aside from super convoluted gradient syntax, and no conic gradients. And proper nesting of objects within objects. Grouping isn't quite as handy, and properly setting transform-origins can be tricky. Not to mention the default is 0 0. Of the main container!
Don't you just love webdev sometimes? ;)
CSS seems to be growing on so many fronts it's hard to pick which ones are my top preference. I think I'd rather see progress on Scoping ahead of Nesting though. Scoping addresses a definite weakness of selectors, while Nesting seems to be largely syntactic sugar. It'd be nice to see some progress on making attr() work beyond the content property of pseudo-elements too.
Scoping and nesting may come this year. The browser vendors seem to have a bit of sweet tooth, so I wouldn't rule out nesting coming soon!
Сongratulations 🥳! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up 👍