Explore the practical application of CSS Grid in production environments through this 18-minute conference talk from CSSconf EU 2018. Discover how to refactor large-scale websites using CSS Grid while maintaining support for Internet Explorer and older browsers. Learn techniques for implementing pure CSS layouts, leveraging @supports for browser compatibility, and utilizing simple fallback layouts. Gain insights into the benefits of CSS Grid over traditional float-based layouts and JavaScript-dependent solutions. Examine real-world examples of CSS Grid implementation, including strategies for cross-browser testing and progressive enhancement. Delve into upcoming CSS features like display:contents and subgrid, and understand their potential impact on future refactoring efforts. Acquire knowledge on integrating CSS custom properties alongside Grid layouts for more flexible and maintainable stylesheets.
Overview
Syllabus
Introduction
Progressive Enhancement
Order Radius
Modern Example
Layout
Back in 2016
Internet Explorer
Sidebar
Make it look the same
Why use CSS Grid
Third example
Stripe
Edge stats
Open Edge
The Guardian
Nature Calm
Pure HTML
Media Query
IE vs Chrome
Cross browser testing
Browser Stack
Cutting Mustard
CSS without Grid
Benefits of CSS Grid
Form Elements
Display Contents
Edge Support
SubGrid
Grid vs Bridge
Taught by
JSConf
