Историјски гледано, ЦСС је био тежак језик за рад. ЦСС претпроцесори су олакшали рад са ЦСС-ом и такође су обезбедили додатне функције као што су петље, миксини и још много тога. Током година, ЦСС је постао способнији и усвојио неке од карактеристика које су првобитно увели ЦСС претпроцесори. Једна таква карактеристика је „угнежђени стил“.
МУО ВИДЕО ДАНА
ПОМЕРИТЕ ДА БИСТЕ НАСТАВИЛИ СА САДРЖАЈЕМ
Угнежђени стил омогућава програмерима да угнезде ЦСС правила једно у друго, одражавајући ХТМЛ структуру. Ово резултира организованијим и читљивијим кодом, пошто је однос између ХТМЛ елемената и њихових одговарајућих стилова визуелно очигледан.
Преглед садржаја
Угнежђени стил: стари начин
Нестед Стилинг је функција доступна у многим ЦСС претпроцесорима као што су Сасс, Стилус и Лесс ЦСС. Иако се синтакса може разликовати међу овим предпроцесорима, основни концепт остаје доследан. Ако желите да стилизујете све х1 елементе у див са именом класе контејнера, у обичном ЦСС-у, написали бисте:
.container {
background-color: #f2f2f2;
}.container h1 {
font-size: 44px;
}
У ЦСС претпроцесору као што је Лесс ЦСС, имплементирате угнежђени стил овако:
.container{
background-color: #f2f2f2; h1 {
font-size:44px;
}
}
Горњи блок кода постиже исте резултате као обична имплементација ЦСС-а, али олакшава сваком програмеру који чита код да схвати шта се дешава. Овај осећај „хијерархије“ био је једна од највећих продајних тачака ЦСС претпроцесора.
Стабло за гнежђење може бити угнежђено на било којој дубини без ограничења, али је битно да будете опрезни, јер претерано дубоко угнежђење може довести до детаљног кода.
Изворни угнежђени стил у ЦСС-у
Не укључују сви претраживачи подршку за изворни угнежђени стил. Тхе Могу ли да користим… веб-сајт може да вам помогне да проверите да ли ваш циљни претраживач подржава ову функцију.
Нативни угнежђени стил у ЦСС-у функционише слично као и ЦСС претпроцесори, што значи да је могуће угнездити било који селектор унутар другог. Али постоји једна кључна разлика коју треба да приметите. Погледајте блок кода испод:
<!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>
У блоку кода изнад, див са контејнером имена класе има црвену боју позадине. Стил за х1 елемент лежи у блоку .цонтаинер. Овај х1 елемент има жуту боју. Када покренете овај код у прегледачу, можда ћете приметити да нешто није у реду. Прегледач исправно примењује црвену боју позадине на див контејнера, али х1 нема одговарајући стил.
То је зато што угнежђени стилови раде мало другачије у ЦСС-у у поређењу са ЦСС претпроцесорима као што је Лесс. Не можете директно референцирати ХТМЛ елемент у угнежђеном стаблу. Да бисте ово поправили, морате да користите амперсанд (&) као што је илустровано у наставку:
.container {
background-color: red; & h1 {
color: yellow;
}
}
У блоку кода изнад, & делује као референца на родитељски селектор. Стављање знака амперсанда испред х1 елемента требало би да омогући претраживачу да зна да циљате све подређене х1 елементе на див контејнеру. Када покренете код у претраживачу, требало би да видите следеће:
Пошто је & симбол који се користи за упућивање на родитељски елемент, сасвим је могуће циљати псеудо-класе и псеудо-елементе елемента овако:
.parent1{
&:hover{
background-color: red;
}
&::before{
content:"Here is a pseudo element.";
}
}
Пре имплементације ЦСС угнежђеног стила, ако сте желели да примените стилове условно, у зависности од ширине претраживача, морали сте да прибегнете методу попут следећег:
p {
color:black;
}@media (min-width:750px) {
p {
color:gray;
}
}
Када прегледач прикаже страницу, он одређује боју п елемента на основу ширине претраживача. Ако ширина претраживача прелази 750 пиксела, користи се сива боја; у супротном, примењује подразумевану боју (црна).
Ова имплементација добро функционише, али као што можете замислити, ствари могу брзо постати прилично опширне, посебно када треба да примените различите стилове на основу одређених правила. Сада је могуће угнездити медијске упите директно у блок стила елемента.
p {
color:black; @media (min-width:750px) {
color:gray;
}
}
Овај блок кода ради у основи исту ствар као и претходни, али има предност што је лак за разумевање. Само гледајући медијски упит и родитељски елемент који се угнежђује, можете рећи како ће претраживач применити одговарајуће стилове када се испуне дефинисани услови.
Стилизирање веб странице помоћу ЦСС угнежђених стилова
Време је да све што сте до сада научили примените у пракси тако што ћете направити једноставну веб страницу и искористити функцију угнежђеног стила у ЦСС-у. Направите фасциклу и назовите је како желите. У том фолдеру направите датотеку индек.хтм и стиле.цсс.
У датотеци индек.хтм додајте следећи шаблонски код:
<!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>
Блок кода изнад дефинише ознаке за лажну веб локацију за вести. Затим отворите датотеку стиле.цсс и додајте следећи код:
.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;
}
}
Блок кода изнад стилизује веб локацију у потпуности са ЦСС угнежђеним стилом. Селектор .цонтаинер делује као дубина корена. Можете упућивати на овај селектор користећи & симбол. Када покренете код у претраживачу, требало би да видите следеће:
Да ли вам је и даље потребан ЦСС препроцесор?
Са увођењем угнежђених стилова у изворни ЦСС, ЦСС претпроцесори могу изгледати као непотребни. Међутим, кључно је имати на уму да ЦСС претпроцесори нуде више од само угнежђеног стила. Они пружају функције као што су петље, миксини, функције и још много тога. На крају крајева, да ли ћете користити ЦСС препроцесор или не зависи од вашег специфичног случаја употребе и личних преференција.