Chapter 4 of 6
4.1 Container Queries (@container)
Unlike traditional media queries that check the browser viewport width, Container Queries allow components to adapt their style based on the width of their parent container.
Container Queries Examplecss
.card-container {
container-type: inline-size;
container-name: card;
}
@container card (min-width: 400px) {
.card-content {
display: flex;
gap: 1rem;
}
}4.2 CSS Variables & Dark Mode
CSS Custom Properties Theme Switchcss
:root {
--bg-color: #ffffff;
--text-color: #121212;
}
[data-theme="dark"] {
--bg-color: #0f172a;
--text-color: #f8fafc;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s ease;
}