Best of Kevin Powell — June 2024

1. 1
   Video

   Kevin Powell·2y

   We can now transition to and from display: none

   Learn how to transition from display: none to display: block using CSS animations and transitions. Discover the difference between animations and transitions and how to animate a backdrop in CSS.

   424

   10
2. 2
   Video

   Kevin Powell·2y

   "Smart" design patterns with container queries

   Container queries are a powerful CSS feature that allows styling based on the size of an element's container, rather than the viewport. This can lead to more flexible and meaningful breakpoints, particularly for component-based designs. The post explores practical examples, including making components adapt to the number of columns in a layout and how units like REM and EM work differently in container queries. The ability to create more intelligent design patterns without relying solely on viewport-based media queries is a key advantage.

   71