- SOFTWARE ENGINEERING
VSCode Shortcut Wechseln in anderes File
VSCode Shortcut zum schnellen Wechseln in ein anderes File
Making a component behave responsive wherever it's nested in your website can't be achieved with Media Queries - Container Queries are the solution!
Samuel
Software Engineer
Note: In Chrome, CSS Container Queries are supported since version 105 (August 2022).
Let's say we want to build a component that links to "Sam's Burger Shop". It will be shown in two different places on our website. In cases where the available space of its parent component is small, its text and image should responsively rearrange to still look nice:
Question: How can we style the component differently depending on its width? (without using Javascript)
The component in our example is a clickable box that contains an image and text, which should change it's appearance depending on the available width of its container:
...image and text...
Using a Container Query, we can adjust the layout of the card content based on the available container width:
.samsBurgerShopCard {
/* By setting the container type, child elements using @container will be based on the size of the samsBurgerShopCard div */
container-type: inline-size;
/* Optional: container-name: sams-burger-shop-card-container; */
}
.samsBurgerShopCardContent {
/* ... styles that place the burger image above the text ... */
/* Apply following styles depending of the width of the samsBurgerShopCard div */
@container (min-width: 600px) {
/* ... styles that place the burger image to the left of the text ... */
}
}
CSS Media Queries will still be relevant to retrieve user preferences, for example the preferred color scheme:
.landingPage {
background: white;
@media (prefers-color-scheme: dark) {
background: black;
}
@media (update: slow) {
/* disable animations on devices that are very slow at rendering content (e.g. e-book readers) */
}
}
VSCode Shortcut zum schnellen Wechseln in ein anderes File
If you use Git via the terminal, here's a quick tip that might make your workflow easier.
Having a single digital place to manage my personal knowledge.
Discover the different Next.js rendering strategies—SSR, SSG, ISR, CSR, Streaming, and PPR — and how they impact performance, SEO, and business outcomes. Learn how to optimize your Next.js app for speed, scalability, and user experience with the right rendering approach.
Career
(Type)
Festanstellung, Vollzeit
(Location)
Stuttgart