Για χρόνια, υποθέταμε ότι το CSS δεν μπορούσε να «σκεφτεί». Παρόλα αυτά, είχαμε λύσεις: @media, @supports, @container και εφεδρικές μεταβλητές Μας επέτρεπαν να αλλάζουμε στυλ με βάση τα συμφραζόμενα. Τώρα έρχεται μια νέα λειτουργία που ανεβάζει τον πήχη και ταιριάζει καλύτερα με τον τρόπο που συλλογιζόμαστε κατά το σχεδιασμό: η συνάρτηση υπό όρους if() απευθείας στις τιμές των ιδιοτήτων.
Δεν είναι καπνός: Ξεκινώντας με το Chrome 137, μπορείτε να ελέγξετε αν() για να δημιουργήσετε ενσωματωμένα στυλ με λογική υπό όρους που βασίζεται σε στυλ, μέσα και ερωτήματα υποστήριξης. Ωστόσο, η υποστήριξη εξακολουθεί να είναι περιορισμένη εκτός του Chromium, επομένως είναι καλύτερο να τη χρησιμοποιείτε με σύνεση. συνδυάζοντάς το με εφεδρικά για προγράμματα περιήγησης που δεν το καταλαβαίνουν.
Τι υπήρχε πριν: «συνθήκες» που χρησιμοποιούσαμε ήδη στο CSS
Πριν από την if(), η CSS προσέφερε ήδη μηχανισμούς υπό όρους, ο καθένας με το δικό του πεδίο εφαρμογής. Δεν είναι αληθινά αν, αλλά πληρούν στη γη τους:
- @mediaΕφαρμόζει κανόνες εάν το παράθυρο ή η συσκευή πληροί ένα κριτήριο (πλάτος, προσανατολισμός, δείκτης κ.λπ.).
- @ υποστηρίζει: Ενεργοποιεί στυλ εάν το πρόγραμμα περιήγησης κατανοεί μια λειτουργία ή τιμή.
- @δοχείο: αντιδρά στο μέγεθος ή το στυλ ενός κοντέινερ, χρήσιμο για σχεδιασμό που βασίζεται σε στοιχεία.
- var () με προεπιλεγμένη τιμή: όχι ως if, αλλά επιτρέπει την εντολή "εάν η μεταβλητή δεν υπάρχει, χρησιμοποιήστε αυτήν την εφεδρική τιμή".
Αυτές οι προσεγγίσεις είναι ισχυρές, αν και είναι «κολλημένες» στον σκοπό τους: μέσα, υποστήριξη ή δοχείαΗ συνάρτηση if() δεν αντικαθιστά αυτά τα εργαλεία, αλλά τα ενσωματώνει απρόσκοπτα. παρεμβαλλόμενο και κοκκώδες στις αξίες ακινήτων.
Τι είναι το if() στο CSS και γιατί έχει σημασία;
Η λειτουργία αν() σας επιτρέπει να ορίσετε, εντός μιας τιμής ιδιότητας, μια λίστα ζευγών συνθήκης:τιμής, τα οποία αξιολογούνται με τη σειρά. Όταν η πρώτη συνθήκη είναι αληθής, η τιμή που σχετίζεται με αυτήν θα είναι αυτή που "νικάει". Είναι μια ροή παρόμοια με το αν…αλλιώς της JS, αλλά ενσωματωμένο σε CSS.
Στην τρέχουσα έκδοσή της, η συνάρτηση if() κατανοεί τρεις τύπους ερωτημάτων εντός των συνθηκών της: στυλ() (ερωτήματα στυλ στο ίδιο το στοιχείο), μέσος() (ερωτήσεις από τα μέσα ενημέρωσης) και υποστηρίζει() (ερωτήματα υποστήριξης λειτουργιών). Επιπλέον, μπορείτε να προσθέσετε ένα αλλιώς: τιμή για να καλύψω την περίπτωση όπου δεν χωράει τίποτα άλλο.
Λεπτομερής σύνταξη και αξιολόγηση
Η γενική δομή είναι μια λίστα κλάδων τύπου που χωρίζονται με ερωτηματικό :Κάθε συνθήκη είναι είτε μια (style(), media() ή supports()) ή η λέξη-κλειδί αλλιώς, η οποία πάντα αξιολογείται ως αληθής.
/* Estructura básica */
propiedad: if(
style(--estado: activo): valor-1;
media(width < 700px): valor-2;
supports(color: lch(60% 50 40)): valor-3;
else: valor-por-defecto
);
Η μηχανή αξιολογεί τους κλάδους με τη σειρά. Η πρώτη που είναι αληθής επιστρέφει την τιμή τηςΕάν καμία συνθήκη δεν είναι αληθής και δεν υπάρχει άλλη, το αποτέλεσμα της συνάρτησης είναι εγγυημένο-άκυρο, το οποίο συμπεριφέρεται σαν μη έγκυρη τιμή και επιτρέπει εξωτερικά εφεδρικά μέσα τίθενται σε εφαρμογή (για παράδειγμα, η προεπιλεγμένη τιμή μιας προσαρμοσμένης ιδιότητας ή μια προηγούμενη τιμή που αυξάνεται σταδιακά).
Μια βασική λεπτομέρεια: εάν μια συνθήκη ή μια συγκεκριμένη τιμή μέσα στη λίστα δεν είναι έγκυρη, δεν ακυρώνει ολόκληρη τη λειτουργία; ο αναλυτής συνεχίζει με το επόμενο ζεύγος. Αυτό δημιουργεί την if() ανθεκτικό σε αστοχίες ενός σημείου μέσα στα κλαδιά.
Τύποι δοκιμών: style(), media() και supports()
style(): ερωτήματα στυλ
Ερωτήματα στυλ με στυλ() σας επιτρέπουν να ρωτήσετε εάν το στοιχείο-στόχος έχει μια συγκεκριμένη τιμή για μια ιδιότητα (ιδιαίτερα χρήσιμο με προσαρμοσμένες ιδιότητες). Σε αντίθεση με τα ερωτήματα στυλ @container, στυλ() Στην if() αξιολογείται στο ίδιο το στοιχείο και αμέσως, χωρίς να χρειάζεται να εξαρτάται από κάποιον γονέα.
/* Estado embebido en una custom property */
.card {
--status: attr(data-status type(<custom-ident>));
border-color: if(
style(--status: pending): royalblue;
style(--status: complete): seagreen;
else: gray
);
background-color: if(
style(--status: pending): #eff7fa;
style(--status: complete): #f6fff6;
else: #f7f7f7
);
}
Μέσα στυλ() μπορείτε να χρησιμοποιήσετε λογικούς τελεστές και , or y δεν, συν παρενθέσεις για ομαδοποίηση, κάτι που διευκολύνει σύνθετοι συνδυασμοί των πολιτειών. Λάβετε υπόψη ότι τα ερωτήματα σχετικά με το στυλ @δοχείο σήμερα δεν υποστηρίζουν «κανονικές» ιδιότητες (μόνο προσαρμοσμένες), ενώ στυλ() μέσα σε αν() Χρησιμοποιείται για να καθοριστεί η τιμή μιας μεμονωμένης ιδιότητας στο ίδιο το στοιχείο.
media(): διεπαφή ερωτημάτων πολυμέσων
με μέσος() Μπορείτε να ορίσετε την τιμή μιας ιδιότητας με ένα συγκεκριμένο ερώτημα πολυμέσων, χωρίς να διαχωρίσετε το στυλ σε ένα άλλο μπλοκ @media. Αυτό είναι ιδανικό όταν απλά θέλετε να αλλάξετε μια ιδιότητα ανάλογα με το περιβάλλον.
/* Ejemplo para puntero fino vs grueso */
button {
aspect-ratio: 1;
width: if(
media(any-pointer: fine): 30px;
else: 44px
);
}
Αυτό το μπλοκ ισοδυναμεί με τη σύνταξη ενός βασικού κανόνα συν ένα @media που επαναπροσδιορίζει την ιδιοκτησία, αλλά συγκεντρώνει τη λογική σε ένα μέρος. Μπορείτε επίσης να χρησιμοποιήσετε τύποι μέσων (για παράδειγμα, εκτύπωση) ή χαρακτηριστικά πολυμέσων με λογική και/ή/όχι.
/* Media type */
.elemento {
background: if(
media(print): white;
else: #eee
);
}
/* Media feature con rango */
.caja {
margin: if(
media(width < 700px): 0 auto;
else: 20px auto
);
}
Αν χρειάζεστε αλλαγή πολλών επιλογέων ή αρκετών ιδιοτήτων Ταυτόχρονα, ένα παραδοσιακό μπλοκ @media είναι ακόμα καλύτερο. Για συγκεκριμένες παραλλαγές σε μια μεμονωμένη δήλωση, αν() είναι πιο εκφραστικό.
supports(): ερωτήματα υποστήριξης
με υποστηρίζει() Ρωτάτε αν το πρόγραμμα περιήγησης κατανοεί μια συγκεκριμένη λειτουργία (ιδιότητα, τιμή, επιλογέα κ.λπ.) και επιλέγετε την τιμή ανάλογα. Ιδανικό για προοδευτική βελτίωση χωρίς να διπλασιάζονται τα μπλοκ @supports.
/* Color de amplia gama si está soportado */
body {
background-color: if(
supports(color: oklch(0.7 0.185 232)): oklch(0.7 0.185 232);
else: #00adf3
);
}
/* Consulta de soporte de selector */
video {
outline-width: if(
supports(selector(:buffering)): 1em;
else: initial
);
}
Να θυμάστε ότι για ένα υποκατάστημα με υποστηρίζει() μέσα στη συνάρτηση if(), το ίδιο το πρόγραμμα περιήγησης πρέπει υποστήριξη εάν()Εξ ου και η σημασία του ορισμού στερεά εφεδρικά εκτός της λειτουργίας.
Συχνότητα και θέση του άλλου
Μπορείτε να χρησιμοποιήσετε ένα ή περισσότερα άλλα μέσα στη συνάρτηση και τοποθετήστε τα όπου θέλετε. Ωστόσο, ο πιο συνηθισμένος τρόπος είναι να τοποθετήσετε ένα μόνο αλλιώς στο τέλος ως προεπιλεγμένη τιμή. Αν βάλεις άλλο στην αρχή, θα κερδίζει πάντα και οι επακόλουθες συνθήκες δεν θα αξιολογηθεί.
/* Útil para depurar: colocamos un else intermedio */
.elemento {
background-image: if(
style(--flag: on): url("ok.png");
else: url("debug.png"); /* si la primera no encaja, mostramos pista */
supports(background: paint(foo)): paint(foo)
);
}
Επιπλέον, μια συνάρτηση αν() αποτελούμενο μόνο από αλλιώς: τιμή, ή ακόμα και κενό, είναι συντακτικά έγκυρο, αν και όχι πολύ χρήσιμο. Καλύτερα να αντιστοιχίσετε την τιμή απευθείας αν δεν υπάρχει λογική.
Πλήρεις, μερικές τιμές και ένθεση
Η συνάρτηση μπορεί να λάβει ολόκληρη την τιμή μιας ιδιότητας ή μόνο ένα μέρος της μέσα σε μια στενογραφίαΑυτό επιτρέπει πολύ εκφραστικές συνθέσεις χωρίς να παρεκκλίνουν από την ίδια δήλωση, με λιγότερη επανάληψη του κώδικα.
/* Decidimos solo el color dentro de un shorthand */
.box {
border: 2px solid if(
supports(color: lch(60% 50 40)): lch(60% 50 40 / 0.7);
else: rgb(100 120 200 / 0.7)
);
}
Λειτουργίες αν() μπορεί να φωλιάσει μέσα σε άλλους αν(), καθώς και σε ρόλους όπως calc()Αυτό επιτρέπει την πιο λεπτομερή μοντελοποίηση αποφάσεων χωρίς την αντιγραφή επιλογέων ή το άνοιγμα νέων μπλοκ.
/* Anidación doble: esquema y preferencia de color */
.elemento {
color: if(
style(--scheme: ice): if(
media(prefers-color-scheme: dark): oklch(85% 0.04 220);
else: oklch(35% 0.04 220)
);
style(--scheme: fire): if(
media(prefers-color-scheme: dark): oklch(90% 0.1 30);
else: oklch(40% 0.1 30)
);
else: black
);
}
/* calc() con porcentaje condicionado */
.panel {
width: calc(
if(style(--scheme: wide): 70%; else: 50%) - 50px
);
}
Μπορούμε επίσης να χρησιμοποιήσουμε if() για να αποφασίσουμε χαλαρά μέρη ενός ακινήτου ως άνω περιθώριο μέσα σε μια συντομογραφία ή ως ένα συγκεκριμένο στοιχείο φόντου, χωρίς να αντιγράφεται ό,τι δεν αλλάζει.
Πρακτικά παραδείγματα διάσπαρτα
1) Κουμπί προσβάσιμο ανάλογα με τον τύπο του δείκτη
Εάν η συσκευή διαθέτει λεπτός δείκτης (π.χ., ποντίκι), το κουμπί θα είναι μικρότερο. Στις οθόνες αφής, το έχουμε αυξήσει στα 44px για να ανταποκριθούμε στις συστάσεις προσβασιμότητας. Μία δήλωση, δύο συμπεριφορές.
button {
aspect-ratio: 1;
width: if(
media(any-pointer: fine): 30px;
else: 44px
);
}
Το παραπάνω ισοδυναμεί με μια βάση + ένα μπλοκ @media, αλλά κάπως έτσι δεν κατανέμετε τη λογική σε πολλούς ιστότοπους και μειώνουν την πιθανότητα σφαλμάτων.
2) Ευρεία γκάμα χρωμάτων με εφεδρική επιλογή
Εάν το πρόγραμμα περιήγησης κατανοεί OKLCH, χρησιμοποιούμε αυτό το χρώμα και, ενώ το κάνουμε αυτό, εμφανίζουμε ένα ενημερωτικό μήνυμα ::μετάΔιαφορετικά, εφαρμόζουμε ένα ασφαλές εξάγωνο. Συμβατότητα χωρίς δράμα.
body {
background-color: if(
supports(color: oklch(0.7 0.185 232)): oklch(0.7 0.185 232);
else: #00adf3
);
}
body::after {
content: if(
supports(color: oklch(0.7 0.185 232)): "Tu navegador admite OKLCH";
else: "Tu navegador no admite OKLCH"
);
}
Αν θέλετε να εξερευνήσετε την οπτική διαφορά μεταξύ των RGB και των σύγχρονων χώρων, ρίξτε μια ματιά στο πηγές όπως το oklch.comΘα δείτε γιατί αξίζει να υιοθετήσετε αυτούς τους χώρους όταν υπάρχει υποστήριξη.
3) Κάρτες που αλλάζουν ανάλογα με την κατάσταση του UI
Αποθηκεύει την πολιτεία σε κατάσταση δεδομένων, διαβάστε το με attr() προς μια προσαρμοσμένη ιδιοκτησία και να λαμβάνουν αποφάσεις με στυλ()Ένας κομψός τρόπος για να αυτοτελή εξαρτήματα.
<div class="card" data-status="complete">...</div>
.card {
--status: attr(data-status type(<custom-ident>));
border-color: if(
style(--status: pending): royalblue;
style(--status: complete): seagreen;
else: gray
);
background-color: if(
style(--status: pending): #eff7fa;
style(--status: complete): #f6fff6;
else: #f7f7f7
);
}
Με αυτό το μοτίβο, αλλάξτε το χαρακτηριστικό δεδομένων στην HTML τροποποιεί πολλαπλές ιδιότητες χωρίς να αγγίζει επιπλέον CSS ή JS εναλλαγής κλάσεων.
Αλλιώς και σειρά αξιολόγησης: πώς σκέφτεται η συνάρτηση if()
Οι συνθήκες αξιολογούνται με τη σειρά που εμφανίζονταιΗ πρώτη αληθής τιμή επιστρέφει την τιμή και η αξιολόγηση σταματά. Εάν καμία δεν περάσει, το αποτέλεσμα θα είναι εγγυημένο-άκυρο, το οποίο επιτρέπει εξωτερικές εναλλακτικές λύσεις (π.χ., μια διαδοχική προηγούμενη τιμή ή την προεπιλεγμένη τιμή του προγράμματος περιήγησης).
Μπορείτε επίσης να τοποθετήσετε αλλού στη μέση Για εντοπισμό σφαλμάτων: αν θέλετε να μάθετε αν μια πρώτη συνθήκη δεν λειτουργεί, τοποθετήστε μια άλλη συνθήκη που επιστρέφει, για παράδειγμα, μια εικόνα "εντοπισμού σφαλμάτων" και ούτω καθεξής. οραματίζεσαι το πρόβλημα σαφώς.
Εφεδρικά προγράμματα περιήγησης χωρίς if()
Η συνάρτηση if() δεν προκαλεί μαγικά αυτόματη υποβάθμιση: χρειάζεστε μια τιμή κράτησηςΤοποθετήστε πρώτα μια πρόταση ασφαλούς για χρήση σε διάφορα προγράμματα περιήγησης και, στη συνέχεια, την έκδοση if() που την παρακάμπτει όταν υποστηρίζεται. Είναι το προτεινόμενο μοτίβο.
.box {
padding: 16px; /* Fallback para navegadores sin if() */
padding: if(
style(--size: "2xl"): 24px;
else: 16px
);
}
Έτσι, τα προγράμματα περιήγησης χωρίς if() θα χρησιμοποιήσουν την πρώτη γραμμή. Αυτά που την υποστηρίζουν θα αξιολογήσουν τη δεύτερη και θα το αντικαταστήσει.
Συμβατότητα και τρέχουσα κατάσταση
Σύμφωνα με τις πιο πρόσφατες πληροφορίες που δόθηκαν, Το Chrome 137 επιτρέπει πλέον τη δοκιμή εάν() και το Edge στην ισοδύναμη έκδοσή του κληρονομεί υποστήριξη. Άλλες πηγές υπενθυμίζουν ότι, εκτός του Chromium, η υλοποίηση δεν είναι ακόμη ευρέως διαδεδομένο και ότι η πρόταση θα συνεχίσει να ωριμάζει στο W3C, επομένως είναι σκόπιμο να διατηρηθεί προσδοκίες realistas.
Ορισμένες εκτιμήσεις κάνουν λόγο για περίπου ~47% κάλυψη προς το παρόν (κατά την αρχική του κυκλοφορία). Η σύστασή μου είναι να το χρησιμοποιήσετε στην παραγωγή μόνο εάν ελέγχετε το περιβάλλον ή εάν η εφεδρική σας στρατηγική είναι συμπαγές. Διαφορετικά, εφαρμόστε το σε προοδευτικές στρώσεις ή σε ελεγχόμενα περιβάλλοντα.
Σχέση με @media, @supports και @container
Οι κανόνες if() και at είναι συμπληρωματικοί, όχι αμοιβαία αποκλειόμενοι. Οι @media ή @supports είναι ακόμα καλύτεροι όταν θέλετε εφαρμογή πλήρων συνόλων κανόνων σε πολλαπλές ιδιότητες/επιλογείς. Η συνάρτηση if() λειτουργεί όταν χρειάζεστε ένα έγκαιρη απόφαση για μία μόνο τιμή, διατηρώντας τη λογική που συνδέεται με το ακίνητο, γεγονός που διευκολύνει τη συντήρηση.
Στον σχεδιασμό με βάση τα στοιχεία, το δίδυμο των @δοχείο (για να ανταποκριθεί στη διάταξη του κοντέινερ) και αν() με στυλ() (για να μεταβάλλονται συγκεκριμένες ιδιότητες του ίδιου του εξαρτήματος) ανοίγει πολύ ισχυρές ροές και λιγότερο φλύαρος.
Η πρόταση @when και @else
Εκτός από την if(), υπάρχουν προτάσεις όπως @όταν / @αλλιώς που θέτουν υποθετικές λέξεις σε επίπεδο κανόνα, με μια σύνταξη σχεδιασμένη να διαβάζω καλύτερα πολύπλοκες συνθήκες τα οποία, με τα @media και τα @supports αλυσιδωτά, καθίστανται δύσκολα στη συντήρηση.
@when media(width <= 600px) {
.container { display: flex; flex-direction: column; }
}
@else {
.container { display: flex; flex-direction: row; }
}
Μπορείτε να συνδυάσετε και, ή, όχι και χρησιμοποιήστε παρενθέσεις για ομαδοποίηση. Σε ασήμαντες περιπτώσεις, ένα @media είναι αρκετό, αλλά σε πιο πλούσιους συνδυασμούς @when/@else αποκτά αναγνωσιμότητα.
@when media(width <= 600px) and supports(display: grid) {
/* ... */
}
@else media(width >= 600px) and supports(display: flex) {
/* ... */
}
@else {
/* Fallback final */
}
Αυτοί οι κανόνες βρίσκονται ακόμη σε εξέλιξη και η πραγματική εφαρμογή τους μπορεί να απαιτήσει χρόνο, αλλά στοχεύουν στην απλοποίηση εκτεταμένων υποθετικών όρων σε επίπεδο φύλλου στυλ.
Μοτίβα, όρια και συμβουλές
- Κρατήστε τα κλαδιά τακτοποιημένα για πιθανότητα και σαφήνεια. Η πρώτη αληθινή επιλογή κερδίζει, οπότε ταξινομήστε έχοντας κατά νου την απόδοση και την αναγνωσιμότητα.
- ΗΠΑ αλλιώς τελικό ως προεπιλεγμένη τιμή. Αν την προωθήσετε, συντομεύεις την αξιολόγηση των υπόλοιπων συνθηκών.
- Να θυμάστε ότι αν() αποφασίζει ένα ακίνητο κάθε φοράΑν χρειάζεται να αλλάξετε πολλά πράγματα ταυτόχρονα, σκεφτείτε το ενδεχόμενο να χρησιμοποιήσετε τα @media/@supports ή να τα χωρίσετε σε πολλαπλές δηλώσεις.
- να εντοπισμός σφαλμάτων, προσθέστε μια πρόταση else ενδιάμεσα με ένα φωτεινό χρώμα ή μια εικόνα προειδοποίησης. Θα δείτε γρήγορα ποιος κλάδος αποτυγχάνει.
- Συνδυάζεται με προσαρμοσμένες ιδιότητες για εξαγωγή καταστάσεων από HTML (χαρακτηριστικά δεδομένων) ή από άλλους επιλογείς και καθορισμό τιμών χωρίς JS.
- Αποφύγετε την κατάχρηση πολύ μακροσκελών υποθετικών λέξεων. Αν χάσετε την ανάγνωση, ήρθε η ώρα να λογική εξαγωγής σε άλλο μέρος.
Γρήγορη σύγκριση με το «συνηθισμένο»
Πριν: βάση + @media/@supports με επανεγγραφές· τώρα: αν() παρεμβληθεί χωρίς να διασπάται η λογική. Λιγότερο CSS, περισσότερη τοπική συνοχή στη δήλωση. Κερδίστε συντήρηση.
Πριν: JS για εναλλαγή κλάσεων ή καταστάσεων· τώρα: προσαρμοσμένες ιδιότητες + στυλ() για να αποφασίσετε ιδιότητες. Με την if() μειώνετε την εξάρτηση από επιτακτικός κώδικας για απλές οπτικές παραλλαγές.
Σημειώσεις υλοποίησης και μελλοντικοί συνδυασμοί
Η άφιξη της συνάρτησης if() συμπίπτει με άλλες γραμμές εξέλιξης της γλώσσας: ερωτήματα στυλ à la carte, πιθανό ερωτήματα εύρους ενσωματωμένη στο μέλλον και την πρόταση του @λειτουργία για προσαρμοσμένες λειτουργίες. Μαζί, αυτά τα κομμάτια σχεδιάζουν ένα πιο δηλωτικό και συνθετό.
Προς το παρόν, εστιάστε στις τρεις διαθέσιμες δοκιμές (στυλ(), μέσος(), υποστηρίζει()) και να εδραιώσετε την εφεδρική σας στρατηγική. Με το Chrome 137, μπορείτε τώρα να ξεκινήσετε πρωτότυπο και μέτρο τον πραγματικό αντίκτυπο στον κώδικά σας.
Η ιδέα των «συνθηκών στο CSS» έχει περάσει από ευσεβής πόθος σε ένα συγκεκριμένο εργαλείο που, με τις λεπτές αποχρώσεις του, μπορεί πλέον να χρησιμοποιηθεί σε συμβατά περιβάλλοντα. Με την if(), τα στυλ κερδίζουν. αλληλοεπικαλυπτόμενη λογική, λιγότερες επαναλήψεις και καλύτερη ενθυλάκωσηκαι ταιριάζει απόλυτα με προσαρμοσμένες μεταβλητές, χαρακτηριστικά δεδομένων και ερωτήματα πολυμέσων. Ενώ η υποστήριξή του δεν είναι ακόμη καθολική, η υιοθέτηση προοδευτικών μοτίβων και η προετοιμασία για εφεδρικά μοντέλα θα σας επιτρέψει να αρχίσετε να επωφελείστε σήμερα από έναν τρόπο σκέψης για το CSS που είναι πιο κοντά στον τρόπο που σχεδιάζουμε διεπαφές: λήψη αποφάσεων ακριβώς εκεί που εφαρμόζονται.