Hi, Nicolai Schwarz here textformer.de
Designer & Webdeveloper
Dortmund, Germany
doing Drupal since around 2008
mostly Site Building & Frontend stuff
written 100+ articles in the last 15 years for Screenguide, PC Magazin, Webstandards Magazin, t3n, PHP Magazin
Topics
inert & dialog
CSS Nesting
CSS Layers
CSS Scope
Scroll-driven animation
plus lots and lots of smaller stuff
Link, at the end (Linklist + Slides)
Can I use this?
Right now?
In some cases: No! Not in production.
In other cases: It depends
Which browsers do you need to support? One year old? Two years old? Older?
It is maybe just an added feature? As in: no content is lost.
Maybe usable with @supports?
Is there a polyfill?
Or maybe a PostCSS plugin?
Baseline
Baseline gives you clear information about which web platform features are ready to use in your projects today. The core browser set: Chrome, Edge, Firefox & Safari.
Baseline has two stages:
Newly available: The feature becomes supported by all of the core browsers, and is therefore interoperable.
Widely available: 30 months has passed since the newly interoperable date. The feature can be used by most sites without worrying about support.
Baseline 2023: items that became Newly Available in 2023.
Baseline 2024: items that become Newly Available in 2024.
Limited availability across major browsers
(= don’t use it in production)
CSS Layers can help organizing your Styles much better – if you have a plan how to use your layers and if you stick to that plan.
On the other hand: This introduces a whole new level for people to get lost in specificity problems.
Sooner or later some Best Practices will emerge.
Keep it simple
CSS@scope
Limited availability
Limit the reach of your selectors. Also comes with a donut flavor.
Easy example
Another way
But, we already know how to do that
Yes, in most cases very much the same effect. But there is still a difference: A .card img has specificity of 0-1-1. The img inside the @scope only has 0-0-1.
New selector :scope
Possible Variations
Specificity
Not the same
The Donut rises
The Donut rises
The Donut rises
The Donut rises
Of course this can be nested
Website Documentation
.manual
Text
Component from Website
as image
Text
Website Documentation
.manual
Text
Component from Website
@scope (.component)
Text
Will not work as the .component still inherits CSS from the rest of the page.
Website Documentation
.manual
@scope (.manual) to (.component)
Text
Component from Website
@scope (.component)
Text
Will work. But you can do the same with a system of classes.
Better example: Color themed components
Some text within .theme-light
Some text within .theme-dark
Without scope
Nested Color themed components
Some text within .theme-light
Some text within .theme-dark
Some text within .theme-dark
Some text within .theme-light
Dark theme only works because of the order in CSS.
With scope
Result with scope
Some text within .theme-light
Some text within .theme-dark
Some text within .theme-dark
Some text within .theme-light
This works, because scoping proximity overrules source order.
Note: Scoping proximity overrules source order but is itself overridden by other, higher-priority criteria such as importance, layers, and specificity.
Logical properties and values provide control of layout through logical, rather than physical, direction and dimension mappings.
Useful for multilingual sites.
Old properties
writing-mode relative new properties
– here corresponding to western languages
The position depends on the language.
left to right: English and most other languages
right to left: like Hebrew or Arabic
top to down, then right to left: Chinese, Japanese, Korean
Auf Be’eris Mauern schrieb ich ihre Geschichte
Aus den von Kälte zerrissenen Ursprüngen und Tiefen
Nun lest das Geschehene im Schmerz und in ihrem Lichte
Fallt in den Nebel und in die Dunkelheit der Nacht und in den Urschrei
…
It might be a good idea to adopt this syntax in every project as there are more features that are using block and inline values.
For western languages you only need to know: block works vertically, inline works horizontally.
Scroll-drivenAnimations
Limited availability
Animate stuff based on the scroll position of a scroll container.
Note: Scroll-driven, not scroll-triggered!
time-based animation
Scroll Progress Timelines with scroll()
Scroll Progress Timelines
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
Here the heart is tied to the scrollbar. That’s not useful.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
View Progress Timelines
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
Now the heart is tied to its own visibility inside the scroller, based on entering and leaving the current viewport. In Firefox the heart is visible, but static.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
Limited availability (can be enabled in Chromium, since 2020, caniuse)
MasonryGridLayout
I had planned to show the plans for Masonry layout (extension to Grid Layout). But don't bother. This is a few years old, but it is going nowhere. See mdn.
(I am just mentioning this, because it was in the teaser text.)
