TLDR Web Dev · ARTICLES & TUTORIALS

12 MODERN CSS ONE-LINE UPGRADES

moderncss.dev11 min read

Summary from the TLDR Web Dev newsletter

12 one-line CSS upgrades that will help reduce technical debt, remove unnecessary lines of JavaScript, and score easy wins for user experience. Examples include pairing `object-fit` with `aspect-ratio` to ensure images are not distorted when you apply a custom aspect ratio and using `width:fit-content` over `display: inline-block` to reduce an element’s width to the content size - this maintains the same effect while leaving the display value available, thereby not changing the position of the element in the layout.