Ben Marshall

|

Modern CSS — Empowering Tomorrow’s Web Designers

Modern CSS

Stay ahead with modern CSS. Join me as I explore new CSS releases that empower the web designers of tomorrow.

CSS ten years ago: you may have a little bit of flexbox. It’s buggy but that’s the best we can do, sorry.
CSS now: what do you need? clamp? aspect-ratio? container queries? :has? inert? cascade layers? not only is it possible, it’s already shipping!

Mayank Gupta

This is my cheat sheet for modern CSS properties and techniques. It helps me stay sharp in a fast-changing front-end world. When I started, updates were rare; now, they happen daily. I’m sharing this to spark discussions. If you have insights or suggestions on modern CSS, I’d love to hear them!

CSS Properties & Functions

Here you’ll find all the modern CSS properties and functions I’ve compiled. Jump to whatever interests you, from layouts to the latest CSS tricks.

Well-Supported & Widely Used

Moderately Supported & Emerging

Advanced CSS Featured & Concepts

Mastering Layouts with CSS aspect-ratio

Maintaining a consistent aspect ratio was once a complex task requiring various workarounds. Now, the aspect-ratio property simplifies the creation of responsive elements that maintain their shape as they resize. This property is invaluable for images, videos, and responsive containers.

Example

Imagine you’re building a responsive gallery where each image needs to maintain a square shape. Here’s how you could apply aspect-ratio:

.gallery-item {
  aspect-ratio: 1 / 1; /* Keeps the item square */
  width: 100%; /* Adjusts based on the container's width */
  border: 1px solid #ccc; /* Adds a light border for visual structure */
}

Browser Support

aspect-ratio enjoys broad support across modern browsers, but always check specifics to ensure compatibility across all user bases.

Stable: September 2021

Learn More

Intuitive Positioning with inset

The inset shorthand property unifies top, right, bottom, and left into a single, more concise declaration. It streamlines the process of positioning elements, making your CSS cleaner and more intuitive.

Example

To position a modal dialog in the center of the screen using inset and position: absolute, here’s a straightforward example:

.modal {
  position: absolute;
  inset: 10% auto auto 10%; /* Shorthand for top and left offsets */
  border: 2px solid black;
  padding: 20px;
}

Browser Support

inset has good support across most browsers, though always double-check for specific project needs.

Stable: June 2023

Learn More

Responsive Typography with clamp

The clamp function is a powerful CSS tool for fluid typography, enabling text size to scale responsively between a minimum and maximum size based on viewport conditions. This helps maintain readability and aesthetic appeal across various screen sizes.

Example

This function allows font size to adapt smoothly across different screen sizes:

h1 {
  font-size: clamp(1.5rem, 4vw + 1rem, 3rem);
}

In this example:

  • 1.5rem is the minimum font size.
  • 4vw + 1rem is the preferred size, scaling with the viewport width.
  • 3rem is the maximum font size.

For those who find the numbers confusing, you can use a clamp calculator tool to help determine the appropriate values.

Browser Support

The clamp function is generally supported in modern browsers, enhancing responsive design efforts.

Stable: September 2021

Learn More

Controlling Text Flow with line-clamp

The line-clamp property is invaluable for creating elegant text overflows in design, allowing you to limit the number of lines an element can display and manage ellipsis for overflow text. However, it’s essential to consider the accessibility (A11y) implications to ensure all users can access the content effectively.

Example

This example demonstrates how to clamp a paragraph to just three lines:

.paragraph {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* number of lines to show */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

In addition to the CSS, you might want to add a “Read More” feature to ensure accessibility:

<div class="clamped-text" aria-expanded="false">
  This is a longer piece of text that will be truncated using CSS line-clamp. If you need more information, click the "Read More" button.
  <button class="read-more" aria-controls="full-text" aria-expanded="false">Read More</button>
</div>
<div id="full-text" hidden>
  This is the full text content that is initially hidden but can be revealed by clicking the "Read More" button.
</div>

Browser Support

Check support for line-clamp as it involves vendor prefixes to work across different browsers. Currently, this property requires the -webkit- prefix to ensure compatibility.

Stable: May 2023

Accessibility Considerations

  • Ensure that truncated content is still accessible to screen readers.
  • Use semantic HTML and ARIA attributes to provide additional context.
  • Consider a “Read More” link to expand and reveal the full content for users who need it.

Learn More

Logical Properties for International Layouts

CSS logical properties like padding-inline and margin-block reflect the writing mode and direction of the content, making them essential for internationalized layouts. These properties adapt automatically when the text direction changes (e.g., from left-to-right to right-to-left), ensuring your CSS remains consistent and efficient across different languages.

Example

Here’s how you might use these properties for dynamic spacing based on content direction:

.container {
  padding-inline: 1rem; /* Horizontal padding */
  margin-block-start: 2rem; /* Top margin */
}

When the language direction changes, these properties adjust accordingly, maintaining the intended layout without requiring additional CSS adjustments.

Browser Support

Logical properties are widely supported, but it’s still worth confirming compatibility for complex layouts.

Stable: June 2023

Learn More

Mastering Viewport Units for Responsive Design

Viewport units like vw, vh, vmin, vmax, vi, and vb offer precise control over sizing elements in relation to the browser’s viewport, crucial for responsive layouts.

Example

This example uses viewport units to ensure a section always fills at least half the viewport’s height:

.section {
  height: 50vh;
}

Browser Support

Viewport units have robust support across modern browsers, pivotal for responsive web design.

Stable: November 2022

Learn More

Streamlining Styles with :is

The :is pseudo-class simplifies complex selector lists by acting as an alias for multiple selectors. This is especially useful for reducing redundancy in your stylesheets and making them easier to read and maintain.

Example

For styling multiple container elements the same way without repeating selectors, :is comes in handy:

:is(header, main, footer) .navigation {
  background: navy;
  color: white;
  padding: 10px;
}

Browser Support

:is is well-supported in modern browsers, but it’s good practice to verify its usage in your project’s context.

Stable: June 2023

Learn More

Simplifying Selectors with :has

The :has pseudo-class is a powerful addition to CSS that allows you to select elements based on their descendants. This selector is particularly useful for styling elements only when they contain certain content or sub-elements, offering more dynamic and conditional styling capabilities than before.

Example

Suppose you want to style article cards that contain images differently from those that don’t. Here’s how you can use :has:

.article-card:has(img) {
  border: 2px solid #007BFF; /* Blue border for cards with images */
}

Browser Support

The :has pseudo-class is relatively new, but is now supported in all browsers. For more information, see caniuse.com.

Stable: September 2023

Learn More

Nesting in CSS

CSS nesting is a recent addition that allows for a more structured stylesheet by nesting selectors within each other, similar to what preprocessors like SASS offer. However, let’s not go nest crazy—over-nesting can lead to complex and hard-to-maintain styles, commonly known as the “flying V.”

Example

Here’s how you might use nesting to simplify your CSS:

.card {
  border: 1px solid #ccc;

  &:hover {
    background-color: #f5f5f5;
  }

  .card-title {
    font-size: 1.5rem;
  }

  .card-content {
    padding: 1rem;
  }
}

While nesting can make your stylesheets cleaner and more intuitive, it’s essential to keep nesting levels reasonable to maintain readability and performance.

Browser Support

CSS nesting is now universally supported, making it easier to adopt in your projects.

Stable: August 2023

Learn More

Individual Transform Properties: Rotate, Scale, and Translate

CSS now allows for individual control over transform properties, providing a more granular approach to animations and positioning. This includes properties like rotate, scale, and translate.

Example

Here’s how you might individually scale an element, rotate it by 45 degrees, and then translate it:

.element {
  scale: 1.5;
  rotate: 45deg;
  translate: 30px 50px;
}

Browser Support

While these individual properties enjoy good browser support, checking each one’s compatibility is recommended.

Stable: August 2022

Learn More

Understanding CSS Color Spaces

Last Updated: August 16, 2024

Modern CSS supports multiple color spaces using the color() function. You can now choose from options like oklch, hsl, and rgb. This flexibility allows for more vibrant and precise designs, improving the look of your websites.

Example

.element {
  color: color(oklch 0.4 0.032 261 / 80%);
}

Browser Support

Support for the CSS color() function varies across browsers, with newer versions offering better compatibility. The device screen and OS also need to handle the chosen color space. As modern CSS is adopted more widely, this feature is becoming more common. It’s important to check both browser and device support for the best results. For more details, visit caniuse.

Stable: May 2023

Learn More

Enhancing UIs with color-mix

The color-mix function in CSS allows for blending two colors with specified proportions, offering designers precise control over color themes and transitions.

Example

.element {
  background-color: color-mix(in srgb, red 50%, blue 50%);
}

Browser Support

As color-mix is a newer feature, but is supported across browsers. Always verify compatibility for your projects.

Stable: May 2023

Learn More

Utilizing color-gamut Media Query

The color-gamut media query allows for styling based on the color range of the output device, enabling more vibrant designs on capable displays.

Example

@media (color-gamut: p3) {
  .vibrant-background { background-color: #ff7979; }
}

Browser Support

Support for color-gamut is limited to high-end devices, so consider fallbacks for broader compatibility.

Stable: February 2023

Learn More

Introducing Relative Color Syntax

Relative Color Syntax allows for defining colors in CSS relative to other colors, facilitating dynamic theme adjustments.

Example

.element {
  color: rgb(from var(--base-color), s 50%);
}

Browser Support

This feature is part of newer CSS specifications, so checking for browser support is essential.

Not released in Firefox yet.

Learn More

Scope in CSS

Scoping rules in CSS have evolved to provide better encapsulation and modularity for styles. This includes local scoping of styles to specific components or sections, allowing for more maintainable and conflict-free stylesheets. Understanding scoping can be complex, so it might be worth exploring further in dedicated articles or knowledge-sharing sessions.

Example

Here’s a basic example of using scoped styles:

:scope {
  .local-style {
    /* styles scoped to the current container only */
    color: blue;
  }
}

Scoping ensures that styles are applied only within a specific context, avoiding unintended global overrides.

Browser Support

Scoping is supported in modern browsers but may require specific syntax or methodologies like CSS Modules or Shadow DOM. Note that it is not yet released in Firefox.

Not released in Firefox yet.

Learn More

Cascade Layers

Cascade layers introduce a new way to manage CSS specificity, helping developers organize styles in a more structured manner without conflicts. This feature can be particularly useful for large projects with multiple contributors. Given its complexity, cascade layers is another that might benefit from deeper exploration in future articles or knowledge-sharing sessions.

Example

Here’s an example of how to use cascade layers:

@layer framework, components, utilities {
  .button {
    /* styles */
    background-color: red;
  }
}

Cascade layers allow you to define the order of styles and resolve specificity conflicts more predictably.

Browser Support

Cascade layers are a newer feature, so checking compatibility is essential. They are stable and widely supported as of March 2022.

Stable: March 2022

Learn More

CSS Style Queries

Style queries enable conditional styling based on the computed styles of elements, offering another layer of dynamic CSS.

Example

@style (font-weight: bold) {
  .bold-text { color: blue; }
}

Browser Support

Style queries are still in proposal stages and not available in browsers yet.

Learn More

Container Queries Revolution

Container queries represent a significant step in CSS, allowing styles to respond to the size of a parent container rather than the viewport.

Example

.container {
  container-type: inline-size;
}

.child {
  @container (min-width: 500px) {
    padding: 20px;
  }
}

Browser Support

Container queries are a cutting-edge feature and now fully supported across all browsers.

Stable: February 2023

Learn More

Range Queries for Precise Style Control

Range queries in CSS enable styles to adjust based on specific values like light levels or motion preferences, providing a more tailored user experience.

Example

This powerful tool can adjust styles based on environmental or user preference conditions.

@media (prefers-reduced-motion: no-preference) {
  .animation {
    animation: slidein 3s ease-in;
  }
}

Browser Support

Range queries have partial support depending on the feature. For example, prefers-reduced-motion is well-supported as of mid-2018.

Stable: Mid 2018

Learn More

State Queries for Interactive UIs

State queries allow CSS to apply styles based on the component’s state, such as whether a checkbox is checked or not.

Example

These queries can dynamically change styles as user interaction with elements changes.

@state (checked) {
  .checkbox:checked + .checkbox-label {
    color: green;
  }
}

Browser Support

State queries are in the proposal stage and are not yet implemented in browsers as of 2024.

Learn More

Achieving Text Balance with text-wrap

The text-wrap property in CSS, specifically the balance and pretty values, aims to improve text readability and aesthetics by balancing line lengths.

Example

This property enhances the visual harmony of text blocks, making reading on digital platforms easier and more appealing.

p {
  text-wrap: balance;
}

Browser Support

The text-wrap property is currently experimental and lacks broad browser support.

Learn More

Conditional Logic with @supports selector()

@supports selector() in CSS allows developers to apply styles conditionally based on the browser’s support for certain selectors.

Example

This rule is crucial for progressive enhancement strategies, enabling fallbacks where newer CSS features aren’t supported.

@supports selector(:has(> img)) {
  .card:has(> img) {
    border: 2px solid blue;
  }
}

Browser Support

The @supports selector() is still under development and not yet available in stable browser versions.

Learn More

Utilizing Trigonometric Functions in CSS

CSS now supports direct trigonometric functions like cos(), sin(), and tan(), enhancing the dynamic calculation capabilities within stylesheets.

Example

These functions open up a plethora of possibilities for dynamic and responsive designs, especially in animations and complex layouts.

.element {
  transform: rotate(calc(45deg * cos(1turn)));
}

Browser Support

Trigonometric functions have been supported in CSS since early 2021 in major browsers.

Stable: Early 2021

Learn More

Enhancing User Experience with the Popover API

The Popover API in CSS provides a way to create pop-up elements like tooltips and dropdown menus directly with CSS, without needing JavaScript for positioning.

Example

This API simplifies the creation and management of dynamic UI components, enhancing interactivity and accessibility.

popover {
  top: 50px;
  right: 50px;
}

Browser Support

As of 2024, the Popover API is an experimental feature and not widely supported across browsers.

Currently in Safari 17.5 – Safari Technology Preview

Learn More

Flexible Layouts with Anchor Positioning

Anchor positioning is a CSS feature that allows elements to be positioned relative to another element’s anchor point, offering more flexible layout options.

Example

This property is particularly useful for tooltips and custom dropdowns, ensuring they align perfectly with their trigger elements.

#tooltip {
  position: anchor;
  anchor-origin: top right;
  anchor-target: #button bottom right;
}

Browser Support

Anchor positioning is currently under discussion and not available in stable browsers as of 2024.

Not widely supported yet

Learn More

Creating Graceful Fallbacks with @position-fallback

The @position-fallback rule allows developers to specify alternative layouts if the primary positioning method fails or is unsupported.

Example

Ideal for ensuring robust, cross-browser compatible layouts, this rule helps manage layouts more predictably across diverse environments.

@position-fallback {
  position: static;
}

Browser Support

The @position-fallback feature is in proposal stage and not yet implemented as of 2024.

Learn More

Initial Styling with @starting-style

Last Updated: August 15, 2024

The @starting-style at-rule sets a default style state before any interactions or animations happen.

Example

This feature helps set up the starting state for animations or interactions, making sure everything begins smoothly. By improving transitions, it creates a better and more seamless user experience.

@starting-style {
  opacity: 0;
  transform: scale(0);
}

Browser Support

As of 2024, @starting-style is still in the proposal stage and has not been adopted by all browsers.

Firefox: Doesn’t support animating display: none;

Learn More

Modern Form Controls with <selectmenu>

The <selectmenu> element in HTML provides a customizable, style-able select menu, overcoming the limitations of the traditional <select>.

Example

This new form element enhances the styling capabilities of dropdown menus, making them more consistent with modern design standards.

<selectmenu id="mySelectmenu">
  <menu>
    <menuitem value="1">Option 1</menuitem>
    <menuitem value="2">Option 2</menuitem>
    <menuitem value="3">Option 3</menuitem>
  </menu>
</selectmenu>

Browser Support

The <selectmenu> element has been progressively adopted by major browsers since late 2023.

Learn More

Hey everyone, I know this was a lot to take in, and I don’t expect anyone to read it all in one go! Just pick the parts that you’re curious about right now. I put together this cheat sheet to help us all stay sharp with the latest CSS tricks that are hitting the web. It’s a big world out there, and things in CSS land are changing faster than ever. If you’ve tried out any of these new features or have some cool tips of your own, I’d love to hear about it. Let’s keep the conversation going and help each other out!

Share:

Share your thoughts

Your email address will not be published. Required fields are marked *

Latest Articles