CSSWG Meeting Jan 2020, Spain
Slide 1
Slide 2
VH Units
Slide 3
100vh top bar viewport
Slide 4
Lossless Lossy
Slide 5
top bar vhc content top bar top bar vh dynamic of what (subtrac any key content dynamic variable of current viewport size (let any keyboard/controls go overtop me) env(foo) bottom bar content controls
Slide 6
Things… • We already tried not having interop. • Implementers tried making everything magically shrink & grow — it had performance problems. And Authors don’t always want that. • Developers currently try to solve this with JS. • 100vh, 100% body, window.innerHeight don’t match. Fixed positioning to visual viewport, not layout viewport. • May want to apply same solution to VW & scrollbars.
Slide 7
Assumptions • We can’t redefine the current VH unit. • Authors have a legit use for all the possibilities. • Best solution puts the burden, and choice, on Authors. • Fixed units for all 3 measurements, animatable.
Slide 8
Proposals • VH unit = equal to 1% of the height of the initial containing block with user agent chrome minimized. • VHC unit = equal to 1% of the height of the initial containing block with user agent chrome maximized. • env(inset-collapsable-height). • height: calc(100vh - env(inset-collapsable-height, 0px));
Slide 9
Custom Origins
Slide 10
Slide 11
Project to Modernize the Cascade
Slide 12
CSS Cascade: Importance, Specificity, Overrides & Control • Was designed for simpler times • Today, can easily have hundreds of developers writing CSS over 10+ years on one project • Completing a project ticket can’t require refactoring the overall architecture of all styles
Slide 13
Increasingly-Desperate Solutions • Just have A Good Plan™. Be organized. • OOCSS, BEM, SMACSS. • Only ever use classes (only one class at a time), to flatten out specificity, basically completely removing the cascade from Author styles. • Overuse !important to win specificity wars. • CSS-in-JS (where now CSS loads in random order). • Inline-style everything.
Slide 14
What About [as designed]? • IDs increase specificity, but can only be used one per page. • Element selectors work well for simple default styles, but aren’t reusable enough for design/code systems. Too dependent on DOM structure. • Which leaves classes and attribute selectors. • And !important. • Authors are completely flattening the cascade to avoid specificity, instead of using it.
Slide 15
Trying to keep everything minimum-specificity and inline. Separate every style from each other.
Slide 16
Cries for Help / Future Hopes • Scoped Styles • Web Components • Encapsulation & Isolation
Slide 17
Instead of letting community of Authors destroy the cascade, can the CSSWG modernize it?
Slide 18
Extend Selectors
Slide 19
Slide 20
Custom Origins
Slide 21
Slide 22
Slide 23
Most important !important UA Styles !important User Styles !important Author Styles Author Styles User Styles Least important UA Styles
Slide 24
Most important !important UA Styles !important User Styles !important Author — Custom Origin 1 !important Author — Custom Origin 2 !important Author — Custom Origin 3 Author Styles — Custom Origin 3 Author Styles — Custom Origin 2 Author Styles — Custom Origin 1 Least important User Styles UA Styles
Slide 25
mportant mportant mportant mportant Components rigin 4 Layouts Site styles Site Styles rigin 3 Overrides Patterns Base Theme Ad network rigin 2 Design System Defaults CMS Extend New Styles 3rd-party libs rigin 1 Reset Reset CMS Core Bootstrap User UA Old Styles
Slide 26
Advantages / Usecases • Could be used to help the specificity wars between frameworks and Author styles. • Could reinvigorate the intended use of importance, not as a new specificity, but as a balance of power. • People could use a Origin with more importance instead of using !important whenever they need a style to override something that has more specificity. Which leaves ! important for Authors to use for a different use. (But also, this might perhaps be just as annoying as !important.)
Slide 27
usecases
Slide 28
Next Steps • Is this something to pursue? Anyone going to object? • Miriam Suzanne • Bigger meta project to “modernize the Cascade” — to explore a range of ideas.
Slide 29
Masonry Layout
Slide 30
Slide 31
masonry.desandro.com
Slide 32
Slide 33
1 4 7 5 10 2 3 9 6 8
Slide 34
Slide 35
1 2 3 5 6 7 9 4 8 10
Slide 36
1 2 3 6 7 5 8 horizontalOrder: true 4 9 10
