Izvorno gnezdenje CSS lahko poenostavi vašo kodo CSS in izboljša vašo splošno izkušnjo kodiranja.
V preteklosti je bil CSS težak jezik za delo. Predprocesorji CSS so poenostavili delo s CSS in zagotovili dodatne funkcije, kot so zanke, mešanice in drugo. Z leti je CSS postal zmogljivejši in sprejel nekatere funkcije, ki so jih prvotno predstavili predprocesorji CSS. Ena taka funkcija je "ugnezdeni stil".
Ugnezdeni slog omogoča razvijalcem, da pravila CSS ugnezdijo eno v drugega, kar odraža strukturo HTML. Posledica tega je bolj organizirana in berljiva koda, saj je razmerje med elementi HTML in njihovimi ustreznimi slogi vizualno vidno.
Ugnezdeni slog: stari način
Ugnezdeni stil je funkcija, ki je na voljo v mnogih Predprocesorji CSS, kot je Sass, Stylus in manj CSS. Čeprav se lahko sintaksa med temi predprocesorji razlikuje, osnovni koncept ostaja dosleden. Če bi želeli oblikovati vse h1 elementi v a div z imenom razreda posoda, bi v navadnem CSS zapisali:
.container {
background-color: #f2f2f2;
}
.containerh1 {
font-size: 44px;
}
V predprocesorju CSS, kot je Less CSS, implementirate ugnezdeni stil tako:
.container{
background-color: #f2f2f2;
h1 {
font-size:44px;
}
}
Zgornji blok kode dosega enake rezultate kot običajna implementacija CSS, vendar vsakemu razvijalcu, ki bere kodo, olajša razumevanje, kaj se dogaja. Ta občutek "hierarhije" je bil eden največjih prodajnih točk predprocesorjev CSS.
Drevo gnezdenja je mogoče ugnezditi do poljubne globine brez omejitev, vendar je nujno, da ste previdni, saj lahko pretirano globoko gnezdenje povzroči natančnost kode.
Izvorno ugnezdeno oblikovanje v CSS
Vsi brskalniki ne podpirajo izvornega ugnezdenega sloga. The Ali lahko uporabim ... spletno mesto vam lahko pomaga preveriti, ali vaš ciljni brskalnik podpira to funkcijo.
Izvorno ugnezdeno oblikovanje v CSS deluje podobno kot predprocesorji CSS, kar pomeni, da je mogoče kateri koli izbirnik ugnezditi znotraj drugega. Vendar obstaja ena ključna razlika, ki bi jo morali upoštevati. Oglejte si spodnji kodni blok:
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>
V zgornjem kodnem bloku div z imenom razreda posoda ima rdečo barvo ozadja. Stajling za h1 element leži v .posoda blok. to h1 element ima rumeno barvo. Ko zaženete to kodo v brskalniku, boste morda opazili nekaj narobe. Brskalnik pravilno uporabi rdečo barvo ozadja za posoda div, ampak h1 nima ustreznega stajlinga.
To je zato, ker ugnezdeni slog deluje nekoliko drugače v CSS v primerjavi s predprocesorji CSS, kot je Less. Ne morete se neposredno sklicevati na element HTML v ugnezdenem drevesu. Če želite to popraviti, morate uporabiti znak & (&), kot je prikazano spodaj:
.container {
background-color: red;
& h1 {
color: yellow;
}
}
V zgornjem kodnem bloku & deluje kot sklic na nadrejeni izbirnik. Postavljanje znaka & pred h1 element mora brskalniku sporočiti, da ciljate na vse podrejene h1 elementi na posoda div. Ko zaženete kodo v brskalniku, bi morali videti naslednje:
Od & je simbol, ki se uporablja za sklicevanje na nadrejeni element, je povsem mogoče ciljati na psevdo-razrede in psevdo-elemente elementa, kot je ta:
.parent1{
&:hover{
background-color: red;
}
&::before{
content:"Hereisapseudoelement.";
}
}
Če ste pred uvedbo ugnezdenega sloga CSS želeli uporabiti sloge pogojno, odvisno od širine brskalnika, ste se morali zateči k metodi, kot je ta:
p {
color:black;
}
@media (min-width:750px) {
p {
color:gray;
}
}
Ko brskalnik upodablja stran, določi barvo str element glede na širino brskalnika. Če širina brskalnika presega 750 slikovnih pik, uporablja sivo barvo; sicer uporabi privzeto barvo (črno).
Ta izvedba deluje dobro, a kot si lahko predstavljate, lahko stvari hitro postanejo precej podrobne, še posebej, če morate uporabiti različne sloge, ki temeljijo na določenih pravilih. Zdaj je možno gnezditi medijske poizvedbe neposredno v slogovnem bloku elementa.
p {
color:black;
@media (min-width:750px) {
color:gray;
}
}
Ta blok kode dela v bistvu isto kot prejšnji, vendar ima to prednost, da ga je enostavno razumeti. Če samo pogledate medijsko poizvedbo in ugnezdeni nadrejeni element, lahko ugotovite, kako bo brskalnik uporabil ustrezne sloge, ko bodo izpolnjeni definirani pogoji.
Oblikovanje spletnega mesta z ugnezdenimi slogi CSS
Čas je, da vse, kar ste se do sedaj naučili, uporabite v praksi izdelava preprostega spletnega mesta in izkoriščanje funkcije ugnezdenega oblikovanja v CSS. Ustvarite mapo in jo poimenujte, kakor želite. V tej mapi ustvarite index.htm in a style.css mapa.
V index.htm dodajte naslednjo kodo:
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>
Zgornji blok kode definira oznako za lažno spletno stran z novicami. Nato odprite style.css datoteko in dodajte naslednjo kodo:
.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;
}
}
Zgornji blok kode stilizira spletno mesto v celoti z ugnezdenim slogom CSS. The .posoda izbirnik deluje kot globina korena. Na ta izbirnik se lahko sklicujete z uporabo & simbol. Ko zaženete kodo v brskalniku, bi morali videti naslednje:
Ali še vedno potrebujete predprocesor CSS?
Z uvedbo ugnezdenih slogov v izvorni CSS se lahko zdi, da so predprocesorji CSS nepotrebni. Vendar pa je ključnega pomena, da ne pozabite, da predprocesorji CSS ponujajo več kot le ugnezdeno oblikovanje. Zagotavljajo funkcije, kot so zanke, miksini, funkcije in drugo. Končno je, ali uporabiti predprocesor CSS ali ne, odvisno od vašega posebnega primera uporabe in osebnih preferenc.