Ο σημερινός περιηγητής ιστού έρχεται πολύ μακριά από τις τρελές μέρες, όπου κάθε είδους διασταυρούμενη περιήγηση του browser ήταν επιθυμητή σκέψη. Τα σημερινά προγράμματα περιήγησης ιστού είναι συμβατά με όλα τα πρότυπα. Παίζουν όμορφα μαζί και παρέχουν μια αρκετά συνεπή προβολή σελίδων στα διάφορα προγράμματα περιήγησης. Αυτό περιλαμβάνει τις τελευταίες εκδόσεις του Google Chrome, του Microsoft Edge, του Mozilla Firefox, του Opera, του Safari και των διαφόρων προγραμμάτων περιήγησης που βρέθηκαν στις μυριάδες των κινητών συσκευών που χρησιμοποιούνται για την πρόσβαση στον ιστότοπο σήμερα.
Παρόλο που έχει σημειωθεί πρόοδος όσον αφορά τα προγράμματα περιήγησης ιστού και τον τρόπο εμφάνισης του CSS, εξακολουθούν να υπάρχουν ασυνέπειες μεταξύ αυτών των διαφόρων επιλογών λογισμικού. Μία από τις κοινές ασυνέπειες είναι ο τρόπος με τον οποίο τα προγράμματα περιήγησης υπολογίζουν τα περιθώρια, τα περιβλήματα και τα σύνορα από προεπιλογή.
Λόγω αυτών των πτυχών του αποτελέσματος μοντέλου κουτιού όλα τα στοιχεία HTML και επειδή είναι απαραίτητα για τη δημιουργία των σελίδων, μια ασυνεπής οθόνη σημαίνει ότι μια σελίδα μπορεί να φαίνεται μεγάλη σε ένα πρόγραμμα περιήγησης, αλλά να φαίνεται ελαφρώς μακριά σε ένα άλλο. Για την καταπολέμηση αυτού του προβλήματος, πολλοί σχεδιαστές ιστοσελίδων εξομαλύνουν αυτές τις πτυχές του μοντέλου κουτιού. Αυτή η πρακτική είναι επίσης γνωστή ως "μηδενισμός" των τιμών για τα περιθώρια, τα περιβλήματα και τα σύνορα.
Μια σημείωση σχετικά με τις προεπιλογές προγράμματος περιήγησης
Τα προγράμματα περιήγησης Web έχουν όλες προεπιλεγμένες ρυθμίσεις για ορισμένες πτυχές προβολής μιας σελίδας. Για παράδειγμα, οι υπερσυνδέσεις είναι μπλε και υπογραμμισμένες από προεπιλογή. Αυτό είναι συνεπές σε διάφορα προγράμματα περιήγησης και παρόλο που είναι κάτι που οι περισσότεροι σχεδιαστές αλλάζουν ώστε να ταιριάζουν στις σχεδιαστικές ανάγκες του συγκεκριμένου έργου τους, το γεγονός ότι όλες αρχίζουν με τις ίδιες προεπιλογές καθιστά ευκολότερη την πραγματοποίηση αυτών των αλλαγών. Δυστυχώς, η προεπιλεγμένη τιμή για περιθώρια, παραγεμίσματα και σύνορα δεν απολαμβάνει το ίδιο επίπεδο διασταυρωμένης συνοχής του προγράμματος περιήγησης.
Κανονικοποίηση τιμών για περιθώρια και παραμόρφωση
Ο καλύτερος τρόπος για να επιλύσετε το πρόβλημα του μοντέλου ασυνεπειών πλαισίου είναι να ορίσετε όλα τα περιθώρια και τις τιμές γεμίσματος των στοιχείων HTML στο μηδέν. Υπάρχουν μερικοί τρόποι που μπορείτε να κάνετε αυτό είναι να προσθέσετε αυτόν τον κανόνα CSS στο φύλλο στυλ σας:
* {περιθώριο: 0; padding: 0; }}Αυτός ο κανόνας CSS χρησιμοποιεί τον χαρακτήρα * ή μπαλαντέρ. Αυτός ο χαρακτήρας σημαίνει "όλα τα στοιχεία" και θα επέλεγε ουσιαστικά κάθε στοιχείο HTML και θα ορίσει τα περιθώρια και την παραμόρφωση στο 0. Ακόμα κι αν αυτός ο κανόνας είναι πολύ απροσδιόριστος, επειδή βρίσκεται στο εξωτερικό φύλλο στυλ, θα έχει μεγαλύτερη ειδικότητα από το προεπιλεγμένο πρόγραμμα περιήγησης τιμές. Δεδομένου ότι αυτές οι προεπιλογές είναι αυτό που αντικαθιστάτε, αυτό το ένα στυλ θα ολοκληρώσει αυτό που θέτετε να κάνετε.
Μια άλλη επιλογή είναι να εφαρμόσετε αυτές τις τιμές στα στοιχεία HTML και body. Επειδή όλα τα άλλα στοιχεία στη σελίδα σας θα είναι παιδιά αυτών των δύο στοιχείων, ο καταρράκτης CSS θα πρέπει να εφαρμόσει αυτές τις τιμές σε όλα αυτά τα άλλα στοιχεία.
html, σώμα {περιθώριο: 0; padding: 0; }}Αυτό θα ξεκινήσει το σχέδιό σας στο ίδιο σημείο σε όλα τα προγράμματα περιήγησης, αλλά ένα πράγμα που πρέπει να θυμάστε είναι ότι μόλις γυρίσετε όλα τα περιθώρια και τα μαξιλάρια μακριά, θα πρέπει να τα ενεργοποιήσετε εκλεκτικά για συγκεκριμένα μέρη της ιστοσελίδας σας για να επιτύχετε την εμφάνιση και αισθάνονται ότι το σχέδιό σας απαιτεί.
Σύνορα
Μπορεί να σκέφτεστε "αλλά κανένα πρόγραμμα περιήγησης δεν έχει σύνορα γύρω από το στοιχείο του σώματος από προεπιλογή". Αυτό δεν ισχύει αυστηρά. Οι παλαιότερες εκδόσεις του Internet Explorer έχουν διαφανή ή αόρατα σύνορα γύρω από στοιχεία. Εκτός αν ορίσετε το περίγραμμα στο 0, αυτό το περιθώριο μπορεί να βλάψει τις διατάξεις σελίδας σας. Αν έχετε αποφασίσει ότι θα συνεχίσετε να υποστηρίζετε αυτές τις απαρχαιωμένες εκδόσεις του IE, θα χρειαστεί να το αντιμετωπίσετε προσθέτοντας τα εξής στο σώμα και τα στυλ HTML:
HTML, σώμα {
περιθώριο: 0px;
padding: 0px;
σύνορα: 0px;
}}
Παρόμοια με τον τρόπο απενεργοποίησης των περιθωρίων και των παρεμβυσμάτων, αυτό το νέο στυλ θα απενεργοποιήσει επίσης τα προεπιλεγμένα σύνορα. Μπορείτε επίσης να κάνετε το ίδιο πράγμα χρησιμοποιώντας τον επιλογέα μπαλαντέρ που εμφανίζεται παραπάνω στο άρθρο.
Αρχικό άρθρο από την Jennifer Krynin. Επεξεργασμένο από τον Jeremy Girard στις 27/09/16.