A natív CSS-beágyazás leegyszerűsítheti a CSS-kódot, és javíthatja az általános kódolási élményt.
Történelmileg a CSS-vel nehéz volt dolgozni. A CSS-előfeldolgozók megkönnyítették a CSS-sel való munkát, és további funkciókat is biztosítottak, például ciklusokat, mixeket és egyebeket. Az évek során a CSS képességesebbé vált, és átvett néhány olyan funkciót, amelyet eredetileg a CSS-előfeldolgozók vezettek be. Az egyik ilyen funkció a „beágyazott stílus”.
A beágyazott stílus lehetővé teszi a fejlesztők számára, hogy egymásba ágyazzák a CSS-szabályokat, tükrözve a HTML-struktúrát. Ez rendszerezettebb és olvashatóbb kódot eredményez, mivel a HTML-elemek és a hozzájuk tartozó stílusok közötti kapcsolat vizuálisan látható.
Beágyazott stílus: The Old Way
A beágyazott stílus sok országban elérhető funkció CSS-előfeldolgozók, mint a Sass, Stylus és Less CSS. Bár a szintaxis eltérő lehet ezeknél az előfeldolgozóknál, a mögöttes koncepció konzisztens marad. Ha stílust akart adni az összes h1 elemek a div osztály nevével tartály, normál CSS-ben ezt írnád:
.container {
background-color: #f2f2f2;
}
.containerh1 {
font-size: 44px;
}
Egy CSS-előfeldolgozóban, például a Less CSS-ben, a következőhöz hasonló beágyazott stílust valósít meg:
.container{
background-color: #f2f2f2;
h1 {
font-size:44px;
}
}
A fenti kódblokk ugyanazokat az eredményeket éri el, mint a szokásos CSS-megvalósítás, de megkönnyíti a kódot olvasó fejlesztők számára, hogy megértsék, mi történik. A „hierarchia” érzése volt a CSS-előfeldolgozók egyik legnagyobb eladási pontja.
A fészkelőfa korlátok nélkül bármilyen mélységbe beágyazható, de elengedhetetlen az óvatosság, mivel a túlzottan mély egymásba ágyazás a kód bőbeszédűségéhez vezethet.
Natív beágyazott stílus a CSS-ben
Nem minden böngésző támogatja a natív beágyazott stílust. A Használhatom... webhely segítségével ellenőrizheti, hogy a célböngészője támogatja-e ezt a funkciót.
A natív beágyazott stílus a CSS-ben a CSS-előfeldolgozókhoz hasonlóan működik, ami azt jelenti, hogy bármelyik kiválasztó beágyazható egy másikba. De van egy lényeges különbség, amit érdemes megjegyezni. Vessen egy pillantást az alábbi kódblokkra:
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>
A fenti kódblokkban a div az osztály nevével tartály piros háttérszíne van. A stílus a h1 elem rejlik a .tartály Blokk. Ez h1 elem sárga színű. Amikor ezt a kódot futtatja a böngészőben, akkor valami hibát észlelhet. A böngésző megfelelően alkalmaz egy piros háttérszínt a tartály div, hanem a h1 nem rendelkezik a megfelelő stílussal.
Ennek az az oka, hogy a beágyazott stílus egy kicsit másképp működik CSS-ben, mint az olyan CSS-előfeldolgozókban, mint a Less. Nem hivatkozhat közvetlenül egy HTML-elemre egy beágyazott fában. Ennek kijavításához "és" jelet (&) az alábbiak szerint:
.container {
background-color: red;
& h1 {
color: yellow;
}
}
A fenti kódblokkban & hivatkozásként működik a szülőválasztóra. Az "és" jelet a h1 elemnek tudatnia kell a böngészővel, hogy az összes gyermeket megcélozza h1 elemek a tartály div. Amikor futtatja a kódot a böngészőben, a következőket kell látnia:
Mivel & a szülőelemre való hivatkozásra használt szimbólum, teljesen lehetséges egy elem pszeudoosztályait és pszeudoelemeit megcélozni, így:
.parent1{
&:hover{
background-color: red;
}
&::before{
content:"Hereisapseudoelement.";
}
}
A CSS beágyazott stílus bevezetése előtt, ha a stílusokat feltételesen, a böngésző szélességétől függően kívánta alkalmazni, a következőhöz hasonló módszert kellett alkalmaznia:
p {
color:black;
}
@media (min-width:750px) {
p {
color:gray;
}
}
Amikor a böngésző megjeleníti az oldalt, meghatározza a színét p elemet a böngésző szélessége alapján. Ha a böngésző szélessége meghaladja a 750 képpontot, akkor a szürke színt használja; ellenkező esetben az alapértelmezett színt (feketét) alkalmazza.
Ez a megvalósítás jól működik, de ahogy elképzelhető, a dolgok gyorsan bőbeszédűvé válhatnak, különösen, ha bizonyos szabályok alapján különböző stílusokat kell alkalmazni. Most már lehet fészket rakni média lekérdezések közvetlenül egy elem stílusblokkjában.
p {
color:black;
@media (min-width:750px) {
color:gray;
}
}
Ez a kódblokk alapvetően ugyanazt csinálja, mint az előző, de azzal az előnnyel jár, hogy könnyen érthető. Pusztán a médialekérdezés és a beágyazó szülőelem megtekintésével megtudhatja, hogy a böngésző hogyan alkalmazza a megfelelő stílusokat, ha a meghatározott feltételek teljesülnek.
Webhely stílusa CSS beágyazott stílusokkal
Itt az ideje, hogy mindazt, amit eddig tanultál, átültesd a gyakorlatba egyszerű weboldal készítése és a CSS beágyazott stílus funkciójának kihasználása. Hozzon létre egy mappát, és nevezze el, ahogy akarja. Ebben a mappában hozzon létre egy index.htm és a stílus.css fájlt.
Ban,-ben index.htm fájlt, adja hozzá a következő alapkódot:
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>
A fenti kódblokk határozza meg egy álhírwebhely jelölését. Ezután nyissa meg a stílus.css fájlt, és adja hozzá a következő kódot:
.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;
}
}
A fenti kódblokk a webhelyet teljes egészében CSS beágyazott stílussal alakítja. A .tartály szelektor a gyökérmélységként működik. Erre a választóra hivatkozhat a & szimbólum. Amikor futtatja a kódot a böngészőben, a következőket kell látnia:
Még mindig szüksége van egy CSS-előfeldolgozóra?
A beágyazott stílusok natív CSS-be való bevezetésével a CSS-előfeldolgozók szükségtelennek tűnhetnek. Fontos azonban észben tartani, hogy a CSS-előfeldolgozók nem csak beágyazott stílust kínálnak. Olyan szolgáltatásokat nyújtanak, mint a hurkok, mixinek, funkciók és egyebek. Végső soron az Ön konkrét használati esetétől és személyes preferenciáitól függ, hogy használjon-e CSS-előfeldolgozót vagy sem.
