CSS, or Cascading Style Sheets, is a mainstay stylesheet language in modern web development.
In a nutshell, CSS lets you create a set of rules that tells web browsers how to render an HTML document. For example, if you want to change the color of your headlines from black to blue, you’d switch to CSS and enter a code that looks something like this:
h1 {
color: blue;
}
Of course, that’s an easy example, but the logic behind CSS is fairly intuitive. For that reason, web developers and designers stand by CSS to effortlessly maintain and update the look of their websites.
CSS has changed tremendously over the years to improve its features and code. In this blog, we’re going to look at 7 new features CSS has to offer in 2022.
1. Container Queries
Responsive web design is non-negotiable in today’s context. It’s not uncommon to find consumers who surf the web using multiple devices at once. As such, your site must be prepared to cater to different gadgets with varying screen dimensions.
To do this, you need to adjust your designs and move around visual elements depending on the size of the viewport. The problem is that some components don’t automatically adjust to the changes made to their parent containers.
For instance, a photo would keep its original size even though its container shrank to fit on the screen.
Container queries define the full range of styles components must follow based on the specifications of their containers. You can still use a responsive grid for your general page layout while container queries fine-tune the individual sections of the page.
As you can imagine, this feature presents an elegant solution to common problems with CSS’s Grid.
2. Accent Color
Styling forms is one of the most tedious tasks when building a website. Forms, along with many other controls, follow the default styles of web browsers. If you want to customize their appearance, you’d have to go out of your way to write code from scratch.
A single color change would require a significant amount of work that could slow you down. Accent color addresses this problem by allowing you to adjust the colors used on controls with a single line of CSS.
As of writing, accent color is supported only by checkboxes, radio buttons, range controls, and progress bars. Modifying other form controls require the traditional approach of styling. But don’t fret, we’re sure this feature will earn better browser support after a few more months.
3. Subgrid
A few weeks into exploring CSS, you’ll discover that a recurring problem is aligning nested subgrids with the parent grid. That’s because nested grids act independently of the main grid and each other.
With subgrid, there’s no need to manage separate grids to adjust their dimensions. Instead, you can indicate that certain rows and columns belong to a larger grid and have them respond to new ratios and positions accordingly.
Subgrid is already supported by Firefox but is not yet available on Google Chrome.
4. Overscroll Behavior
Consider a web page with an element that has independent scrolling. When you reach the end, the default setting is for the scrolling to affect the next parent element. This is called scroll chaining.
Some websites take advantage of scroll chaining and work it into their UI design. But for many, scroll chaining is an unwanted effect that confuses users.
Overscroll behavior is an elegant solution that overrides scroll chaining. With it, users can focus on modal content without having to worry about moving the main page.
Overscroll behavior is especially useful for mobile navigation, chat components, horizontal lists, and sidebars.
5. New Viewport Units
Anyone who has ever tried to code a website for Safari iOS knows the pain of having to set viewport units. When a container is set to a size in the unit vh, the mobile browser displays it smaller than expected.
To work around this bug, you’d need to apply a script that resizes the container for you. Aside from the hassle of loading a new script, some workarounds negatively impact Chrome users.
Thankfully, CSS is now offering new viewport definitions and relative lengths. These include vw, svw, lvw, and dvw. These units correspond to 1% of the width of the UA-default viewport size, small viewport size, large viewport size, and dynamic viewport size, respectively.
dvw effectively solves the issue on Safari without causing glitches on Google Chrome. Logical variants like svi/svw are also available.
6. CSS Parent Selector :has()
:has() is one of the features on this list that have yet to gain extensive browser support. It’s a parent selector that lets you choose specific elements based on custom criteria. The best way to understand it is to think of :has() as a parent selector pseudo-class.
It allows you to select <div>s containing <p> effortlessly or apply styles to certain elements depending on their content.
Up until this point, CSS did not support parent selectors to avoid performance issues. Now, :has() opens tons of possibilities as it reshapes CSS entirely.
7. Cascade Layers
The thing that makes CSS so iconic is also the cause of many of its problems. Cascading conflicts and selector specificity top that list, prompting developers to avoid using the cascade altogether.
CSS overrides style changes to one element if another element in the cascade has higher specificity. For big projects, it’s almost inevitable to run into this issue because of the large codebase.
Different methodologies have been developed to circumvent this problem. The downside is that all of them require extra code work that’s time-consuming and inefficient. This is where cascade layers come in.
Cascade layers grant developers better control over themes, frameworks, and designs to take full advantage of the cascading system. Whereas original cascading is built around heuristics, cascade layers allow direct manipulation and management of the internal cascade logic.
By introducing an additional layer into the cascade to define style variations, the feature ensures that the components will not automatically follow the base styles. Instead, components are rendered depending on the rules written on the layer as well as the order of the layers you’ve established.
Conclusion
CSS will only continue to grow and evolve. As we wait for the widescale implementation of the feature above, new ideas are being conceptualized as we speak.
Getting the hang of such updates takes effort but they ultimately improve our workflow. Take advantage of these developments to create robust products for your clients.
Work with the Best Web Development Agency
Looking to outsource your web development project? We specialize in building custom websites for all industries. Contact DevWerkz today.