В исторически план CSS е труден език за работа. CSS препроцесорите улесниха работата с CSS и също така предоставиха допълнителни функции като цикли, миксини и други. През годините CSS стана по-способен и възприе някои от функциите, въведени първоначално от CSS препроцесорите. Една такава функция е „вложен стил“.
MUO ВИДЕО НА ДЕНЯ
ПРЕВЪРТЕТЕ, ЗА ДА ПРОДЪЛЖИТЕ СЪС СЪДЪРЖАНИЕТО
Вложеният стил позволява на разработчиците да влагат CSS правила едно в друго, отразявайки структурата на HTML. Това води до по-организиран и четим код, тъй като връзката между HTML елементите и съответните им стилове е визуално очевидна.
Съдържание
Вложен стил: Старият начин
Вложеното стилизиране е функция, налична в много CSS препроцесори като Sass, Stylus и Less CSS. Въпреки че синтаксисът може да се различава между тези препроцесори, основната концепция остава последователна. Ако искате да стилизирате всички h1 елементи в div с името на класа контейнер, в обикновен CSS, ще напишете:
.container {
background-color: #f2f2f2;
}.container h1 {
font-size: 44px;
}
В CSS препроцесор като Less CSS вие прилагате вложен стил по следния начин:
.container{
background-color: #f2f2f2; h1 {
font-size:44px;
}
}
Кодовият блок по-горе постига същите резултати като обикновената реализация на CSS, но улеснява всеки разработчик, който чете кода, да разбере какво се случва. Това усещане за „йерархия“ беше една от най-големите точки за продажба на CSS препроцесорите.
Дървото за влагане може да бъде вложено на произволна дълбочина без ограничения, но е важно да бъдете внимателни, тъй като прекалено дълбокото влагане може да доведе до многословност на кода.
Естествен вложен стил в CSS
Не всички браузъри включват поддръжка за естествен вложен стил. The Мога ли да използвам… уебсайт може да ви помогне да проверите дали целевият ви браузър поддържа тази функция.
Естественият вложен стил в CSS работи подобно на CSS препроцесорите, което означава, че е възможно да вложите всеки селектор в друг. Но има една ключова разлика, която трябва да отбележите. Разгледайте кодовия блок по-долу:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Nested Styling in CSS</title>
</head>
<body>
<div class="container">
<h1>Hello from the children of planet Earth!</h1>
</div>
<style>
.container {
background-color: red;h1 {
color: yellow;
}
}
</style>
</body>
</html>
В кодовия блок по-горе div с контейнера за име на клас има червен цвят на фона. Стилът за елемента h1 се намира в блока .container. Този елемент h1 има жълт цвят. Когато стартирате този код в браузъра, може да забележите нещо нередно. Браузърът правилно прилага червен фонов цвят към div на контейнера, но h1 няма подходящия стил.
Това е така, защото вложените стилове работят малко по-различно в CSS в сравнение с CSS препроцесорите като Less. Не можете директно да препращате към HTML елемент във вложено дърво. За да коригирате това, трябва да използвате амперсанд (&), както е илюстрирано по-долу:
.container {
background-color: red; & h1 {
color: yellow;
}
}
В кодовия блок по-горе & действа като препратка към родителския селектор. Поставянето на амперсанда преди елемента h1 трябва да уведоми браузъра, че насочвате към всички дъщерни елементи h1 в div на контейнера. Когато стартирате кода в браузъра, трябва да видите следното:
Тъй като & е символът, използван за препратка към родителски елемент, е напълно възможно да се насочат към псевдо-класовете и псевдо-елементите на даден елемент по следния начин:
.parent1{
&:hover{
background-color: red;
}
&::before{
content:"Here is a pseudo element.";
}
}
Преди внедряването на CSS вложен стил, ако сте имали за цел да прилагате стилове условно, в зависимост от ширината на браузъра, трябваше да прибегнете до метод като следния:
p {
color:black;
}@media (min-width:750px) {
p {
color:gray;
}
}
Когато браузърът визуализира страницата, той определя цвета на елемента p въз основа на ширината на браузъра. Ако ширината на браузъра надвишава 750px, той използва сив цвят; в противен случай прилага цвета по подразбиране (черен).
Това внедряване работи добре, но както можете да си представите, нещата могат да станат доста многословни бързо, особено когато трябва да приложите различни стилове въз основа на определени правила. Вече е възможно да влагате медийни заявки директно в стиловия блок на елемент.
p {
color:black; @media (min-width:750px) {
color:gray;
}
}
Този кодов блок прави основно същото като предишния, но идва с предимството, че е лесен за разбиране. Като просто разгледате медийната заявка и вложения родителски елемент, можете да разберете как браузърът ще приложи подходящите стилове, когато определените условия са изпълнени.
Оформяне на уеб сайт с CSS вложени стилове
Време е да приложите на практика всичко, което сте научили досега, като създадете прост уебсайт и използвате функцията за вложен стил в CSS. Създайте папка и я наименувайте както искате. В тази папка създайте файл index.htm и style.css.
Във файла index.htm добавете следния шаблонен код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://wilku.top/how-to-use-native-css-nesting-in-your-web-applications/style.css" />
<title>Simple Website</title>
</head>
<body>
<div class="container">
<div class="article">
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h1>
<div class="meta-data">
<span class="author">David Uzondu</span>
<span class="time">3 hours ago</span>
</div>
<div>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo ut
quasi hic sint dolorum sapiente magni ratione? Suscipit commodi ad,
asperiores nostrum natus aperiam et alias, officiis dolorum ipsa vero
minima consequatur recusandae quasi aliquid quibusdam ducimus eaque!
Excepturi voluptas eveniet nemo, earum doloribus, soluta architecto
iste repellat autem aspernatur beatae ut quis odio est voluptates sunt
qui rerum blanditiis minus! Rerum labore nobis, odit quod amet dolorum
quae laudantium.
</div>
</div>
<div class="sidebar">
<h2>Trending Articles</h2>
<h4>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit, iusto ipsum!</h4>
</div>
</div>
</body>
</html>
Кодовият блок по-горе дефинира маркирането за фиктивен новинарски уебсайт. След това отворете файла style.css и добавете следния код:
.container {
display: flex;
gap: 25px; @media(max-width:750px) {
flex-direction: column;
}
.article{
width:90%;
}
& div:nth-child(3) {
text-align: justify;
}
& span {
color: rgb(67, 66, 66);
&:nth-child(1)::before {
font-style: italic;
content: "Written by ";
}
&:nth-child(2) {
font-style: italic;
&::before {
content: " ~ ";
}
}
}
.meta-data {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: solid 1px;
}
}
Кодовият блок по-горе стилизира уебсайта изцяло с CSS вложен стил. Селекторът .container действа като коренна дълбочина. Можете да направите препратка към този селектор, като използвате символа &. Когато стартирате кода в браузъра, трябва да видите следното:
Все още ли имате нужда от CSS препроцесор?
С въвеждането на вложени стилове в родния CSS, CSS препроцесорите може да изглеждат ненужни. Въпреки това е изключително важно да имате предвид, че CSS препроцесорите предлагат повече от просто вложен стил. Те предоставят функции като цикли, миксини, функции и др. В крайна сметка, дали да използвате CSS препроцесор или не зависи от вашия конкретен случай на употреба и лични предпочитания.