WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
World Congress 2022 • Jun 15, 2022

Future-Proof CSS

Ire Aderinokun

Future-proofing your CSS actually means past-proofing it. Learn how to build resilient web layouts using progressive enhancement, feature queries, and context-aware logical properties.

Pause
Mute Enter Fullscreen
#1 about 5 min

Historic resilience and backward compatibility of web technologies

The original world wide web design highlights the foundational principle of preserving older websites completely intact.

#2 about 4 min

Adopting progressive enhancement to prepare for diverse browser capabilities

Building for limited devices first ensures core search and functionality works even without modern javascript or styling.

#3 about 2 min

Difficulties applying progressive enhancement concepts within stylesheets

The lack of formal feature detection and robust error handling makes failing stylesheet code fail silently.

#4 about 2 min

Building robust initial experiences through sensible markup structures

Crafting comprehensive markup ensures documents preserve logical sequence and usability when custom styling fails or loads slowly.

#5 about 3 min

Leveraging the cascade and media queries to optimize parsing

Utilizing minimum width media queries limits the sheer volume of code parsed by slower mobile processors.

#6 about 2 min

Reusing reliable legacy techniques for broad browser support requirements

Relying on older layout properties like floats often proves essential when strict business requirements demand supporting outdated platforms.

#7 about 2 min

Isolating modern syntax upgrades using positive feature query blocks

Wrapping newer visual layout tools within positive capability checks prevents syntax crashes in non-compliant rendering engines.

#8 about 4 min

Managing complex multilingual content rendering via internationalization properties

Dedicated layout properties control text direction and vertical alignments representing diverse character sets and regional reading patterns.

#9 about 3 min

Implementing logical layout dimensions replacing hardcoded directional constraints

Replacing explicit directional assignments with block and inline flow rules automatically shifts physical rendering based on localized context.

#10 about 4 min

Sustaining structural accessibility limits by injecting content correctly

Placing invisible contextual data purely within active stylesheets fails to populate core interface trees queried by assistive technologies.

#11 about 2 min

Avoiding the deployment of stylesheet tricks for complex behaviors

Forcing dynamic interaction states entirely via conditional pseudo-classes introduces unintended navigation traps for keyboard and mobile environments.

#12 about 3 min

Preserving structural focus indicators during custom interface adjustments

Modern interaction pseudo-classes facilitate removing default selection rings effectively without breaking essential visual feedback maps for alternate inputs.

#13 about 1 min

Adapting interface parameters automatically based on defined user settings

Intercepting system configuration directives like animation reduction or contrast tuning enables deploying heavily tailored presentation variants instantly.

#14 about 3 min

Verifying accessibility compliance utilizing automated auditing and user testing

Confirming visual accessibility parameters requires pairing objective tool analysis engines with subjective human validation passes.

#15 about 4 min

Handling edge cases surrounding syntax scope and formatting fallbacks

Exploring shorthand property conflicts, isolating media rules efficiently, and safely bridging script dependencies with native interface behaviors.

Matching moments

6:37 min

Strategies for keeping up with advanced CSS evolution

Onur Gumus · LIVE

2:04 min

Introduction to modern CSS capabilities for designers

Onur Gumus · LIVE

5:39 min

Anticipating missing CSS features and upcoming standardizations

Onur Gumus · LIVE

2:55 min

Evaluating the future utility of CSS Houdini web standards

Tanja Ulianova · WWC 2023

6:26 min

Feature detection and resilience in modern CSS architecture

Aaron T. Grogg · Coffee With Developers

4:41 min

Managing the growing complexity of modern CSS capabilities

Chris Heilmann +2 · LIVE

More from World Congress 2022

What the heck do "declarative" and "reactive" actually mean? thumbnail
30:40
almost 4 years ago

What the heck do "declarative" and "reactive" actually mean?

André Kovac

The Design and Evolution of C++ thumbnail
1:01:15
about 4 years ago

The Design and Evolution of C++

Bjarne Stroustrup

But, you're not Facebook thumbnail
31:12
about 4 years ago

But, you're not Facebook

Kristijan Ristovski

Communicate efficiently with Software Architecture Diagrams thumbnail
28:11
about 4 years ago

Communicate efficiently with Software Architecture Diagrams

Simon Lasselsberger

Get Ready for Jakarta EE 10! thumbnail
42:53
about 4 years ago

Get Ready for Jakarta EE 10!

Ivar Grimstad

Keep your code refactorable thumbnail
26:46
about 4 years ago

Keep your code refactorable

Gerrit Stapper

Upcoming sessions on this topic

Open session

World Congress 2026 North America

Architecting AI in Angular: WebMCP, A2UI, and the Agent Experience

Ankita Sood

Sr. Principal Engineer @ Secureworks | Angular GDE

Ankita Sood
Open session

World Congress 2026 North America

Secure-by-Inclusion: Preventing Accessibility Barriers from Becoming Security Vulnerabilities

Radostina (Ina) Tsvetkova

Norwegian Directorate of Labour and Welfare (NAV), Senior Advisor in Digital Accessibility and Inclusive Design

Radostina (Ina) Tsvetkova
Open session

World Congress 2026 North America

Fast by Design: A Masterclass in High-Performance Web Engineering

Aaron Grogg

Senior web developer, committed to improving the user experience by improving web performance

Aaron Grogg
Open session

World Congress 2026 North America

When Humans Stop Writing Code: Rethinking Languages, Compilers, and Responsibility

Simon Auer

Organizer of flutter vienna meetup and CEO of marqably

Simon Auer
Open session

World Congress 2026 North America

Vibe Coding Accessibility

Karl Groves

Focused on actively fixing accessibility

Karl Groves
Open session

World Congress 2026 North America

Small LLM in your Browser: Huge Opportunities for Web Applications

Daniel Ostrovsky

UI/UX Architect at Payoneer | AI Architect | Full Cycle Development Expert | Public Speaker | Open Source Contributor |

Daniel Ostrovsky

Related videos

What's new in CSS for Designers? thumbnail
59:20
LIVE • over 2 years ago

What's new in CSS for Designers?

Onur Gumus

What’s New and What’s Next in Web UI thumbnail
22:46
WWC 2024 • almost 2 years ago

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

Cleyra Uzcategui

WeAreDevelopers LIVE - Web Typography; CSS Layout features; Staying curious in an AI world and more thumbnail
1:10:55
LIVE • over 1 year ago

WeAreDevelopers LIVE - Web Typography; CSS Layout features; Staying curious in an AI world and more

Chris Heilmann, Daniel Cranney, Jason Pamental

Using all the HTML, Running State of the Browser and "Modern" is Rubbish thumbnail
1:15:44
LIVE • over 1 year ago

Using all the HTML, Running State of the Browser and "Modern" is Rubbish

Chris Heilmann, Daniel Cranney, David Letorey

WeAreDevelopers LIVE - CSS is DOOMed thumbnail
59:11
LIVE • 5 months ago

WeAreDevelopers LIVE - CSS is DOOMed

Chris Heilmann, Daniel Cranney, Justin Halsall, Christian Schaefer

WeAreDevelopers LIVE - CSS is DOOMed thumbnail
1:01:17
LIVE • 4 months ago

WeAreDevelopers LIVE - CSS is DOOMed

Chris Heilmann, Daniel Cranney, Niels Leenheer

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.