Nativno CSS ugniježđivanje može pojednostaviti vaš CSS kod i poboljšati vaše cjelokupno iskustvo kodiranja.
Povijesno gledano, CSS je bio težak jezik za rad. CSS pretprocesori olakšali su rad s CSS-om i također pružili dodatne značajke kao što su petlje, mixini i još mnogo toga. Tijekom godina, CSS je postao sposobniji i usvojio je neke značajke koje su izvorno uveli CSS predprocesori. Jedna takva značajka je "ugniježđeni stil".
Ugniježđeni stil omogućuje programerima ugniježđivanje CSS pravila jedno u drugo, odražavajući HTML strukturu. To rezultira organiziranijim i čitljivijim kodom, jer je odnos između HTML elemenata i njihovih odgovarajućih stilova vizualno vidljiv.
Ugniježđeni stil: stari način
Ugniježđeni stil značajka je dostupna u mnogima CSS predprocesori poput Sass, Stylus i manje CSS. Iako se sintaksa može razlikovati među ovim predprocesorima, temeljni koncept ostaje dosljedan. Ako želite stilizirati sve h1 elementi u a div s nazivom klase spremnik, u redovnom CSS-u biste napisali:
.container {
background-color: #f2f2f2;
}
.containerh1 {
font-size: 44px;
}
U CSS predprocesoru kao što je Less CSS, implementirate ugniježđeni stil ovako:
.container{
background-color: #f2f2f2;
h1 {
font-size:44px;
}
}
Gornji blok koda postiže iste rezultate kao i uobičajena implementacija CSS-a, ali olakšava svakom programeru koji čita kod da shvati što se događa. Ovaj osjećaj "hijerarhije" bio je jedan od najvećih prodajnih aduta CSS predprocesora.
Stablo ugniježđivanja može se ugniježditi na bilo kojoj dubini bez ograničenja, ali bitno je biti oprezan jer pretjerano duboko ugniježđivanje može dovesti do opširnosti koda.
Izvorni ugniježđeni stil u CSS-u
Ne uključuju svi preglednici podršku za nativni ugniježđeni stil. The Mogu li koristiti... web stranica može vam pomoći da provjerite podržava li vaš ciljni preglednik ovu značajku.
Izvorni ugniježđeni stil u CSS-u funkcionira slično CSS predprocesorima, što znači da je moguće ugniježditi bilo koji selektor unutar drugog. Ali postoji jedna ključna razlika koju biste trebali primijetiti. Pogledajte blok koda u nastavku:
html>
<htmllang="en">
<head>
<metacharset="UTF-8" />
<metaname="viewport"content="width=device-width, initial-scale=1.0" />
<title>Nested Styling in CSStitle>
head>
<body>
<divclass="container">
<h1>Hello from the children of planet Earth!h1>
div>
<style>
.container {
background-color: red;
h1 {
color: yellow;
}
}
style>
body>
html>
U gornjem bloku koda, div s nazivom klase spremnik ima crvenu boju pozadine. Stajling za h1 element leži u .kontejner blok. Ovaj h1 element ima žutu boju. Kada pokrenete ovaj kod u pregledniku, mogli biste primijetiti da nešto nije u redu. Preglednik ispravno primjenjuje crvenu boju pozadine na spremnik div, ali h1 nema odgovarajući stajling.
To je zato što ugniježđeni stil funkcionira malo drugačije u CSS-u u usporedbi s CSS predprocesorima kao što je Less. Ne možete izravno referencirati HTML element u ugniježđenom stablu. Da biste to popravili, morate koristiti znak & (&) kao što je prikazano u nastavku:
.container {
background-color: red;
& h1 {
color: yellow;
}
}
U gornjem bloku koda, & djeluje kao referenca na nadređeni selektor. Stavljanje ampersanda ispred h1 element trebao bi pregledniku dati do znanja da ciljate sve potomke h1 elementi na spremnik div. Kada pokrenete kod u pregledniku, trebali biste vidjeti sljedeće:
Od & je simbol koji se koristi za referenciranje nadređenog elementa, sasvim je moguće ciljati pseudo-klase i pseudo-elemente elementa ovako:
.parent1{
&:hover{
background-color: red;
}
&::before{
content:"Hereisapseudoelement.";
}
}
Prije implementacije CSS ugniježđenog stiliziranja, ako ste željeli stilove primijeniti uvjetno, ovisno o širini preglednika, morali ste pribjeći metodi poput sljedeće:
p {
color:black;
}
@media (min-width:750px) {
p {
color:gray;
}
}
Kada preglednik prikazuje stranicu, on određuje boju str element na temelju širine preglednika. Ako širina preglednika prelazi 750px, koristi se siva boja; inače primjenjuje zadanu boju (crnu).
Ova implementacija dobro funkcionira, ali kao što možete zamisliti, stvari mogu brzo postati prilično opširne, posebno kada trebate primijeniti različite stilove na temelju određenih pravila. Sada je moguće gnijezditi medijski upiti izravno u stilskom bloku elementa.
p {
color:black;
@media (min-width:750px) {
color:gray;
}
}
Ovaj blok koda u osnovi radi isto kao i prethodni, ali ima prednost što ga je lako razumjeti. Samo gledajući medijski upit i ugniježđeni roditeljski element, možete reći kako će preglednik primijeniti odgovarajuće stilove kada se zadovolje definirani uvjeti.
Oblikovanje web stranice s CSS ugniježđenim stilovima
Vrijeme je da sve što ste dosad naučili primijenite u praksi izrada jednostavne web stranice i korištenje značajke ugniježđenog stiliziranja u CSS-u. Napravite mapu i nazovite je kako god želite. U toj mapi kreirajte indeks.htm i a stil.css datoteka.
u indeks.htm datoteku, dodajte sljedeći šablonski kod:
html>
<htmllang="en">
<head>
<metacharset="UTF-8" />
<metaname="viewport"content="width=device-width, initial-scale=1.0" />
<linkrel="stylesheet"href="style.css" />
<title>Simple Websitetitle>
head>
<body>
<divclass="container">
<divclass="article">
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit.h1>
<divclass="meta-data">
<spanclass="author">David Uzonduspan>
<spanclass="time">3 hours agospan>
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>
<divclass="sidebar">
<h2>Trending Articlesh2>
<h4>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit, iusto ipsum!h4>
div>
div>
body>
html>
Gornji blok koda definira označavanje lažne web stranice s vijestima. Zatim otvorite stil.css datoteku i dodajte sljedeći kod:
.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: "Writtenby ";
}&:nth-child(2) {
font-style: italic;
&::before {
content: " ~ ";
}
}
}.meta-data {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: solid 1px;
}
}
Gornji blok koda stilizira web stranicu u potpunosti pomoću CSS ugniježđenog stila. The .kontejner selektor djeluje kao dubina korijena. Možete se pozvati na ovaj selektor pomoću & simbol. Kada pokrenete kod u pregledniku, trebali biste vidjeti sljedeće:
Trebate li još uvijek CSS pretprocesor?
S uvođenjem ugniježđenih stilova u izvorni CSS, CSS predprocesori mogli bi se činiti nepotrebnima. Međutim, ključno je imati na umu da CSS predprocesori nude više od samog ugniježđenog stila. Oni pružaju značajke kao što su petlje, miksini, funkcije i još mnogo toga. U konačnici, hoćete li koristiti CSS pretprocesor ili ne ovisi o vašem specifičnom slučaju upotrebe i osobnim preferencijama.