There’s a pretty good chance that CSS is one of the most consistently used tools in your kit. It’s highly familiar and often used, so much so that it’s easy to overlook the fact that CSS is always advancing, with new features and techniques to help you create more flexible and adaptive designs. In this article, we’ll look at some of the more recent advances in CSS and how they can help you build more responsive WordPress sites.
Please note that some of the features described below are experimental or not supported by all browsers. Make sure to hit up caniuse.com for the latest on what’s supported and what isn’t.
Container Queries
Container queries were introduced in CSS to allow responsive styles based on the dimensions of an element, rather than just the viewport, allowing more control and flexibility than media queries alone.
For example, you can apply styles when a sidebar container reaches 600px width:
@container (min-width: 600px) {
.sidebar {
/* styles */
}
}
This is useful when you want an interior element like a sidebar to reflow responsively, rather than the entire page.
Media Queries vs. Container Queries
Media queries in CSS target styles based on viewport breakpoints, like device width. Container queries instead examine the dimensions of a specific element. This allows more nuanced responsive designs where interior sections resize independently of the viewport and each other.
For example, you may want a sidebar to stack below content at 600px instead of flowing right, while the main content doesn’t change layout until smaller than 480px. Container queries facilitate this.
Declaring Containment Context
To use container queries on an element, you must first declare it as a containment context using the container-type property with one of three values:
size– Bases queries on the container’s inline and block dimensions, applying style, layout, and size containment.inline-size– Bases queries on inline dimensions, applying style, layout, and size containment.normal– Signals that the element isn’t a container for size, but is a container for queries dealing with container style. .
For example, setting this container context…
.container {
container-type: size;
}
…means .container can be targeted by container queries for its width and height.
@container(.container) (min-width: 600px) {
/* Styles apply when .container > 600px wide */
}
Using container-type is crucial to inform the browser which elements should establish a containment context for container queries.
Naming Containment Contexts
By default, container queries will target the nearest ancestor element with a declared containment context. However, you can provide a name when setting containment context with the container-name property.
.container {
container-type: size;
container-name: menu;
}
You can then target the named context with @container followed by the name:
@container menu (min-width: 600px) {
/* Styles apply to menu container when .container > 600px wide */
}
Naming containment contexts gives more control over which elements container queries target.
Style Queries
Style queries are a form of container query that queries a parent container’s style values. It should be noted that these are currently experimental. They’re built with @container, followed by style and values you want to check for:
@container style(--main-color: black) {
/* <stylesheet> */
}
User Preference Queries
User preference queries are a type of media query that lets us apply styles based on the user’s preferences. This can greatly aid in accessibility for some users. User preference queries are
accessed via the @media rule.
Some users suffer some vestibular impairment that can be exacerbated by certain animations. Others may just find them annoying. Using prefers-reduced-motion checks if the user’s preference is for reduced motion content:
@media (prefers-reduced-motion) {
/* animations disabled, optimize for performance */
}
Some users have slow connections or bandwidth limits. Using prefers-reduced-data checks to see if the user prefers a data-saving connection, and load smaller image sizes or fewer assets to reduce bandwidth:
@media (prefers-reduced-data) {
/* optimize assets for slower connections */
}
Do some of your users love dark mode? Then add prefers-color-scheme, and they’ll be served the dark mode color scheme. Note that this supports both light and dark mode theming.
@media (prefers-color-scheme: dark) {
/* dark mode styles */
}
You can really help out some users by offering high-contrast text with prefers-contrast. It can also be used with low and no-preference.
@media (prefers-contrast: high) {
/* produces higher-contrast text */
}
Some users have difficulty seeing content when too many translucent or transparent layers are used. You can check for that preference with:
@media (prefers-reduced-transparency: reduce) {
/* disable translucent UI */
}
Finally, we come to prefers-forced-colors, which checks whether the user has enabled forced colors, such as Windows High Contrast mode. The possible values are active, indicating forced colors mode is active, and none, indicating it isn’t.
In the example below, when forced colors are enabled, the center text will use the accent/highlight color from the OS instead of CSS definitions, while the sidebar uses a fallback color rather than relying on CSS since its color may be remapped.
@media (prefers-forced-colors: active) {
/* Center text will be OS accent color */
.center {
color: center;
}
/* Use fallback color */
.sidebar {
color: gray;
}
}
Cascade Layers
Cascade layers can help maintain stylesheets across complex code bases by providing sorting within importance buckets. They can give you greater control over which declarations are actually applied to an element. Normal declarations are ordered from the first created to the last, followed by unlayered styles. Styles marked !important flip this, with the lowest precedence given to unlayered !important styles.
This fine-grained control allows more modular, maintainable styles that aren’t dependent on high specificity selectors. Cascade layers are especially useful in preventing specificity conflicts that arise from teams working independently from one another.
Prettying Up Wrapped Text
The text-wrap property allows text to flow around floated elements in CSS. The
text-wrap-pretty option attempts to minimize “unsightly” short lines by combining short lines into full lines where possible.
p {
text-wrap: pretty;
}
This wraps the text, minimizing short lines. In general, text-wrap-pretty produces a more visually pleasing result compared to text-wrap-balance by avoiding really short lines.
Color Formats
There’s a reason CSS offers as many color formats as it does. Each comes with its own advantages and trade-offs that make it more or less suitable to use in certain contexts.
Hex codes uses hexadecimal notation to represent RGB values as #RRGGBB.
color: #ff0000; /* Red */
Pros: Wide browser support, visually compact.
Cons: Less intuitive than some other formats, such as keyword.
Short hex codes are similar, but with three characters instead of six, with each character doing double duty. For example, the hex code for black is #000000. The short hex code equivalent is #000. This means certain colors cannot be represented with short hex codes.
color: #f00; /* Same as #ff0000 */
Pros: Very compact.
Cons: Limited range of colors that can be represented.
The RGB absolute color format specifies red, green and blue component levels between 0-255.
color: rgb(255, 0, 0); /* Red */
Pros: Intuitive for developers. Wide range of colors.
Cons: Verbose compared to hex codes.
RGB percentages are similar to RGB absolute colors, but with levels specified as percentages between 0-100.
color: rgb(100%, 0%, 0%); /* Red */
Pros: Intuitive, like RGB absolute.
Cons: Slightly more verbose than Hex. Limited to 256 colors per component.
The keyword color format uses predefined color names like “blue”, “green”, etc.
color: blue;
Pros: Very succinct and readable.
Cons: Limited choices compared to other formats.
Conclusion
Continuous improvement is a great motto, and not just for software. Even if CSS is one of your most well-worn tools, there is always room to learn and grow. You may not need every new feature that comes down the pike, and there are probably a few you’ll never use. On the other hand, you just might discover that a seemingly intractable problem can be solved with the application of a technique you just learned.
What’s your favorite new or underused CSS feature? Let us know in the comments.