I dagens CSS skal vi se på @container-queries
Vi har lenge hatt mediaqueries for å kunne skille på CSS basert på forskjellige skjermbredder. Det er takket være mediaqueries at responsive design tok av slik det gjorde og vi kunne få nettsider som passet like bra på både desktop og mobil.
Mediaqueries baserte seg alltid på hele skjermbredden, men visste du at du også kan basere deg på bredden eller høyden til et element? Med @container kan du nettopp det! @container fungerer på mange måter likt som mediaqueries, bare at man kan spesifisere hvilket element, eller container om du vil, den skal basere seg på.
Først må man definere et object som container. Dette gjør du ved å sette på container-type til enten size eller inline-size
.post {
container-type: inline-size;
}Deretter kan du definere hvordan andre klasser skal oppføre seg basert på containeren.
@container (min-width: 700px) {
.card {
font-size: 2em;
}
}I dette eksempelet vil .card prøve å finne nærmeste container, men hva om man vil basere seg på en annen container enn den nærmeste? Det kan man fikse ved å gi containeren navn og referere til dem.
.post {
container-type: inline-size;
container-name: summary;
}
@container summary (min-width: 400px) {
.card {
font-size: 1.5em;
}
}Dette er bare en liten del av hva containere på sikt kommer til å støtte, men denne funksjonaliteten kan du allerede bruke i dag!
Relevante lenker anbefalt av forfatteren
Uffda. En feil har oppstått, og vi klarer ikke å hente lenken!