Jak používat nativní vnoření CSS ve vašich webových aplikacích
Používání jazyka CSS bylo v minulosti poměrně složité. Předprocesory CSS však práci s ním výrazně zjednodušily a navíc přinesly nové možnosti, jako jsou cykly, mixiny a další užitečné funkce. Postupem času se CSS zdokonalilo a převzalo některé z funkcí, které původně nabízely právě předprocesory. Jednou z takových funkcí je i "vnořování stylů".
MUO VIDEO DNE
POKRAČOVÁNÍ V OBSAHU POKRAČUJTE PŘEJÍMÁNÍM
Díky vnořování stylů mohou vývojáři definovat CSS pravidla uvnitř sebe navzájem, čímž zrcadlí strukturu HTML kódu. Výsledkem je přehlednější a čitelnější kód, jelikož vztah mezi HTML prvky a jejich styly je vizuálně jasný.
Vnořování stylů: Starý způsob
Vnořování stylů je funkce, kterou nabízí mnoho CSS předprocesorů, jako jsou Sass, Stylus nebo Less CSS. Přestože se syntaxe u těchto nástrojů může lišit, základní koncept zůstává stejný. Pokud bychom chtěli nastavit styly pro všechny elementy `h1` uvnitř `div` s třídou "kontejner", v klasickém CSS bychom napsali:
.container {
background-color: #f2f2f2;
}.container h1 {
font-size: 44px;
}
S předprocesorem CSS, například Less CSS, bychom vnořené styly implementovali takto:
.container{
background-color: #f2f2f2; h1 {
font-size:44px;
}
}
Výše uvedený kód dosáhne stejného výsledku jako běžné CSS, ale pro každého vývojáře, který čte kód, je mnohem snazší pochopit, o co se jedná. Právě tento pocit "hierarchie" byl jedním z hlavních důvodů, proč si vývojáři oblíbili CSS předprocesory.
Vnořovat lze do libovolné hloubky, ale je důležité dávat pozor, jelikož příliš hluboké vnoření může vést k nepřehlednému kódu.
Nativní vnořování stylů v CSS
Ne všechny prohlížeče nativní vnořování stylů podporují. Stránka Mohu použít… vám pomůže ověřit, zda vámi cílený prohlížeč tuto funkcionalitu podporuje.
Nativní vnořování v CSS funguje podobně jako u předprocesorů – tedy je možné vnořit jeden selektor do druhého. Je zde však jeden zásadní rozdíl, který je potřeba si uvědomit. Podívejte se na následující kód:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vnořování stylů v CSS</title>
</head>
<body>
<div class="container">
<h1>Zdraví vás děti planety Země!</h1>
</div>
<style>
.container {
background-color: red;h1 {
color: yellow;
}
}
</style>
</body>
</html>
V tomto kódu má `div` s třídou "kontejner" červenou barvu pozadí. Styl pro element `h1` je umístěn uvnitř bloku `.container`. Tento element `h1` má mít žlutou barvu. Když kód spustíte v prohlížeči, zjistíte, že něco není v pořádku. Prohlížeč správně aplikuje červenou barvu pozadí na `div` kontejner, ale styl pro `h1` chybí.
Důvodem je, že vnořování v CSS funguje trochu jinak, než u předprocesorů jako je Less. Nelze se přímo odkazovat na HTML elementy uvnitř vnořené struktury. Pro vyřešení tohoto problému je nutné použít ampersand (`&`), jak je ukázáno níže:
.container {
background-color: red; & h1 {
color: yellow;
}
}
V uvedeném kódu funguje `&` jako odkaz na nadřazený selektor. Umístěním ampersandu před element `h1` dáte prohlížeči vědět, že se cílíte na všechny potomky `h1` uvnitř `div` kontejneru. Po spuštění kódu v prohlížeči byste měli vidět správný výsledek:
Jelikož `&` slouží k odkazování na nadřazený element, je možné cílit i na pseudo-třídy a pseudo-elementy daného elementu, a to následujícím způsobem:
.parent1{
&:hover{
background-color: red;
}
&::before{
content:"Zde je pseudo element.";
}
}
Před zavedením vnořování stylů v CSS bylo nutné pro podmíněné stylování v závislosti na šířce prohlížeče použít například tento přístup:
p {
color:black;
}@media (min-width:750px) {
p {
color:gray;
}
}
Při vykreslování stránky prohlížeč určí barvu elementu `p` v závislosti na šířce okna. Pokud šířka překročí 750 pixelů, použije se šedá barva, jinak se použije výchozí (černá).
Tento přístup funguje dobře, ale jak si lze představit, situace se může rychle zkomplikovat, zvláště když potřebujete aplikovat různé styly na základě složitějších pravidel. Nyní je možné vnořovat media queries přímo do bloku stylu elementu.
p {
color:black; @media (min-width:750px) {
color:gray;
}
}
Tento kód dělá v podstatě to samé, jako ten předchozí, ale výhodou je jeho přehlednost. Pouhým pohledem na media query a vnořený nadřazený element můžete okamžitě zjistit, jak prohlížeč aplikuje styly při splnění daných podmínek.
Stylování webové stránky pomocí vnořených stylů CSS
Je na čase využít všechny nabyté znalosti a vytvořit jednoduchou webovou stránku pomocí funkce vnořování stylů v CSS. Vytvořte složku s libovolným názvem. Uvnitř této složky vytvořte soubory `index.htm` a `style.css`.
Do souboru `index.htm` vložte následující standardní kód:
<!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>Jednoduchá webová stránka</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">Před 3 hodinami</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>Nejčtenější články</h2>
<h4>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit, iusto ipsum!</h4>
</div>
</div>
</body>
</html>
Výše uvedený kód definuje strukturu pro jednoduchou webovou stránku s článkem. Následně otevřete soubor `style.css` 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: "Napsal ";
}
&:nth-child(2) {
font-style: italic;
&::before {
content: " ~ ";
}
}
}
.meta-data {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: solid 1px;
}
}
Výše uvedený kód styluje web kompletně pomocí vnořených stylů. Selektor `.container` slouží jako kořenová úroveň. Na tento selektor lze odkazovat pomocí symbolu `&`. Po spuštění kódu v prohlížeči byste měli vidět následující:
Potřebujete stále CSS předprocesor?
S příchodem vnořování stylů do nativního CSS by se mohlo zdát, že CSS předprocesory jsou již zbytečné. Je ale důležité mít na paměti, že předprocesory nabízí mnohem více, než jen vnořování stylů. Poskytují funkce jako cykly, mixiny, funkce a další. V konečném důsledku záleží na konkrétním případu použití a osobních preferencích, zda se rozhodnete předprocesor CSS použít, nebo ne.
