Less known CSS Tips - 01

Declarative selector

How about being very declarative, instead of trying to put a lot of cognitive load on the names right? This is one selector that is really easy to digest, and straightforward to use. Lets say you want to style something not, then you can use below pattern

p:not(.special) {
  color: gray;
}

Styling broken images

Many times we would see images missing for different reasons. In case you want to give good UX for your customers, have a fallback. Or else you could also style missing broken images using below snippet.

img:broken {
  border: 1px solid gray;
  padding: 30px;
}

Dynamic colors

Lets say you want to change the color of an element border according to the text color, which might change due to change in theme or so, use the below snippet to adjust to changes

.border {
  border: 1px solid currentColor;
  color: #fff;
}

Improving performance

We have contain property which can help in optimize rendering by considering the element independent of the rest of DOM tree. This helps in limiting calculations of layout, style etc. to the element rather than the entire page. This is like a hook into the browser’s rendering process which you can take advantage of when you are rendering specific elements. For more details visit MDN

.optimized-element {
  contain: layout style paint;
}

Fitting an image

I had seen so many struggles styling images, to width, to height.. and many other patterns conditionally. object-fit is such a simplification of adding rules on how you want to render the image size to it’s container. This makes it so peaceful by handling different sizes of images at one point. In case you just want to use the image to fit the container without stretching and do auto-cropping, use this below snippet.

object-fit: cover;

Will share some more, as I keep learning! Have fun!