Nativní vnoření CSS může zjednodušit váš kód CSS a zlepšit váš celkový zážitek z kódování.
Historicky byl jazyk CSS obtížný pro práci. CSS preprocesory usnadnily práci s CSS a také poskytly další funkce, jako jsou smyčky, mixiny a další. V průběhu let se CSS stalo schopnějším a přijalo některé z funkcí původně zavedených preprocesory CSS. Jednou z takových funkcí je „vnořený styl“.
Vnořený styl umožňuje vývojářům vnořovat pravidla CSS do sebe, což odráží strukturu HTML. Výsledkem je lépe organizovaný a čitelnější kód, protože vztah mezi prvky HTML a jejich odpovídajícími styly je vizuálně zřejmý.
Nested Styling: The Old Way
Vnořený styl je funkce dostupná v mnoha CSS preprocesory jako Sass, Stylus a Méně CSS. Ačkoli se syntaxe mezi těmito preprocesory může lišit, základní koncept zůstává konzistentní. Pokud byste chtěli stylizovat všechny h1 prvky v a div s názvem třídy kontejner, v běžném CSS byste napsali:
.container {
background-color: #f2f2f2;
}
.containerh1 {
font-size: 44px;
}
V preprocesoru CSS, jako je Less CSS, implementujete vnořený styl takto:
.container{
background-color: #f2f2f2;
h1 {
font-size:44px;
}
}
Výše uvedený blok kódu dosahuje stejných výsledků jako běžná implementace CSS, ale usnadňuje každému vývojáři, který čte kód, pochopit, co se děje. Tento smysl pro „hierarchii“ byl jedním z největších prodejních míst preprocesorů CSS.
Vnořovací strom může být vnořen do libovolné hloubky bez omezení, ale je nezbytné být obezřetný, protože příliš hluboké vnoření může vést k upovídanosti kódu.
Nativní vnořený styl v CSS
Ne všechny prohlížeče podporují nativní vnořený styl. The Mohu použít... vám může pomoci zkontrolovat, zda váš cílový prohlížeč tuto funkci podporuje.
Nativní vnořený styl v CSS funguje podobně jako preprocesory CSS, to znamená, že je možné vnořit libovolný selektor do jiného. Ale je tu jeden zásadní rozdíl, kterého byste si měli všimnout. Podívejte se na blok kódu níže:
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>
Ve výše uvedeném bloku kódu je div s názvem třídy kontejner má červenou barvu pozadí. Styl pro h1 prvek spočívá v .kontejner blok. Tento h1 prvek má žlutou barvu. Když tento kód spustíte v prohlížeči, můžete si všimnout, že je něco špatně. Prohlížeč správně použije červenou barvu pozadí na kontejner div, ale h1 nemá odpovídající styling.
Je to proto, že vnořené styly fungují v CSS trochu jinak než preprocesory CSS, jako je Less. Nemůžete přímo odkazovat na prvek HTML ve vnořeném stromu. Chcete-li to opravit, musíte použít ampersand (&), jak je znázorněno níže:
.container {
background-color: red;
& h1 {
color: yellow;
}
}
V bloku kódu výše & funguje jako odkaz na rodičovský selektor. Vložení ampersandu před znak h1 prvek by měl prohlížeči dát vědět, že cílíte na všechny podřízené položky h1 prvky na kontejner div. Když spustíte kód v prohlížeči, měli byste vidět následující:
Od té doby & je symbol používaný k odkazování na nadřazený prvek, je docela možné zacílit na pseudotřídy a pseudoprvky prvku takto:
.parent1{
&:hover{
background-color: red;
}
&::before{
content:"Hereisapseudoelement.";
}
}
Pokud jste před implementací vnořených stylů CSS chtěli použít styly podmíněně v závislosti na šířce prohlížeče, museli jste se uchýlit k metodě, jako je tato:
p {
color:black;
}
@media (min-width:750px) {
p {
color:gray;
}
}
Když prohlížeč vykreslí stránku, určí barvu p prvek na základě šířky prohlížeče. Pokud šířka prohlížeče přesáhne 750 pixelů, použije šedou barvu; jinak použije výchozí barvu (černou).
Tato implementace funguje dobře, ale jak si dokážete představit, věci se mohou rychle stát velmi podrobnými, zvláště když potřebujete použít různé styly založené na určitých pravidlech. Nyní je možné hnízdit mediální dotazy přímo v bloku stylu prvku.
p {
color:black;
@media (min-width:750px) {
color:gray;
}
}
Tento blok kódu dělá v podstatě to samé jako předchozí, ale má tu výhodu, že je snadno srozumitelný. Pouhým pohledem na dotaz na média a vnořený nadřazený prvek můžete zjistit, jak prohlížeč použije příslušné styly, když jsou splněny definované podmínky.
Stylování webu pomocí vnořených stylů CSS
Je čas uvést vše, co jste se dosud naučili, do praxe vytvoření jednoduchého webu a využití funkce vnořených stylů v CSS. Vytvořte složku a pojmenujte ji, jak chcete. V této složce vytvořte soubor index.htm a a styl.css soubor.
V index.htm soubor, přidejte následující standardní 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>
Blok kódu výše definuje označení pro falešný zpravodajský web. Dále otevřete styl.css soubor a přidejte následující 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;
}
}
Blok kódu výše stylizuje web zcela pomocí vnořených stylů CSS. The .kontejner selektor funguje jako hloubka kořene. Na tento selektor můžete odkazovat pomocí & symbol. Když spustíte kód v prohlížeči, měli byste vidět následující:
Stále potřebujete CSS preprocesor?
Se zavedením vnořených stylů do nativních CSS se mohou předprocesory CSS zdát zbytečné. Je však zásadní mít na paměti, že preprocesory CSS nabízejí více než jen vnořený styl. Poskytují funkce jako smyčky, mixiny, funkce a další. V konečném důsledku to, zda použít preprocesor CSS nebo ne, závisí na vašem konkrétním případu použití a osobních preferencích.