Αυτό το άρθρο είναι το πρώτο σε μια σειρά για την εξημέρωση CSS. Σήμερα θα δούμε την τεχνολογία Επαναφορά CSS.
Γιατί χρειάζεται αυτό;
Κάθε πρόγραμμα περιήγησης ορίζει τις δικές του προεπιλεγμένες τιμές στυλ για διάφορα στοιχεία HTML. ΜΕ χρησιμοποιώντας CSSΕπαναφορά μπορούμε να ισοπεδώσουμε αυτή τη διαφορά για να διασφαλίσουμε τα στυλ μεταξύ των προγραμμάτων περιήγησης.Για παράδειγμα, χρησιμοποιείτε το στοιχείο έναστο έγγραφό σας. Τα περισσότερα προγράμματα περιήγησης αρέσουν Internet Explorerκαι Firefox, προσθέστε έναν σύνδεσμο Μπλε χρώμαΚαι υπογραμμίζοντας. Ωστόσο, φανταστείτε ότι πέντε χρόνια αργότερα κάποιος αποφάσισε να δημιουργήσει νέο πρόγραμμα περιήγησης(ας το ονομάσουμε UltraBrowser). Το μπλε χρώμα δεν άρεσε στους προγραμματιστές του προγράμματος περιήγησης και η υπογράμμιση ήταν ενοχλητική, έτσι αποφάσισαν να επισημάνουν συνδέσμους στα κοκκιναΚαι τολμηρός. Ακριβώς με βάση αυτό, εάν ορίσετε την τιμή βασικού στυλ για ένα στοιχείο ένα, τότε είναι εγγυημένο ότι θα είναι όπως θέλετε και όχι όπως προτιμούν να το εμφανίζουν οι προγραμματιστές του UltraBrowser.
Αλλά τώρα δεν έχουμε καθόλου εσοχές, μεταξύ των επιμέρους παραγράφων! Τι να κάνω? Μην λέτε ψέματα και μην φοβάστε: κάτω από την επαναφορά μας, θα περιγράψουμε τον κανόνα που χρειαζόμαστε. Μπορεί να γίνει διαφορετικοί τρόποι: καθορίστε την εσοχή κάτω ή πάνω από την παράγραφο, καθορίστε την σε ποσοστό, pixel ή em.
Το πιο σημαντικό είναι ότι το πρόγραμμα περιήγησης παίζει τώρα με τους δικούς μας κανόνες, όχι εμείς με τους δικούς του. Αποφάσισα να το κάνω ως εξής:
* ( περιθώριο: 0, συμπλήρωση: 0; ) p ( περιθώριο: 5 εικονοστοιχεία 0 10 εικονοστοιχεία 0; )
Ως αποτέλεσμα, πήραμε αυτό που φαίνεται στο τρίτο παράδειγμα.
Μπορείτε να δημιουργήσετε τα δικά σας στυλ επαναφοράς εάν λύνετε ένα συγκεκριμένο πρόβλημα στο έργο σας. Παρόλα αυτά, δεν υπάρχει περπάτημαγια να δημιουργήσετε τη δική σας Επαναφορά CSS. Βασιστείτε στις δικές σας αρχές και στο δικό σας στυλ.
Για να σας βοηθήσουμε να κάνετε τη σωστή επιλογή, ακολουθούν μερικοί ακόμη σύνδεσμοι:
- Less is more - η επιλογή μου Reset 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; χρώμα: μαύρο; φόντο: λευκό; )
Ας πούμε ότι γνωρίζετε ήδη πώς θα μοιάζει το στοιχείο. σώμα:
- χρώμα φόντου: #cccccc;
- χρώμα: #996633;
- Θέλετε να επαναλάβετε μια συγκεκριμένη εικόνα φόντου οριζόντια.
Σε αυτήν την περίπτωση, δεν χρειάζεται να δημιουργήσετε νέο επιλογέα για να περιγράψετε τις ιδιότητές σας - μπορείτε απλώς να τις συμπεριλάβετε στην Επαναφορά CSS. Ας το κάνουμε:
σώμα (ύψος γραμμής: 1; χρώμα: #996633; φόντο:#ccc url(tiled-image.gif) repeat-x επάνω αριστερά; )
Μην φοβάστε να τροποποιήσετε το ίδιο το CSS Reset.Προσαρμόστε το για εσάς, κάντε το να λειτουργεί για εσάς. Τροποποιήστε, ανακατασκευάστε, αφαιρέστε και προσθέστε όπως απαιτείται στη συγκεκριμένη περίπτωσή σας.
Ο Eric Meyer είπε τα εξής σχετικά: "δεν είναι μια περίπτωση όπου όλοι πρέπει να χρησιμοποιούν το CSS Reset χωρίς αλλαγές."
Όλα τα στοιχεία σελίδας HTML από προεπιλογή έχουν τις δικές τους καθορισμένες τιμές. Και, δυστυχώς, δεν αντιμετωπίζονται ισότιμα από διαφορετικά προγράμματα περιήγησης. Ως αποτέλεσμα, ο σχεδιασμός του ιστότοπου υποφέρει, ο σχεδιασμός του αλλάζει όταν αλλάζετε το πρόγραμμα περιήγησης (πρόγραμμα περιήγησης Διαδικτύου). Ο σκοπός της διαδικασίας επαναφοράς στυλ είναι να μειώσει τις ασυνέπειες του προγράμματος περιήγησης σε πράγματα όπως ύψη γραμμής, περιθώρια, μεγέθη γραμματοσειράς επικεφαλίδων κ.λπ.
Παραδείγματα σεναρίων επαναφοράς CSS
Υπάρχει η άποψη ότι κάθε webmaster που σέβεται τον εαυτό του πρέπει να γράψει τον δικό του κώδικα επαναφοράς CSS. Είμαι όμως υποστηρικτής μιας διαφορετικής προσέγγισης, πάρε μια έτοιμη λύση, κατανοήστε την και διορθώστε την αν χρειαστεί.
Eric Meyer CSS Reset
Το σενάριο επαναφοράς του Eric Meyer, σύμφωνα με τον ίδιο τον συγγραφέα, είναι σκόπιμα πολύ γενικό. Για παράδειγμα, δεν ορίζει κάποιο προεπιλεγμένο χρώμα φόντου για το στοιχείο του σώματος. Επομένως, θα πρέπει να τροποποιηθεί, να επεξεργαστεί, να επεκταθεί και να προσαρμοστεί με άλλο τρόπο ώστε να ταιριάζει στις ανάγκες σας. Προσθέστε τα χρώματα που θέλετε για σελίδες, συνδέσμους και ούτω καθεξής.
/* http://meyerweb.com/eric/tools/css/reset/v2.0 | 20110126 Άδεια χρήσης: καμία (δημόσιος τομέας) */ html, body, div, span, applet, αντικείμενο, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, ακρωνύμιο, διεύθυνση, μεγάλο, παραπομπή, κωδικός, del, dfn, em, img, ins, kbd, q, s, samp, μικρό, χτυπητό, ισχυρό, 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%, γραμματοσειρά: κληρονομιά, κατακόρυφη στοίχιση: γραμμή βάσης . ol, ul (list-style: κανένα; ) blockquote, q ( εισαγωγικά: κανένα; ) blockquote:before, blockquote:after, q:before, q:after ( περιεχόμενο: ""; περιεχόμενο: κανένα; ) πίνακας ( border- κατάρρευση: γ κατάρρευση? διάστιχο: 0; )
Yahoo! (YUI 3) Επαναφορά CSS
Το YUI 3 CSS Style Reset μετριάζει το αντικρουόμενο στυλ των στοιχείων 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, κωδικός, μορφή, σύνολο πεδίων, υπόμνημα, είσοδος, περιοχή κειμένου, p, blockquote, th, td ( margin:0; padding:0; ) table ( border-collapse:collapse; border-spacing:0; ) fieldset, img ( border:0; ) /* TODO σκεφτείτε να χειριστείτε διαφορετικά το inheritence, ίσως αφήσετε το IE6 να αποτύχει λίγο ... */ διεύθυνση, λεζάντα, παραπομπή, κωδικός, dfn, em, ισχυρό, th, var ( font-style:normal; font-weight:normal; ) ol, ul (list-style:none; ) caption, th ( text-align:left; ) h1, h2, h3, h4, h5, h6 ( μέγεθος γραμματοσειράς:100%; βάρος γραμματοσειράς:normal; ) q:before, q:after ( content:""; ) abbr, ακρωνύμιο ( border:0; font-variant:normal; ) /* για διατήρηση του ύψους γραμμής και της εμφάνισης του επιλογέα */ sup ( vertical-align:text-top; ) sub ( vertical-align:text-bottom; ) εισαγωγή, textarea , επιλέξτε ( font-family:inherit; font-size:inherit; font-weight:inherit; *font-size:100%; /*για να ενεργοποιήσετε την αλλαγή μεγέθους για IE*/ ) /*επειδή το υπόμνημα δεν κληρονομεί στον IE * / legend ( color:#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 on Τηλέφωνο με Windowsκαι σε iOS. */ html ( line-height: 1,15; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ ) /* Ενότητες ============================================ == ========================= */ /** * Προσθέστε τη σωστή οθόνη στο IE 9-. */ άρθρο, πλάι, υποσέλιδο, κεφαλίδα, πλοήγηση, ενότητα ( εμφάνιση: μπλοκ; ) /** * Διορθώστε το μέγεθος γραμματοσειράς και το περιθώριο στα στοιχεία "h1" εντός των περιεχομένων "section" και * "article" σε Chrome, Firefox και σαφάρι. */ h1 ( μέγεθος γραμματοσειράς: 2em; περιθώριο: 0,67em 0; ) /* Ομαδοποίηση περιεχομένου ============================ ==========================================*/ /** * Προσθέστε το σωστή εμφάνιση στον IE 9-. * 1. Προσθέστε τη σωστή οθόνη στο IE. */ figcaption, figure, main ( /* 1 */ display: block; ) /** * Προσθέστε το σωστό περιθώριο στον IE 8. */ figure ( margin: 1em 40px; ) /** * 1. Προσθέστε το σωστό πλαίσιο το μέγεθος στον Firefox. * 2. Εμφάνιση της υπερχείλισης σε Edge και IE. */ hr ( μέγεθος κουτιού: content-box; /* 1 */ ύψος: 0; /* 1 */ υπερχείλιση: ορατό; /* 2 */ ) /** * 1. Διορθώστε την κληρονομικότητα και την κλιμάκωση του μεγέθους γραμματοσειράς σε όλα τα προγράμματα περιήγησης. * 2. Διορθώστε το περίεργο μέγεθος γραμματοσειράς «em» σε όλα τα προγράμματα περιήγησης. */ pre ( γραμματοσειρά-οικογένεια: monospace, monospace; /* 1 */ μέγεθος γραμματοσειράς: 1em; /* 2 */ ) /* Σημασιολογία σε επίπεδο κειμένου =============== ========================================================================== ======== */ /** * 1. Καταργήστε το γκρι φόντο στους ενεργούς συνδέσμους στον IE 10. * 2. Καταργήστε τα κενά στους υπογραμμισμένους συνδέσμους στο iOS 8+ και στο Safari 8+. */ a ( χρώμα φόντου: διαφανές; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ ) /** * 1. Αφαιρέστε το κάτω περίγραμμα στο Chrome 57- και στον Firefox 39- . * 2. Προσθέστε το σωστό διακόσμηση κειμένου σε Chrome, Edge, IE, Opera και Safari. */ abbr ( border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline με τελείες ` από τον επόμενο κανόνα στο Safari 6. */ b, ισχυρό ( font-weight: inherit; ) /** * Προσθέστε το σωστό βάρος γραμματοσειράς στο Chrome, το Edge και το Safari. */ b, ισχυρό ( βάρος γραμματοσειράς: πιο έντονη; ) /** * 1. Διορθώστε την κληρονομικότητα και την κλιμάκωση του μεγέθους της γραμματοσειράς σε όλα τα προγράμματα περιήγησης. * 2. Διορθώστε το περίεργο μέγεθος γραμματοσειράς «em» σε όλα τα προγράμματα περιήγησης. */ code, kbd, samp ( font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ ) /** * Προσθέστε το σωστό στυλ γραμματοσειράς στο Android 4.3-. */ dfn ( στυλ γραμματοσειράς: πλάγια; ) /** * Προσθέστε το σωστό φόντο και χρώμα στον IE 9-. */ σημάδι ( χρώμα φόντου: #ff0; χρώμα: #000; ) /** * Προσθέστε το σωστό μέγεθος γραμματοσειράς σε όλα τα προγράμματα περιήγησης. */ small ( μέγεθος γραμματοσειράς: 80%; ) /** * Αποτρέψτε τα στοιχεία «sub» και «sup» να επηρεάσουν το ύψος γραμμής σε * όλα τα προγράμματα περιήγησης. */ sub, sup ( μέγεθος γραμματοσειράς: 75%; ύψος γραμμής: 0; θέση: σχετική; κατακόρυφη στοίχιση: γραμμή βάσης; ) sub ( κάτω: -0,25em; ) sup ( επάνω: -0,5em; ) /* Ενσωματωμένο περιεχόμενο ============================================= == ======================== */ /** * Προσθέστε τη σωστή οθόνη στο IE 9-. */ ήχος, βίντεο ( οθόνη: inline-block; ) /** * Προσθέστε τη σωστή οθόνη στο iOS 4-7. */ audio:not() ( εμφάνιση: καμία; ύψος: 0; ) /** * Αφαιρέστε το περίγραμμα των εικόνων μέσα σε συνδέσμους στον IE 10-. */ img ( border-style: none; ) /** * Απόκρυψη της υπερχείλισης στον IE. */ svg:not(:root) ( υπερχείλιση: κρυφό; ) /* Φόρμες =============================== ======================================== */ /** * Αφαιρέστε το περιθώριο σε Firefox και Safari. Κουμπί */, είσοδος, ομάδα επιλογής, επιλογή, περιοχή κειμένου ( περιθώριο: 0; ) /** * Εμφάνιση της υπερχείλισης στον IE. * 1. Εμφάνιση της υπερχείλισης στο Edge. Κουμπί */, είσοδος ( /* 1 */ υπερχείλιση: ορατό; ) /** * Καταργήστε την κληρονομικότητα του μετασχηματισμού κειμένου σε Edge, Firefox και IE. * 1. Καταργήστε την κληρονομικότητα του μετασχηματισμού κειμένου στον Firefox. Κουμπί */, επιλέξτε ( /* 1 */ μετατροπή κειμένου: κανένα; ) /** * 1. Αποτρέψτε ένα σφάλμα WebKit όπου το (2) καταστρέφει τα εγγενή στοιχεία ελέγχου «ήχου» και «βίντεο» * στο Android 4. * 2. Διορθώστε την αδυναμία διαμόρφωσης τύπων με δυνατότητα κλικ σε iOS και Safari. */ button, html , /* 1 */ , ( -webkit-appearance: button; /* 2 */ ) /** * Αφαιρέστε το εσωτερικό περίγραμμα και το padding στον Firefox. */ button::-moz-focus-inner, ::-moz-focus-inner, ::-moz-focus-inner, ::-moz-focus-inner (στυλ περιγράμματος: κανένα; padding: 0; ) /** * Επαναφέρετε τα στυλ εστίασης που δεν έχουν οριστεί από τον προηγούμενο κανόνα. */ button:-moz-focusring, :-moz-focusring, :-moz-focusring, :-moz-focusring ( περίγραμμα: 1px διακεκομμένο ButtonText; ) /** * 1. Διορθώστε την αναδίπλωση κειμένου σε Edge και IE. * 2. Διορθώστε την κληρονομικότητα των χρωμάτων από τα στοιχεία "fieldset" στο IE. * 3. Αφαιρέστε το padding, ώστε οι προγραμματιστές να μην παρασυρθούν όταν μηδενίζουν τα στοιχεία * "fieldset" σε όλα τα προγράμματα περιήγησης. */ υπόμνημα ( μέγεθος κουτιού: πλαίσιο-πλαίσιο; /* 1 */ χρώμα: κληρονομιά; /* 2 */ εμφάνιση: πίνακας; /* 1 */ μέγιστο πλάτος: 100%; /* 1 */ γέμιση: 0 ; /* 3 */ κενό διάστημα: κανονικό, /* 1 */ ) /** * 1. Προσθέστε τη σωστή οθόνη στον IE 9-. * 2. Προσθέστε τη σωστή κάθετη στοίχιση σε Chrome, Firefox και Opera. */ πρόοδος ( εμφάνιση: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ ) /** * Καταργήστε την προεπιλεγμένη κάθετη γραμμή κύλισης στο IE. */ textarea ( υπερχείλιση: αυτόματη; ) /** * 1. Προσθέστε το σωστό μέγεθος πλαισίου στον IE 10-. * 2. Αφαιρέστε το padding στο IE 10-. */ , ( μέγεθος πλαισίου: border-box; /* 1 */ padding: 0; /* 2 */ ) /** * Διορθώστε το στυλ του δρομέα των κουμπιών αύξησης και μείωσης στο Chrome. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button ( height: auto; ) /** * 1. Διορθώστε την περίεργη εμφάνιση στο Chrome και στο Safari. * 2. Διορθώστε το στυλ περιγράμματος στο Safari. */ ( -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ ) /** * Αφαιρέστε την εσωτερική επένδυση και τα κουμπιά ακύρωσης στο Chrome και το Safari στο macOS. */ ::-webkit-search-cancel-button, ::-webkit-search-decoration ( -webkit-appearance: none; ) /** * 1. Διορθώστε την αδυναμία διαμόρφωσης στυλ τύπων με δυνατότητα κλικ σε iOS και Safari. * 2. Αλλάξτε τις ιδιότητες γραμματοσειράς σε «κληρονομιά» στο Safari. */ ::-webkit-file-upload-button ( -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ ) /* Interactive ============ ========================================================================== =========== */ /* * Προσθέστε τη σωστή οθόνη στον IE 9-. * 1. Προσθέστε τη σωστή οθόνη στο Edge, IE και Firefox. */ λεπτομέρειες, /* 1 */ μενού ( εμφάνιση: μπλοκ; ) /* * Προσθέστε τη σωστή εμφάνιση σε όλα τα προγράμματα περιήγησης. */ σύνοψη ( εμφάνιση: στοιχείο λίστας; ) /* Σενάριο ==================================== =================================== */ /** * Προσθέστε τη σωστή οθόνη στο IE 9- . */ καμβάς ( εμφάνιση: inline-block; ) /** * Προσθέστε τη σωστή οθόνη στον IE. */ πρότυπο ( εμφάνιση: κανένα; ) /* Κρυφό =================================== == ================================== */ /** * Προσθέστε τη σωστή οθόνη στο IE 10- . */ ( οθόνη: καμία; )
Επαναφορά μέσω γενικού επιλογέα * (αστερίσκος)
Με την πρώτη ματιά, αυτή μπορεί να φαίνεται σαν η απλούστερη και πιο επιτυχημένη λύση, γιατί να περιγράψετε όλα τα στοιχεία HTML και να τους εκχωρήσετε τιμές, όταν μπορείτε να χρησιμοποιήσετε τον επιλογέα *, επειδή ισχύει για όλα τα HTML.
* ( περιθώριο: 0, γέμιση: 0; )
Αλλά δυστυχώς αυτό δεν είναι καλή πρακτική. Είναι πολύ δύσκολο (και χρονοβόρο σε σύγκριση με άλλες επαναφορές CSS) για το πρόγραμμα περιήγησης να εφαρμόζει κανόνες σε κάθε στοιχείο ενός εγγράφου, ειδικά σε μεγάλες ιστοσελίδες, και μπορεί επίσης να σπάσει πολλά καλά προεπιλεγμένα στυλ.
Επαναφορά στυλ και WordPress
Εάν θέλετε να χρησιμοποιήσετε ένα από τα τις παραπάνω μεθόδουςεπαναφέρετε τα στυλ CSS για έναν ιστότοπο WordPress, τότε αυτό μπορεί να γίνει με δύο τρόπους.
Το πρώτο είναι ότι πρέπει να αντιγράψετε τον κώδικα επαναφοράς στην κορυφή του αρχείου style.css του θέματος WordPress σας (μετά από τις γραμμές σχετικά με την πατρότητα και το όνομα του θέματος, δηλαδή μετά το κείμενο που πλαισιώνεται από ένα κλάσμα και έναν αστερίσκο /* … */ .
@import "reset.css";
Εάν υπάρχει μια οδηγία @import στο CSS, τότε θα πρέπει να βρίσκεται στην αρχή του πίνακα (πριν από όλους τους κανόνες). Διαφορετικά, το πρόγραμμα περιήγησης μπορεί να το αγνοήσει.
Από την άλλη πλευρά, προκειμένου να βελτιωθούν οι επιδόσεις, Πίνακες CSSτα στυλ, κατά κανόνα, αντίθετα, συνδυάζονται σε ένα αρχείο. Επομένως, η χρήση του @import χωρίς πραγματική ανάγκη δεν αξίζει τον κόπο.
Όπως μπορείτε να δείτε, η επαναφορά στυλ στο WordPress δεν είναι κάτι το ιδιαίτερο.
Ευχαριστώ
Για τη συγγραφή αυτού του άρθρου χρησιμοποιήθηκαν οι ακόλουθες πηγές.
Από προεπιλογή, το πρόγραμμα περιήγησης ορίζει τις δικές του ρυθμίσεις για ορισμένες ιδιότητες στο css. Αλλά το πρόβλημα εδώ είναι ότι υπάρχουν πολλά προγράμματα περιήγησης ιστού και ο καθένας μπορεί να ορίσει τους δικούς του κανόνες. Ποια λύση; Μάθετε πώς να επαναφέρετε τις ρυθμίσεις css στις προεπιλογές και να τις αντικαταστήσετε με τις δικές σας. Αλλά αυτό το άρθρο θα αφιερωθεί στο πώς μπορεί να γίνει αυτό.
Επαναφορά CSS ή Επαναφορά προεπιλογών
Το CSS Reset είναι ένα σύνολο στυλ που επαναφέρει ορισμένες παραμέτρους, εγκατεστημένο από το πρόγραμμα περιήγησηςΠροκαθορισμένο. Κάθε προγραμματιστής ιστού γράφει αυτό το αρχείο για τον εαυτό του ξεχωριστά και κάποιος παίρνει μια έτοιμη λύση. Από εδώ προτείνω να ξεκινήσω. Υπάρχουν πολλές καλές επιλογές επαναφοράς στυλ, αλλά η αγαπημένη μου είναι αυτή του Eric Meyer:
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
Άδεια χρήσης: καμία (δημόσιος τομέας)
*/
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;
γέμιση: 0;
περίγραμμα: 0;
μέγεθος γραμματοσειράς: 100%
γραμματοσειρά: inherit;
κατακόρυφη στοίχιση: γραμμή βάσης;
}
/* Επαναφορά ρόλων οθόνης HTML5 για παλαιότερα προγράμματα περιήγησης */
άρθρο, εκτός, λεπτομέρειες, figcaption, σχήμα,
υποσέλιδο, κεφαλίδα, hgroup, μενού, πλοήγηση, ενότητα (
display:block;
}
σώμα (
Ύψος γραμμής: 1;
}
ol, ul (
στιλ λίστας: κανένας;
}
μπλοκ εισαγωγικά, q (
εισαγωγικά: κανένας;
}
blockquote:before, blockquote:after,
q:πριν, q:μετά (
περιεχόμενο: "";
περιεχόμενο: κανένα;
}
τραπέζι (
σύνορα-κατάρρευση: κατάρρευση;
διάστιχο: 0;
}
Θα σχολιάσω λίγο τον κωδικό. Πρώτον, επαναφέρει τα εσωτερικά και εξωτερικά περιθώρια για όλα τα απαραίτητα στοιχεία. Δεύτερον, υπάρχει υποστήριξη για στοιχεία HTML5. Έχουν έναν κανόνα που τους επιτρέπει να εμφανίζονται σωστά σε ορισμένες εκδόσεις προγραμμάτων περιήγησης. Τρίτον, οι τυπικές ρυθμίσεις για βολική λειτουργίαμε πίνακες (καταργήθηκαν οι εσοχές μεταξύ των κελιών και τα διπλά περιγράμματα). Επίσης, οι τυπικοί δείκτες για λίστες και εισαγωγικά για εισαγωγικά έχουν απορριφθεί. Αυτά τα μέρη του κώδικα θα πρέπει να αφαιρεθούν εάν θέλετε να χρησιμοποιήσετε το προεπιλεγμένο στυλ.
Πώς να επαναφέρετε μόνοι σας τις ρυθμίσεις css
Με μια περισσότερο ή λιγότερο κανονική κατοχή css, μπορείτε να προσπαθήσετε να γράψετε μόνοι σας μερικούς κανόνες. Για παράδειγμα:
*{
περιθώριο: 0;
γέμιση: 0;
}
Αυτό είναι ίσως το πιο απλή εντολή. Ο αστερίσκος σε αυτήν την περίπτωση αντιπροσωπεύει όλους τους επιλογείς, επομένως τα στυλ θα εφαρμοστούν σε όλα τα στοιχεία της ιστοσελίδας, επαναφέροντας τα περιθώρια και την αναπλήρωσή τους. Θα εκπλαγείτε, αλλά αυτές οι απλές γραμμές κώδικα μπορεί να είναι αρκετές για να παρέχουν συμβατότητα μεταξύ προγραμμάτων περιήγησης σε πολλά προγράμματα περιήγησης ιστού. Όλοι οι άλλοι κανόνες μπορούν να προστεθούν κατά βούληση. Συνιστώ επίσης να προσθέσετε το display: block σε όλες τις ετικέτες HTML5.
Πού να τοποθετήσετε τους κανόνες επαναφοράς css
Εδώ παραπάνω σας πρόσφερα τον κωδικό, αλλά πού να τον εισάγετε; Υπάρχουν δύο επιλογές εδώ:
- Επικολλήστε το στην αρχή του κύριου φύλλου στυλ στον ιστότοπό σας
- Δημιουργήστε ένα νέο αρχείο css στον διακομιστή και αποθηκεύστε τον κώδικα σε αυτό, στη συνέχεια αποθηκεύστε και συνδεθείτε σε όλες τις σελίδες ΠΡΙΝο βασικός πίνακας στυλ.css.
Για περισσότερες πληροφορίες σχετικά με τη σύνδεση του φύλλου στυλ css σε html βλ
Κατά τη γνώμη μου, η δεύτερη επιλογή είναι χειρότερη επειδή επιδεινώνει την απόδοση προσθέτοντας ένα επιπλέον αρχείο στη λήψη. Από την άλλη πλευρά, θα είναι πιο εύκολο για εσάς να διαχειριστείτε αυτούς τους κανόνες. Αλλά για λόγους απόδοσης, συνιστώ να χρησιμοποιήσετε την πρώτη επιλογή.
Η επαναφορά των ρυθμίσεων είναι ένα από τα μέτρα για τη διασφάλιση της συμβατότητας μεταξύ προγραμμάτων περιήγησης του ιστότοπου, δηλαδή της ίδιας εμφάνισης σε διαφορετικά προγράμματα περιήγησης ιστού. Φυσικά, δεν είναι όλα τα μέτρα που θα εξασφαλίσουν το ίδιο εμφάνιση, για τα υπόλοιπα θα γράψω στο μέλλον σε αυτό το blog. Εγγραφείτε εάν ενδιαφέρεστε.
Από τον συγγραφέα:Η δημιουργία ιστοσελίδων στον Ιστό μπορεί να είναι σαν να χτίζετε σε κινούμενη άμμο. Τα προγράμματα περιήγησης κάνουν το ίδιο πράγμα, αλλά κάθε τόσο έχουν ενοχλητικά απρόβλεπτες διαφορές. Για παράδειγμα, όλα τα προγράμματα περιήγησης έχουν "φύλλα στυλ πράκτορας χρήστη' είναι ένα σύνολο προεπιλεγμένων στυλ CSS για να κάνει την επικεφαλίδα να μοιάζει με επικεφαλίδα κ.λπ., ακόμη και πριν αντιστοιχίσετε στυλ στη σελίδα1. Φυσικά, κάθε μηχανή προγράμματος περιήγησης χρησιμοποιεί ελαφρώς διαφορετικά προεπιλεγμένα σύνολα.
Ένα παράδειγμα ήταν τα προεπιλεγμένα στυλ λίστας, όπου αρχικά τα προεπιλεγμένα φύλλα στυλ προγράμματος περιήγησης του Internet Explorer και της Opera είχαν εσοχή λίστας περιθώριο-αριστερά: 30 pt;, ενώ ο Firefox και το KHTML ήρθαν με padding-left: 40 px;. Εάν θέλατε να αλλάξετε την προεπιλεγμένη συμπλήρωση ορίζοντας ul (padding-left: 0;), τότε αυτό οδήγησε σε πολύ διαφορετικά αποτελέσματα στα προγράμματα περιήγησης.
ΕΠΑΝΑΦΟΡΑ ΡΥΘΜΙΣΕΩΝ CSS
Για να επιτύχουν λίγη σταθερότητα, ορισμένοι προγραμματιστές επαναφέρουν όλα τα περιθώρια και την πλήρωση με έναν γενικό επιλογέα:
* (περιθώριο: 0, γέμιση: 0;)
* ( περιθώριο : 0 ; padding : 0 ; ) |
Δημιουργώντας εσοχές στη λίστα και ξεκινώντας το φύλλο στυλ σας από εκεί, θα λάβετε αυτό που περιμένετε. Ωστόσο, η χρήση του * σήμαινε ότι το προεπιλεγμένο περιθώριο και το padding "έσπασαν" για όλα τα στοιχεία και μόλις προσθέσατε το στοιχείο φόρμας, έγινε πολύ δύσκολο.
Ο σκοπός της επαναφοράς είναι να επαναφέρετε όλα όσα μπορείτε… [και] να χρησιμεύσουν ως αφετηρία για τα δικά σας βασικά στυλ.- Έρικ Μάγιερ
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 , αντικείμενο , 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 γέμιση: 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: unstyled με Meyer Reset και Normalize.css εκδόσεις 1 και 2:
Στοιχείο "Χωρίς στιλ" μιας μη ταξινομημένης λίστας
Εφαρμόστε το Meyer Reset
Εφαρμόστε το Normalize.css v1
Εφαρμογή Normalize.css v2
Υπάρχει μια σαφής διαφορά στη φιλοσοφία όπου το παράδειγμα του Meyer Reset εμφανίζεται ως μερικές γραμμές απλού κειμένου χωρίς περιθώρια, padding ή κουκκίδες, ενώ τα παραδείγματα Normalize.css είναι παρόμοια με τα προεπιλεγμένα στυλ. Η διαφορά στο στυλ που εφαρμόζεται σε αυτό το ul είναι επίσης εύκολα αισθητή.
Ωστόσο, αυτά δεν είναι όλα τα στυλ που εφαρμόζονται στο ul. Για σύγκριση, εδώ είναι το ίδιο στιγμιότυπο οθόνης "χωρίς στυλ", αλλά με ορατά στυλ πρακτόρων χρήστη, σε Firefox 21 και Opera Next 15.