> Markdown version of [/videos/835-what-s-new-in-css-for-designers?t=2489](https://www.wearedevelopers.com/videos/835-what-s-new-in-css-for-designers?t=2489). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# What's new in CSS for Designers?

Are static design tools limiting your dynamic web experiences? Discover how modern CSS features like Subgrid, container queries, and OKLCH colors natively solve your toughest alignment and theming challenges.

- **Speakers:** Onur Gumus
- **Event:** WeAreDevelopers LIVE
- **Published:** December 1, 2023
- **Duration:** 59:20
- **URL:** https://www.wearedevelopers.com/videos/835-what-s-new-in-css-for-designers

## Summary

Bridging the gap between static design tools and modern browser capabilities, this presentation explores the latest CSS features that empower flexible, inclusive, and highly dynamic web experiences. A major focal point is the shift from physical constraints to logical properties, using concepts like `inline-size` and `block-size` to natively support right-to-left and vertical writing systems. This structural evolution is further enhanced by CSS Subgrid, which finally solves complex nested UI alignment issues—such as matching card header heights across a fluid row—without resorting to tedious workarounds.

Color management has also seen a massive leap forward. Moving away from the limitations of RGB and HSL, the broader P3 gamut and the `oklch()` color space ensure that contrast and perceived lightness remain stable even when hues shift. This proves vital for accessibility and is complemented by relative color syntax, allowing developers to programmatically generate dark modes and cohesive palettes directly within stylesheets. Similarly, responsive measurements have matured with the adoption of dynamic viewport units (`dvh`, `svh`, `lvh`), intelligently adapting to the appearance of mobile browser UI bars to ensure content is never obscured.

Finally, the conversation highlights cutting-edge methodologies that reduce reliance on complex JavaScript and simplify developer workflows. Container queries allow components to self-adjust based on parent containers rather than the global viewport, building a foundation for truly modular UI components. Coupled with the Paint API via CSS Houdini for custom geometric renders and the newly minted View Transitions API for seamless, cross-faded DOM updates natively, CSS equips modern engineering teams to build performant, highly localized, and accessible products more efficiently than ever.

**Keywords:** modern CSS capabilities, CSS logical properties, inclusive web localization, CSS subgrid layouts, P3 color gamut, oklch color space, relative color syntax, dynamic web accessibility, rem typography sizing, dvh responsive viewport units, CSS container queries, CSS houdini paint API, view transitions API, cross-browser UI standardization, programmable UI layouts

## Chapters

1. **Introduction to modern CSS capabilities for designers** (00:03) — An overview of why understanding emerging browser layout capabilities helps formulate robust design decisions.
1. **Designing layouts for inclusive writing systems** (02:08) — How to adapt interfaces seamlessly for right-to-left scripts and vertical writing orientations.
1. **Adopting logical properties for flexible layouts** (07:44) — Why replacing physical direction rules with logical alternatives like inline and block size improves web adaptability.
1. **Aligning layouts using standard Flexbox and Grid properties** (11:02) — Strategies for grouping, ordering, and aligning structural elements seamlessly using standardized positioning modules.
1. **Resolving complex item alignments using CSS Subgrid** (14:25) — How inheriting structural tracks from parent containers solves common responsive card breakage issues.
1. **Exploring the science of light and color spaces** (16:53) — A look at additive versus subtractive lighting and fundamental terminology including hue, chroma, and lightness.
1. **Expanding design possibilities with display p3 gamuts** (21:24) — Using advanced hardware color profiles that expose more vivid selections than the traditional RGB spectrum.
1. **Managing consistent color contrast using the oklch space** (23:01) — How modern hue algorithms fix lightness irregularities and maintain WCAG contrast dynamically.
1. **Generating dynamic palettes using the relative color syntax** (27:45) — Ways to programmatically derive lightness or saturation updates directly inside style sheets from base colors.
1. **Standardizing sizes using modern CSS measurement units** (30:05) — Best practices for implementing root em scaling and adaptable viewport units for mobile interactions.
1. **Creating adaptable components with container and style queries** (33:39) — Methods enabling modular UI elements to alter their structural rules based exclusively on parent surroundings.
1. **Generating custom backgrounds and layouts with CSS Houdini** (35:57) — Employing the experimental Paint API interface to render algorithmic border structures and complex geometries.
1. **Building seamless transitions with modern CSS animation APIs** (37:56) — Harnessing document state replacements alongside standard keyframes for performant and simplified page motion.
1. **Strategies for keeping up with advanced CSS evolution** (41:29) — Approaches for tracking newly shipped browser constraints and exploiting high contrast emulation inside developer tools.
1. **Anticipating missing CSS features and upcoming standardizations** (48:06) — Examining forthcoming workflow improvements like programmable style boundaries and deeply integrated custom web components.
1. **Addressing web localization using inclusive logical properties** (53:46) — How flexible dimension properties actively prevent overflow breakage across diverse translations and localized platforms.

## Related Moments

- [Initial breakdown of the CSS Houdini ecosystem](https://www.wearedevelopers.com/videos/641-is-css-houdini-finally-usable-in-2023) (from "Is CSS Houdini finally usable in 2023?")
- [Evaluating the future utility of CSS Houdini web standards](https://www.wearedevelopers.com/videos/641-is-css-houdini-finally-usable-in-2023) (from "Is CSS Houdini finally usable in 2023?")
- [Understanding Interop 2025 and new CSS capabilities](https://www.wearedevelopers.com/videos/1299-new-browser-apis-end-of-react-create-app-smuggling-data-in-emoji-and-more-with-rowdy-rabouw) (from "New Browser APIs, End of React Create App, Smuggling Data in Emoji and more with Rowdy Rabouw")
- [Mastering advanced CSS view transitions and masking](https://www.wearedevelopers.com/videos/1723-wearedevelopers-live-graalvm-in-action-static-analysis-insights-and-more) (from "WeAreDevelopers LIVE - GraalVM in action, Static Analysis insights and more")
- [Navigating the growing complexity of modern CSS architecture](https://www.wearedevelopers.com/videos/1819-wearedevelopers-live-yes-css-can-do-that) (from "WeAreDevelopers LIVE - Yes, CSS Can Do That!")
- [Overcoming learning curves for modern native CSS layouts](https://www.wearedevelopers.com/videos/1819-wearedevelopers-live-yes-css-can-do-that) (from "WeAreDevelopers LIVE - Yes, CSS Can Do That!")

## Related Articles

- [Declarative Design and a fresh take on collaboration with developers](https://www.wearedevelopers.com/magazine/595-declarative-design-and-a-fresh-take-on-collaboration-with-developers)
- [The Overflow: 5 CSS Generators and Visual Design Tools](https://www.wearedevelopers.com/magazine/708-the-overflow-5-css-generators-and-visual-design-tools)
- [Dev Digest 133 - Back to Front](https://www.wearedevelopers.com/magazine/474-dev-digest-133-back-to-front)
- [3 JavaScript-Free Techniques for Accordions, Dialogs, and Table of Contents](https://www.wearedevelopers.com/magazine/684-3-javascript-free-techniques-for-accordions-dialogs-and-table-of-contents)

## Related Jobs

- [Senior Product UI Designer](https://www.wearedevelopers.com/jobs/ext/1998621-senior-product-ui-designer) at **Almedia**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/679408-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/639235-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/683045-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/645320-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/682327-remote-senior-full-stack-engineer) at **Edge Impulse**