Σάσα Γκρέιφ αναρωτήθηκε ανοιχτά αν το CSS έχει γίνει, ξέρετε, πολύ μεγάλο. Με όλα τα καλούδια που έχουν αποσταλεί στα προγράμματα περιήγησης τα τελευταία δύο χρόνια — ερωτήματα κοντέινερ! σχετική χρωματική σύνταξη! στρώματα καταρράκτη! λογικές ιδιότητες! εύρη σε ερωτήματα πολυμέσων! μεμονωμένες μεταμορφώσεις! :has() εκλέκτορας! — και όλα όσα υπάρχουν στον πιθανό ορίζοντα — Εναλλαγή CSS! φωλιάσματος! ανάμειξη χρωμάτων! κινούμενα σχέδια που συνδέονται με κύλιση! στυλ εμβέλειας! — Υπάρχει σίγουρα μια διαφορετική καμπύλη εκμάθησης για το CSS αυτές τις μέρες για νέους και έμπειρους front-enders.
Ίσως υπήρξε μια εποχή που ήταν δυνατό να γνωρίζουμε τις περισσότερες ιδιότητες CSS και πώς λειτουργούν. Αυτές οι μέρες έχουν περάσει προ πολλού, τουλάχιστον για ένα παλιό χέρι σαν εμένα. Αλλά αυτό το είδος γεννά το ερώτημα: τι CSS πρέπει οπωσδήποτε να γνωρίζετε;
Vincas Stonys πρόσφατα έριξε μια μαχαιριά σε μια λίστα. Κρις βάλτε ένα μαζί με βάση τα χαρακτηριστικά που κυκλοφόρησαν από το CSS3. Πιθανότατα έχετε μια ιδέα για το τι θα συμπεριλάβατε σε μια λίστα. Αν έπρεπε να συγκεντρώσω ένα Top 5 και να περιοριστώ μόνο σε ακίνητα και επιλογείς, μπορεί να μοιάζει κάπως έτσι…
writing-mode
Δεν μπορώ να πω αρκετά για το writing-mode ιδιοκτησία. Αυτό που το καθιστά σημαντικό — ειδικά από την σκοπιά της μάθησης — είναι ότι σας θέτει βασικές αρχές που αφορούν τη δημιουργία διατάξεων, ανεξάρτητα από τη γλώσσα του χρήστη. Μια καλή κατανόηση του writing-mode πρόκειται να οδηγήσει σε κατανόηση του λογικές ιδιότητες και τιμές, και αυτά, με τη σειρά τους, θέτουν το υπόβαθρο για την κατανόηση της ροής των εγγράφων και τη σκέψη με όρους block, inline, start, να end παρά φυσικές κατευθύνσεις.
display
Δυσκολεύομαι να πιστέψω ότι κάποιος μπορεί να γράψει καλό CSS χωρίς να έχει σταθερή κατανόηση display ιδιοκτησία. Είναι ταυτόχρονα μια ιδιότητα και ένα πλαίσιο για τη δημιουργία διατάξεων. Δεν υπάρχει Flexbox ή CSS Grid χωρίς αυτό, κάτι που το κάνει σαν φύλακας στην κατανόηση αυτών των σημαντικών χαρακτηριστικών.
Επιπλέον, το display ακίνητο συμπληρώνει τέλεια writing-mode. Είναι ακριβώς αυτό που θα χρειαστείς μια φορά writing-mode σας έχει εκθέσει σε ροή εγγράφων και λογικές κατευθύνσεις. Θα χρειαστείτε μια ιδιότητα είτε για να αλλάξετε την κανονική ροή ενός στοιχείου (όπως η αλλαγή ενός στοιχείου μπλοκ σε ένα ενσωματωμένο) είτε για να αρχίσετε να διαμορφώνετε πράγματα (όπως η δημιουργία ενός ευέλικτου περιβάλλοντος διάταξης) και εκεί είναι που display μπαίνει στο παιχνίδι.
margin / padding / border
Ουφ, απατώ εντελώς εδώ, αλλά σκέψου να μάθεις margin, padding, να border μαζί είναι κάπως αναπόφευκτο. Είναι όλα μέρη του Το μοντέλο του κουτιού, όλα βοηθούν με την απόσταση και το στυλ, και όλα απαιτούν εξοικείωση Μονάδες μήκους CSS. Γνωρίζοντας τι έχουν σχεδιαστεί να κάνουν αυτές οι ιδιότητες και πώς συμβάλλουν στο υπολογισμένο μέγεθος ενός στοιχείου, σίγουρα σας δίνει πολύ περισσότερο έλεγχο στυλ και διαλύει κάθε σύγχυση σχετικά με το γιατί ένα στοιχείο έχει το μέγεθος που είναι - ένας συνηθισμένος πονοκέφαλος CSS!
::before και ::after
Άλλο ένα που απατώ λίγο. Ναί, ::before και ::after είναι δύο μεμονωμένα ψευδοστοιχεία, αλλά και πάλι, δεν μπορώ να φανταστώ να μάθω για το ένα χωρίς το άλλο. Είναι δύο φερ!
Θυμάμαι πόσο εντυπωσιακό ήταν για μένα που έμαθα ότι υπήρχαν και μπορούν να χρησιμοποιηθούν για να δημιουργήσουν τα πάντα δροσερά εφέ διεπαφής χρήστη για να ολοκληρωθεί εικονογραφήσεις single-div. Ανοίγει νέες δυνατότητες και παρέχει μια πρώτη ματιά στο πόσο ισχυρό είναι πραγματικά το CSS.
@media
Ουφ, βρίσκομαι ήδη στο πέμπτο και τελευταίο μου στοιχείο στη λίστα και νιώθω ότι υπάρχουν ακόμα τόσα πολλά CSS που ανήκουν εδώ. Αλλά αν πρέπει να διαλέξω κάτι τελευταίο, θα ήταν ερωτήματα πολυμέσων. Γιατί; Επειδή είναι ένα πρωταρχικό συστατικό για τη δημιουργία ρευστών, ευέλικτων διατάξεων και διαφορετικών πλαισίων προβολής. Ερωτήματα κοντέινερ μπορεί να καταλήξει να ρίξει αυτό από τη λίστα μου καθώς ωριμάζει, αλλά προς το παρόν, @media είναι ένα εξαιρετικό primer για ανταπόκριση σχεδίασης.
Πέρα από αυτό, @media είναι ένα ωραίο πρώτο βήμα στις ιδιότητες υπό όρους του CSS. Είτε γράφουμε ένα ερώτημα με βάση τον τύπο της συσκευής που χρησιμοποιείται (π.χ. screen or print) ή όταν η θύρα προβολής του προγράμματος περιήγησης πληροί ορισμένα κριτήρια (π.χ. width >= 768px), Η @media η σύνταξη είναι απίστευτα χρήσιμη για τη δημιουργία διατάξεων που είναι βελτιστοποιημένες για διαφορετικές συνθήκες.
Α, και δεν έχουμε καν αγγίξει το πώς @media σχετίζεται με την προσβασιμότητα, χάρη στην ικανότητά του να εφαρμόστε στυλ με βάση τις προτιμήσεις ενός χρήστη (π.χ, prefers-reduced-motion). Έτσι, εκτός από τη δημιουργία διατάξεων υπό όρους, τα ερωτήματα πολυμέσων είναι ένα ωραίο επόμενο βήμα προς την κατανόηση του σχεδιασμού χωρίς αποκλεισμούς.
Τιμητικές αναφορές
Η απόσταξη του CSS σε μια λίστα με πέντε απαραίτητες ιδιότητες και επιλογείς είναι δύσκολη, ειδικά τώρα που το CSS είναι πιο ισχυρό σήμερα από ό,τι ήταν, ας πούμε, πριν από πέντε χρόνια. Υπάρχουν πολλά άλλα στοιχεία που ήθελα πραγματικά να συμπεριλάβω, όπως (χωρίς ιδιαίτερη σειρά):
calc()has()colorfontoverflowposition(ειδικά αυτό)z-index
Αλλά επιμένω στις επιλογές μου. Η εκμάθηση CSS είναι πιο σημαντική από την απομνημόνευση μιας λίστας ιδιοτήτων. Είναι ένα ταξίδι και νομίζω ότι τα πέντε που επέλεξα χαράζουν ένα ωραίο μικρό μονοπάτι μάθησης που θέτει τη βάση για τη σύνταξη καλών κανόνων στυλ και τα επόμενα βήματα για βαθύτερη κατάδυση στο CSS.
Εντάξει, πες μου το δικό σου!
Διαφωνείτε με τη λίστα μου; Θα έπρεπε! Βάζω στοίχημα ότι έχετε κάποιες έξυπνες απόψεις και θέλω να δω πώς θα είχατε ολοκληρώσει μια λίστα με τα Top 5.
