CSS Reset: ιστοσελίδες με ένα ύφος πραγματικά cross-browser

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

CSS Reset: τι είναι και τι είναι

Δημιουργία πλήρως σταυρό σελίδες web browser είναι ένα πρόβλημα που, εδώ και αρκετά χρόνια (δηλαδή όταν ο Internet Explorer δεν είναι πλέον ένα μερίδιο αγοράς 95%) επηρεάζει όλα τα σχεδιαστές ιστοσελίδων. Αλλά ακόμα και όταν το αποτέλεσμα είναι συμβατό με όλα τα προγράμματα περιήγησης (δεν έχετε, δηλαδή, δυσλειτουργίες ή ελαττώματα οθόνη μπορεί να επηρεάσει την χρηστικότητα της υπηρεσίας), η παραγωγή της ιστοσελίδας θα είναι σχεδόν πάντα διαφορετική ανάλογα με το αν αντιμετωπίζεται με IExplorer , Firefox, Safari, Chrome και Opera.

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

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

CSS Reset: μια απλή λύση

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

 



 * {



  



 περιθώριο: 0?



  



 padding: 0?







 }

 

ή:

 



 * {



  



 περιθώριο: 0?



  



 padding: 0?



  



 συνόρων: 0 κανένας?



  



 περίγραμμα: 0?







 }

 

ή, πιο περίπλοκα:

 



 * {

 

  



 κάθετη-align: αρχική τιμή?



  



 font-weight: κληρονομούν?



  



 font-family: κληρονομούν?



  



 font-style: κληρονομούν?



  



 font-size: 100%?



  



 περιθώριο: 0?



  



 padding: 0?



  



 συνόρων: 0 κανένας?



  



 περίγραμμα: 0?







 }

 

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

• <<
• 1
• 2
• >>