Normalize.css είναι μια εναλλακτική λύση στην επαναφορά CSS. Παρέχει υψηλό βαθμό συνέπειας μεταξύ των προγραμμάτων περιήγησης στο προεπιλεγμένο στυλ στοιχείου HTML. Normalize.css είναι μια σύγχρονη, premium εναλλακτική λύση για την HTML5 (http://necolas.github.io/normalize.css/）
Τόσο το normalize.css όσο και το reset.css είναι φύλλα στυλ για την επαναφορά των καρτελών του προγράμματος περιήγησης
Ο σκοπός της δημιουργίας normalize.css είναι ο εξής:
Προστατέψτε τα χρήσιμα προεπιλεγμένα στυλ του προγράμματος περιήγησης αντί να τα αφαιρέσετε εντελώς
Γενικευμένα στυλ: Παρέχεται για τα περισσότερα στοιχεία HTML
Διορθώστε τα σφάλματα του ίδιου του προγράμματος περιήγησης και διασφαλίστε τη συνέπεια μεταξύ των προγραμμάτων περιήγησης
Βελτιστοποιήστε τη χρηστικότητα CSS: Χρησιμοποιήστε μερικές συμβουλές
Εξηγήστε τον κώδικα: χρησιμοποιήστε σχόλια και λεπτομερή τεκμηρίωση
Normalize.css υποστηρίζει ένα ευρύ φάσμα προγραμμάτων περιήγησης, συμπεριλαμβανομένων των προγραμμάτων περιήγησης για κινητά, και γενικεύει στοιχεία HTML5, τυπογραφία, λίστες, ενσωματωμένο περιεχόμενο, φόρμες και πίνακες. Αν και αυτό το έργο βασίζεται στη γενίκευση, χρησιμοποιήσαμε πιο πρακτικές προεπιλογές όπου χρειάζεται.
Κανονικοποίηση vs Επαναφορά
1. Normalize.css Προστατευμένες πολύτιμες προεπιλογές
Η επαναφορά αναγκάζει τα στοιχεία να έχουν το ίδιο οπτικό αποτέλεσμα επιβάλλοντας ένα προεπιλεγμένο στυλ σε όλα σχεδόν τα στοιχεία. Αντίθετα, Normalize.css διατηρεί πολλά από τα προεπιλεγμένα στυλ προγράμματος περιήγησης. Αυτό σημαίνει ότι δεν χρειάζεται πλέον να αλλάξετε το στυλ όλων των κοινών στοιχείων τυπογραφίας. Όταν ένα στοιχείο έχει διαφορετικές προεπιλογές σε διαφορετικά προγράμματα περιήγησης, Normalize.css προσπαθήσετε να διατηρήσετε αυτά τα στυλ συνεπή και όσο το δυνατόν πιο συνεπή με τα σύγχρονα πρότυπα.
2. Normalize.css Διορθώθηκε ένα σφάλμα στο πρόγραμμα περιήγησης
Διορθώνει κοινά σφάλματα σε προγράμματα περιήγησης για υπολογιστές και κινητά. Αυτό είναι συχνά πέρα από αυτό που μπορεί να κάνει το Reset. Από αυτή την άποψη, τα ζητήματα που Normalize.css διορθωθούν περιλαμβάνουν τις ρυθμίσεις εμφάνισης των στοιχείων HTML5, προβλήματα μεγέθους γραμματοσειράς με προδιαμορφωμένο κείμενο, υπερχείλιση SVG στον IE9 και πολλά σφάλματα που σχετίζονται με τη φόρμα που εμφανίζονται σε διάφορα προγράμματα περιήγησης και λειτουργικά συστήματα.
3. Normalize.css Δεν θα κάνει τα εργαλεία εντοπισμού σφαλμάτων ακατάστατα
Μία από τις πιο ενοχλητικές πτυχές της χρήσης του Reset είναι η μεγάλη αλυσίδα κληρονομικότητας στο εργαλείο εντοπισμού σφαλμάτων του προγράμματος περιήγησης, όπως φαίνεται στην παρακάτω εικόνα. Δεν θα υπάρξει τέτοιο πρόβλημα στην Normalize.css, επειδή είμαστε πολύ προσεκτικοί με τη χρήση πολλαπλών επιλογέων στις οδηγίες μας και θα διαμορφώσουμε μόνο σκόπιμα το στοιχείο-στόχο.
4. Normalize.css είναι αρθρωτό
Το έργο έχει χωριστεί σε σχετικά αλλά ξεχωριστά μέρη, γεγονός που καθιστά εύκολο και σαφές ποια στοιχεία έχουν οριστεί σε συγκεκριμένες τιμές. Αυτό σας επιτρέπει να αφαιρέσετε επιλεκτικά μέρη που δεν θα χρησιμοποιήσετε ποτέ (όπως γενίκευση φορμών).
5. Normalize.css Διαθέτει λεπτομερή τεκμηρίωση
Normalize.css κώδικας βασίζεται σε λεπτομερή και ολοκληρωμένη έρευνα και δοκιμή μεταξύ προγραμμάτων περιήγησης. Αυτό το αρχείο έχει λεπτομερείς περιγραφές κώδικα και περαιτέρω οδηγίες στο Github Wiki. Αυτό σημαίνει ότι μπορείτε να μάθετε τι ακριβώς κάνει κάθε γραμμή κώδικα, γιατί την γράψατε, τις διαφορές μεταξύ των προγραμμάτων περιήγησης και μπορείτε να δοκιμάσετε τη δική σας πιο εύκολα.
Πώς να χρησιμοποιήσετε normalize.css
Πρώτα, εγκαταστήστε ή κατεβάστε Normalize.css από το Github και, στη συνέχεια, υπάρχουν δύο κύριοι τρόποι χρήσης του.
Στρατηγική 1: Χρησιμοποιήστε το normalize.css ως βάση CSS για τα δικά σας έργα, προσαρμόζοντας τις τιμές στυλ για να ταιριάζουν στις ανάγκες του σχεδιαστή.
Στρατηγική 2: Εισαγάγετε normalize.css πηγαίο κώδικα και χτίστε πάνω του, παρακάμπτοντας τις προεπιλογές με το δικό σας CSS όταν είναι απαραίτητο.
Λήψη αρχείου CSS:https://necolas.github.io/normalize.css/8.0.0/normalize.css
|
Δημοσιεύτηκε στις 27/7/2018 2:49:36 μ.μ.
|
|
|
|
