Χρησιμοποιώντας Normalize.css για ομοιογενή ανάπτυξη

Η συμβατότητα του προγράμματος περιήγησης είναι ένα μεγάλο μέρος της προσβασιμότητας στον ιστό. Οι προγραμματιστές πρέπει να εξετάσουν το διακύμανση του κοινού τους και των εκδόσεων του προγράμματος περιήγησης που απαιτούν υποστήριξη. Αν και οι επαναλήψεις CSS είναι μια επιλογή, οι περισσότεροι devs προτιμούν το Normalize.css για την απλότητα και τη διασταυρούμενη συμβατότητα σε όλα τα σύγχρονα προγράμματα περιήγησης ιστού.

Σε αυτή τη θέση θα καλύψω τα βασικά του Normalize και το πώς συγκρίνεται με τις γενικές επαναλήψεις CSS. Αυτό δεν είναι μια περίπλοκη βιβλιοθήκη και δεν πρέπει να διαρκέσει περισσότερο από δύο ώρες για να καταλάβει. Αλλά το κλειδί για την Normalize είναι η μάθηση πως να το εφαρμόσουν σωστά και με σύνεση.

Το πρόγραμμα περιήγησης επανεκκινεί εναντίον κανονικοποίησης

Για χρόνια χρησιμοποίησα μια εξατομικευμένη έκδοση των επαναλήψεων CSS του Eric Meyer. Αυτά ήταν αρκετά για τα περισσότερα από τα έργα μου και δεν προκάλεσαν σημαντικά ζητήματα. Ωστόσο, το Normalize άλλαξε την άποψή μου για τις επαναρυθμίσεις, επειδή λειτουργεί διαφορετικά από μια επαναφορά CSS. Είναι σημαντικό να καταλαβαίνετε τις διαφορές.

Σκεφτείτε Normalize ως α ένδυμα που εφαρμόζεται με συνέπεια σε όλα τα προγράμματα περιήγησης, και σκεφτείτε ένα Επαναφορά του CSS ως θερμοπυρηνική εκρηκτική σε όλα τα προγράμματα περιήγησης.

Κανονικοποιήστε τα στυλ και μορφές επικεφαλίδες, παραγράφους, blockquotes και κοινά στοιχεία έτσι εμφανίζονται όμοια (ή αρκετά κοντά) σε όλα τα υποστηριζόμενα προγράμματα περιήγησης. Επαναφορά του CSS σκουπίστε πλήρως την πλάκα καθαρής έτσι υπάρχουν δεν υπάρχουν προεπιλογές για οτιδήποτε.

Με μια επαναφορά του CSS οι επικεφαλίδες σας μπορούν να φαίνονται ίδιες με τις παραγράφους σας. τα στοιχεία δεν έχουν παραγεμίσματα, περιθώρια ή διαστήματα οποιουδήποτε είδους. Με επαναφορά CSS πρέπει να δώσετε νέο κωδικό για να βελτιώσετε το στυλ. Με το Normalize, παίρνεις ένα σχεδιασμένο στυλ που μπορούν να χτιστούν.

Έτσι είναι ένα από αυτά καλύτερα από το άλλο; Είναι ένα θεματικά συζητημένο θέμα, αν και ένα σημείο επιχειρημάτων αναφέρει ότι Normalize λειτουργεί καλύτερα για συμβατότητα και παράγει μικρότερα μεγέθη αρχείων.

“Θα έπρεπε να υποστηρίξω ότι η εξομάλυνση είναι καλύτερη από την επαναφορά. Αυτό θα έχει ως αποτέλεσμα τη μεταβίβαση λιγότερου CSS στο καλώδιο, την καλύτερη χρήση των προεπιλογών του UA και την καλύτερη κατανόηση του τρόπου με τον οποίο τα στοιχεία είναι σήμαινε για εμφάνιση.”

Είτε ερωτευτείτε με το Normalize είτε προτιμάτε μια τυπική επαναφορά, είναι σημαντικό να καταλάβετε τουλάχιστον τις δύο πλευρές και να επιλέξετε ό, τι ταιριάζει καλύτερα. Πολύ λίγοι προγραμματιστές ξεκινούν την κωδικοποίηση από το μηδέν, οπότε η κανονικοποίηση ή η επαναφορά CSS είναι σχεδόν απαραίτητη για τη σύγχρονη ανάπτυξη frontend.

Εάν θέλετε να δοκιμάσετε μια επαναφορά CSS εδώ είναι μερικές δημοφιλείς επιλογές:

• Επαναφορά του Eric Meyer
• Επαναφορά HTML5
• Επαναφορά HTML5Doctor

Κανονικοποίηση διαμόρφωσης

Ο κανονικοποιός Nicolas Gallagher έγραψε μια εισαγωγική θέση που οδήγησε σε αυτή τη δήλωση:

“Το Normalize.css είναι ένα μικρό αρχείο CSS που παρέχει καλύτερη συνοχή μεταξύ των προγραμμάτων περιήγησης στο προεπιλεγμένο στυλ των στοιχείων HTML. Είναι μια σύγχρονη, έτοιμη προς HTML5, εναλλακτική λύση στην παραδοσιακή επαναφορά του CSS.”

Με τα χρόνια αυτό έχει εξελιχθεί σε μια αξιόπιστη βιβλιοθήκη που χρησιμοποιείται από προγραμματιστές παγκοσμίως. Το Normalize χρησιμοποιήθηκε ακόμη και σε κάποιο βαθμό στο Bootstrap και το Pure CSS.

Υπάρχουν δύο τρόποι να χρησιμοποιήσετε το Normalize σε ένα έργο: επεξεργαστείτε την πηγή για να προσαρμόσετε το δικό σας φύλλο στυλ Normalize ή χρησιμοποιήστε το ως βάση και προσθέστε στυλ επάνω.

Ο πρώτος είναι μια στρατηγική επιλογής και επιλογής όπου περνάτε από το αρχείο Normalize.css και διαγράφετε ό, τι δεν χρειάζεται να δημιουργήσετε το δικό σας προσαρμοσμένο φύλλο στυλ. Αυτό είναι το καλύτερο σε βάση ανά σχέδιο για να διατηρήσετε το μέγεθος των αρχείων χαμηλό.

Εναλλακτικά, ορισμένοι προγραμματιστές συμπεριλαμβάνουν ολόκληρο το αρχείο Normalize.css και δημιουργούν το δικό τους φύλλο στυλ πάνω από αυτό. Το πλήρες φύλλο τυποποίησης Normalize καλύπτει 420+ γραμμές κώδικα που ισοδυναμεί με ~ 6,8KB ασυμπίεστο.

Καμία από τις μεθόδους δεν είναι καλύτερη από την άλλη και αξίζει να ακολουθήσετε ό, τι καλύτερο λειτουργεί για κάθε έργο ή την προτιμώμενη ροή εργασίας σας.

Για να ξεκινήσετε είτε να κατεβάσετε ένα αντίγραφο του Normalize από το GitHub είτε να το φιλοξενήσετε από ένα εξωτερικό CDN. Μπορείτε επίσης να τραβήξετε την πιο πρόσφατη έκδοση του Normalize απευθείας από το NPM, όπως έτσι:

npm εγκατάσταση --save normalize.css 

Αν δεν θέλετε να κάνετε λήψη αρχείων, μπορείτε ακόμη να δημιουργήσετε ένα νέο Project CodePen το οποίο μπορεί να προσαρμόσει το Normalize με το πάτημα ενός κουμπιού.

Επειδή το Normalize είναι αρθρωτό, μπορείτε να καταργήσετε προσωρινά τις ενότητες ή ακόμα και να δημιουργήσετε τη δική σας προσαρμοσμένη έκδοση Normalize. Στη συνέχεια, μπορείτε να ξεκινήσετε κάθε έργο με επιλεγμένα τμήματα όπως τα στοιχεία εμφάνισης HTML5, ενώ αφαιρείτε τα στυλ για ενσωματωμένο περιεχόμενο.

Κάθε κανόνας Normalize έχει ένα αντίστοιχο σχόλιο CSS που εξηγεί τι κάνει και ποια θέματα / σφάλματα που λύνει. Ορισμένα είναι προφανή σαν ρύθμιση εμφάνιση: μπλοκ σε νεότερα στοιχεία HTML5.

Άλλοι είναι λιγότερο προφανείς όπως ο κώδικας SVG που κρύβει υπερχείλιση στον Internet Explorer:

svg: όχι (: root) υπερχείλιση: κρυφή;  

Συστήνω ιδιαίτερα την αποτύπωση του φύλλου στυλ για να δείτε ακριβώς πώς λειτουργεί και να μάθετε αν Normalize θα ήταν σωστό για το έργο σας.

Normalize.css Στο Web Design

Η νεότερη έκδοση του Normalize v4.0 προσφέρει εκτεταμένη υποστήριξη προγράμματος περιήγησης.

• Chrome (τα τελευταία δύο)
• Edge (τα τελευταία δύο)
• Firefox (τα τελευταία δύο)
• Firefox ESR
• Internet Explorer 8+
• Opera (τελευταία δύο)
• Safari 6+

Από αυτό που μπορώ να πω, το Normalize μπορεί να υποστηρίζει παλαιότερες εκδόσεις προγραμμάτων περιήγησης με συνεχείς ενημερώσεις όπως ο Firefox. Αλλά το “επίσημος” η υποστήριξη περιλαμβάνει μόνο τις δύο πιο πρόσφατες εκδόσεις του Chrome / Edge / FF / Opera.

Επίσης, το IE6 + και το Safari 4+ υποστηρίζονται με το Normalize v1, αλλά αυτή η έκδοση δεν είναι πλέον ενημερωμένη.

Είναι σημαντικό να ελέγχετε τις εκδόσεις του προγράμματος περιήγησης με ένα εργαλείο όπως το Google Analytics. Αυτό θα σας δώσει μια καλύτερη ιδέα εάν το Normalize μπορεί να είναι ένα χρήσιμο εργαλείο για τη σύγχρονη εργασία σχεδιασμού ιστοσελίδων.

Περαιτέρω Πόροι

Δεν υπάρχει πολλά για να διδάξετε συγκεκριμένα για το Normalize, έτσι ώστε το μεγαλύτερο μέρος της μάθησης να συμβαίνει κάνοντας.

Και ειλικρινά δεν υπάρχει τίποτα που να εξηγεί ότι δεν μπορείτε να πάρετε ανάγνωση μέσω του φύλλου στυλ και αντιγραφή / αλλοίωση κώδικα, όπως απαιτείται. Αλλά αν ψάχνετε για άλλες σχετικές πληροφορίες έχω προσθέσει μερικούς συνδέσμους παρακάτω.

Σχετικά Άρθρα

• Νικόλας Γκάλαγκερ: Σχετικά με το Normalize.css
• Εισαγωγή στο Boilerplate HTML5
• Normalize.css εναντίον Reset.css: Ποιος πρέπει να χρησιμοποιηθεί?

Εισαγωγή βίντεο

• Χρησιμοποιώντας το Normalize CSS
• Επαναφορά και Κανονικοποίηση από Envato
• Nicolas Gallagher - Σκέψη πέρα ​​από το Scalable CSS