AllTips(154)

css/Emoji Toggle with CSS Container Queries

Emoji Toggle with CSS Container Queries

Name: Emoji Toggle with CSS Container Queries
Uploaded: 2024-01-25T11:10:45+08:00
Channel: Arbaoui Mehdi
Description: Using the `@container` CSS at-rule to conditionally switch emojis based on container height for responsive content.

Next Tip

Source Code https://github.com/Front-Tips/css-container-queries-dynamic-content
MDN Reference: container-type https://developer.mozilla.org/en-US/docs/Web/CSS/container-type#size
Can I Use container-type https://caniuse.com/?search=container-type
Credits: Chokcoco https://codepen.io/Chokcoco/pen/ExrWKvN