What's New Since CSS3 in 2015?

CSS3's impact was undeniable. A wealth of features—gradients, animations, rounded corners, box shadows, transforms—revolutionized CSS development. The widespread adoption of CSS3 (and the related "HTML5" moniker) led to a flood of learning resources. However, many developers haven't significantly updated their CSS skills since then. This article bridges that gap.

Scott Vandehey's "Modern CSS in a Nutshell" highlights this learning curve. He notes the diminishing need for preprocessors (including Autoprefixer and polyfills for future features) and the context-specific relevance of CSS-in-JS (primarily useful within JavaScript-heavy projects). He emphasizes the importance of mastering Custom Properties, Flexbox, and Grid.

Building upon this, let's explore key CSS advancements since approximately 2015:

Post-CSS3 Enhancements

Layout Revolution: Flexbox and Grid

Flexbox and Grid are fundamental to modern CSS. Grid's power is amplified by subgrid and masonry layouts (though cross-browser reliability is still developing).

.card {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 1rem;
}
.card .nav {
  display: flex;
  gap: 0.5rem;
}

CSS Custom Properties: Design Tokens and Theming

Custom properties are crucial for managing design tokens, ensuring consistency and simplifying maintenance. Dark mode implementation is a prime example. Entire sites can be styled primarily using custom properties, complementing frameworks like Tailwind CSS (a popular, though divisive, approach).

html {
  --bgColor: #70f1d9;
  --font-size-base: clamp(1.833rem, 2vw   1rem, 3rem);
  --font-size-lrg: clamp(1.375rem, 2vw   1rem, 2.25rem);
}

html.dark {
  --bgColor: #2d283e;
}

Preference Queries: User-Centric Design

Preference queries, extending traditional media queries, detect user preferences (e.g., prefers-reduced-motion, prefers-color-scheme). This allows for more accessible and personalized user experiences.

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001s !important;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #222;
  }
}

Enhanced Color Syntax and New Color Spaces

Color syntax has evolved to include alpha values directly within functions (e.g., rgb(0 0 255 / 0.5)). New color spaces—color(), lab(), lch(), hwb()—offer expanded color representation capabilities.

.block {
  background: hsl(0 33% 53% / 0.5);
  background: rgb(255 0 0);
  background: color(display-p3 0.9176 0.2003 0.1386);
  background: lab(52.2345% 40.1645 59.9971 / .5);
  background: hwb(194 0% 0% / .5);
}

Variable Fonts: Enhanced Typography

Variable fonts offer performance improvements and design flexibility compared to traditional web fonts. While color fonts exist, they haven't gained widespread adoption.

body {
  font-family: 'Recursive', sans-serif;
  font-weight: 950;
  font-variation-settings: 'MONO' 1, 'CASL' 1;
}

SVG Integration via Paths, Clipping, and Masking

CSS now seamlessly integrates with SVG, allowing for shape-based clipping (clip-path), masking (mask), path-based animation (offset-path), and path manipulation (d attribute).

.cut-out {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

CSS Filters: Image and Element Manipulation

CSS filters provide extensive image manipulation capabilities (filter), background blending (background-blend-mode), backdrop filtering (backdrop-filter), and element blending (mix-blend-mode).

.disable {
  filter: blur(1px) grayscale(1);
}

Houdini: Extending CSS with JavaScript

Houdini offers JavaScript-powered CSS extensions, including the Paint API, Properties & Values API, Layout API, and Animation API. While browser support varies, its modularity and ease of use are promising.

import "https://unpkg.com/extra.css/confetti.js";

Shadow DOM and Web Components Styling

Shadow DOM impacts styling web components, requiring understanding of external styling techniques.

my-component {
  --bg: lightgreen;
}

The Future of CSS

While catching up on current features is crucial, several promising advancements are on the horizon: container queries, container units, independent transforms, nesting, cascade layers, improved viewport units, the :has() selector, and scroll timelines.

This overview provides a comprehensive update on CSS advancements since the CSS3 era, equipping developers with the knowledge to build modern, efficient, and user-friendly websites.

The above is the detailed content of What's New Since CSS3 in 2015?. For more information, please follow other related articles on the PHP Chinese website!