Τι είναι και γιατί πρέπει να τα χρησιμοποιήσετε
Τα προθέματα προμηθευτών CSS, επίσης γνωστά ως προθέματα του προγράμματος περιήγησης CSS , είναι ένας τρόπος για τους κατασκευαστές περιηγητών να προσθέσουν υποστήριξη για νέες λειτουργίες CSS προτού αυτές οι λειτουργίες υποστηρίζονται πλήρως σε όλα τα προγράμματα περιήγησης. Αυτό μπορεί να γίνει κατά τη διάρκεια μιας περιόδου δοκιμών και πειραματισμού όπου ο κατασκευαστής του προγράμματος περιήγησης καθορίζει ακριβώς πώς θα εφαρμοστούν αυτές οι νέες δυνατότητες CSS. Αυτά τα προθέματα έγιναν πολύ δημοφιλή με την άνοδο του CSS3 πριν από μερικά χρόνια.
Όταν το CCS3 εισήχθη για πρώτη φορά, μια σειρά από ενθουσιασμένες ιδιότητες άρχισαν να χτυπούν διαφορετικά προγράμματα περιήγησης σε διαφορετικές χρονικές στιγμές. Για παράδειγμα, τα προγράμματα περιήγησης που χρησιμοποιούν το webkit (Safari και Chrome) ήταν τα πρώτα που εισήγαγαν κάποιες από τις ιδιότητες του στυλ κινουμένων σχεδίων όπως ο μετασχηματισμός και η μετάβαση. Χρησιμοποιώντας τις ιδιότητες των πωλητών, οι σχεδιαστές ιστοσελίδων μπόρεσαν να χρησιμοποιήσουν αυτά τα νέα χαρακτηριστικά στη δουλειά τους και να τα δουν στα προγράμματα περιήγησης που τα υποστήριζαν αμέσως, αντί να περιμένουν να φθάσουν όλοι οι άλλοι κατασκευαστές του προγράμματος περιήγησης!
Έτσι, από την οπτική γωνία ενός web developer front-end, τα προθέματα του προγράμματος περιήγησης χρησιμοποιούνται για να προσθέσουν νέες λειτουργίες CSS σε έναν ιστότοπο ενώ έχουν άνεση γνωρίζοντας ότι τα προγράμματα περιήγησης θα υποστηρίζουν αυτά τα στυλ. Αυτό μπορεί να είναι ιδιαίτερα χρήσιμο όταν διάφοροι κατασκευαστές προγραμμάτων περιήγησης εφαρμόζουν ιδιότητες με ελαφρώς διαφορετικούς τρόπους ή με διαφορετική σύνταξη.
Τα προθέματα του προγράμματος περιήγησης CSS που μπορείτε να χρησιμοποιήσετε (το καθένα από τα οποία είναι συγκεκριμένα σε διαφορετικό πρόγραμμα περιήγησης) είναι:
- Android: -webkit-
- Chrome: -webkit-
- Firefox: -moz-
- Internet Explorer: -ms-
- iOS: -webkit-
- Όπερα: -ο-
- Safari: -webkit-
Στις περισσότερες περιπτώσεις, για να χρησιμοποιήσετε μια εντελώς νέα ιδιότητα στυλ CSS, παίρνετε την τυπική ιδιότητα CSS και προσθέτετε το πρόθεμα για κάθε πρόγραμμα περιήγησης. Οι προκαθορισμένες εκδόσεις θα έρχονταν πάντα πρώτη (με οποιαδήποτε σειρά προτιμάτε) ενώ η κανονική ιδιότητα CSS θα έρθει τελευταία. Για παράδειγμα, εάν θέλετε να προσθέσετε μια μετάβαση CSS3 στο έγγραφό σας, θα χρησιμοποιήσατε την ιδιότητα μετάβασης όπως φαίνεται παρακάτω:
-webkit- transition: όλα 4s ευκολία?
-moz- transition: όλα 4s ευκολία?
-Μετάβαση : όλα 4s ευκολία?
--μετάβαση : όλα 4s ευκολία?
μετάβαση: όλα 4s ευκολία?
Σημείωση: Να θυμάστε ότι ορισμένα προγράμματα περιήγησης έχουν διαφορετική σύνταξη για ορισμένες ιδιότητες από ό, τι άλλα, οπότε μην υποθέτετε ότι η έκδοση του προτύπου προγράμματος περιήγησης μιας ιδιότητας είναι ακριβώς η ίδια με την τυπική ιδιότητα. Για παράδειγμα, για να δημιουργήσετε μια κλίση CSS , χρησιμοποιείτε την ιδιότητα linear-gradient. Ο Firefox, το Opera και οι σύγχρονες εκδόσεις του Chrome και του Safari χρησιμοποιούν αυτήν την ιδιότητα με το κατάλληλο πρόθεμα, ενώ οι πρώτες εκδόσεις του Chrome και του Safari χρησιμοποιούν την προκαθορισμένη ιδιότητα -webkit-gradient. Επίσης, ο Firefox χρησιμοποιεί διαφορετικές τιμές από τις τυπικές.
Ο λόγος που τερματίζετε πάντα τη δήλωσή σας με την κανονική, μη προρυθμισμένη έκδοση της ιδιότητας CSS είναι ότι όταν ένα πρόγραμμα περιήγησης υποστηρίζει τον κανόνα, θα το χρησιμοποιήσει. Θυμηθείτε πώς διαβάζεται το CSS. Οι τελευταίοι κανόνες υπερισχύουν των παλαιότερων, αν η ιδιαιτερότητα είναι ίδια, έτσι ώστε ένα πρόγραμμα περιήγησης να διαβάσει την έκδοση προμηθευτή ενός κανόνα και να το χρησιμοποιήσει εάν δεν υποστηρίζει το κανονικό, αλλά μόλις το κάνει, θα αντικαταστήσει την έκδοση του προμηθευτή με τον πραγματικό κανόνα CSS.
Τα προθέματα προμηθευτών δεν είναι ένα hack
Όταν τα προθέματα των πωλητών παρουσιάστηκαν για πρώτη φορά, πολλοί επαγγελματίες του διαδικτύου αναρωτήθηκαν αν ήταν ένα hack ή μια στροφή πίσω στις σκοτεινές μέρες του να κωλύουν τον κώδικα ενός ιστοτόπου για να υποστηρίξουν διαφορετικά προγράμματα περιήγησης (θυμάστε αυτά τα μηνύματα " Αυτή η τοποθεσία εμφανίζεται καλύτερα στα IE "). Ωστόσο, τα προθέματα των προμηθευτών CSS δεν είναι hacks, και δεν θα πρέπει να έχετε επιφυλάξεις σχετικά με τη χρήση τους στο έργο σας.
Ένα hack του CSS εκμεταλλεύεται ελαττώματα στην υλοποίηση ενός άλλου στοιχείου ή ιδιότητας προκειμένου να αποκτήσει μια άλλη ιδιότητα να λειτουργεί σωστά. Για παράδειγμα, το μοντέλο hack εκμεταλλεύτηκε ελαττώματα στην ανάλυση της ιδιότητας της φωνητικής οικογένειας ή στο πώς αναλύουν τα προγράμματα περιήγησης backslash (\). Αλλά αυτά τα hacks χρησιμοποιήθηκαν για να διορθώσουν το πρόβλημα της διαφοράς μεταξύ του τρόπου με τον οποίο ο Internet Explorer 5.5 χειρίστηκε το μοντέλο κουτιού και το πώς το ερμήνευσε το Netscape και δεν έχουν καμία σχέση με το στυλ οικογενειακής φωνής. Ευτυχώς, αυτά τα δύο ξεπερασμένα προγράμματα περιήγησης είναι αυτά που δεν έχουμε ανησυχίες οι ίδιοι με αυτές τις μέρες.
Το πρόθεμα ενός προμηθευτή δεν είναι hack, επειδή επιτρέπει στις προδιαγραφές να ορίσει κανόνες για τον τρόπο με τον οποίο μπορεί να υλοποιηθεί μια ιδιότητα, ενώ παράλληλα επιτρέπει στους κατασκευαστές περιηγητών να εφαρμόσουν μια ιδιότητα με διαφορετικό τρόπο χωρίς να σπάσουν τα πάντα. Επιπλέον, αυτά τα προθέματα λειτουργούν με ιδιότητες CSS που τελικά θα αποτελούν μέρος της προδιαγραφής . Προσθέτουμε απλώς κάποιο κωδικό για να πάρουμε πρόωρη πρόσβαση στην ιδιοκτησία. Αυτός είναι ένας ακόμα λόγος για τον οποίο τερματίζετε τον κανόνα CSS με την κανονική ιδιότητα μη προθέρμανσης. Με αυτόν τον τρόπο μπορείτε να αποθέσετε τις προρυθμισμένες εκδόσεις μόλις επιτευχθεί πλήρης υποστήριξη προγράμματος περιήγησης.
Θέλετε να μάθετε ποια είναι η υποστήριξη του προγράμματος περιήγησης για μια συγκεκριμένη λειτουργία; Ο ιστότοπος CanIUse.com είναι ένας υπέροχος πόρος για τη συγκέντρωση αυτών των πληροφοριών και για να σας ενημερώσουμε ποια προγράμματα περιήγησης και ποιες εκδόσεις αυτών των προγραμμάτων περιήγησης υποστηρίζουν αυτήν τη στιγμή μια λειτουργία.
Τα προθέματα προμηθευτών είναι ενοχλητικά αλλά προσωρινά
Ναι, μπορεί να αισθάνεται ενοχλητικό και επαναλαμβανόμενο να γράφει τις ιδιότητες 2-5 φορές για να το δουλέψει σε όλα τα προγράμματα περιήγησης, αλλά είναι μια προσωρινή κατάσταση. Για παράδειγμα, πριν από λίγα χρόνια, για να ορίσετε μια στρογγυλεμένη γωνία σε ένα κουτί, έπρεπε να γράψετε:
-moz-ακτίνα-ακτίνα: 10px 5px;
-webkit-όριο-κορυφή-αριστερά-ακτίνα: 10px;
-webkit-περιθώριο-κορυφή-δεξιά-ακτίνα: 5px;
-webkit-περίγραμμα-κάτω-δεξιά-ακτίνα: 10px;
-webkit-περίγραμμα-κάτω-αριστερά-ακτίνα: 5px;
ακτίνα ακτίνας: 10px 5px;
Αλλά τώρα που τα προγράμματα περιήγησης έχουν έρθει να υποστηρίξουν πλήρως αυτό το χαρακτηριστικό, χρειάζεστε πραγματικά μόνο την τυποποιημένη έκδοση:
ακτίνα ακτίνας: 10px 5px;
Το Chrome έχει υποστηρίξει την ιδιότητα CSS3 από την έκδοση 5.0, ο Firefox το πρόσθεσε στην έκδοση 4.0, το Safari το πρόσθεσε στο 5.0, το Opera στο 10.5, το iOS στο 4.0 και το Android στο 2.1. Ακόμη και ο Internet Explorer 9 το υποστηρίζει χωρίς πρόθεμα (και το IE 8 και το χαμηλότερο δεν το υποστήριζαν με ή χωρίς προθέματα).
Θυμηθείτε ότι τα προγράμματα περιήγησης θα αλλάζουν πάντα και θα απαιτηθούν δημιουργικές προσεγγίσεις για την υποστήριξη παλαιότερων φυλλομετρητών, εκτός αν προγραμματίζετε να δημιουργείτε ιστοσελίδες που βρίσκονται πίσω από τις πιο σύγχρονες μεθόδους. Στο τέλος, η εγγραφή προθέτων του προγράμματος περιήγησης είναι πολύ πιο εύκολη από την εύρεση και την αξιοποίηση σφαλμάτων τα οποία πιθανότατα θα διορθωθούν σε μια μελλοντική έκδοση, απαιτώντας να βρείτε κάποιο άλλο σφάλμα για εκμετάλλευση κ.ο.κ.