CSS is Awesome

Over the past few years, CSS has been gaining features at a rate that is almost impossible to follow. Features that once required pre-processors are now native to the platform. Variables? Check. Nesting? Check. And now there's even whispers of mixins.

During this presentation we will examine many of the latest features added to CSS including layers, container queries, subgrid, nesting, and probably the dozens of others added since this presentation was submitted. We will discuss the syntax and look at real-world use-cases. We will also briefly cover what's on the horizon for CSS.

Transcript

1. HighEdWeb 2024 This presentation contains a lot of code. If you’re having trouble reading this… move closer. CSS is Awesome
2. Erik Runyon Technical Director Office of Public Affairs and Communications University of Notre Dame ErikRunyon.com/heweb2024 All the links!
3. Layout Animations Selectors Text Javascript Replacements We’re not going to get to all of it. So… what’s new with HTML and CSS?
4. Web Platform Status/Interop
5. - wpt.fyi/interop-2024 Interop 2024 is a cross-browser effort to improve the interoperability of the web — to reach a state where each technology works exactly the same in every browser. This is accomplished by encouraging browsers to precisely match the web standards for CSS, HTML, JS, Web API, and more.
6. web.dev/baseline Baseline Widely available: 30 months has passed since the newly interoperable date. The feature can be used by most sites without worrying about support. Newly available: The feature becomes supported by all of the core browsers, and is therefore interoperable. Limited availability: Not supported by all core browsers. Web Platform Baseline gives you clear information about which web platform features are safe to use in your projects today. Available on MDN and caniuse.com
7. Let’s look at some <code>!
8. Topics we didn’t cover • Relative color syntax • accent-color • color-scheme • Style queries • light-dark • calc-size(auto) • @scope • Proposed “if()” statement
9. Coming soon… • Customizable <select> • Masonry Layout
10. Resources you should follow New to the web platform: web.dev/series/new-to-the-web Web Platform Status: webstatus.dev Stephanie Eckles: thinkdobecreate.com Ahmad Shadeed: ishadeed.com Keeping Up
11. thank you Erik Runyon erikrunyon.com @erunyon