Natívne vnorenie CSS môže zjednodušiť váš kód CSS a zlepšiť váš celkový zážitok z kódovania.
Historicky bol jazyk CSS náročný na prácu. Predprocesory CSS uľahčili prácu s CSS a poskytli aj ďalšie funkcie, ako sú slučky, mixiny a ďalšie. V priebehu rokov sa CSS stalo schopnejším a prijalo niektoré funkcie pôvodne zavedené preprocesormi CSS. Jednou z takýchto funkcií je „vnorený štýl“.
Vnorený štýl umožňuje vývojárom vkladať pravidlá CSS do seba, čo odráža štruktúru HTML. Výsledkom je lepšie organizovaný a čitateľnejší kód, pretože vzťah medzi prvkami HTML a ich zodpovedajúcimi štýlmi je vizuálne zrejmý.
Nested Styling: The Old Way
Vnorený štýl je funkcia dostupná v mnohých CSS preprocesory ako Sass, stylus a menej CSS. Hoci sa syntax medzi týmito preprocesormi môže líšiť, základný koncept zostáva konzistentný. Ak by ste chceli štýlovať všetky h1 prvky v a div s názvom triedy kontajner, v bežnom CSS by ste napísali:
.container {
background-color: #f2f2f2;
}
.containerh1 {
font-size: 44px;
}
V preprocesore CSS, akým je napríklad Less CSS, implementujete vnorený štýl takto:
.container{
background-color: #f2f2f2;
h1 {
font-size:44px;
}
}
Blok kódu vyššie dosahuje rovnaké výsledky ako bežná implementácia CSS, ale uľahčuje každému vývojárovi, ktorý číta kód, pochopiť, čo sa deje. Tento zmysel pre „hierarchiu“ bol jedným z najväčších predajných bodov CSS preprocesorov.
Vnorený strom môže byť vnorený do ľubovoľnej hĺbky bez obmedzení, ale je nevyhnutné byť opatrný, pretože príliš hlboké vnorenie môže viesť k výrečnosti kódu.
Natívny vnorený štýl v CSS
Nie všetky prehliadače podporujú natívny vnorený štýl. The Môžem použiť... vám pomôže skontrolovať, či váš cieľový prehliadač podporuje túto funkciu.
Natívny vnorený štýl v CSS funguje podobne ako preprocesory CSS, čo znamená, že je možné vnoriť akýkoľvek selektor do iného. Ale je tu jeden kľúčový rozdiel, ktorý by ste si mali všimnúť. Pozrite sa na blok kódu nižšie:
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 bloku kódu vyššie, div s názvom triedy kontajner má červenú farbu pozadia. Styling pre h1 prvok spočíva v .kontajner blokovať. Toto h1 prvok má žltú farbu. Keď spustíte tento kód v prehliadači, môžete si všimnúť, že niečo nie je v poriadku. Prehliadač správne použije červenú farbu pozadia kontajner div, ale h1 nemá vhodný styling.
Je to preto, že vnorený štýl funguje v CSS trochu inak v porovnaní s preprocesormi CSS, ako je Less. Na prvok HTML vo vnorenom strome nemôžete priamo odkazovať. Ak to chcete opraviť, musíte použiť znak ampersand (&), ako je znázornené nižšie:
.container {
background-color: red;
& h1 {
color: yellow;
}
}
Vo vyššie uvedenom bloku kódu & slúži ako odkaz na rodičovský selektor. Vloženie ampersandu pred znak h1 prvok by mal prehliadaču oznámiť, že sa zameriavate na všetky deti h1 prvky na kontajner div. Keď spustíte kód v prehliadači, mali by ste vidieť nasledovné:
Od r & je symbol používaný na odkazovanie na nadradený prvok, je celkom možné zamerať sa na pseudotriedy a pseudoprvky prvku takto:
.parent1{
&:hover{
background-color: red;
}
&::before{
content:"Hereisapseudoelement.";
}
}
Ak ste pred implementáciou vnoreného štýlu CSS chceli použiť štýly podmienečne v závislosti od šírky prehliadača, museli ste použiť metódu, ako je táto:
p {
color:black;
}
@media (min-width:750px) {
p {
color:gray;
}
}
Keď prehliadač vykreslí stránku, určí farbu p prvok na základe šírky prehliadača. Ak šírka prehliadača presiahne 750 pixelov, použije sa sivá farba; inak sa použije predvolená farba (čierna).
Táto implementácia funguje dobre, ale ako si viete predstaviť, veci sa môžu rýchlo stať veľmi podrobnými, najmä keď potrebujete použiť rôzne štýly založené na určitých pravidlách. Teraz je možné hniezdiť mediálne otázky priamo v bloku štýlu prvku.
p {
color:black;
@media (min-width:750px) {
color:gray;
}
}
Tento blok kódu robí v podstate to isté ako predchádzajúci, má však tú výhodu, že je ľahko zrozumiteľný. Jednoduchým pohľadom na mediálny dotaz a vnorený nadradený prvok môžete zistiť, ako prehliadač použije vhodné štýly, keď sú splnené definované podmienky.
Úprava štýlu webu pomocou vnorených štýlov CSS
Je čas uviesť všetko, čo ste sa doteraz naučili, do praxe vytvorenie jednoduchej webovej stránky a využitie funkcie vnoreného štýlu v CSS. Vytvorte priečinok a pomenujte ho, ako chcete. V tomto priečinku vytvorte súbor index.htm a a style.css súbor.
V index.htm súbor, pridajte nasledujúci štandardný kód:
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>
Vyššie uvedený blok kódu definuje označenie pre falošný spravodajský web. Ďalej otvorte style.css súbor a pridajte nasledujúci kód:
.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;
}
}
Vyššie uvedený blok kódu upravuje štýl webovej stránky výlučne pomocou vnoreného štýlu CSS. The .kontajner Selektor funguje ako hĺbka koreňa. Na tento selektor môžete odkazovať pomocou & symbol. Keď spustíte kód v prehliadači, mali by ste vidieť nasledovné:
Stále potrebujete CSS preprocesor?
So zavedením vnorených štýlov do natívneho CSS sa môžu predprocesory CSS javiť ako zbytočné. Je však dôležité mať na pamäti, že predprocesory CSS ponúkajú viac než len vnorený štýl. Poskytujú funkcie ako slučky, mixiny, funkcie a ďalšie. V konečnom dôsledku, či použiť predprocesor CSS alebo nie, závisí od vášho konkrétneho prípadu použitia a osobných preferencií.
