5 Under-Utilized CSS Rules to Elevate Your Design

One challenge of web design is supporting a plethora of devices and screen sizes. Fortunately, CSS has come a long way to make such task much easier than a few years ago. Here are 5 modern yet widely supported CSS rules that you can put into use today.

1. Sticky Positioning

Especially on smaller screens, it is often desirable to have some UI element, such as a navigation bar or a table header, to be visible at all times. It turns out no JavaScript is needed. A pure CSS solution with position: sticky is not only safer, but also smoother visually.

Check out the following example:

2. Container Query

Media queries are an essential tool for building responsive websites. However, what you really want is for each component to adapt to the size change of its own container, not that of the viewport.

For example, if your page has a sidebar that shrinks or hides on small screens, the main content area may be wider on a narrower viewport, making media queries less useful.

The new CSS container query gives you the perfect solution. Better still, it works almost the same way as media queries. Simply specify container-type: inline-size; on the container, and you are good to go. Here is an example:

This card is responsive

Try resizing the outer box. In larger boxes, the image is on the left. In smaller boxes, it is on the top.

3. Dynamic Viewport Units

Sometimes you want a component, e.g. an immersive hero section, to fill the full height or width of the browser window. However, the standard vh or vw units are not fully compatible with the collapsable controls on some mobile browsers.

Introducing dynamic viewport units, dvh and dvw, which always represent the current size of the browser window. Check out the example below on your mobile device:

4. Grid Layout

Grids are a great way to lay out content responsively. You are likely familiar with display: grid in CSS. What you may not be using are two handy rules for grid layouts.

• gap: Instead of adding margin or padding to each grid item, gap lets you apply the desired gap to a grid directly. In particular, with gap you no longer need to set negative side margins for the grid to align with the rest of the page. (This works for flexbox as well.)
• auto-fit + minmax: Filling a dynamic width? They let you lay out the content like “fill the width evenly with as many items as possible, with each item at least 200px wide.”

Here is an example that combines both rules:

5. Input Selectors

Unless you are building a static website, you will likely need to deal with forms. As users interact with a form, giving them clarity on what’s happening is key to a good UX.

Handling form states is usually the job of JavaScript. However, there are several CSS rules that may greatly simplify the logic needed. Here are 2 lesser known ones that I like in particular:

• :focus-within: It matches an element if it or any of its descendants is focused. This is handy when you need to style the container of an input, rather than the input itself.
• :out-of-range and :invalid: As their names suggest, they match inputs that are out of range or invalid, so you can style them accordingly.

Here is an example:

Bonus: Translucency

If you use any Apple product, you likely enjoy the translucency effects used throughout the OS. You can achieve a similar effect in CSS with the backdrop-filter rule.

What I like about backdrop-filter is that it can be combined with masks or clip paths to create subtle effects. For example, you may want to overlay text on top of an image. You want enough contrast, but you still want the image to be visible. In such case, you can apply translucency to only part of the image.

I hope you find some of the CSS rules useful! There is much more to look forward to in 2023, including nesting and relational queries like :has. Happy new year!