Container queries - Play button

In addition to container queries, we have query units. In the following demo, we have a video play button that dynamically changes its size based on the container width.

Keep in mind that it’s totally fine to use the same container name for different containers.

          
          .hero {
              container: play-button / inline-size;
          }

          .card {
              container: play-button / inline-size;
          }

          .play {
              /* 14cqw means 14% of the parent width. */
              --size: clamp(70px, 14cqw, 130px);
              width: var(--size);
              height: var(--size);
          }

          @container play-button (min-width: 600px) {
              .play svg {
                  fill: #fff;
              }
          }

In this example, I’m using CSS clamp() comparison function to set a minimum, preferred, and a maximum value for the ``—size` variable. The `14cqw` stands for 14% of the parent’s width.

Best Homemade Brownies

The BEST brownie recipe! With crispy edges, fudgy middles, and rich chocolate flavor.