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 · World Congress 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
about 4 years ago

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

André Kovac

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

The Design and Evolution of C++

Bjarne Stroustrup

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

But, you're not Facebook

Kristijan Ristovski

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

Communicate efficiently with Software Architecture Diagrams

Simon Lasselsberger

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

Get Ready for Jakarta EE 10!

Ivar Grimstad

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

Keep your code refactorable

Gerrit Stapper

Related videos

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

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

Vidhya Krishnamoorthy

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

What's new in CSS for Designers?

Onur Gumus

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

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 - Is CSS Catching Up to Flash? thumbnail
1:03:33
LIVE • 9 days ago

WeAreDevelopers LIVE - Is CSS Catching Up to Flash?

Chris Heilmann, Daniel Cranney, Bramus Van Damme

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.