Jak korzystać z natywnego zagnieżdżania CSS w swoich aplikacjach internetowych
W przeszłości CSS był trudnym językiem do pracy. Preprocesory CSS ułatwiły pracę z CSS, a także zapewniły dodatkowe funkcje, takie jak pętle, mixiny i inne. Z biegiem lat CSS stał się bardziej wydajny i przyjął niektóre funkcje pierwotnie wprowadzone przez preprocesory CSS. Jedną z takich funkcji jest „zagnieżdżona stylizacja”.
Zagnieżdżanie reguł CSS ułatwia wizualną reprezentację korelacji między elementami HTML i ich odpowiednimi stylami, umożliwiając programistom osadzenie reguł CSS w sobie. Rezultatem jest ulepszona struktura organizacyjna i czytelność kodu, z wyraźnym przedstawieniem hierarchicznego stosowania stylów w oparciu o hierarchię HTML.
Stylizacja zagnieżdżona: po staremu
Stylizacja zagnieżdżona to funkcja, którą można znaleźć w kilku preprocesorach CSS, takich jak Sass, Stylus i Less CSS. Chociaż ich składnia może się różnić, mają wspólną podstawę. Na przykład, jeśli ktoś chciałby zastosować style do wszystkich elementów w elemencie noszącym nazwę klasy „kontener”, standardowy kod CSS wyglądałby tak:
.container {
background-color: #f2f2f2;
}
.container h1 {
font-size: 44px;
}
16px; } w ich kodzie preprocesora. Pozwala to na zorganizowaną i wydajną stylizację, którą można łatwo dostosować do różnych elementów na stronie internetowej.
.container{
background-color: #f2f2f2;
h1 {
font-size:44px;
}
}
Wspomniany fragment kodu wykazuje podobne wyniki jak konwencjonalny CSS, jednocześnie promując zrozumienie i przejrzystość wśród programistów przeglądających kod źródłowy. To pojęcie „struktury hierarchicznej” zostało uznane za znaczącą zaletę związaną z preprocesorami CSS.
Chociaż nie ma ograniczeń co do głębokości zagnieżdżenia w strukturze drzewa, należy zachować ostrożność podczas tworzenia głęboko zagnieżdżonych elementów ze względu na potencjalny wzrost złożoności kodu i gadatliwości, który może wynikać z takich praktyk.
Natywne zagnieżdżone style w CSS
Nie wszystkie przeglądarki obsługują natywne style zagnieżdżone. Witryna Czy mogę użyć… może pomóc Ci sprawdzić, czy Twoja docelowa przeglądarka obsługuje tę funkcję.
Style zagnieżdżone w natywnym CSS działają podobnie do tych, które można znaleźć w preprocesorach CSS, umożliwiając hermetyzację dowolnego selektora w innym. Kluczowe jest jednak rozpoznanie istotnej różnicy między tymi dwoma podejściami. Rozważ następujący przykład:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Nested Styling in CSS</title>
</head>
<body>
<div class="container">
<h1>Hello from the children of planet Earth!</h1>
</div>
<style>
.container {
background-color: red;
h1 {
color: yellow;
}
}
</style>
</body>
</html>
W podanym fragmencie kodu element div z atrybutem class „container” ma szkarłatny odcień tła. Charakterystyka projektu komponentu nagłówka mieści się w ramach wspomnianej jednostki div. W szczególności składnik nagłówka wykazuje cytrynową pigmentację. Jednak podczas uruchamiania za pomocą przeglądarki internetowej można zauważyć niespójność w wizualnej reprezentacji elementów. Pomimo faktu, że przeglądarka dokładnie nadaje czerwone tło wspomnianemu elementowi div, wydaje się, że nagłówek nie zawiera wymaganych ozdób wizualnych.
W CSS zagnieżdżanie stylów działa inaczej niż w preprocesorach CSS, takich jak Less. Bezpośrednie odwoływanie się do elementu HTML w zagnieżdżonej hierarchii nie jest możliwe. Można jednak użyć symbolu ampersand (&), aby rozwiązać ten problem, jak pokazano w podanym przykładzie.
.container {
background-color: red;
& h1 {
color: yellow;
}
}
Włączenie symbolu ampersand („&”) przed oznaczeniem „h1” służy jako wskazanie selektora nadrzędnego, określając w ten sposób kierowanie wszystkich potomnych elementów „h1” znajdujących się w obejmującym komponencie „div”. Wykonanie tego kodu w przeglądarce internetowej spowoduje wyświetlenie wielu nagłówków „h1” ułożonych pionowo jeden po drugim, po których następuje odpowiedni akapit tekstu.
Biorąc pod uwagę, że ampersand & służy jako notacja do identyfikacji elementu nadrzędnego, możliwe staje się selektywne adresowanie pseudoklas i pseudoelementów elementów w sposób opisany poniżej:
.parent1{
&:hover{
background-color: red;
}
&::before{
content:"Here is a pseudo element.";
}
}
Zagnieżdżanie zapytań o media
Przed pojawieniem się zagnieżdżania CSS, aby zaimplementować style warunkowe w oparciu o szerokość przeglądarki, trzeba było zastosować technikę taką jak wspomniana powyżej:
p {
color:black;
}
@media (min-width:750px) {
p {
color:gray;
}
}
Gdy przeglądarka internetowa przetwarza stronę i oblicza jej wymiary, ustala odcień elementu akapitu zgodnie z rozmiarem okna przeglądarki. W przypadkach, gdy szerokość przeglądarki przekracza 750 pikseli, jako kolor tła znacznika używany jest odcień szarości; i odwrotnie, jeśli szerokość spadnie poniżej tego progu, zostanie zastosowany predefiniowany czarny kolor.
Rzeczywiście, chociaż takie podejście może działać skutecznie, może prowadzić do rozprzestrzeniania się kodu, który staje się coraz bardziej uciążliwy, szczególnie przy próbie wdrożenia różnych niuansów stylistycznych podlegających określonym kryteriom. Na szczęście wraz z pojawieniem się możliwości enkapsulacji #### zapytań o media bezpośrednio w atrybutach stylu pojedynczego elementu, można usprawnić i skonsolidować logikę ich prezentacji w bardziej zwięzły i spójny sposób.
p {
color:black;
@media (min-width:750px) {
color:gray;
}
}
Obecna implementacja oferuje bardziej bezpośrednie podejście w porównaniu do swojej poprzedniczki, charakteryzujące się zwiększoną czytelnością, która pozwala użytkownikom rozpoznać zastosowanie stylów w przeglądarce na podstawie zapytania o media i struktury otaczającego elementu nadrzędnego.
Stylizacja witryny za pomocą zagnieżdżonych stylów CSS
Konieczne jest zastosowanie zdobytej do tej pory wiedzy poprzez zbudowanie podstawowej strony internetowej i wykorzystanie funkcjonalności stylów hierarchicznych w CSS. Aby zainicjować ten proces, utwórz katalog i nadaj mu wybrany tytuł. W tym katalogu wygeneruj dwa pliki-„index.html” i „style.css”.
W głównym pliku HTML konieczne jest umieszczenie symbolu zastępczego lub kodu szkieletowego, który zapewnia podstawową strukturę i funkcjonalność strony internetowej. Ten szablon, często nazywany kodem „standardowym”, tworzy podstawę dla pozostałych elementów na stronie, na których można budować. Zawiera standardowe komponenty, takie jak nagłówki, metatagi, arkusze stylów i skrypty, które są wymagane do prawidłowego renderowania i interakcji. Włączając ten podstawowy kod do pliku index.htm, programiści mogą zapewnić spójność na wszystkich stronach i usprawnić przepływ pracy, unikając powtarzalnych zadań.
<!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="style.css" />
<title>Simple Website</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">3 hours ago</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>Trending Articles</h2>
<h4>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit, iusto ipsum!</h4>
</div>
</div>
</body>
</html>
Blok kodu poprzedzający ten blok określa formatowanie imitacji witryny internetowej z wiadomościami. W związku z tym uzyskaj dostęp do dokumentu style.css i dołącz do niego następującą dyrektywę:
.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: "Written by ";
}
&:nth-child(2) {
font-style: italic;
&::before {
content: " ~ ";
}
}
}
.meta-data {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: solid 1px;
}
}
Wspomniany blok kodu wykorzystuje zaawansowane techniki CSS do wszechstronnego dostosowywania wizualnego treści internetowych. Zastosowany selektor, oznaczony jako „.container”, służy jako podstawa, na której zbudowane są wszystkie inne elementy projektu. Dostęp do tego konkretnego wyboru i manipulowanie nim można łatwo uzyskać dzięki zastosowaniu symbolu ampersand (&). Po uruchomieniu w przeglądarce internetowej należy zwrócić uwagę na estetyczny wygląd, składający się z różnych komponentów skrupulatnie ułożonych zgodnie z wcześniej ustaloną specyfikacją.
Czy nadal potrzebujesz preprocesora CSS?
Chociaż pojawienie się zagnieżdżonych stylów w natywnym CSS może sugerować zmniejszoną użyteczność preprocesorów CSS, należy pamiętać, że te preprocesory oferują znacznie więcej niż tylko możliwości zagnieżdżania. Wśród ich postanowień znajdują się konstrukcje takie jak pętle, domieszki i funkcje, co czyni je niezbędnymi zasobami wykraczającymi poza zwykłą aranżację stylistyczną. Wybór między zastosowaniem preprocesora CSS a jego rezygnacją zależy od konkretnych wymagań i preferencji każdego indywidualnego scenariusza oraz preferencji programisty.