Cascading Style Sheets (CSS) were first phased out in 1996 and remain an essential and evolving part of the web development stack. Like other living languages, CSS is constantly introducing new features in response to real-world practices. This rapid evolution can make it easy for even dedicated developers to miss new features. Here’s a look at the most useful new and upcoming CSS features.
Subnet
Ever since its inception, developers have complained about some monstrous CSS shortcomings. Some common tasks, such as center something in css, require overly complex workarounds and manipulations. Another big problem was getting a reasonable grid layout, at least until the CSS Grid Layout module entered the breach.
A grid layout is indicated by the display: grid statement and is a kind of cousin of Flexible box, in that it allows you to define rectangular layouts but also control your grid in two dimensions. Research shows that most developers with our CSS hands know Grid Layout, and many of us use it. (If you are not using it yet, check it out!)
Subnet is a very useful new feature for the Grid Layout module. The subgrid The feature lets you define a child grid that will inherit its parent’s layout. This is distinct from nesting one grid view within another; in this case, the child grid defines its own dimensions and spaces. With subgridthe parent’s layout is applied to the sub-grid, but the sub-grid can still override some aspect of the layout if needed.
At the time of writing, subgrid is only implemented in Firefox 71 or higher, but it’s on the roadmap for Safari WebkitGoogle Chrome and Microsoft Edge. The subgrid will be a very useful layout feature in the future.
Accent-color
Some display elements are traditionally difficult to style although they are commonly used. Checkboxes and radio buttons, for example, are often replaced with a custom widget that mimics the behavior of those elements while hiding the browser’s implementation. The new CSS accent-color The option allows you to target these elements.
For example, you can apply a magenta color to all the radio buttons on your page, as shown in Listing 1 (see also this living example).
Listing 1. Controlling radio button colors in CSS
Instant Scroll
CSS offers a handy set of properties for controlling the scroll snapping action in a web browser. Some parts of this feature have been in place for a few years while others are still being rolled out to newer browser versions.
Interestingly, more than a third of CSS users still not aware of scroll snapping.
The scroll-snap-* properties The command gives you several ways to fine-tune how scroll position works on a container. Developers get greater accuracy and end users enjoy a smoother, more controlled user experience.
Listing 2 gives a small example of controlling scroll snapping on a div (see also this living example).
Listing 2. Simple Scroll Snap Example
1
2
3
4
No matter where you release the scroll motion, the y the scroll position in Listing 3 automatically moves to the child element. This is because the scroll container has the scroll-snap-type property set to y mandatoryand the child elements have the scroll-snap-align: start statement.
You can also change this behavior. For example, you can set the scroll-snap-type property at y proximity. This does what you’d expect and only engages when scrolling gets close to the item’s proximity.
As a side note, the related overscroll behavior The property allows you to define the behavior of nested scrolling containers.
CSS logical properties
If you’ve ever wanted to set a container border to the left and right, or bottom and top, you’ve experienced the annoyance of having to write the border-left and border-rightWhere border-top, border-bottom textual properties. The problem is that there is no way to exploit the shortcut property without also affecting borders that you don’t want to manipulate. This disadvantage also applies to elements such as padding and margins.
The CSS logical properties module allows you to use the inline and block keywords to refer to things in an abstract way. When you want to talk about left and right, use inline; when you want to refer to top and bottom, use block. For example, to define a border to the left and right of a divyou can use the code in Listing 3 (see also a live example here).
Listing 3. Left and right padding with logical inline
div {
border-inline: 10px dashed seagreen;
}
These are useful shortcuts for borders, but you can also find the inline and block logical keywords in a host of other properties.
Most developers use these shortcuts to manage text direction and write mode considerations. In these cases, using a property like padding-inline-end allows you to target the final fill regardless of the active text direction. Basically, inline and block abstraction allow writing generalized styles that apply to a variety of settings. See CSS properties and logical values for a more in-depth discussion.
Container queries
Container requests are not fully stabilized in CSS, but they will be coming soon. They will have a big impact on how we think about responsive design. The basic idea is that you will be able to set a breakpoint not only based on viewport and media, but also the size of a parent container.
The syntax isn’t fully defined, but it will probably be something like Listing 4.
List 4. @container
@container (max-width: 650px){ … }
Consider how powerful it will be to fine-tune a layout based on the size of different containers, which show up in the nested layers of a UI. This is quite a drastic change that will likely spark a wave of interface innovation.
@when and @else
While we think of the new @container request, did you know that the conditional @when and @else query support is also on the horizon? It’s not supported by any of the major browsers yet, but it’s a feature that’s coming in the not-too-distant future.
The @when and @else requests activate an if/then style conditional logic flow when processing support and support requests. They will make your life easier in many situations and complex CSS layouts.
Three new color palettes
Since time immemorial, CSS practitioners have used RGB, HEX, and named colors to beautify and animate their device screens. More recently, the HSL style color statement has been introduced. Now, the CSS specification introduces new ways to designate colors; to know, hwb, laband lch.
HWB stands for hue, whiteness and blackness. It’s a neat addition that stands out for its human readability – you choose a color, then add white and black. It is supported in recent versions of Chrome, Firefox, and Safari. (The Microsoft Edge feature reference is oddly silent on this topic.) See hwb() – color notation for humans? to learn more about HWB. Like RGB and HWL, it supports an alpha channel for transparency.
LCH, short for lightness, chroma and hue, is notable for increasing the range of colors available. LCH colors in CSS: what, why and how? is a nice overview with an eye-opening discussion of color theory in CSS. Currently only Safari supports LCH.
LAB, derived from CIE LAB Color Theory, is the most theoretical of the new color spaces. The lab The color descriptor claims to encompass the full range of colors perceptible to humans, which is quite a statement. Like LCH, it is currently only supported by Safari. To learn more about LAB for CSS, see the Mozilla CSS Documentation.
Copyright © 2022 IDG Communications, Inc.
