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.
position: sticky is not only safer, but also smoother visually.
Check out the following example:
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:
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
vw units are not fully compatible with the collapsable controls on some mobile browsers.
Introducing dynamic viewport units,
dvw, which always represent the current size of the browser window. Check out the example below on your mobile device:
100dvh minus the height of the top navbar. It should always fill the full area under the navbar.
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.)
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:
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.
: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.
: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:
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
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!