Како користити упите контејнера у ЦСС-у

Дуго времена су медијски упити били једини начин да се дизајн корисничког интерфејса учини прилагодљивим на различитим величинама екрана. Али и то је имало своја ограничења. Један од највећих проблема са коришћењем медијских упита био је то што сте могли да стилизујете само елемент као одговор на промене у величини екрана, а не његов најближи елемент контејнера.

Уведени су упити контејнера да би се решио овај проблем. Такође су порасли са популарношћу оквира као што су Реацт и Вуе.јс који раде креирањем модуларних „компоненти“ корисничког интерфејса. Научите како да користите упите контејнера за креирање прилагодљивих елемената у свом ЦСС-у.

Код коришћен у овом чланку доступан је у овом ГитХуб спремиште и бесплатан је за коришћење под МИТ лиценцом.

Зашто би требало да користите упите ЦСС контејнера?

Да бисмо разумели важност упита контејнера, употребимо пример који олакшава разумевање концепта. Али прво, морате да клонирате почетни код из овога

ГитХуб спремиште.

Након што сте успешно клонирали репо, покрените код. Пронаћи ћете веб страницу сличну следећој слици:

Овде имате распоред мреже који се састоји од две колоне: главног дела и бочне траке. Главни део изгледа добро, али бочна трака (која је много мања од главног садржаја) изгледа мало згњечена.

Распоред је прилагодљив. Када смањите претраживач, можете видети да се картица трансформише у вертикалну колону:

Другим речима, када садржај почне да постаје нечитљив, изглед се претвара у вертикалну колону где је слика наслагана на врх садржаја. Овај ефекат долази као резултат медијских упита, што је једини начин на који можете одредити величину елемената на основу целе величине вашег екрана.

У овом случају, кад год је екран мањи од 800 пиксела, стављате све једно на друго помоћу Флекбок поравнање. На већим екранима садржај постављамо један поред другог:

@медиа(максимална ширина: 800пк) {
.картица {
флек-дирецтион: колона;
 }
.цард-хеадер { 
ширина: 100%;
 }
}

Најдуже су медијски упити били један од главних принципи веб дизајна за креирање респонзивних изгледа помоћу ЦСС-а (и био је довољно добар за већину ствари). Али сигурно ћете наићи на сценарије у којима медијски упити једноставно неће бити довољни, или барем неће бити згодно решење.

Један од тих сценарија је када имате бочну траку (као што радимо у горњем примеру). У овим случајевима када имате бочну траку, морате директно да изаберете картицу бочне траке и покушате да је смањите:

.сидебар.картица {
/* Смањите картицу бочне траке */
}
@медиа(максимална ширина: 800пк) {
/* Стилизирајте страницу када је екран ужи од 800пк */
}

Може бити прилично компликовано ако радите са пуно елемената јер морате ручно да изаберете све елементе и промените им величину. На крају бисте имали више кода и додатну сложеност.

Овде би упити контејнера могли бити корисни. Уместо да будете приморани да користите оквир за приказ као своју величину, можете користити било који елемент на страници као контејнер. Тада тај контејнер може имати сопствене ширине на којима бисте базирали своје медијске упите.

Како направити упит за контејнер

Да бисте креирали контејнерски упит, требало би да почнете са циљањем елемента који желите да користите као контејнер (у овом случају, главни одељак и бочна трака). Унутар блока, потребно је да подесите контејнерског типа до инлине-сизе:

главни, .сидебар {
контејнерског типа: инлине-сизе
}

Када сачувате своју ЦСС датотеку, ништа се неће променити на страници. Али сада можете да користите упите контејнера за промену величине и стилизовање картица угнежђених у главном одељку и одељку бочне траке. У следећем упиту контејнера мењате картице у вертикалне колоне на екранима ширине 500 пиксела или мање:

@контејнер(максимална ширина: 500пк) {
.картица {
флек-дирецтион: колона;
 }
.цард-хеадер {
ширина: 100%;
 }
}

Ово ће функционисати као нормалан медијски упит. Али уместо да мерите величину екрана, ви мерите величину својих контејнера (главни и бочни одељак). Дакле, сада када је ваш контејнер 500 пиксела или више, користите хоризонтални приказ. У супротном, користите вертикално (подразумевано за флекбок).

Са горње слике можете видети да бочна трака има вертикални облик јер је мања од 500 пиксела. Док, главни садржај задржава хоризонтални изглед јер је већи од 500 пиксела. Ако смањите претраживач, и бочна трака и главни садржај ће користити вертикално поравнање када достигну 500 пиксела или мање.

Упит контејнера је невероватно моћан јер вам омогућава да промените величину ствари на основу контејнера уместо целе ширине прегледача. Ово је посебно корисно када се ради са компонентама (као што су Реацт или Вуе).

Са упитима за контејнере, можете лако да промените величину компоненти корисничког интерфејса на основу њиховог контејнера, што вам омогућава да креирате потпуно самосталне компоненте.

Именовање контејнера

Када креирате а @контејнер упита, прво тражи контејнер елемента који циљате у оквиру упита. У нашем случају, ово би био главни контејнер и контејнер бочне траке.

Чак и да су картице унутар другог контејнера, он би једноставно игнорисао друге контејнере и изабрао само себи најближи контејнер. Ово је део ширег ЦСС концепт познат као ЦСС селектори.

У следећем примеру, претворили смо елемент тела у контејнер:

тело {
контејнерског типа: инлине-сизе;
}

Сада имамо три одвојена контејнера: тело, главни и бочни део. Подразумевано, картице које циљамо у упиту контејнера су ближе главном одељку или бочној траци него телу. Дакле, користи главни и бочни одељак као контејнере за упит контејнера.

Да бисте превазишли ово понашање, морате да урадите две ствари. Прво, свом елементу тела треба да дате назив контејнера:

тело {
контејнерског типа: инлине-сизе;
назив-контејнера: тело;
}

Затим, када креирате упит за контејнер, морате да наведете име контејнера после @контејнер.

@контејнер тело (максимална ширина:1000пк){
/* ЦСС правила која циљају на тело контејнер */
}

Ово је корисно ако желите да користите одређени елемент као контејнер уместо контејнера који је најближи елементу који циљате. Другим речима, можете одабрати било који одређени контејнер и фино подесити свој изглед.

Цонтаинер Унитс

Још једна сјајна карактеристика контејнера је да можете користити контејнерске јединице. Ове јединице функционишу исто као и јединице за приказ (све су исте врсте јединица). Међутим, контејнерске јединице користе цкв (за подешавање ширине) и цкх (за подешавање висине). Ове јединице одређују тачну ширину и висину вашег контејнера.

ЦСС упити контејнера вам омогућавају да користите одређене елементе као референтне тачке за ваше медијске упите. Ова техника је прилично згодна за креирање модуларних, самосталних елемената који могу стајати независно без обзира на контејнер у којем се налазе. Али упити контејнера користе исте принципе као и медијски упити, а ово је нешто што би требало да савладате ако желите да будете један проценат најбољих ЦСС програмера.