WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
WeAreDevelopers LIVE • Dec 1, 2023

What's new in CSS for Designers?

Onur Gumus

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.

Pause
Mute Enter Fullscreen
#1 about 3 min

Introduction to modern CSS capabilities for designers

An overview of why understanding emerging browser layout capabilities helps formulate robust design decisions.

#2 about 6 min

Designing layouts for inclusive writing systems

How to adapt interfaces seamlessly for right-to-left scripts and vertical writing orientations.

#3 about 4 min

Adopting logical properties for flexible layouts

Why replacing physical direction rules with logical alternatives like inline and block size improves web adaptability.

#4 about 4 min

Aligning layouts using standard Flexbox and Grid properties

Strategies for grouping, ordering, and aligning structural elements seamlessly using standardized positioning modules.

#5 about 3 min

Resolving complex item alignments using CSS Subgrid

How inheriting structural tracks from parent containers solves common responsive card breakage issues.

#6 about 5 min

Exploring the science of light and color spaces

A look at additive versus subtractive lighting and fundamental terminology including hue, chroma, and lightness.

#7 about 2 min

Expanding design possibilities with display p3 gamuts

Using advanced hardware color profiles that expose more vivid selections than the traditional RGB spectrum.

#8 about 5 min

Managing consistent color contrast using the oklch space

How modern hue algorithms fix lightness irregularities and maintain WCAG contrast dynamically.

#9 about 3 min

Generating dynamic palettes using the relative color syntax

Ways to programmatically derive lightness or saturation updates directly inside style sheets from base colors.

#10 about 4 min

Standardizing sizes using modern CSS measurement units

Best practices for implementing root em scaling and adaptable viewport units for mobile interactions.

#11 about 3 min

Creating adaptable components with container and style queries

Methods enabling modular UI elements to alter their structural rules based exclusively on parent surroundings.

#12 about 2 min

Generating custom backgrounds and layouts with CSS Houdini

Employing the experimental Paint API interface to render algorithmic border structures and complex geometries.

#13 about 4 min

Building seamless transitions with modern CSS animation APIs

Harnessing document state replacements alongside standard keyframes for performant and simplified page motion.

#14 about 7 min

Strategies for keeping up with advanced CSS evolution

Approaches for tracking newly shipped browser constraints and exploiting high contrast emulation inside developer tools.

#15 about 6 min

Anticipating missing CSS features and upcoming standardizations

Examining forthcoming workflow improvements like programmable style boundaries and deeply integrated custom web components.

#16 about 6 min

Addressing web localization using inclusive logical properties

How flexible dimension properties actively prevent overflow breakage across diverse translations and localized platforms.

Matching moments

4:37 min

Modern CSS visual features and framework integration

Chris Heilmann Chris Heilmann +2 · LIVE

1:54 min

Initial breakdown of the CSS Houdini ecosystem

Tanja Ulianova · World Congress 2023

2:55 min

Evaluating the future utility of CSS Houdini web standards

Tanja Ulianova · World Congress 2023

9:28 min

Audience questions on design control and printed CSS standards

Håkon Wium Lie · World Congress 2021

3:37 min

Responsive layout challenges and user customization

6:48 min

Understanding Interop 2025 and new CSS capabilities

Chris Heilmann Chris Heilmann +2 · LIVE

More from WeAreDevelopers LIVE

WeAreDevelopers LIVE - Read more, Prompt Less thumbnail
1:01:30
5 days ago

WeAreDevelopers LIVE - Read more, Prompt Less

Chris Heilmann, Daniel Cranney, Luise Freese

WeAreDevelopers LIVE - Tech Education in Two Languages thumbnail
1:00:18
12 days ago

WeAreDevelopers LIVE - Tech Education in Two Languages

Daniel Cranney, Roxy Rodriguez-Becker

WeAreDevelopers LIVE - Playing in Production thumbnail
1:06:40
19 days ago

WeAreDevelopers LIVE - Playing in Production

Andrew MacLean, Daniel Cranney, Christian Heilmann

WeAreDevelopers LIVE - Is CSS Catching Up to Flash? thumbnail
1:03:33
about 1 month ago

WeAreDevelopers LIVE - Is CSS Catching Up to Flash?

Chris Heilmann, Daniel Cranney, Bramus Van Damme

WeAreDevelopers LIVE - Project Chopin: Make Your Team and Agents Play Along thumbnail
1:21:17
about 1 month ago

WeAreDevelopers LIVE - Project Chopin: Make Your Team and Agents Play Along

Chris Heilmann, Daniel Cranney, Krzysztof Cieślak

Fake or News - AI Toothbrushes, Carrier Pigeon Tech & Life on Mars - Krzysztof Cieślak thumbnail
4:23
about 1 month ago

Fake or News - AI Toothbrushes, Carrier Pigeon Tech & Life on Mars - Krzysztof Cieślak

Chris Heilmann, Daniel Cranney

Upcoming sessions on this topic

Open session

Designing for Every Direction: Logical CSS for Global, Adaptive, and Effortlessly Reversible UIs

  • Vidhya Krishnamoorthy

    Morgan Stanley

    VP, Software Engineering Manager

Open session

React Under Fire: Rendering Performance for Streaming Agent UIs

  • Abhirupa Mitra

    Slack

    Senior Member of Technical Staff

Open session

From Profiler to Production: Measuring What Actually Matters in React & React Native

  • Andrei Tazetdinov

    Dynatrace

    React Native Developer

Open session

Supply Chain Security for the Everyday Engineer

  • Pradumna Saraf

    Kestra Technologies

    Quality Assurance Engineer

Open session

Build a Zero-Cost AI Agent in Your Browser

  • Aishwarya Mathuria

    Adobe

    Computer Scientist

  • Nishant Thakur

    Adobe

    Senior Computer Scientist

Open session

Beyond File Dumps: Context Engineering for Coding Agents

  • Animesh Dutta

    Arm

    Senior Software Engineer

Related videos

One Color to Rule Them All: Relative CSS Colors in Practice thumbnail
9:04
World Congress 2026 Europe • 3 months ago

One Color to Rule Them All: Relative CSS Colors in Practice

Mert Akça

What’s New and What’s Next in Web UI thumbnail
22:46
World Congress 2024 • about 2 years ago

What’s New and What’s Next in Web UI

Cleyra Uzcategui

Designing for Every Direction: Logical CSS for Global, Adaptive, and Effortlessly Reversible UIs thumbnail
33:03
Europe 2026 Virtual • 4 months ago

Designing for Every Direction: Logical CSS for Global, Adaptive, and Effortlessly Reversible UIs

Vidhya Krishnamoorthy

WeAreDevelopers LIVE - Is CSS Catching Up to Flash? thumbnail
1:03:33
LIVE • about 1 month ago

WeAreDevelopers LIVE - Is CSS Catching Up to Flash?

Chris Heilmann, Daniel Cranney, Bramus Van Damme

Is CSS Houdini finally usable in 2023? thumbnail
29:40
World Congress 2023 • about 3 years ago

Is CSS Houdini finally usable in 2023?

Tanja Ulianova

Future-Proof CSS thumbnail
37:55
World Congress 2022 • over 4 years ago

Future-Proof CSS

Ire Aderinokun

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.