Conditionally Adaptive CSS

on YouTube ↗34m

" summary

Observation: browsers download all linked CSS but assign higher priority to files whose media matches the current environment, so splitting a big stylesheet into base/mobile/desktop CSS files yields earlier first paint while tablet/desktop chunks load in background. Demo site (single big file vs split files), Chrome/Firefox/Safari profilers and the network panel priority column show rendering triggers after the high‑priority files arrive. Note: @import inside CSS does not get the same prioritization. Tools used: Chrome DevTools performance panel, throttled network and slow-static-server for reproducible results.

AI-written summary · about

" chapters (11)

1. 0:00Introduction and speaker intro
2. 3:32CSS performance focus
3. 8:34Render blocking CSS explained
4. 13:07Testing adaptive CSS approach
5. 17:02Experiment with media queries
6. 20:53Real-world demo results
7. 23:26Browser priority behavior
8. 26:20Conditional CSS limitations
9. 27:46Advanced use cases
10. 30:15Available tools and plugins
11. 32:46Resources and closing

" related talks

• 30mFaCSSt—CSS and PerformanceHarry Roberts · Render Conference 2018
• 43mFaCSSt: CSS and PerformanceHarry Roberts · Web Unleashed 2018
• 52mFaCSSt: CSS & PerformanceHarry Roberts · JS Fest 2018
• 15mWriting CSS in the year 3019Ire Aderinokun · dotCSS 2019
• 27mSpeed Up! Critical CSS to the RescueAmi Reynoso · CSSconf Argentina 2016
• 47mFaCSSt—CSS and PerformanceHarry Roberts · Frontend United 2018
• 18mWhat NOT to Do in CSSSergio Behrends · CSSconf Argentina 2016
• 39mWhat about CSS? Progressive Enhancement and CSSIre Aderinokun · Voxxed Days Zurich 2017