1. Animate and retain the last property after animation ends. Yes that used to drive me crazy, but now you can determine what the final property using:
.animatedprop {
animation-fill-mode: forwards;
}2. Declare an html component as a non-dom component. This is very useful in custom components, or when you have a wrapping element, that has a "flex-box" layout for example. That element is ignored from the dom if you use: (not fully supported)
.ignoreme {
display: contents;
}3. Clip the lines to a specific number of lines. Like you would do with ellipses, except for lines. Use: (widely supported)
p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}4. Scroll HTML smoothly. When changing the location of the scrollbar by clicking on a named anchor on the same page. Use:
html {
scroll-behavior: smooth;
}