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

Έχω δει πολλά διαφορετικά Επαναφορά CSS, είναι όλοι περίπου το ίδιο. Μπορείτε να χρησιμοποιήσετε αυτό:

Html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, αρκτικόλεξο, διεύθυνση, μεγάλο, παραπομπή, κωδικός,
del, dfn, em, γραμματοσειρά, img, ins, kbd, q, s, samp,
μικρό, απεργία, ισχυρό, υπο, sup, tt, var,
b, u, i, κέντρο,
dl, dt, dd, ol, ul, li,
σύνολο πεδίων, φόρμα, ετικέτα, υπόμνημα,
τραπέζι, λεζάντα, tbody, tfoot, thead, tr, th, td (
φόντο: διαφανές;
περίγραμμα: 0;
μέγεθος γραμματοσειράς: 100%;
περιθώριο: 0;
περίγραμμα: 0;
padding: 0;
κατακόρυφη στοίχιση: γραμμή βάσης;
}
σώμα (
Ύψος γραμμής: 1;
}
ol, ul (
στιλ λίστας: κανένας;
}
μπλοκ, q(
εισαγωγικά: κανένας;
}
blockquote:before, blockquote:after,
q:πριν, q:μετά (
περιεχόμενο: "";
περιεχόμενο: κανένα;
}
:Συγκεντρώνω (
περίγραμμα: 0;
}
τραπέζι (
σύνορα-κατάρρευση: κατάρρευση;
διάστιχο: 0;
}

Νομίζω ότι οι λόγοι για τη χρήση του είναι ήδη σαφείς, αλλά γιατί, για παράδειγμα, δεν το χρησιμοποιώ, όπως πολλοί άλλοι σχεδιαστές διάταξης, αξίζει να μιλήσουμε. Πρώτον, αυτό επιπλέον αρχείο, Κατα δευτερον, επιπλέον χρόνοςγια επεξεργασία, αλλά το πιο σημαντικό, μου αρέσουν οι προεπιλεγμένες ιδιότητες. Για παράδειγμα, τα ίδια πεδία στον πίνακα. Εξάλλου, όλες οι προεπιλεγμένες ιδιότητες έγιναν για κάποιο λόγο, αλλά ως η βέλτιστη επιλογή για την εμφάνιση διαφόρων στοιχείων. Σας διαβεβαιώνω, έχοντας επαναφέρει υλικό παραγεμίσματοςγια κελιά πίνακα, πιθανότατα θα το επιστρέψετε στο κύριο αρχείο. Και απέχει πολύ από το γεγονός ότι η τιμή θα διαφέρει από αυτή που ήταν από προεπιλογή. Αποδεικνύεται λοιπόν ότι πρώτα το αφαιρούμε και μετά το επιστρέφουμε. Και μαζί με τα πρώτα μειονεκτήματα (ένα επιπλέον αρχείο και επιπλέον κώδικας), πολλοί σχεδιαστές διάταξης δεν χρησιμοποιούν Επαναφορά CSS.

ΤΕΛΟΣ παντων, Η χρήση επαναφοράς στυλ δεν είναι κακό, ώστε να μπορείτε να το χρησιμοποιήσετε με ασφάλεια εάν πιστεύετε ότι η απλοποίηση της προσαρμογής του ιστότοπου σε διαφορετικά προγράμματα περιήγησης θα απλοποιήσει πραγματικά τη διάταξή σας στο σύνολό της.

• Μετάφραση

Αυτό το άρθρο είναι το πρώτο σε μια σειρά με θέμα την εξημέρωση του CSS. Σήμερα θα δούμε την τεχνολογία Επαναφορά CSS.

Γιατί είναι απαραίτητο αυτό;

Κάθε πρόγραμμα περιήγησης ορίζει τις δικές του προεπιλεγμένες τιμές στυλ για διάφορα στοιχεία HTML. Χρησιμοποιώντας το CSS Reset μπορούμε να ισοπεδώσουμε αυτή τη διαφορά για να διασφαλίσουμε τη συμβατότητα των στυλ μεταξύ των προγραμμάτων περιήγησης.

Για παράδειγμα, χρησιμοποιείτε το στοιχείο έναστο έγγραφό σας. Τα περισσότερα προγράμματα περιήγησης, όπως ο Internet Explorer και ο Firefox, προσθέτουν έναν σύνδεσμο Μπλε χρώμαΚαι υπογραμμίζοντας. Ωστόσο, φανταστείτε ότι σε πέντε χρόνια από τώρα κάποιος αποφασίζει να δημιουργήσει ένα νέο πρόγραμμα περιήγησης (ας το ονομάσουμε UltraBrowser). Οι προγραμματιστές του προγράμματος περιήγησης δεν άρεσε το μπλε χρώμα και ενοχλήθηκαν από την υπογράμμιση, έτσι αποφάσισαν να επισημάνουν συνδέσμους στα κοκκιναΚαι τολμηρός. Βασίζεται σε αυτό ότι εάν ορίσετε την τιμή βασικού στυλ για ένα στοιχείο ένα, τότε είναι εγγυημένο ότι θα είναι όπως θέλετε και όχι όπως προτιμούν να το εμφανίζουν οι προγραμματιστές του UltraBrowser.

Αλλά τώρα δεν έχουμε καθόλου εσοχές, μεταξύ των επιμέρους παραγράφων! Τι να κάνω? Μην λέτε ψέματα και μη φοβάστε: κάτω από την επαναφορά μας θα περιγράψουμε τον κανόνα που χρειαζόμαστε. Αυτό μπορεί να γίνει με διάφορους τρόπους: καθορίστε την εσοχή στο κάτω ή πάνω μέρος της παραγράφου, καθορίστε την σε ποσοστό, pixel ή em.

Το πιο σημαντικό είναι ότι το πρόγραμμα περιήγησης παίζει πλέον με τους δικούς μας κανόνες και όχι εμείς με τους κανόνες του. Αποφάσισα να το κάνω με αυτόν τον τρόπο:

* ( περιθώριο: 0, συμπλήρωση: 0; ) p ( περιθώριο: 5 εικονοστοιχεία 0 10 εικονοστοιχεία 0; )

Ως αποτέλεσμα, πήραμε αυτό που φαίνεται στο τρίτο παράδειγμα.

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

Για να σας βοηθήσουμε να κάνετε τη σωστή επιλογή, ακολουθούν μερικοί ακόμη σύνδεσμοι:

1. Less is more - η επιλογή μου Reset CSS (Ed Elliott).

2. Η επαναφορά του CSS είναι το πρώτο πράγμα που πρέπει να δει το πρόγραμμα περιήγησης

Η επαναφορά στυλ μετά τον ορισμό των δικών σας στυλ για στοιχεία είναι λάθος προσέγγιση. Σε αυτήν την περίπτωση, δεν πρέπει να περιμένετε τίποτα καλό από την οθόνη του προγράμματος περιήγησης. Να θυμάστε ότι πρέπει πάντα να συμπεριλαμβάνετε πρώτα το CSS Reset και μετά όλα τα άλλα στυλ.

Ναι, καταλαβαίνω, ακούστηκε αστείο, αλλά αυτό είναι ένα από τα κύρια λάθη των προγραμματιστών, μικρών και μεγάλων. Πολλοί άνθρωποι απλά το ξεχνάνε αυτό.

Κάποιοι μπορεί να κάνουν μια λογική ερώτηση: γιατί συμβαίνει αυτό; Η απάντηση είναι απλή: κανόνες που είναι γραμμένοι χαμηλότερα στο κείμενο του αρχείου CSS (και ακόμη χαμηλότερα στη σειρά τους στο έγγραφο) αντικαθιστούν τους κανόνες που δηλώθηκαν νωρίτερα.

Ας μην ξεφεύγουμε πολύ από το θέμα και ας συνεχίσουμε. Ας εφαρμόσουμε τα στυλ του Eric Meyer στο παράδειγμά μας, αλλά μετάπεριγραφές των ιδιοτήτων μας, όπως φαίνεται στο παράδειγμα 4. Οι μαθηματικοί θα έλεγαν το εξής: «Αυτό έπρεπε να αποδείξουμε».

3. Χρησιμοποιήστε ένα ξεχωριστό έγγραφο CSS για επαναφορά CSS

Πρέπει (όχι, σε καμία περίπτωση δεν αναγκάστηκα) να αναφέρω αυτή τη συμβουλή. Η χρήση ξεχωριστού αρχείου για την επαναφορά CSS είναι μια κοινή πρακτική που υποστηρίζεται από μεγάλο αριθμό προγραμματιστών.

Στην πραγματικότητα παίρνω τη θέση της δημιουργίας ένα μεγάλο αρχείο CSSλόγω της υψηλότερης απόδοσης αυτής της προσέγγισης. Αλλά σε αυτό το θέμα τείνω να συμφωνήσω με την πλειοψηφία: Το CSS Reset θα πρέπει να τοποθετηθεί σε ξεχωριστό αρχείο (συνήθως ονομάζεται reset.css). Σε αυτήν την περίπτωση, μπορείτε να το χρησιμοποιήσετε σε διαφορετικά έργα χωρίς να κάνετε καμία προσπάθεια να το διαχωρίσετε από άλλους κανόνες CSS.

4. Προσπαθήστε να αποφύγετε τη χρήση επιλογέα γενικής χρήσης

Αν και αυτή η ιδέα λειτουργεί, η χρήση της συχνά δεν είναι επιθυμητή λόγω ασυμβατότητας με ορισμένα προγράμματα περιήγησης (για παράδειγμα, αυτός ο επιλογέας δεν επεξεργάζεται σωστά στον Internet Explorer). Θα πρέπει να χρησιμοποιείτε αυτήν την τεχνική μόνο για απλές, μικρές, στατικές και προβλέψιμες σελίδες (αν έπρεπε να το κάνετε αυτό).

Αυτή η συμβουλή είναι ιδιαίτερα σημαντική όταν αναπτύσσετε λύσεις όπως θέματα CMS. Δεν μπορείτε να προβλέψετε εκ των προτέρων πώς θα χρησιμοποιηθεί ή πώς θα τροποποιηθεί. Είναι καλύτερο να περιγράψουμε θεμελιώδεις κανόνες CSS για όλα τα στοιχεία παρά να χρησιμοποιήσουμε τον απρόβλεπτο (αν και μικρότερο) μηχανισμό των καθολικών επιλογέων για το σκοπό αυτό.

5. Αποφύγετε περιττές περιγραφές ιδιοτήτων κατά τη χρήση της επαναφοράς CSS

Ένας άλλος λόγος που δεν μου αρέσει ένα ξεχωριστό αρχείο για την Επαναφορά CSS είναι η πιθανή πλεονασμός των επακόλουθων δηλώσεων ιδιοτήτων CSS. Η επανάληψη μεμονωμένων στυλ σας μεταξύ ολόκληρου του συνόλου αρχείων CSS είναι κακή συμπεριφορά και πρέπει να αποφεύγεται. Φυσικά, μερικές φορές τεμπελιάζουμε να περάσουμε επίπονα από ένα σύνολο στυλ και να συνδυάσουμε μερικά από αυτά, αλλά θα πρέπει τουλάχιστον να προσπαθήσουμε!

Ας επιστρέψουμε στο CSS Reset του Eric. Ορίζει προεπιλεγμένες τιμές για το ύψος γραμμής, το χρώμα και το φόντο του στοιχείου σώμαμε τον εξής τρόπο:

σώμα (ύψος γραμμής: 1; χρώμα: μαύρο; φόντο: λευκό; )

Ας πούμε ότι γνωρίζετε ήδη πώς θα μοιάζει το στοιχείο σώμα:

1. χρώμα φόντου: #cccccc;
2. χρώμα: #996633;
3. Θέλετε να επαναλάβετε μια συγκεκριμένη εικόνα φόντου οριζόντια.

Σε αυτήν την περίπτωση, δεν χρειάζεται να δημιουργήσετε νέο επιλογέα για να περιγράψετε τις ιδιότητές σας - μπορείτε απλώς να τις συμπεριλάβετε στην Επαναφορά CSS. Ας το κάνουμε:

σώμα (ύψος γραμμής: 1; χρώμα: #996633; φόντο:#ccc url(tiled-image.gif) repeat-x επάνω αριστερά; )

Μην φοβάστε να τροποποιήσετε το ίδιο το CSS Reset.Προσαρμόστε το στον εαυτό σας, κάντε το να λειτουργήσει για εσάς. Αλλάξτε, αναδιατάξτε, αφαιρέστε και προσθέστε όπως απαιτείται στη συγκεκριμένη περίπτωση.

Ο Eric Meyer είπε τα εξής σχετικά: "δεν είναι μια περίπτωση όπου όλοι πρέπει να χρησιμοποιούν το CSS Reset χωρίς αλλαγές."

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

Τώρα ας σκεφτούμε τι είναι αυτή η επαναφορά CSS, τι μπορεί να μας δώσει; Λοιπόν, φανταστείτε ότι έχετε απλώσει τις σελίδες του ιστότοπού σας και δεν έχετε αλλάξει τα περιθώρια παραγράφου που προσέφεραν από προεπιλογή τα προγράμματα περιήγησης, αφού το μέγεθός τους σας ταίριαζε αρκετά. Αλλά πείτε μου, σας παρακαλώ, γιατί αποφασίσατε ότι όλα τα προγράμματα περιήγησης στον κόσμο που ήδη υπάρχουν και θα εμφανίζονται θα δημιουργούν πεδία ίδιου μεγέθους; Επιπλέον, γιατί πιστεύετε ότι τα προγράμματα περιήγησης στα οποία δοκιμάσατε τη διάταξή σας δεν θα αλλάξουν το μέγεθος αυτών των πεδίων στις επόμενες εκδόσεις τους ή δεν θα τα καταργήσουν εντελώς; Νιώθεις πώς μυρίζει;

Έτσι, με την επαναφορά του CSS, οι σχεδιαστές διάταξης απλώς προστατεύονται από τέτοιες παρεξηγήσεις, δηλαδή επαναφέρουν πρώτα όλες τις «κρίσιμες» τιμές των ιδιοτήτων CSS για στοιχεία και στη συνέχεια, όπως χρειάζεται, τις προσθέτουν ξανά, αλλά με τα δικά τους μεγέθη. Με αυτόν τον τρόπο, μπορείτε να είστε σίγουροι ότι ο ιστότοπος θα έχει την ίδια εμφάνιση σε όλα τα προγράμματα περιήγησης. Μπορείτε, φυσικά, να μην επαναφέρετε τα στυλ, αλλά απλώς να ορίσετε τις απαραίτητες παραμέτρους στα στοιχεία καθώς προχωρά η διάταξη, αλλά υπάρχει ο κίνδυνος κάπου να χαθεί κάτι και σε μια συγκεκριμένη στιγμή όλα να "επιπλέουν".

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

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

Να προσδιορίζετε πάντα τα στυλ επαναφοράς CSS στην αρχή του κώδικα, διαφορετικά ορισμένες από τις επιλογές ενδέχεται να μην λειτουργούν λόγω προτεραιότητες στυλ, τα οποία ορίζονται από τα προγράμματα περιήγησης κατά την επεξεργασία του κώδικα HTML και CSS της σελίδας.

Επαναφορά CSS με Universal Selector

* ( font-family: inherit; /* όλα τα στοιχεία κληρονομούν τη γραμματοσειρά από τη μητρική τους */ font-style: inherit; /* inherit the style */ font-weight: inherit; /* inherit the boldness */ vertical-align : γραμμή βάσης; /* κάθετη στοίχιση στη γραμμή βάσης */ μέγεθος γραμματοσειράς: 100%; /* μέγεθος γραμματοσειράς 100% */ φόντο: διαφανές; /* το φόντο όλων των στοιχείων είναι διαφανές */ περίγραμμα: 0; /* αφαίρεση περιγραμμάτων * / περίγραμμα: 0; /* αφαίρεση περιγραμμάτων */ περιθώριο: 0; /* αφαίρεση περιθωρίων */ πλήρωση: 0; /* αφαίρεση συμπληρωμάτων */ )

Περιγραφή του παραδείγματος

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

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

Επαναφορά CSS από το Yahoo!

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre, form,setset,input,textarea,p,blockquote,th,td ( περιθώριο: 0; padding: 0; ) fieldset,img,abbr,ακρωνύμιο ( περίγραμμα: 0; ) address,caption,cite,code,dfn,em,strong,th,var ( στυλ γραμματοσειράς: κανονικό; βάρος γραμματοσειράς: κανονικό; ) πίνακας ( περίγραμμα-σύμπτυξη: σύμπτυξη; /* κοινά περιγράμματα για κελιά πίνακα */ διάστιχο: 0; /* επαναφορά της απόστασης μεταξύ των κελιών */ ) λεζάντα, th ( στοίχιση κειμένου: αριστερά; /* στοίχιση κειμένου προς τα αριστερά * / ) ol,ul ( στυλ λίστας: κανένα; /* αφαίρεση δεικτών λίστας */ ) h1,h2,h3,h4,h5,h6 (μέγεθος γραμματοσειράς: 100%; βάρος γραμματοσειράς: κανονικό; ) q:πριν, q :after ( περιεχόμενο: ""; /* αφαιρέστε τα εισαγωγικά από την ετικέτα Q */ )

Περιγραφή του παραδείγματος

Η εταιρεία Yahoo κάποτε ανέπτυξε τη δική της έκδοση επαναφοράς στυλ. Εδώ οι ιδιότητες συγκεκριμένων στοιχείων έχουν ήδη αλλάξει, γεγονός που επιτρέπει μεγαλύτερη ευελιξία στον έλεγχο της εμφάνισής τους. Για παράδειγμα, εδώ οι κουκκίδες έχουν αφαιρεθεί από λίστες και τα εισαγωγικά έχουν αφαιρεθεί από τις ετικέτες χρησιμοποιώντας την ιδιότητα CSS. Τα πλεονεκτήματα αυτής της προσέγγισης είναι προφανή, αλλά τα μειονεκτήματα περιλαμβάνουν πιο ογκώδη και μερικές φορές περιττό κώδικα. Αλλά κανείς δεν σας εμποδίζει να αλλάξετε οποιαδήποτε επαναφορά CSS για να ταιριάζει στις ανάγκες σας. Ας υποθέσουμε ότι μπορείτε να αφαιρέσετε μερικά που δεν χρειάζεστε επιλογείς ετικετώνή όχι απλώς αφαιρέστε τα εισαγωγικά, αλλά δώστε τους αμέσως την απαιτούμενη εμφάνιση.

Επαναφορά CSS από τον Eric Meyer

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p, blockquote,pre,a,abbr,ακρωνύμιο,διεύθυνση,μεγάλη,αναφορά,κωδικός,del,dfn, em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var, b,u,i,center,dl,dt,dd,ol,ul,li,σύνολο πεδίων, φόρμα,ετικέτα, υπόμνημα, πίνακας, λεζάντα,tbody,tfoot,thead,tr,th,td,άρθρο,εκτός,καμβάς, λεπτομέρειες,ενσωμάτωση,εικόνα, υπότιτλου,υποσέλιδο,κεφαλίδα,hgroup,μενού,nav, έξοδος,ruby, ενότητα, περίληψη, χρόνος, σήμα, ήχος, βίντεο ( περιθώριο: 0, συμπλήρωση: 0, περίγραμμα: 0, μέγεθος γραμματοσειράς: 100%, γραμματοσειρά: κληρονομιά, κατακόρυφη στοίχιση: γραμμή βάσης; ) άρθρο, εκτός, λεπτομέρειες, υπότιτλος, εικόνα, υποσέλιδο, κεφαλίδα, hgroup, μενού, πλοήγηση, ενότητα ( εμφάνιση: μπλοκ; /* μπλοκ στοιχείων (για παλαιότερα προγράμματα περιήγησης) */ ) σώμα (ύψος γραμμής: 1; /* διάστιχο κειμένου στη σελίδα */ ) ol ,ul ( στιλ λίστας: κανένας προσθήκη για καλό μέτρο */ ) blockquote,q ( εισαγωγικά: κανένα; /* άλλος τρόπος αφαίρεσης εισαγωγικών */ ) πίνακας ( border-collapse: collapse; διάστιχο: 0; )

Περιγραφή του παραδείγματος

Μια άλλη μέθοδος επαναφοράς του CSS προτάθηκε από τον Eric Meyer, γνωστό προγραμματιστή ιστού σε ορισμένους κύκλους. Εδώ έχει ήδη προσθέσει μια επαναφορά στυλ για ετικέτες από HTML 5, οι οποίες, παρεμπιπτόντως, τη στιγμή της συγγραφής αυτού του άρθρου εξακολουθούν να υποστηρίζονται ελάχιστα από τα σύγχρονα προγράμματα περιήγησης. Αλλά πρέπει πάντα να κοιτάς το μέλλον, σωστά;

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

Καθεμία έχει τους δικούς της προκαθορισμένους κανόνες για το σχεδιασμό ιστοσελίδων και στοιχείων σε αυτές (φύλλο στυλ παράγοντα χρήστη), τα οποία συνδέονται αυτόματα από προεπιλογή. Ωστόσο, κατά τη δημιουργία ενός νέου έργου, οι περισσότεροι σχεδιαστές διάταξης προσθέτουν ένα ειδικό αρχείο Reset CSS σε αυτό, το οποίο επαναφέρει πλήρως τα στυλ CSS και επιτρέπει στους προγραμματιστές να δημιουργούν από την αρχή. Θα εξηγήσω γιατί και πώς γίνονται όλα αυτά στο τρέχον άρθρο.

Αν κοιτάξετε την εικόνα προεπισκόπησης για την ανάρτηση, θα δείτε ότι μια κανονική γραμμή εμφανίζεται με εντελώς διαφορετικούς τρόπους στο Safari, στο Chrome και στον Firefox. Ναι, μερικές φορές οι κανόνες είναι οι ίδιοι, για παράδειγμα, όλοι κρύβουν την ετικέτα κεφαλής μέσω της επιλογής εμφάνισης: κανένας!, αλλά σε πολλές περιπτώσεις υπάρχουν σοβαρές διαφορές στον τρόπο απόδοσης των αντικειμένων στη σελίδα. Υποψιάζομαι ότι σε ορισμένους από τους πελάτες σας μπορεί να μην αρέσει όταν η τελική διάταξη φαίνεται διαφορετική από τη διάταξη.

Επομένως, εάν είστε αρχάριος προγραμματιστής ιστού, η δημοσίευση θα είναι σίγουρα χρήσιμη για τη συνολική σας ανάπτυξη. Είναι μια μετάφραση αυτού του σημειώματος με μια επισκόπηση της κατάστασης στον τομέα της επαναφοράς CSS το 2018. Είμαι σίγουρος ότι το 2019 και αργότερα όλα αυτά θα είναι ακόμα επίκαιρα, γιατί... Αυτό το θέμα είναι ήδη πάνω από 10 χρόνια (από την κυκλοφορία της πρώτης τέτοιας λύσης).

Γιατί χρειάζεται να επαναφέρετε τις ρυθμίσεις CSS;

Όπως καταλάβατε ήδη από την εισαγωγή, σας επιτρέπουν να εξαλείψετε τις διαφορές μεταξύ των βασικών στυλ των προγραμμάτων περιήγησης ιστού και να τα φέρετε σε μια τυποποιημένη εμφάνιση. Χρησιμοποιούνται πάντα στην αρχή πριν από άλλες εξελίξεις των χρηστών. Το άρθρο του Eric Meyer για το Reset CSS πριν από δέκα χρόνια αναφέρει τον κύριο λόγο αυτής της προσέγγισης, η οποία εξακολουθεί να είναι σχετική μετά από χρόνια:

Το πρόβλημα είναι ότι διαφορετικά προγράμματα περιήγησης έχουν τις δικές τους προεπιλεγμένες ρυθμίσεις και δεν είναι όλες ίδιες. Πιστεύουμε ότι ο κώδικάς μας αλλάζει την αρχική σχεδίαση της σελίδας, αλλά αυτό δεν είναι απολύτως αληθές και με τη βοήθεια των αρχείων επαναφοράς μπορούμε να κάνουμε αυτή την τυπική προβολή εγγράφου πιο ομοιόμορφη για όλα τα προγράμματα. Επομένως, θα πρέπει να αφιερώσετε λιγότερο χρόνο παλεύοντας με τις βασικές προεπιλεγμένες ρυθμίσεις του Firefox, του Chrome κ.λπ.

Αλλά τώρα η κατάσταση στη διάταξη είναι λιγότερο αμφιλεγόμενη;

Ναι, πράγματι, στις μέρες μας πολλές παράμετροι στον παράγοντα χρήστη έχουν γίνει πιο παρόμοιες. Σχεδόν παντού, η επικεφαλίδα H1 έχει μέγεθος γραμματοσειράς 2em και οριζόντιο περιθώριο 0,67em. Ωστόσο, αυτές είναι όλες σχετικά νέες αλλαγές και, τουλάχιστον, πρέπει να εξετάσετε το ενδεχόμενο υποστήριξης για παλαιότερες εκδόσεις προγραμμάτων όπου δεν υπάρχει τέτοια συνέπεια.

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

Εφαρμόζουμε όμως τα δικά μας στυλ, παρακάμπτοντας τα βασικά;

Αυτή είναι μια από τις κύριες θέσεις των αντιπάλων αυτής της προσέγγισης - στο τέλος, ούτως ή άλλως, ορισμένες παράμετροι αντικαθίστανται από το δικό τους style.css, οπότε γιατί να προσθέσετε ένα άλλο επιπλέον αρχείο και να μειώσετε το ; Παρά το γεγονός ότι αυτή η φράση έχει νόημα, η χρήση επαναφοράς δικαιολογείται από δύο σημεία:

• Πρώτον, σας βοηθά να γράψετε καθαρότερο κώδικα. Μπορούμε να το χωρίσουμε σε διάφορα μέρη: ξεχωριστά για το σχεδιασμό του ίδιου του έργου web και ένα σύνολο κανόνων που εστιάζονται στις ιδιαιτερότητες συγκεκριμένων προγραμμάτων περιήγησης. Αυτό θα σας επιτρέψει να μην γεμίσετε το κύριο αρχείο CSS με κάθε είδους εισβολές IE κ.λπ.
• Δεύτερον, όλες οι επαναφορές ζυγίζουν πολύ λίγο και η φόρτωσή τους δεν απαιτεί πολύ χρόνο.

Τύποι επαναφοράς CSS (μπορείτε να κάνετε λήψη από τους συνδέσμους στο άρθρο)

Από το μακρινό 2004, όταν εμφανίστηκαν οι πρώτες τέτοιες εξελίξεις, υπάρχουν πλέον πολλές μέθοδοι που διαφέρουν ως προς την πολυπλοκότητα και την ειδικότητα. Ουσιαστικά, υπάρχουν 3 στόχοι που προσπαθεί να λύσει η επαναφορά στυλ CSS:

1. Διόρθωση σφαλμάτων στο φύλλο στυλ παράγοντα χρήστη.
2. Αφαίρεση μη τυποποιημένου πρωτότυπου σχεδίου σε προγράμματα περιήγησης στο Διαδίκτυο.
3. Δημιουργία μιας γενικής συμβατής βάσης στυλ.

Υπάρχουν επιλογές που λύνουν και τα τρία προβλήματα και εκείνες που είναι προσαρμοσμένες μόνο σε ένα συγκεκριμένο πρόβλημα.

Διόρθωση/διόρθωση σφαλμάτων

Ας εξετάσουμε τον πρώτο από τους στόχους που αναφέρθηκαν παραπάνω. Όπως ήδη καταλαβαίνετε, η εξάλειψη διαφόρων αδυναμιών και εμπλοκών των προγραμμάτων περιήγησης είναι πιο σημαντική για την υποστήριξη παρωχημένων εκδόσεων. Ένα καλό παράδειγμα αυτής της κατάστασης είναι όταν, μετά την εμφάνιση της HTML5, ο ίδιος Internet Explorer 9 δεν εφάρμοσε τον σωστό τύπο εμφάνισης σε νέα αντικείμενα.

Επομένως, σε λύσεις όπως το Normalize.css, όλα τα σφάλματα λαμβάνονται υπόψη και υποβάλλονται σε επεξεργασία:

/** * Προσθέστε τη σωστή οθόνη στον IE. */κύρια (εμφάνιση: μπλοκ; )

/** * Προσθέστε τη σωστή οθόνη στον IE. */ κύρια ( οθόνη: μπλοκ; )

Δεδομένου ότι αυτές οι ενέργειες απαιτούνται μόνο για παλαιότερο λογισμικό, είναι λογικό να χρησιμοποιείτε έναν μετα-επεξεργαστή PostCSS, όπως το PostCSS Normalize, σε συνδυασμό με το Browserlist, για να τις προσθέτετε μόνο όταν χρειάζεται να εφαρμόσετε υποστήριξη για συγκεκριμένα προγράμματα περιήγησης.

Ένα άλλο παράδειγμα κώδικα από το Pure CSS, ο οποίος είναι επίσης κατάλληλος για σύγχρονα προγράμματα web, είναι η διόρθωση των στοιχείων εμφάνισης και το κρυφό χαρακτηριστικό.

[ κρυφό] ( εμφάνιση: κανένα ! σημαντικό; // Μία από τις καλές περιπτώσεις χρήσης του !important }

( εμφάνιση: κανένα !σημαντικό; // Μία από τις καλές περιπτώσεις χρήσης του !important )

Κατάργηση περίεργων στυλ προγράμματος περιήγησης

Αυτός είναι ο δεύτερος λόγος για την επαναφορά των ρυθμίσεων CSS. Κατ 'αρχήν, ο καθένας έχει τη δική του γνώμη σχετικά με το ποιο σχέδιο στο φύλλο στυλ χρήστη-πρακτόρων θεωρείται "περίεργο". Ο ορισμός του συγγραφέα της αρχικής σημείωσης είναι αρκετά λογικός: αυτό είναι ένα στυλ που δεν είναι μια "γυμνή" έκδοση της εμφάνισης του στοιχείου. Για παράδειγμα, η προσθήκη 2em padding για επικεφαλίδες (όπως κάνουν πολλοί) δεν είναι κακή ιδέα, αλλά γιατί 2em και όχι 3em ή 4em. Σε αυτήν την περίπτωση, η βασική επιλογή θα ήταν η απουσία εσοχής, δηλαδή μηδενικού περιθωρίου.

Η απλούστερη καθολική προσέγγιση που αφαιρεί τα padding/περιθώρια από τις ετικέτες είναι:

* ( περιθώριο: 0 ; γέμιση: 0 ; )

* ( περιθώριο: 0, γέμιση: 0; )

Αυτή η μέθοδος είναι πολύ ριζοσπαστική, γιατί ισχύει για όλα τα αντικείμενα, ακόμα και εκείνα που δεν τα περιμένεις (στην ίδια είσοδο). Εναλλακτικά, το Eric Meyer Reset CSS χρησιμοποιείται συχνότερα, το οποίο αφαιρεί τις παραμέτρους περιθωρίου/επένδυσης, τα περιγράμματα και το μέγεθος γραμματοσειράς (σε 0 ή κανένα) όπου δικαιολογείται λογικά:

html, σώμα, div, span, μικροεφαρμογή, αντικείμενο, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, ακρωνύμιο, διεύθυνση, μεγάλη, παραπομπή, κώδικας, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, ισχυρό, sub, sup, tt, var, b, u, i, κέντρο, dl, dt, dd, ol, ul, li, σύνολο πεδίων, μορφή, ετικέτα, θρύλος, πίνακας, λεζάντα, tbody, tfoot, thead, tr, th, td, άρθρο, κατά μέρος, καμβάς, λεπτομέρειες, ενσωμάτωση, εικόνα, figcaption, υποσέλιδο, κεφαλίδα , hgroup, μενού, πλοήγηση, έξοδος, ρουμπίνι, ενότητα, σύνοψη, ώρα, σήμα, ήχος, βίντεο ( περιθώριο: 0 ; συμπλήρωση: 0 ; περίγραμμα: 0 ; μέγεθος γραμματοσειράς: 100%; γραμματοσειρά: κληρονομιά, κατακόρυφη στοίχιση: γραμμή βάσης; )

html, σώμα, div, span, μικροεφαρμογή, αντικείμενο, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, ακρωνύμιο, διεύθυνση, μεγάλη, παραπομπή, κώδικας, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, ισχυρό, sub, sup, tt, var, b, u, i, κέντρο, dl, dt, dd, ol, ul, li, σύνολο πεδίων, μορφή, ετικέτα, θρύλος, πίνακας, λεζάντα, tbody, tfoot, thead, tr, th, td, άρθρο, κατά μέρος, καμβάς, λεπτομέρειες, ενσωμάτωση, εικόνα, figcaption, υποσέλιδο, κεφαλίδα, hgroup, μενού, πλοήγηση, έξοδος, ρουμπίνι, ενότητα, περίληψη, χρόνος, σήμα, ήχος, βίντεο ( περιθώριο: 0, συμπλήρωση: 0, περίγραμμα: 0, μέγεθος γραμματοσειράς: 100%, γραμματοσειρά: κληρονομιά, κατακόρυφη στοίχιση: γραμμή βάσης; )

Υπερισχύοντα στυλ

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

Για παράδειγμα, αντί να ορίσετε όλες τις γραμματοσειρές σε μέγεθος 1em και περιθώρια = 0, το Sanitize.css ορίζεται σε άλλες τιμές:

/** * Διορθώστε το μέγεθος γραμματοσειράς και το περιθώριο στα στοιχεία `h1` μέσα στα περιβάλλοντα `section` και * `article στο Chrome, Firefox και Safari. */ h1 (μέγεθος γραμματοσειράς: 2em, περιθώριο: 0. 67em 0; )

/** * Διορθώστε το μέγεθος γραμματοσειράς και το περιθώριο στα στοιχεία `h1` μέσα στα περιβάλλοντα `section` και * `article στο Chrome, Firefox και Safari. */ h1 (μέγεθος γραμματοσειράς: 2em, περιθώριο: 0,67em 0; )

Στο Reboot του Bootstrap θα βρείτε μια άλλη απεικόνιση της τρέχουσας εργασίας. Οι προγραμματιστές προχώρησαν λίγο παραπέρα και προσδιόρισαν τις γραμματοσειρές και το χρώμα φόντου για το σώμα.

// Σώμα // // 1. Αφαιρέστε το περιθώριο σε όλα τα προγράμματα περιήγησης. // 2. Ως βέλτιστη πρακτική, εφαρμόστε ένα προεπιλεγμένο «χρώμα φόντου». // 3. Ορίστε μια ρητή αρχική τιμή στοίχισης κειμένου έτσι ώστε αργότερα να μπορούμε να χρησιμοποιήσουμε το // την τιμή «κληρονομήσει» σε πράγματα όπως το «	`στοιχεία.σώμα ( περιθώριο: 0 ; // 1 οικογένεια γραμματοσειράς: $font - family- base; μέγεθος γραμματοσειράς: $font - size- base; font- weight: $font - weight- base; line- height: $line - height - βάση; χρώμα: $body - χρώμα; στοίχιση κειμένου: αριστερά; // 3 χρώμα φόντου: $body - bg; // 2 )

// Body // // 1. Αφαιρέστε το περιθώριο σε όλα τα προγράμματα περιήγησης. // 2. Ως βέλτιστη πρακτική, εφαρμόστε ένα προεπιλεγμένο «χρώμα φόντου». // 3. Ορίστε μια ρητή αρχική τιμή στοίχισης κειμένου, έτσι ώστε αργότερα να μπορούμε να χρησιμοποιήσουμε την τιμή // την τιμή «κληρονομήσει» σε πράγματα όπως « `στοιχεία. σώμα ( περιθώριο: 0; // 1 font-family: $font-family-base; font-size: $font-size-base; font-weight: $font-weight-base; line-height: $line-height -βάση; χρώμα: $body-color; στοίχιση κειμένου: αριστερά; // 3 χρώμα φόντου: $body-bg; // 2 )

Σύνολο. Τι να επιλέξετε

Το αρχικό σημείωμα περιέχει το αποτέλεσμα μιας αντίστοιχης έρευνας από

Από τον συγγραφέα:Η κατασκευή ιστοσελίδων στο Διαδίκτυο μπορεί να είναι σαν να χτίζετε σε κινούμενη άμμο. Τα προγράμματα περιήγησης κάνουν το ίδιο πράγμα, αλλά από καιρό σε καιρό κάνουν ενοχλητικά απρόβλεπτες διαφορές. Για παράδειγμα, όλα τα προγράμματα περιήγησης έχουν "φύλλα στυλ παράγοντα χρήστη" - ένα προεπιλεγμένο σύνολο στυλ CSS για να κάνει την κεφαλίδα να μοιάζει με κεφαλίδα κ.λπ., ακόμη και πριν αντιστοιχίσετε στυλ στη σελίδα1. Φυσικά, κάθε μηχανή προγράμματος περιήγησης χρησιμοποιεί ελαφρώς διαφορετικά προεπιλεγμένα σύνολα.

Ένα παράδειγμα ήταν τα προεπιλεγμένα στυλ λίστας, όπου τα προεπιλεγμένα φύλλα στυλ προγράμματος περιήγησης του Internet Explorer και της Opera είχαν αρχικά περιθώριο συμπλήρωσης λίστας-αριστερό: 30 pt;, ενώ ο Firefox και το KHTML ήρθαν με padding-left: 40 px;. Εάν θέλετε να αλλάξετε την προεπιλεγμένη συμπλήρωση ορίζοντας ul (padding-left: 0;), αυτό θα είχε πολύ διαφορετικά αποτελέσματα στα προγράμματα περιήγησης.

ΕΠΑΝΑΦΟΡΑ ΡΥΘΜΙΣΕΩΝ CSS

Για να επιτύχουν λίγη σταθερότητα, ορισμένοι προγραμματιστές επαναφέρουν όλα τα περιθώρια και τα padding χρησιμοποιώντας έναν γενικό επιλογέα:

* (περιθώριο: 0, γέμιση: 0;)

* ( περιθώριο : 0 ; padding : 0 ; )

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

Ο σκοπός της επαναφοράς είναι να επαναφέρετε όλα όσα μπορείτε... [και] να χρησιμεύσει ως αφετηρία για τα δικά σας βασικά στυλ- Έρικ Μάγιερ

html, σώμα, div, span, μικροεφαρμογή, αντικείμενο, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, ακρωνύμιο, διεύθυνση, μεγάλη, παραπομπή, κώδικας, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, ισχυρό, sub, sup, tt, var, b, u, i, κέντρο, dl, dt, dd, ol, ul, li, σύνολο πεδίων, μορφή, ετικέτα, θρύλος, πίνακας, λεζάντα, tbody, tfoot, thead, tr, th, td, άρθρο, κατά μέρος, καμβάς, λεπτομέρειες, ενσωμάτωση, εικόνα, figcaption, υποσέλιδο, κεφαλίδα, hgroup, μενού, πλοήγηση, έξοδος, ρουμπίνι, ενότητα, περίληψη, χρόνος, σήμα, ήχος, βίντεο ( περιθώριο: 0, συμπλήρωση: 0, περίγραμμα: 0, μέγεθος γραμματοσειράς: 100%, γραμματοσειρά: κληρονομιά, κατακόρυφη στοίχιση: γραμμή βάσης; )

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, αρκτικόλεξο, διεύθυνση, μεγάλο, παραπομπή, κωδικός, del, dfn, em, img, ins, kbd, q, s, samp, μικρό, απεργία, ισχυρό, υπο, sup, tt, var, b, u, i, κέντρο, dl, dt, dd, ol, ul, li, σύνολο πεδίων, φόρμα, ετικέτα, υπόμνημα, τραπέζι, λεζάντα, tbody, tfoot, thead, tr, th, td, άρθρο, κατά μέρος, καμβάς, λεπτομέρειες, ενσωμάτωση, σχήμα, figcaption, υποσέλιδο, κεφαλίδα, hgroup, μενού, πλοήγηση, έξοδος, ρουμπίνι, ενότητα, περίληψη, χρόνος, σημάδι, ήχος, βίντεο ( περιθώριο: 0; padding: 0; περίγραμμα: 0; μέγεθος γραμματοσειράς: 100%; γραμματοσειρά: inherit; κατακόρυφος - στοίχιση : γραμμή βάσης ;

Επαναφέρει ορισμένες ιδιότητες πολλών (αλλά όχι όλων) στοιχείων στο ισοδύναμο απλού κειμένου. Εφόσον γίνεται επαναφορά μόνο των στοιχείων που ταιριάζουν, αποφεύγονται ορισμένα προβλήματα * (περιθώριο: 0, συμπλήρωση: 0;). Στη συνέχεια, μπορούμε να ορίσουμε στυλ για αυτές τις απορριφθείσες "μη στιλιστικές" ιδιότητες, με την πεποίθηση ότι χτίζουμε σε μια σταθερή βάση μεταξύ των προγραμμάτων περιήγησης. Αυτή η ανάθεση στυλ λειτουργεί επίσης ως σήμα για την ανάγκη να ορίσετε συνειδητά τα κατάλληλα στυλ για αυτά τα στοιχεία.

ΖΗΤΗΜΑΤΑ ΕΠΑΝΑΦΟΡΑΣ ΤΩΝ ΡΥΘΜΙΣΕΩΝ CSS

Οι επαναφορές CSS ήταν σωτήριες, αλλά τώρα, ειδικά με την άνοδο των wireframes, χρησιμοποιούνται συχνά ως έχουν. Για παράδειγμα, ο Eric υπέθεσε ότι άλλοι προγραμματιστές θα άρχιζαν να χτίζουν τοποθεσίες γύρω από τα προτεινόμενα στυλ επαναφοράς του, παρακάμπτοντάς τα ανάλογα, και η πρώτη έκδοση του Meyer Reset περιλάμβανε προσωρινά αυτόν τον κανόνα:

/* θυμηθείτε να ορίσετε στυλ εστίασης! */ :focus ( περίγραμμα: 0; )

Δυστυχώς, δεν όρισαν όλοι πραγματικά στυλ εστίασης και ο Eric το αφαίρεσε από τη δεύτερη έκδοση.

Η χρήση επαναφορών σε κάνει να νιώθεις λίγο διεστραμμένος. Η επαναφορά των προεπιλεγμένων στυλ του προγράμματος περιήγησης σάς αναγκάζει να σκεφτείτε πώς θα πρέπει να εμφανίζεται κάθε στοιχείο, συμβάλλοντας στη διασφάλιση ότι τα στοιχεία εφαρμόζονται με βάση τη σημασιολογία και όχι τα προεπιλεγμένα στυλ. Αλλά για στοιχεία όπως το i και το em υπάρχει σχεδόν πάντα ένα προεπιλεγμένο στυλ προγράμματος περιήγησης. Άλλα προεπιλεγμένα στυλ του προγράμματος περιήγησης, όπως το άλλοτε γελοία μεγάλο μέγεθος κειμένου κεφαλίδας, έχουν αλλάξει και είναι πλέον αρκετά ανεκτά από προεπιλογή. Τα προβλήματα ξεκινούν όταν κάποιος θέλει να μεταβιβάσει ένα στοιχείο επαναφοράς HTML μόνο με τα εκχωρημένα στυλ επαναφοράς "χωρίς στυλ".

Για μένα, το μεγαλύτερο πρόβλημα με τις επαναφορές είναι η κληρονομικότητα, η οποία οδηγεί σε ανεπιθύμητα μηνύματα στα εργαλεία του προγράμματος περιήγησης. Όταν προσπαθείτε να εντοπίσετε ένα ζήτημα CSS με βαθιά ένθετο στοιχείο στον κώδικα κάποιου άλλου, αυτό δεν θα σας βοηθήσει:

Οι κανόνες επαναφοράς CSS επαναλαμβάνονται λόγω κληρονομικότητας

NORMALIZE.CSS

Οι Nicholas Gallagher και Jonathan Neal ακολούθησαν μια διαφορετική προσέγγιση με το Normalize.css, "ένα μικρό αρχείο CSS που εξασφαλίζει καλύτερη συνέπεια μεταξύ των προγραμμάτων περιήγησης στα προεπιλεγμένα στυλ των στοιχείων HTML." Όπως και με τις επαναφορές CSS, μας δίνει ένα ισχυρό σημείο εκκίνησης μεταξύ των προγραμμάτων περιήγησης - ο κύριος λόγος για τη χρήση επαναφοράς στην πρώτη θέση - αλλά οι δύο προσεγγίσεις είναι φιλοσοφικά διαφορετικές.

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

Επειδή οι αλλαγές στο Normalize.css είναι πιο στοχευμένες, δεν υπάρχει αλληλουχία κληρονομιάς των κανόνων που έχουν ξαναγραφτεί στα εργαλεία ανάπτυξης του προγράμματος περιήγησής σας. Ακολουθεί ένα απλό ul:, αποδιαμορφωμένο με Meyer Reset και Normalize.css εκδόσεις 1 και 2:

Στοιχείο "Χωρίς στιλ" μιας μη ταξινομημένης λίστας

Εφαρμογή επαναφοράς Meyer

Εφαρμόστε το Normalize.css v1

Εφαρμογή Normalize.css v2

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

Ωστόσο, αυτά δεν είναι όλα τα στυλ που εφαρμόζονται στο ul. Για σύγκριση, εδώ είναι το ίδιο στιγμιότυπο οθόνης "χωρίς στυλ", αλλά με ορατά στυλ πρακτόρων χρήστη, σε Firefox 21 και Opera Next 15.