Exploring the Exciting Benefits of new CSS Features

CSS Nesting

Inspired by pre-existing CSS preprocessors like Sass and Less, CSS nesting is a revolutionary feature which simplifies the structure of stylesheets. It allows developers to nest rules within one another, promoting cleaner and more readable code akin to the hierarchical structure of HTML elements. By reducing redundancy and improving code organisation, CSS nesting streamlines the development process, making it easier to maintain and update styles. Various selectors, such as the child selector ‘&’ or nested combinator selectors like ‘+,’ can be used for nesting styles. To view the full range of selectors available visit here.

Key Benefits:

1. Readability: Nested styles mimic the HTML structure, making relationships between elements and their styles clearer.

2. Modularity: Encourages a modular approach to styling, facilitating the creation of reusable components.

3. Maintainability: Simplifies the process of finding and updating styles, leading to more efficient code maintenance.

:has() Pseudo-class

The ’:has’ pseudo-class is a powerful addition to CSS selectors, allowing developers to target elements based on their content. This enables more precise and expressive styles, and is particularly useful for complex document structures or dynamically generated content.

Key Benefits:

1. Dynamic Styling: Targets elements based on their content, providing a dynamic approach to styling content that may change over time.

2. Complex Selectors: Allows for more intricate selectors, reducing the need for additional classes and making stylesheets more concise.

3. Improved Responsiveness: Enhances the ability to style elements based on their content, contributing to more responsive and adaptable designs.

The ‘:has()’ is a great new feature which has now given us a much needed robust conditional option for our vanilla css without using a preprocessor. In the below example I show how you can use the :has() pseudo-class along with the not:() pseudo-class to fade out the sibling links of a hovered link to make it stand out more. In the code I use the :has(a:hover) on the container housing the links to check if there are any links that are currently being hovered. I then add :not(a:hover) pseudo-class after this which targets the links which do not have the hover status on them.

Container Query

Container queries represent a significant advancement in responsive web design, adapting to the size of their containing element rather than the viewport. This feature is invaluable for creating components with layouts that adjust based on their context.

Key Benefits:

1. Contextual Responsiveness: Enables elements to respond to the size of their container, allowing for more adaptive and context-aware layouts.

2. Modular Components: Facilitates the creation of modular components that can be reused in various contexts without sacrificing responsiveness.

3. Simplified Media Queries: Reduces reliance on complex media queries, resulting in cleaner and more maintainable stylesheets.

In the example below I demonstrate how container query can really benefit and adjust the design of a card based element. Using @container (max-width: 600px) we can add some css that can shift the layout of the card element when the card’s width is lower than 600px. For example here when the width of the card is less than 600px we stack the icon above the text but when the card’s width is greater than 600px the icon will appear to the left of the text. Before this we could only target the browser width to make these layout changes but now we can have more control on elements’ behaviour by targeting them directly.

Text-Wrap Balance and Text-Wrap Pretty

Text-Wrap Balance and Text-Wrap Pretty are two features designed to improve the handling of text in web design. These features offer enhanced control over text layout, providing designers with tools to create visually appealing and balanced text presentations.

Key Benefits:

1. Improved Readability: Enables designers to create more visually balanced text, enhancing overall readability and user experience.

2. Fine-tuned styling: Offers precise control over text layout, allowing designers to achieve specific typographic effects.

3. Responsive Typography: Enhances text responsiveness, ensuring optimal readability across various screen sizes.

Text-wrap Balance

The text-wrap balance value balances word distribution across lines, preventing uneven line lengths. Practical for headings, subheadings, and taglines, it currently enjoys 65% browser support, with Safari being the exception.

Text-wrap Pretty

Text-wrap pretty focuses on balancing the last line text, removing orphaned single-word lines, ideal for larger bodies of text. Support is available on Chrome and Edge versions 117 and above.

These 2 new features help us fix a common issue that’s been caused by the introduction of responsive layouts. With more text based elements having a fluid width due to the nature of responsive design it has been difficult to always achieve the perfect readable layout. We can often end up with a widow or orphan (that pesky single word that sits on its own line at the end of a paragraph) on the copy content. To prevent this in the past we would often use the non breaking space ( ) hack where we would add a &:nbsp; in between the last two words. The issue with using this hack though is that when viewed on devices with a smaller viewport it can still cause issues to the layout especially if one of the last words is long. With the text-wrap balance now available and text-wrap pretty soon to be available we can get rid of this issue which will keep the designers happy!

CSS Sub-Grid

CSS Subgrid is a feature that extends the capabilities of the CSS Grid Layout by allowing nested grids to share the sizing of their tracks with the parent grid. This means that a subgrid can inherit the size of its rows and columns from the containing grid, creating a more flexible and responsive layout system. Before, if you were to nest a grid within a containing grid a new set of tracks would be applied based on the width of the containing grid.

Key Benefits:

1. Nested Grids: Allows for the creation of nested grids within larger grid layouts, promoting a modular and scalable approach to web design.

2. Consistent Sizing: Ensures consistency in sizing between parent and child grids, simplifying the maintenance of complex layouts.

3. Streamlined Workflow: Accelerates the design process by providing a more intuitive and flexible grid system, reducing the need for workarounds and hacks.

An exciting year ahead of us

These new CSS features bring a wealth of benefits, enhancing the efficiency, readability, and expressiveness of stylesheets. By incorporating these features into their workflows, developers can create more modular, responsive, and visually appealing web experiences without relying on JavaScript for certain interactions. As the web landscape evolves, staying ahead of these advancements is crucial for creating cutting-edge and user-friendly designs. Looking ahead into 2024, we anticipate an expanding library of CSS features and greater browser support.