How many times as a developer have you been excited about the announcement of a new CSS feature just to go to caniuse.com to find out that it isn’t supported by one of the major browsers? Well, don’t worry, this is not one of those blog posts. I am going to outline a few new CSS features that are either supported by the major browsers, are progressive enhancements, or have graceful fallbacks that are easily implemented. All that to say, you can use any of the features in a production environment safely!
This is one that I personally am very happy has been added to CSS. The nth-child syntax now provides a keyword “of”, which can be used like so: :nth-child(2 of .my-class). This will first find all the elements with .my-class and select the second occurrence of that class. As opposed to .my-class:nth-child(2), which would select an element with .my-class that is also the second child. As a developer of websites using content management systems, this can be very useful. One use case of this feature is when you need to target the second occurrence of a class that is on a widget/component. However, you don’t know where or how the content editor is going to nest this widget within other content. Now you can easily target the second occurrence of that class, with the nth-of syntax.
Text-wrap now has a new value available, balance. With text-wrap: balance, the browser will calculate the best way to wrap text in an element so that all the lines are “balanced”. In other words, each line of text will have similar lengths. Right now, text-wrap: balance only works with up to 4 lines of text, so it is best reserved for headings or content that you are confident won’t span more than 4 lines at any given viewport width. In addition, text-wrap: balance is not yet supported by Firefox or Safari, but this is a progressive enhancement. So if a user is on either of those browsers, it will just appear as if that property wasn’t used. The example below shows an example of text-wrap: balance in action. The first heading has text-wrap: balance applied, while the second one does not.
See the Pen text-wrap: balance by Tyler Stirtz (@Tyler-Stirtz) on CodePen.
Container queries allow developers to apply styles to an element based on the size of the element’s container. This allows you to hide/show content or change the layout based on the size of a parent element. In order to use container queries, you must specify an element as a container using the container-type property. The container-type property has three possible values, size, inline-size, and normal. Refer to the MDN docs for an explanation of each value. Once a containment context has been created, you can use the @container at-rule to create a container query. Think of the container query just like media queries, but instead of basing the query on the viewport size, it’s based on the specified containment element’s size. The example below shows the text getting smaller as the container gets smaller.
See the Pen Container Queries by Tyler Stirtz (@Tyler-Stirtz) on CodePen.
Credit to Una Kravets, Bramus, and Adam Argyle at developer.chrome.com for outlining the new features in CSS for 2023. If you would like to see all the new features, not just the ones that are supported by all browsers currently, head over here.
Also, keep an eye out on web.dev, developer.chrome.com, and MDN for Baseline, the new initiative Google rolled out this year. The goal of Baseline is to easily show developers whether a feature is supported and safe to use in a production environment.
We love to make cool things with cool people. Have a project you’d like to collaborate on? Let’s chat!
Stay up to date on what BizStream is doing and keep in the loop on the latest in marketing & technology.
