Mobile-first ifisser li tikteb il-base styles tiegħek għall-isgħar skrin, imbagħad tazżid ikkomplessità għal skrin akbar bi min-width media queries — minflok li tibda' mid-desktop u tneħħi l-affarijiet.
{ : grid; : ; }
(: ) {
{ : fr fr; }
}
(: ) {
{ : fr fr fr; }
}
Għaliex mobile-first jirbieħ: il-CSS bażi jibqa' minimu (il-mobile jikseb biss dak li jkollu bżonn — tajjeb għall-prestazzjoni fuq apparati isgħar), u int tqiegħed ikkomplessità, li hija aktar faċli biex traġuna dwarhom milli tivverifika/tneħħi. Hija wkoll taqbel ma' kif il-kontenut naturalment jerba' minn kolonna waħda għal ħafna.
Media queries jirrispondu għall-viewport — il-window kollu. Imma komponent riusabbli (ejja ngħidu kard) jista' jidher f'area wiesgħa ta' main jew sidebar dirjittiela' fuq l-istess paġna. Il-wisa' ta' viewport m'tistax tgħidlek kemm spazju l-komponent fil-fatt għandu.
.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; }
}
Illa issa l-kard istess awtomatikament ibidel għal layout orizzontali kull meta l-container tiegħu hu ≥400px — kemm li l-iskrin hu kbir jew it-tbagħrija jkun f'kolonna wiesgħa. Il-komponent issir verament context-independent u riusabbli.
Mobile-first iżomm il-CSS responsiv qasira u faċli fil-ġestjoni.
Container queries huma avvanz maġġuri: jippermettulek il-komponenti jirrispondu għall-spazju disponibbli tiegħhom stess, li huwa eżattament dak li għandek bżonn f'arkitettura bbażata fuq komponenti (design systems, cards/widgets riusabbli) fejn l-istess komponent jaqa' f'ħafna kontesti.