Η εγγενής ένθεση CSS μπορεί να απλοποιήσει τον κώδικα CSS και να βελτιώσει τη συνολική εμπειρία κωδικοποίησης.
Ιστορικά, η CSS ήταν μια δύσκολη γλώσσα στην εργασία. Οι προεπεξεργαστές CSS διευκόλυναν την εργασία με το CSS και παρείχαν επίσης πρόσθετες λειτουργίες όπως βρόχους, μίξεις και άλλα. Με τα χρόνια, το CSS έγινε πιο ικανό και υιοθέτησε ορισμένες από τις δυνατότητες που εισήχθησαν αρχικά από τους προεπεξεργαστές CSS. Ένα τέτοιο χαρακτηριστικό είναι το «φωλιασμένο styling».
Το ένθετο στυλ επιτρέπει στους προγραμματιστές να ενσωματώνουν κανόνες CSS μεταξύ τους, αντανακλώντας τη δομή HTML. Αυτό έχει ως αποτέλεσμα πιο οργανωμένο και ευανάγνωστο κώδικα, καθώς η σχέση μεταξύ των στοιχείων HTML και των αντίστοιχων στυλ τους είναι εμφανής οπτικά.
Nested Styling: The Old Way
Το Nested Styling είναι μια δυνατότητα διαθέσιμη σε πολλά Προεπεξεργαστές CSS όπως το Sass, Stylus και Less CSS. Αν και η σύνταξη μπορεί να διαφέρει μεταξύ αυτών των προεπεξεργαστών, η υποκείμενη έννοια παραμένει συνεπής. Αν ήθελες να βάλεις στυλ όλα
h1 στοιχεία σε α div με το όνομα της τάξης του δοχείο, σε κανονικό CSS, θα γράφατε:.container {
background-color: #f2f2f2;
}
.containerh1 {
font-size: 44px;
}
Σε έναν προεπεξεργαστή CSS όπως το Less CSS, εφαρμόζετε ένθετο στυλ όπως αυτό:
.container{
background-color: #f2f2f2;
h1 {
font-size:44px;
}
}
Το παραπάνω μπλοκ κώδικα επιτυγχάνει τα ίδια αποτελέσματα με την κανονική υλοποίηση CSS, αλλά διευκολύνει κάθε προγραμματιστή που διαβάζει τον κώδικα να κατανοήσει τι συμβαίνει. Αυτή η αίσθηση «ιεραρχίας» ήταν ένα από τα μεγαλύτερα σημεία πώλησης των προεπεξεργαστών CSS.
Το δέντρο φωλιάσματος μπορεί να τοποθετηθεί σε οποιοδήποτε βάθος χωρίς περιορισμούς, αλλά είναι απαραίτητο να είστε προσεκτικοί, καθώς η υπερβολικά βαθιά φωλεοποίηση μπορεί να οδηγήσει σε πολυγλωσσία κώδικα.
Native Nested Styling σε CSS
Δεν περιλαμβάνουν όλα τα προγράμματα περιήγησης υποστήριξη για εγγενές ένθετο στυλ. ο Μπορώ να χρησιμοποιήσω... ο ιστότοπος μπορεί να σας βοηθήσει να ελέγξετε εάν το πρόγραμμα περιήγησης-στόχου σας υποστηρίζει αυτήν τη δυνατότητα.
Το εγγενές ένθετο στυλ στο CSS λειτουργεί παρόμοια με τους προεπεξεργαστές CSS, πράγμα που σημαίνει ότι είναι δυνατή η ένθεση οποιουδήποτε επιλογέα μέσα σε έναν άλλο. Αλλά υπάρχει μια βασική διαφορά που πρέπει να σημειώσετε. Ρίξτε μια ματιά στο μπλοκ κώδικα παρακάτω:
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>
Στο μπλοκ κώδικα παραπάνω, το div με το όνομα της κλάσης δοχείο έχει κόκκινο χρώμα φόντου. Το styling για το h1 στοιχείο βρίσκεται στο .δοχείο ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ. Αυτό h1 το στοιχείο έχει το χρώμα κίτρινο. Όταν εκτελείτε αυτόν τον κώδικα στο πρόγραμμα περιήγησης, μπορεί να παρατηρήσετε κάτι λάθος. Το πρόγραμμα περιήγησης εφαρμόζει σωστά ένα κόκκινο χρώμα φόντου στο δοχείο div, αλλά το h1 δεν έχει το κατάλληλο styling.
Αυτό συμβαίνει επειδή το ένθετο στυλ λειτουργεί λίγο διαφορετικά στο CSS σε σύγκριση με τους προεπεξεργαστές CSS όπως το Less. Δεν μπορείτε να αναφέρετε απευθείας ένα στοιχείο HTML σε ένα ένθετο δέντρο. Για να το διορθώσετε αυτό, πρέπει να χρησιμοποιήσετε ένα σύμφωνο (&) όπως φαίνεται παρακάτω:
.container {
background-color: red;
& h1 {
color: yellow;
}
}
Στο μπλοκ κωδικών παραπάνω, & λειτουργεί ως αναφορά στον γονικό επιλογέα. Βάζοντας το σύμφωνο πριν από το h1 στοιχείο θα πρέπει να ενημερώνει το πρόγραμμα περιήγησης ότι στοχεύετε όλο το παιδί h1 στοιχεία στο δοχείο div. Όταν εκτελείτε τον κώδικα στο πρόγραμμα περιήγησης, θα πρέπει να δείτε τα εξής:
Από & είναι το σύμβολο που χρησιμοποιείται για την αναφορά ενός γονικού στοιχείου, είναι πολύ πιθανό να στοχεύσετε τις ψευδοκλάσεις και τα ψευδοστοιχεία ενός στοιχείου ως εξής:
.parent1{
&:hover{
background-color: red;
}
&::before{
content:"Hereisapseudoelement.";
}
}
Πριν από την εφαρμογή του ένθετου στυλ CSS, εάν στοχεύατε να εφαρμόσετε στυλ υπό όρους, ανάλογα με το πλάτος του προγράμματος περιήγησης, έπρεπε να καταφύγετε σε μια μέθοδο όπως η παρακάτω:
p {
color:black;
}
@media (min-width:750px) {
p {
color:gray;
}
}
Όταν το πρόγραμμα περιήγησης αποδίδει τη σελίδα, καθορίζει το χρώμα της Π στοιχείο με βάση το πλάτος του προγράμματος περιήγησης. Εάν το πλάτος του προγράμματος περιήγησης υπερβαίνει τα 750 εικονοστοιχεία, χρησιμοποιεί το γκρι χρώμα. Διαφορετικά, εφαρμόζει το προεπιλεγμένο χρώμα (μαύρο).
Αυτή η υλοποίηση λειτουργεί καλά, αλλά όπως μπορείτε να φανταστείτε, τα πράγματα μπορούν να γίνουν αρκετά περίπλοκα γρήγορα, ειδικά όταν χρειάζεται να εφαρμόσετε διαφορετικά στυλ με βάση ορισμένους κανόνες. Είναι πλέον δυνατή η φωλιά ερωτήματα πολυμέσων απευθείας στο μπλοκ στυλ ενός στοιχείου.
p {
color:black;
@media (min-width:750px) {
color:gray;
}
}
Αυτό το μπλοκ κώδικα κάνει βασικά το ίδιο πράγμα με το προηγούμενο, αλλά έχει το πλεονέκτημα ότι είναι εύκολο να κατανοηθεί. Εξετάζοντας απλώς το ερώτημα πολυμέσων και το ένθετο γονικό στοιχείο, μπορείτε να πείτε πώς το πρόγραμμα περιήγησης θα εφαρμόσει τα κατάλληλα στυλ όταν πληρούνται οι καθορισμένες προϋποθέσεις.
Δημιουργία στυλ ιστότοπου με ένθετα στυλ CSS
Είναι καιρός να κάνετε πράξη όλα όσα έχετε μάθει μέχρι τώρα κατασκευή μιας απλής ιστοσελίδας και αξιοποιώντας το ένθετο χαρακτηριστικό στυλ στο CSS. Δημιουργήστε ένα φάκελο και ονομάστε τον όπως θέλετε. Σε αυτόν τον φάκελο, δημιουργήστε ένα ευρετήριο.htm και ένα στυλ.css αρχείο.
Στο ευρετήριο.htm αρχείο, προσθέστε τον ακόλουθο κώδικα λέβητα:
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>
Το μπλοκ κώδικα παραπάνω ορίζει τη σήμανση για έναν ιστότοπο ψευδών ειδήσεων. Στη συνέχεια, ανοίξτε το στυλ.css αρχείο και προσθέστε τον ακόλουθο κώδικα:
.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;
}
}
Το μπλοκ κώδικα παραπάνω διαμορφώνει τον ιστότοπο εξ ολοκλήρου με ένθετο στυλ CSS. ο .δοχείο ο επιλογέας λειτουργεί ως το βάθος της ρίζας. Μπορείτε να κάνετε αναφορά σε αυτόν τον επιλογέα χρησιμοποιώντας το & σύμβολο. Όταν εκτελείτε τον κώδικα στο πρόγραμμα περιήγησης, θα πρέπει να δείτε τα εξής:
Χρειάζεστε ακόμα έναν προεπεξεργαστή CSS;
Με την εισαγωγή ένθετων στυλ στο εγγενές CSS, οι προεπεξεργαστές CSS μπορεί να φαίνονται περιττοί. Ωστόσο, είναι σημαντικό να έχετε κατά νου ότι οι προεπεξεργαστές CSS προσφέρουν περισσότερα από ένα ένθετο στυλ. Παρέχουν χαρακτηριστικά όπως βρόχους, μίξεις, λειτουργίες και άλλα. Τελικά, εάν θα χρησιμοποιήσετε έναν προεπεξεργαστή CSS ή όχι εξαρτάται από τη συγκεκριμένη περίπτωση χρήσης και τις προσωπικές σας προτιμήσεις.