CSS is often regarded as one of the most challenging areas to master in Frontend space. Its versatility allows you to achieve almost anything with enough creativity, yet even after nearly 30 years, some fundamental features have been missing. The new updates in 2024 bring a lot of goodies that promise to simplify common challenges, such as building popovers, managing layouts, and adapting to themes. Below are some of the most exciting new CSS features I am particularly enthusiastic about and have already started to incorporate into my daily work.
The Popover API + Anchor Positioning
One of the most anticipated additions is the Popover API, which introduces native support for frequently used elements such as tooltips, dropdowns, dialogs and a lot of things that have only been possible with just libraries or custom implementation. Either way, it added a lot of Javascript to achieve this. With this API, the process becomes simpler and more consistent across browsers without manual handling of every aspect.
I still remember the pain of creating a dynamically positioned tooltip for my single-page app. The combination of Popover API + Anchor Positioning (also new) opens up many possibilities for the new elements common to modern web app development but has been possible only with various hacks and workarounds. This will also reduce the need for heavy custom JavaScript, improving performance, browser compatibility and maintainability. You can create a simple popover with just a few lines of code:
These APIs are designed to improve user interaction and accessibility, automatically handling keyboard focus and screen reader behaviour.
Read more: The Popover API, Anchor Positioning
Align Content for block layout
Another improvement (also, a long-awaited one) is the ability to align content within block layouts without needing to rely on Flexbox or Grid. Flexbox and Grid are our usual go-to for managing complex layouts. However, it always seemed like an overkill for simpler use cases—like centering a div or aligning text inside a block element.
I know this seems like a small thing but it brings me a lot of satisfaction to finally see this happen. Just imagine explaining "how to center a div?" to a newbie, you'll know what I mean.
This is how you can do it now:
Read more: Align Content Without Flex or Grid
The :has() pseudo-class
This new pseudo-class eliminates workarounds and helps create a simpler dynamic, context-aware style. It helps select elements based on the element's children, parents, or specific state conditions, which has long been a limitation in CSS.
For instance, you want to style a div differently if it contains a button:
div:has(button) {
background-color: lightblue;
}
Or apply styles to form fields when they are not empty
input:has(:not(:placeholder-shown)) {
border-color: lightgreen;
}
Combining :has() with the :is() pseudo-class makes it even more powerful and adds concise and flexible specificity for the applied styles.
For example, this style will apply to a container containing either a button or a submit input.
.container:has(:is(button, input[type="submit"])) {
border: 2px solid gray;
}
Benefits:
- Cleaner Stylesheets: Reduce the need for complex, nested selectors.
- Improved Performance: Decrease reliance on JavaScript for DOM manipulation.
- Enhanced Maintainability: Create more logical and easier-to-understand CSS structures.
- Greater Flexibility: Adapt styles dynamically based on content without changing HTML.
Read more: The :has() Selector
Bonus: light-dark()
Although not as revolutionary as the previous features, this will feel good if you have spent time managing multiple themes in your component libraries or apps. As modern websites increasingly embrace the dark side, managing theme-based styles can become tedious. Traditionally, you would use JavaScript or CSS media queries to detect the user's theme preference and then add separate styles for different conditions. With the new light-dark function, it's now easier to apply conditional styles based on the user’s system-wide preferences.
For example, if you want to apply different colors for dark and light modes, you can now do it like this:
.element {
background-color: light-dark(white, black);
color: light-dark(darkgray, lightgray);
}
Read more: light-dark function
A Word on Browser Support: As with any new feature, browser support for these functionalities might not be universal yet. It's always a good practice to check compatibility before widespread implementation. However, these features are actively being developed and adopted, so widespread support is likely on the horizon.
Conclusion
There is a lot of amazing work and energy in the CSS and webdev space right now which makes me excited for the upcoming stuff. While these are the features I loved the most, there are a lot of new and exciting features. I am waiting for that "aha" moment when I apply these particular features to solve problems more efficiently in my product features because ultimately these are all just tools.
Top comments (0)