Ire Aderinokun

Future-Proof CSS

Your CSS fails silently. Learn to build a resilient foundation that adapts to any browser, now and in the future.

Future-Proof CSS
#1about 4 minutes

The web's foundational principle of backward compatibility

Web technologies are designed not to break older sites, ensuring longevity even for pages with deprecated or missing HTML elements.

#2about 4 minutes

Building for resilience with progressive enhancement

Progressive enhancement starts with a core experience for the least capable devices and adds features for modern browsers, unlike graceful degradation.

#3about 2 minutes

The unique challenges of progressive enhancement in CSS

Unlike JavaScript, CSS lacks robust built-in feature detection and error handling, which causes styles to fail silently without feedback.

#4about 5 minutes

Core techniques for writing robust and resilient CSS

Start with sensible HTML, leverage the cascade for fallbacks, use mobile-first media queries, and use older, well-supported properties when needed.

#5about 2 minutes

Using feature queries for progressive enhancement

Use positive @supports queries to apply modern CSS as an enhancement, ensuring a functional baseline for browsers that don't support feature queries.

#6about 6 minutes

Writing CSS for a global audience with internationalization

Adapt layouts for different languages and writing directions by using logical properties like `margin-inline-start` instead of physical ones like `margin-left`.

#7about 5 minutes

Using the right tool for the right job for accessibility

Improve accessibility by using HTML for content, CSS for styling, and JavaScript for functionality, avoiding hacks like using CSS pseudo-elements for labels.

#8about 3 minutes

Preserving accessibility when customizing default styles

When restyling default elements like buttons, ensure you provide accessible alternatives for focus states and adapt to user preferences like reduced motion.

#9about 6 minutes

Proactively auditing CSS for accessibility and compliance

Use browser developer tools like Firefox Accessibility Inspector and Lighthouse to audit for issues, but supplement them with real user testing for complete coverage.

Related jobs
Jobs that call for the skills explored in this talk.

Matching moments

Using content channels to build an event community
04:49 MIN

Using content channels to build an event community

Cat Herding with Lions and Tigers - Christian Heilmann

Selecting strategic partners and essential event tools
03:17 MIN

Selecting strategic partners and essential event tools

Cat Herding with Lions and Tigers - Christian Heilmann

Organizing a developer conference for 15,000 attendees
01:32 MIN

Organizing a developer conference for 15,000 attendees

Cat Herding with Lions and Tigers - Christian Heilmann

Increasing the value of talk recordings post-event
04:57 MIN

Increasing the value of talk recordings post-event

Cat Herding with Lions and Tigers - Christian Heilmann

Establishing a single source of truth for all data
02:39 MIN

Establishing a single source of truth for all data

Cat Herding with Lions and Tigers - Christian Heilmann

Rapid-fire thoughts on the future of work
02:44 MIN

Rapid-fire thoughts on the future of work

What 2025 Taught Us: A Year-End Special with Hung Lee

The industry's focus on frameworks over web fundamentals
11:32 MIN

The industry's focus on frameworks over web fundamentals

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Balancing the trade-off between efficiency and resilience
03:38 MIN

Balancing the trade-off between efficiency and resilience

What 2025 Taught Us: A Year-End Special with Hung Lee

Featured Partners

Related Videos

See all videos
What’s New and What’s Next in Web UI22:46

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

Cleyra Uzcategui

Can CSS recreate Tufte's designs?28:00

Can CSS recreate Tufte's designs?

Håkon Wium Lie

How to write a book with CSS40:25

How to write a book with CSS

Håkon Wium Lie

Design Principles For The Web29:11

Design Principles For The Web

Jeremy Keith

The State Of The Web43:11

The State Of The Web

Jeremy Keith

The year 3000, a brief history of Web Development25:30

The year 3000, a brief history of Web Development

Lorenzo Pieri

Explore new web features before everyone else44:43

Explore new web features before everyone else

Nikita Dubko

Is CSS Houdini finally usable in 2023?29:40

Is CSS Houdini finally usable in 2023?

Tanja Ulianova

Related Articles

View all articles
DC
Daniel Cranney
Creating a Spotlight Text Effect with CSS and JavaScript
Every now and then it’s fun to build something small just to get a better grip on a concept, and this one’s a great example. We’ll explore how to make a simple spotlight text effect that helps you understand how to follow the cursor, use CSS variable...
Creating a Spotlight Text Effect with CSS and JavaScript
CH
Chris Heilmann
Building a "shoutout" component in plain HTML/CSS/JavaScript
Every Wednesday we meet at noon to talk about a lot of tech news, tools and resources in something we call WeAreDevelopers Live . We go live on YouTube and afterwards we cut out short videos to post on social media. What we needed was an obvious “sho...
Building a "shoutout" component in plain HTML/CSS/JavaScript
BR
Benjamin Ruschin
The HTML Elements That You’re Probably Over-Engineering
As frameworks have become more and more commonplace in the world of web development, so too has the over-engineering of features made possible by our humble old friend, HTML. The mental models that come with using state management in React, Vue and o...
The HTML Elements That You’re Probably Over-Engineering

From learning to earning

Jobs that call for the skills explored in this talk.