Mobile-first do të thotë të shkruash stilet bazë për ekranin më të vogël, pastaj të shtosh kompleksitet për ekrane më të mëdha me media queries min-width — përkatësisht se sa të fillosh në desktop dhe të heqësh gjërat.
{ : grid; : ; }
(: ) {
{ : fr fr; }
}
(: ) {
{ : fr fr fr; }
}
Pse mobile-first fitojnë: CSS bazë qëndron minimal (mobile merr vetëm atë që i duhet — mirë për performancën në pajisje më të dobëta), dhe ti shtosh kompleksitet, e cila është më e lehtë për të menduar rreth asaj sesa të anulosh/heqësh atë. Gjithashtu përputhet me mënyrën se si përmbajtja natyrshëm rrjedh nga një kolonë në shumë.
Media queries përgjigjen viewport-it — i gjithë dritares. Por një komponent i ripërdorshëm (thuaj një kartë) mund të shfaqet në një zonë të gjerë kryesore ose një anë të ngushtë në të njëjtën faqe. Gjerësia e viewport-it nuk mund të të tregojë sa vend i ka në të vërtetë komponenti.
.card-wrapper {
container-type: inline-size; /* declare it a query container */
}
/* style the card based on the CONTAINER's width, not the viewport */
@container (min-width: 400px) {
.card { display: grid; grid-template-columns: auto 1fr; }
}
Tani e njëjta kartë automatikisht kalon në një paraqitje horizontale sa herë që kontejneri i saj është ≥400px — pavarësisht nëse është sepse ekrani është i madh apo sepse është në një kolonë të gjerë. Komponenti bëhet vërtet i pavarur nga konteksti dhe i ripërdorshëm.
Mobile-first e mbajnë CSS-in responsive të hollë dhe të mirëmbajtshëm.
Container queries janë një përparim i madh: ata e lejojnë komponentët të përgjigjen ndaj hapësirës së tyre të disponueshme, e cila është saktësisht ajo që të duhet në një arkitekturë të bazuar në komponente (sisteme dizajni, karta/miniatura të ripërdorshëm) ku i njëjti komponent ulet në shumë kontekste.