Προεπιλεγμένο css. Επαναφορά στυλ με επαναφορά CSS. Πού μπορώ να βρω το CSS για το προεπιλεγμένο CSS για το πρόγραμμα περιήγησης

Προεπιλεγμένο CSS CSS για στοιχεία HTML (2)

Διαφορετικό για κάθε πρόγραμμα περιήγησης, επομένως:

• Firefox (Gecko):... Ή μεταβείτε στον πόρο: // gre-resources / και δείτε το html.css.
• Chrome / Safari (WebKit):
  • Χρώμιο (Blink):
• Internet Explorer(Τρίαινα), παλαιότερες εκδόσεις: http://web.archive.org/web/20170122223926/http://www.iecss.com/

Πού μπορώ να βρω το CSS για το προεπιλεγμένο CSS για το πρόγραμμα περιήγησης;

Πολλά στοιχεία HTML έχουν κάποια Ιδιότητες CSSαπό προεπιλογή, κάτι που μερικές φορές μπορεί να οδηγήσει σε άγνωστη / ανεπιθύμητη συμπεριφορά. Για παράδειγμα, τα πεδία εισαγωγής αποδίδονται διαφορετικά σε διαφορετικά προγράμματα περιήγησης. Ψάχνω για ένα μέρος που καλύπτει νέες ιδιότητες CSS3 και νέα στοιχεία HTML5.

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

Ετσι, υπάρχει ιστότοπος που μπορεί να μου δώσει όλες αυτές τις πληροφορίες (ή ίσως οι περισσότερες);

Μπορείτε να βρείτε το αποθετήριο GitHub για όλες τις προδιαγραφές HTML του W3C και τα προεπιλεγμένα φύλλα στυλ CSS για προγραμματιστές

1.

2. Τυπικά στυλ για τον Internet Explorer

3.

4. Τυπικά στυλ για το Opera

5. Τυπικά στυλ για HTML4 (προδιαγραφή W3C)

6. Τυπικά στυλ για HTML5 (προδιαγραφή W3C)

Παράδειγμα, σύμφωνα με την προδιαγραφή W3C HTML4 από προεπιλογή:

HTML, διεύθυνση, blockquote, body, dd, div, dl, dt, fieldset, form, frame, frameset, h1, h2, h3, h4, h5, h6, noframes, ol, p, ul, center, dir, hr, menu, pre (display: block; unicode-bidi: embed) li (display: list-item) head (display: none) table (display: table) tr (display: table-line) thead (οθόνη: table-header-) group) tbody (οθόνη: table-row-group) tfoot (display: table-footer-group) col (οθόνη: table-στήλη) colgroup (οθόνη: table-column-group) td, th (οθόνη: table-cell) λεζάντα (οθόνη: table-caption) th (font-weight: bolder; text-align: center) caption (text-align: center) body (margin: 8px) h1 (font-size: 2em; margin: .67em 0) h2 (μέγεθος γραμματοσειράς: 1.5em; περιθώριο: .75em 0) h3 (μέγεθος γραμματοσειράς: 1.17em; margin: .83em 0) h4, p, blockquote, ul, fieldset, form, ol, dl, dir, menu ( περιθώριο: 1,12em 0) h5 (μέγεθος γραμματοσειράς: .83em; περιθώριο: 1.5em 0) h6 (μέγεθος γραμματοσειράς: .75em; περιθώριο: 1.67em 0) h1, h2, h3, h4, h5, h6, b, ισχυρό (γραμματοσειρά-βάρος: τολμηρότερο) blockquote (marg αριστερά: 40 εικονοστοιχεία; margin-right: 40px) i, cite, em, var, address (font-style: italic) pre, tt, code, kbd, samp (font-family: monospace) pre (white-space: pre) κουμπί, textarea, είσοδος, επιλέξτε (οθόνη: inline-block) μεγάλο (μέγεθος γραμματοσειράς: 1,17em) μικρό, sub, sup (μέγεθος γραμματοσειράς: .83em) sub (κάθετη-ευθυγράμμιση: υπο) sup (κάθετη-ευθυγράμμιση: σούπερ) πίνακα ( περίγραμμα-απόσταση: 2px;) thead, tbody, tfoot (κάθετη-ευθυγράμμιση: μεσαία) td, th, tr (κάθετη-ευθυγράμμιση: κληρονομιά) s, απεργία, del (διακόσμηση κειμένου: line-through) hr (περίγραμμα: 1px ένθετο) ol, ul, dir, μενού, dd (margin-left: 40px) ol (list-style-type: decimal) ol ul, ul ol, ul ul, ol ol (margin-top: 0; margin-bottom: 0) u, ins (text-decoration: underline) br: before (content: "\ A"; white-space: pre-line) κέντρο (text-align: center): σύνδεσμος,: επισκέφθηκε (κείμενο-διακόσμηση: υπογράμμιση ): εστίαση (περίγραμμα: λεπτή διάστικτη αντιστροφή) / * Ξεκινήστε τις ρυθμίσεις αμφίδρομης κατεύθυνσης (μην αλλάξετε) * / BDO (κατεύθυνση: ltr; unicode-bidi: bidi-override) BDO (κατεύθυνση: rtl; unicode-bid i: bidi-override) * (κατεύθυνση: ltr; unicode-bidi: embed) * (διεύθυνση: rtl; unicode-bidi: embed) @media print (h1 (page-break-before: πάντα) h1, h2, h3, h4, h5, h6 (page-break-after: αποφύγετε) ul, ol, dl (σελίδα-διάλειμμα πριν: αποφύγετε))

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

Η ιδέα της ρίψης στυλ ήρθε περίπου 10 χρόνια πριν. Το οποίο ουσιαστικά συνίστατο στο να κάνει την σελίδα να μοιάζει ίδια σε όλα τα προγράμματα περιήγησης χρησιμοποιώντας ένα μικρό σύνολο στυλ CSS. Φυσικά, αυτό δεν λειτουργεί πάντα, αλλά ορισμένα σημεία μπορούν να διορθωθούν - για παράδειγμα, το περίγραμμα δεν είναι σαφές από πού προέρχεται σε ορισμένες εκδόσεις του IE. Ή ένα μπλε περίγραμμα για τα περιθώρια.

Δεν είναι μυστικό για έναν προγραμματιστή front-end ότι τα προγράμματα περιήγησης είναι πολύ λεπτά και όλοι χειρίζονται στοιχεία HTML με τον δικό τους τρόπο, προσθέτοντας τα δικά τους τυποποιημένα στυλ.

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

Γιατί σε ξεχωριστό αρχείο; Απλώς επειδή είναι πιο βολικό να τα μεταφέρετε από έργο σε έργο.

Ακολουθεί ένα παράδειγμα reset.css από το 2007:

/ * http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (δημόσιος τομέας) * / html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, αρκτικόλεξο, διεύθυνση, μεγάλο, cite, code, 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, fieldset, φόρμα, ετικέτα, θρύλος, πίνακας, λεζάντα, tbody, tfoot, thead, tr, th, td, άρθρο, στην άκρη, καμβάς, λεπτομέρειες, ενσωμάτωση, σχήμα, figcaption, υποσέλιδο, κεφαλίδα, hgroup, μενού, nav, έξοδος, ρουμπίνι, ενότητα, σύνοψη, χρόνος, σήμα, ήχος, βίντεο (περιθώριο: 0; παραγέμισμα: 0; περίγραμμα: 0; μέγεθος γραμματοσειράς: 100%; γραμματοσειρά: κληρονομήστε; κάθετη-ευθυγράμμιση: βασική γραμμή ;) / * Επαναφορά ρόλου εμφάνισης HTML5 για παλαιότερα προγράμματα περιήγησης * / άρθρο, εκτός από τις λεπτομέρειες, το figcaption, το σχήμα, το υποσέλιδο, την κεφαλίδα, το hgroup, το μενού, το nav, το τμήμα (οθόνη: μπλοκ;) σώμα (ύψος γραμμής: 1;) ol, ul (list-style: none;) blockquote, q (εισαγωγικά: none;) blockquote: before, blockquote: after, q: before, q: after (content: ""; content: none;) table (περίγραμμα- κατάρρευση: γ ollapse; απόσταση ορίου: 0; )

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

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

είσοδος, textarea, a, κουμπί, επιλέξτε (περίγραμμα: κανένα) img (περίγραμμα: κανένα;) ώρα (διαγραφή: και τα δύο; περίγραμμα: κανένα; φόντο: κανένα;) * (επανάληψη φόντου: χωρίς επανάληψη;) / * HTML5 Επαναφορά εμφάνισης-ρόλου για παλαιότερα προγράμματα περιήγησης * / άρθρο, εκτός από, λεπτομέρειες, figcaption, σχήμα, υποσέλιδο, κεφαλίδα, hgroup, μενού, nav, ενότητα (οθόνη: μπλοκ;) σώμα (ύψος γραμμής: 1;) ol, ul (λίστα -style: none; margin: 0; padding: 0;) blockquote, q (quotes: none;) blockquote: before, blockquote: after, q: before, q: after (content: ""; content: none;) πίνακας (σύνορα-σύμπτυξη: σύμπτυξη, απόσταση-περιθώριο: 0;)

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

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

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

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

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

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

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

* (margin: 0; padding: 0;) p (περιθώριο: 5px 0 10px 0;)

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

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

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

1. Λιγότερο είναι περισσότερο - η επιλογή μου για Επαναφορά CSS (Ed Elliot).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Τα παντα Στοιχεία HTMLΟι σελίδες από προεπιλογή έχουν τις δικές τους συγκεκριμένες τιμές. Δυστυχώς, δεν ερμηνεύονται με τον ίδιο τρόπο από διαφορετικά προγράμματα περιήγησης. Ως αποτέλεσμα, ο σχεδιασμός του ιστότοπου υποφέρει, ο σχεδιασμός του αλλάζει κατά την αλλαγή του προγράμματος περιήγησης (πρόγραμμα περιήγησης Διαδικτύου). Ο σκοπός της διαδικασίας επαναφοράς στυλ είναι να μειωθούν οι ασυνέπειες του προγράμματος περιήγησης σε πράγματα όπως ύψος γραμμής, περιθώρια, μεγέθη γραμματοσειράς κεφαλίδας κ.λπ.

Παραδείγματα σεναρίων για επαναφορά στυλ CSS

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

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

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

/ * http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) * / html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, αρκτικόλεξο, διεύθυνση, μεγάλο, cite, code, 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, fieldset, φόρμα, ετικέτα, θρύλος, πίνακας, λεζάντα, tbody, tfoot, thead, tr, th, td, άρθρο, στην άκρη, καμβάς, λεπτομέρειες, ενσωμάτωση, σχήμα, figcaption, υποσέλιδο, κεφαλίδα, hgroup, μενού, nav, έξοδος, ρουμπίνι, ενότητα, σύνοψη, χρόνος, σήμα, ήχος, βίντεο (περιθώριο: 0; padding: 0; περίγραμμα: 0; μέγεθος γραμματοσειράς: 100%; γραμματοσειρά: وارث; κάθετη-ευθυγράμμιση: βασική γραμμή ;) / * Επαναφορά ρόλου εμφάνισης HTML5 για παλαιότερα προγράμματα περιήγησης * / άρθρο, εκτός από τις λεπτομέρειες, το figcaption, το σχήμα, το υποσέλιδο, την κεφαλίδα, το hgroup, το μενού, το nav, το τμήμα (οθόνη: μπλοκ;) σώμα (ύψος γραμμής: 1;) ol, ul (list-style: none;) blockquote, q (quotes: none;) blockquote: before, blockquote: after, q: before, q: after (content: ""; content: none;) table (περίγραμμα- κατάρρευση: γ ollapse; απόσταση ορίου: 0; )

Yahoo! (YUI 3) Επαναφορά CSS

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

/ * YUI 3.18.1 Πνευματικά δικαιώματα 2014 Yahoo! Inc. Ολα τα δικαιώματα διατηρούνται. Άδεια με άδεια BSD. http://yuilibrary.com/license/ * / / * Το TODO θα πρέπει να καταργήσει τις ρυθμίσεις σε HTML, αφού δεν μπορούμε να το ορίσουμε. TODO με το πρόθεμα, πρέπει να ομαδοποιήσω ανά επιλογέα ή ιδιότητα για εξοικονόμηση βάρους; * / html ( color: # 000; background: #FFF;) / * TODO καταργήστε τις ρυθμίσεις στο BODY, αφού δεν μπορούμε να το ορίσουμε. * / / * Δοκιμή TODO που θέτει μια τάξη στο HEAD. - Αποτυγχάνει στο FF. * / σώμα, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, leg, input, textarea, p, blockquote, th, td (margin: 0; padding: 0;) table (border-collapse: collapse; border-spacing: 0;) fieldset, img (border: 0;) / * TODO σκεφτείτε διαφορετική κληρονομιά, ίσως αφήνοντας το IE6 να αποτύχει λίγο ... * / διεύθυνση, λεζάντα, cite, code, dfn, em, strong, th, var (font-style: normal; font-weight: normal;) ol, ul (list-style: none;) caption, th (κείμενο-ευθυγράμμιση: αριστερά;) h1, h2, h3, h4, h5, h6 (μέγεθος γραμματοσειράς: 100%; font-weight: normal;) q: before, q: after (content: "";) abbr, ακρωνύμιο (περίγραμμα: 0; παραλλαγή γραμματοσειράς: κανονικό;) / * για διατήρηση του ύψους γραμμής και της εμφάνισης επιλογέα * / sup (κάθετη-ευθυγράμμιση: κείμενο-κορυφή;) υπο (κάθετη-ευθυγράμμιση: κείμενο-κάτω;) είσοδος, textarea , επιλέξτε (γραμματοσειρά-οικογένεια: κληρονομιά; γραμματοσειρά: κληρονομήστε; γραμματοσειρά: κληρονομείτε; * μέγεθος γραμματοσειράς: 100%; / * για ενεργοποίηση αλλαγής μεγέθους για IE * /) / * επειδή ο θρύλος δεν κληρονομεί στο IE * / legenda (χρώμα: # 000;) / * YUI CSS Detect ion Stamp * / # yui3-css-stamp.cssreset (οθόνη: κανένα; )

Επαναφορά στυλ normalize.css

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

/ *! normalize.css v6.0.0 | Άδεια MIT | github.com/necolas/normalize.css * / / * Έγγραφο =================================== = ===================================== * / / ** * 1. Διορθώστε το ύψος της γραμμής στο όλα τα προγράμματα περιήγησης. * 2. Αποτρέψτε τις προσαρμογές του μεγέθους της γραμματοσειράς μετά την αλλαγή του προσανατολισμού στο * IE Windows Phone και στο iOS. * / html (ύψος γραμμής: 1,15; / * 1 * / -ms-κείμενο-μέγεθος-προσαρμογή: 100%; / * 2 * / -webkit-κείμενο-μέγεθος-προσαρμογή: 100%; / * 2 * /) / * Ενότητες ============================================== = =========================== * / / ** * Προσθέστε τη σωστή οθόνη στο IE 9-. * / άρθρο, στην άκρη, υποσέλιδο, κεφαλίδα, πλοήγηση, ενότητα (οθόνη: μπλοκ;) / ** * Διορθώστε το μέγεθος και το περιθώριο γραμματοσειράς στα στοιχεία «h1» εντός των πλαισίων «ενότητα» και * «άρθρο» σε Chrome, Firefox και Σαφάρι. * / h1 (μέγεθος γραμματοσειράς: 2em; περιθώριο: 0,67em 0;) / * Περιεχόμενο ομαδοποίησης =========================== == ============================================ * / / ** * Προσθέστε τη σωστή οθόνη στο IE 9-. * 1. Προσθέστε τη σωστή οθόνη στο IE. * / figcaption, figur, main (/ * 1 * / display: block;) / ** * Προσθέστε το σωστό περιθώριο στο IE 8. * / σχήμα (περιθώριο: 1em 40px;) / ** * 1. Προσθέστε το σωστό πλαίσιο μέγεθος στο Firefox. * 2. Εμφάνιση της υπερχείλισης στο Edge και στο IE. * / hr (box-sizing: content-box; / * 1 * / height: 0; / * 1 * / overflow: visible; / * 2 * /) / ** * 1. Διορθώστε την κληρονομικότητα και την κλιμάκωση του μεγέθους της γραμματοσειράς σε όλα τα προγράμματα περιήγησης. * 2. Διορθώστε το περίεργο μέγεθος γραμματοσειράς σε όλα τα προγράμματα περιήγησης. * / pre (font-family: monospace, monospace; / * 1 * / font-size: 1em; / * 2 * /) / * Σημασιολογία σε επίπεδο κειμένου =============== ================================================== ========= * / / ** * 1. Καταργήστε το γκρι φόντο στους ενεργούς συνδέσμους στο IE 10. * 2. Καταργήστε τα κενά στους συνδέσμους που υπογραμμίζονται στο iOS 8+ και το Safari 8+. * / a (χρώμα φόντου: διαφανές; / * 1 * / -webkit-κείμενο-διακόσμηση-παράλειψη: αντικείμενα; / * 2 * /) / ** * 1. Αφαιρέστε το κάτω περίγραμμα στο Chrome 57- και στον Firefox 39- ... * 2. Προσθέστε τη σωστή διακόσμηση κειμένου σε Chrome, Edge, IE, Opera και Safari. * / abbr (περίγραμμα-κάτω: κανένα; / * 1 * / διακόσμηση κειμένου: υπογράμμιση; / * 2 * / διακόσμηση κειμένου: διακεκομμένη γραμμή; / * 2 * /) / ** * Αποτροπή της διπλής εφαρμογής του "bolder "από τον επόμενο κανόνα στο Safari 6. * / b, ισχυρό (γραμματοσειρά: κληρονομήστε;) / ** * Προσθέστε το σωστό βάρος γραμματοσειράς στο Chrome, το Edge και το Safari. * / b, ισχυρό (font-weight: bolder;) / ** * 1. Διορθώστε την κληρονομικότητα και την κλιμάκωση του μεγέθους της γραμματοσειράς σε όλα τα προγράμματα περιήγησης. * 2. Διορθώστε το περίεργο μέγεθος γραμματοσειράς σε όλα τα προγράμματα περιήγησης. * / code, kbd, samp (font-family: monospace, monospace; / * 1 * / font-size: 1em; / * 2 * /) / ** * Προσθέστε το σωστό στυλ γραμματοσειράς στο Android 4.3-. * / dfn (font-style: italic;) / ** * Προσθέστε το σωστό φόντο και χρώμα στο IE 9-. * / mark (background-color: # ff0; color: # 000;) / ** * Προσθέστε το σωστό μέγεθος γραμματοσειράς σε όλα τα προγράμματα περιήγησης. * / small (μέγεθος γραμματοσειράς: 80%;) / ** * Αποτρέψτε τα στοιχεία «sub` και` sup` να επηρεάσουν το ύψος της γραμμής σε * όλα τα προγράμματα περιήγησης. * / sub, sup (μέγεθος γραμματοσειράς: 75%; ύψος γραμμής: 0; θέση: σχετική; κάθετη-ευθυγράμμιση: βασική γραμμή)) sub (κάτω: -0,25em;) sup (κορυφή: -0,5em;) / * Ενσωματωμένο περιεχόμενο =============================================== = ========================= * / / ** * Προσθέστε τη σωστή οθόνη στο IE 9-. * / ήχος, βίντεο (οθόνη: inline-block;) / ** * Προσθέστε τη σωστή οθόνη στο iOS 4-7. * / ήχος: όχι () (οθόνη: κανένας; ύψος: 0;) / ** * Αφαιρέστε το περίγραμμα σε εικόνες εντός συνδέσμων στο IE 10- * / img (στυλ περιγράμματος: κανένα;) / ** * Απόκρυψη της υπερχείλισης στο IE. * / svg: not (: root) (overflow: hidden;) / * Forms =============================== = ========================================= * / / ** * Αφαιρέστε το περιθώριο στο Firefox και το Safari. * / κουμπί, είσοδος, optgroup, select, textarea (margin: 0;) / ** * Εμφάνιση της υπερχείλισης στο IE. * 1. Εμφάνιση της υπερχείλισης στο Edge. * / κουμπί, είσοδος (/ * 1 * / υπερχείλιση: ορατό;) / ** * Καταργήστε την κληρονομιά του μετασχηματισμού κειμένου σε Edge, Firefox και IE. * 1. Καταργήστε την κληρονομιά του μετασχηματισμού κειμένου στον Firefox. * / κουμπί, επιλέξτε (/ * 1 * / text-transform: none;) / ** * 1. Αποτρέψτε ένα σφάλμα WebKit όπου (2) καταστρέφει τα εγγενή στοιχεία ελέγχου «ήχου» και «βίντεο» * στο Android 4. * 2. Διορθώστε την αδυναμία στυλ τύπων με δυνατότητα κλικ σε iOS και Safari. * / κουμπί, html, / * 1 * /, (-webkit-εμφάνιση: κουμπί; / * 2 * /) / ** * Αφαιρέστε το εσωτερικό περίγραμμα και την επένδυση στον Firefox. * / κουμπί :: - moz-εστίαση-εσωτερικό, :: - moz-εστίαση-εσωτερικό, :: - moz-εστίαση-εσωτερικό, :: - moz-εστίαση-εσωτερικό (στυλ περιγράμματος: κανένα; padding: 0;) / ** * Επαναφορά των στυλ εστίασης που δεν έχουν οριστεί από τον προηγούμενο κανόνα. * / κουμπί: -moz-εστίαση,: -moz-εστίαση,: -moz-εστίαση,: -moz-εστίαση (περίγραμμα: 1px διάστικτο ButtonText;) / ** * 1. Διορθώστε τη συσκευασία κειμένου σε Edge και IE. * 2. Διορθώστε τη μεταβίβαση χρώματος από τα στοιχεία «fieldset» στο IE. * 3. Καταργήστε την επένδυση, έτσι ώστε οι προγραμματιστές να μην πιάνονται όταν μηδενίζονται * στοιχεία "fieldset" σε όλα τα προγράμματα περιήγησης. * / legenda (μέγεθος κουτιού: περίγραμμα-πλαίσιο; / * 1 * / χρώμα: κληρονομικό; / * 2 * / οθόνη: τραπέζι; / * 1 * / μέγιστο πλάτος: 100%; / * 1 * / επένδυση: 0 ; / * 3 * / white-space: normal; / * 1 * /) / ** * 1. Προσθέστε τη σωστή οθόνη στο IE 9-. * 2. Προσθέστε τη σωστή κάθετη στοίχιση σε Chrome, Firefox και Opera. * / progress (display: inline-block; / * 1 * / vertical-align: baseline; / * 2 * /) / ** * Καταργήστε την προεπιλεγμένη κατακόρυφη γραμμή κύλισης στο IE. * / textarea (υπερχείλιση: auto;) / ** * 1. Προσθέστε το σωστό μέγεθος κουτιού στο IE 10-. * 2. Αφαιρέστε την επένδυση στο IE 10-. * /, (box-sizing: border-box; / * 1 * / padding: 0; / * 2 * /) / ** * Διορθώστε το στυλ του κέρσορα των κουμπιών αύξησης και μείωσης στο Chrome. * / :: - κουμπί webkit-inner-spin, :: - webkit-external-spin-button (ύψος: auto;) / ** * 1. Διορθώστε την περίεργη εμφάνιση στο Chrome και στο Safari. * 2. Διορθώστε το στυλ διάρθρωσης στο Safari. * / (-webkit-εμφάνιση: textfield; / * 1 * / outline-offset: -2px; / * 2 * /) / ** * Αφαιρέστε τα εσωτερικά κουμπιά και ακυρώστε τα κουμπιά στο Chrome και το Safari σε macOS. * / :: - webkit-search-cancel-button, :: - webkit-search-decoration (-webkit-display: none;) / ** * 1. Διορθώστε την αδυναμία στυλ τύπων με δυνατότητα κλικ σε iOS και Safari. * 2. Αλλάξτε τις ιδιότητες γραμματοσειράς σε «κληρονομικό» στο Safari. * / :: - κουμπί webkit-file-upload-(-webkit-εμφάνιση: κουμπί; / * 1 * / γραμματοσειρά: κληρονομικό; / * 2 * /) / * Διαδραστικό ============ ================================================== ============= * / / * * Προσθέστε τη σωστή οθόνη στο IE 9-. * 1. Προσθέστε τη σωστή οθόνη στα Edge, IE και Firefox. * / λεπτομέρειες, / * 1 * / μενού (οθόνη: μπλοκ;) / * * Προσθέστε τη σωστή οθόνη σε όλα τα προγράμματα περιήγησης. * / περίληψη (εμφάνιση: list-item;) / * Σενάριο =================================== = ====================================== * / / ** * Προσθέστε τη σωστή οθόνη στο IE εννέα-. * / καμβάς (οθόνη: inline-block;) / ** * Προσθέστε τη σωστή οθόνη στο IE. * / template (display: none;) / * Hidden ==================================== == ================================== * / / ** * Προσθέστε τη σωστή οθόνη στο IE 10- .. . * / (οθόνη: κανένα;)

Επαναφορά μέσω καθολικού επιλογέα * (αστερίσκος)

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

* (περιθώριο: 0; επένδυση: 0;)

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

Επαναφέρετε τα στυλ και το WordPress

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

Το πρώτο είναι ότι πρέπει να αντιγράψετε τον κωδικό επαναφοράς στην αρχή του αρχείου style.css του θέματος WordPress (μετά από τις γραμμές σχετικά με την ιδιοκτησία και το όνομα του θέματος, δηλαδή μετά το κείμενο που πλαισιώνεται με ένα κλάσμα και έναν αστερίσκο / * ... * /.

@import "reset.css";

Εάν υπάρχει οδηγία @ import στο CSS, τότε πρέπει να βρίσκεται στην αρχή του πίνακα (πριν από όλους τους κανόνες). Διαφορετικά, το πρόγραμμα περιήγησης μπορεί να το αγνοήσει.

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

Όπως μπορείτε να δείτε, η επαναφορά στυλ στο WordPress δεν είναι κάτι ιδιαίτερο.

Ευχαριστίες

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