Sekrab Garage

CSS tricks

Four gems in css tricks that come in quite handy

CSS November 1, 20

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;
}