☑ Scroll snapping
It gives you the option to lock the user’s viewport to a certain parts or element of your site. It is very useful to create cool transitions and help users focus on the most important page elements while scrolling down the page.
You can find a simple demo of it here.This effect is visible in mobile apps a lot, yet, with scroll snapping, you can bring it to websites as well.
https://codepen.io/tutsplus/pen/qpJYaK
Usage is also relatively simple on the most basic level. You simply apply the type of scroll snapping to a container and define where its children should snap to.
Of course, there is more to it. If you want to learn about it, CSS Tricks have great write up.
https://css-tricks.com/practical-css-scroll-snapping/
That only leaves a look at browser compatibility, which is pretty good.
☑ :is and :where
They allow you to reduce repetition in CSS markup by shortening lists of CSS selectors.
For example, compare this:
To this:
The same thing works with :where :
If the markup is the same, what’s the difference?
The difference is that :is is a lot more specific. It takes the level of specificity of the most specific element in the parentheses.
In contrast to that, the specificity of :where is always zero. Consequently, it is a lot easier to override further down the line.
- Would love to hear your take on this. Do share your views.
- A lot more interesting CSS properties are on the way.
Top comments (2)
Wow, thanks for sharing. I tried and it's useful.
I'm glad you liked it :)