Next up: Miriam Suzanne explains cascade layers, container queries, and other CSS goodies. Note that I actually watched this video Tuesday even though it took place Monday night, so tweet dates might be misleading.
Because this year I used Twitter’s threading / topics feature, it’s giving me 2 tweets in each embed I do here. I’m embedding every other tweet for readability. There’s a PDF at the bottom of the page in case this all collapses.
I've just been at @aneventapart. It was a fantastic Day 1 of the conference.
There's so much to think about with container queries and how it integrates with the existing Intrinsic Web Design patterns we see on e.g. https://t.co/aevy8jJdJh. https://t.co/Rt5bdvrYFN
— Josh Tumath (@JoshTumath) October 11, 2021
The mission statement for the web is “web for all. web on everything.” always with the end user in control of the outcome. We hand control over to the browser and the user and the device they’re on. Designing for the web is designing for change. #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
If conflict arises the user should have the last word, which is what !important should be used for – user agent !important overrides user !important which overrides author !important
[i am going to sprain some fingers trying to keep up with this talk!]#aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
Responsive web design (hi @beep) is a really powerful approach, and while the idea of the responsive web is very important, the technology has changed dramatically. Flexbox, grid, etc. make it more responsive and more reusable. #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
1. Fluid and fixed
2. stages of squishiness
3. Truly two dimensional layouts.
4. nested content
5. expand and contract content
6. media queries as needed— Anne Gibson (@perpendicularme) October 12, 2021
the most generic selectors paint in broad strokes with low priority defaults, then classes and attributes are higher priority, and IDs are highest priority but most specific.
— Anne Gibson (@perpendicularme) October 12, 2021
Classes and attributes are the only reusable level. Then someone throws an !importance grenade…
Cascade layers will allow us to create our own custom-named layers of the cascade, to represent our own specificity. #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
Specificity only matters inside of each layer, so a single menu item class will be overriding the things in another layer. This can help us do things like override bootstrap without writing wild selectors. #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
More cascade control, not totally reliant on specificity and code order. Fewer hacks, more clearly defined patterns. unlayered styles default to the lowest priority, the implied base layer.
This may be extended in the future! #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
Firefox has released cascade layers in the firefox nightly – you need to turn it on to use it. Chrome Canary has a runtime flag, it’s more work. #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
.@TerribleMia talking about CSS Cascade Layers – a means of explicitly defining our own layers of the cascade for increased control over which style rules win! This is really, really cool.#AEAOT
— Josh “The Vax” Vickerson (@joshvickerson) October 11, 2021
How do changes happen?
Working drafts in the working group GitHub suggest the problems and how we could fix them.
That leads to a lot of conversation in the threads and on calls which are transcribed and put back in the threads. #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
engineers create web-platform-tests which all the browser manufacturers use to determine whether they are building what’s in the spec. there’s other details as well #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
2. Scoped styles: scope problems cause using BEM syntax, etc. Scoped names can express ownership and membership. A title inside a post isn’t the same as a post title. not all titles inside this post, just the one that belongs to this post. #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
Scoped styles with an @ scope rule with both a root selector and a lower boundary selector. Anything inside the at rule only apply between the two boundaries. #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
Container queries are super-exciting. Media queries allow us to respond to the viewport. They allow us to define containers and have each card respond to the container that it’s in. #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
The containers must be sized without referencing whatever’s in it.
the contain rule helps with this.
Size containment is not great in most cases.
WE need 1 axis to remain fluid so our content doesn’t have accidental overflow. #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
container queries are absolutely not a stable spec and the syntax in the slides is still in active development.
Container query looks like a media query with @ container instead of @ media. Containers can’t query themselves. #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
There will be container relative units, like viewport sizes but specific to the containers. These are supported in the chrome prototype. They use the q prefix. (The character unit, ch, stopped them from setting ch to mean container height) #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
we might be able to query an actual value of a property and look at the state of a container. we haven’t worked out all the details yet. if we can solve the inline containment issue and they’re working on a polyfill. #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
the web isn’t done and css isn’t static. we’re all an important part of the process. come up with solutions, show everyone your pain points. keep playing, keep filing issues, keep giving the spec groups feedback. #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
Here’s a PDF of this post (which might not be accessible because I’m using print-to-PDF to generate it, my apologies) in case Twitter kicks it and all the tweets disappear. An Event Apart OT 2021 Styling the Intrinsic Web with Cascade Layers and Container Queries by Miriam Suzanne – Perpendicular Angel Design