Как да използвате заявки за контейнери в CSS

Дълго време медийните заявки бяха единственият начин да направите дизайна на потребителския интерфейс отзивчив на различни размери на екрана. Но дори и това имаше своите ограничения. Един от най-големите проблеми при използването на медийни заявки беше, че можете да стилизирате елемент само в отговор на промените в размера на екрана, а не най-близкия му контейнерен елемент.

За решаване на този проблем бяха въведени заявки за контейнери. Те също се увеличиха с популярността на рамки като React и Vue.js, които работят чрез създаване на модулни UI „компоненти“. Научете как да използвате заявки за контейнери, за да създавате отзивчиви елементи във вашия CSS.

Кодът, използван в тази статия, е достъпен в това GitHub хранилище и е безплатен за използване под лиценза на MIT.

Защо трябва да използвате CSS контейнерни заявки?

За да разберем важността на заявките за контейнери, нека използваме пример, който улеснява разбирането на концепцията. Но първо трябва да клонирате стартовия код от това

GitHub хранилище.

След като успешно клонирате репото, стартирайте кода. Ще намерите уеб страница, подобна на следното изображение:

Тук имате мрежово оформление, състоящо се от две колони: основна секция и странична лента. Основният раздел изглежда добре, но страничната лента (която е много по-малка от основното съдържание) изглежда малко смачкана.

Оформлението е адаптивно. Когато свиете браузъра, можете да видите, че картата се трансформира във вертикална колона:

С други думи, когато съдържанието започне да става нечетливо, оформлението се трансформира във вертикална колона, където изображението е подредено върху съдържанието. Този ефект идва в резултат на медийните заявки, което е единственият начин да определите размера на елементите въз основа на целия размер на вашия екран.

В този случай, когато екранът ви е по-малък от 800px, вие подреждате всичко едно върху друго, като използвате Подравняване на Flexbox. На по-големи екрани поставяме съдържанието едно до друго:

@медия(максимална ширина: 800 пиксела) {
.карта {
flex-direction: колона;
 }
.card-header { 
ширина: 100%;
 }
}

Най-дълго време медийните заявки са едни от основните принципи на уеб дизайна за създаване на адаптивни оформления с CSS (и беше достатъчно добър за повечето неща). Но със сигурност ще попаднете на сценарии, при които медийните заявки просто няма да са достатъчни или поне няма да бъдат удобно решение.

Един от тези сценарии е, когато имате странична лента (както правим в горния пример). В тези случаи, когато имате странична лента, ще трябва директно да изберете картата на страничната лента и да се опитате да я направите по-малка:

.странична лента.карта {
/* Направете картата на страничната лента по-малка */
}
@медия(максимална ширина: 800 пиксела) {
/* Стил на страницата, когато екранът е по-тесен от 800px */
}

Може да бъде доста сложно, ако работите с много елементи, защото трябва ръчно да изберете всички елементи и да ги преоразмерите. В крайна сметка ще получите повече код и допълнителна сложност.

Това е мястото, където заявките за контейнери могат да бъдат полезни. Вместо да бъдете принудени да използвате прозореца си за оразмеряване, можете да използвате всеки елемент на страницата си като контейнер. Тогава този контейнер може да има свои собствени ширини, на които ще базирате медийните си заявки.

Как да създадете заявка за контейнер

За да създадете заявка за контейнер, трябва да започнете с насочване към елемента, който искате да използвате като контейнер (в този случай основната секция и страничната лента). Вътре в блока трябва да зададете тип контейнер да се вграден размер:

основен, .странична лента {
тип контейнер: вграден размер
}

Когато запазите своя CSS файл, нищо няма да се промени на страницата. Но сега можете да използвате заявки за контейнери, за да промените размера и стила на картите, вложени в основната секция и секцията на страничната лента. В следната заявка за контейнер променяте картите във вертикални колони на екрани с ширина 500 пиксела или по-малко:

@контейнер(максимална ширина: 500 пиксела) {
.карта {
flex-direction: колона;
 }
.card-header {
ширина: 100%;
 }
}

Това ще работи като нормална медийна заявка. Но вместо да измервате размера на вашия екран, вие измервате размера на вашите контейнери (главни и странични секции). Така че сега, когато вашият контейнер е 500px или повече, вие използвате хоризонталния изглед. В противен случай използвате вертикално (по подразбиране за flexbox).

От изображението по-горе можете да видите, че страничната лента има вертикална форма, защото е по-малка от 500px. Като има предвид, че основното съдържание запазва хоризонталното си оформление, тъй като е по-голямо от 500px. Ако свиете браузъра си, страничната лента и основното ви съдържание ще използват вертикалното подравняване, когато достигнат 500px или по-малко.

Заявката за контейнер е невероятно мощна, защото ви позволява да преоразмерявате неща въз основа на контейнера, вместо на цялата ширина на браузъра. Това е особено полезно, когато работите с компоненти (като в React или Vue).

Със заявките за контейнери можете лесно да преоразмерите вашите UI компоненти въз основа на техния контейнер, което ви позволява да създавате напълно самостоятелни компоненти.

Наименуване на контейнери

Когато създавате a @контейнер заявка, първо търси контейнера на елемента, към който се насочвате в заявката. В нашия случай това ще бъде основният контейнер и контейнерът на страничната лента.

И дори ако картите са в друг контейнер, той просто ще игнорира другите контейнери и ще избере само най-близкия до себе си контейнер. Това е част от по-широко CSS концепция, известна като CSS селектори.

В следния пример сме превърнали елемента body в контейнер:

тяло {
тип контейнер: вграден размер;
}

Сега имаме три отделни контейнера: тяло, основна и странична секция. По подразбиране картите, които насочваме в заявката за контейнер, са по-близо до главния раздел или страничната лента, отколкото до основния текст. Така че използва секциите на основната и страничната лента като контейнери за заявката за контейнер.

За да отмените това поведение, трябва да направите две неща. Първо, трябва да дадете на елемента body име на контейнер:

тяло {
тип контейнер: вграден размер;
име на контейнер: тяло;
}

След това, когато създавате вашата заявка за контейнер, трябва да посочите името на контейнера след това @контейнер.

@контейнер тяло (максимална ширина:1000 пиксела){
/* CSS правила, насочени към контейнера на тялото */
}

Това е полезно, ако искате да използвате конкретен елемент като контейнер, а не най-близкия контейнер до елемента, който насочвате. С други думи, можете да изберете всеки конкретен контейнер и да настроите фино оформлението си.

Контейнерни единици

Друга страхотна характеристика на контейнерите е, че можете да използвате контейнерни единици. Тези единици работят точно като единици за прозорци (всички те са точно един и същи тип единици). Въпреки това контейнерните единици използват cqw (за настройка на ширината) и cqh (за настройка на височината). Тези единици определят точната ширина и височина на вашия контейнер.

CSS контейнерните заявки ви позволяват да използвате конкретни елементи като референтни точки за вашите медийни заявки. Тази техника е доста удобна за създаване на модулни, самостоятелни елементи, които могат да стоят независимо независимо от контейнера, в който се намират. Но заявките за контейнери използват същите принципи като медийните заявки и това е нещо, което трябва да овладеете, ако искате да бъдете топ един процент CSS разработчик.