Τα προθέματα προμηθευτών CSS, επίσης γνωστά ως προθέματα προγράμματος περιήγησης CSS, είναι ένας τρόπος για τους κατασκευαστές προγραμμάτων περιήγησης να προσθέσουν υποστήριξη για νέες δυνατότητες CSS προτού αυτές οι λειτουργίες υποστηρίζονται πλήρως σε όλα τα προγράμματα περιήγησης. Αυτό μπορεί να γίνει κατά τη διάρκεια μιας περιόδου δοκιμής και πειραματισμού όπου ο κατασκευαστής του προγράμματος περιήγησης καθορίζει ακριβώς πώς θα εφαρμοστούν αυτές οι νέες δυνατότητες CSS. Αυτά τα προθέματα έγιναν πολύ δημοφιλή με την άνοδο του CSS3 πριν από μερικά χρόνια.
Προέλευση προθεμάτων προμηθευτών
Όταν πρωτοεμφανίστηκε το CCS3, μια σειρά από ενθουσιασμένες ιδιότητες άρχισαν να χτυπούν διαφορετικά προγράμματα περιήγησης σε διαφορετικές χρονικές στιγμές. Για παράδειγμα, τα προγράμματα περιήγησης που υποστηρίζονται από το Webkit (Safari και Chrome) ήταν τα πρώτα που παρουσίασαν ορισμένες από τις ιδιότητες σε στυλ κινούμενης εικόνας, όπως μετασχηματισμός και μετάβαση. Χρησιμοποιώντας ιδιότητες με προκαθορισμένο προμηθευτή, οι σχεδιαστές ιστοσελίδων μπόρεσαν να χρησιμοποιήσουν αυτές τις νέες δυνατότητες στην εργασία τους και να τις δουν στα προγράμματα περιήγησης που τα υποστήριξαν αμέσως, αντί να πρέπει να περιμένουν κάθε άλλον κατασκευαστή προγράμματος περιήγησης!
Κοινά προθέματα
Έτσι, από την οπτική γωνία ενός προγραμματιστή web front-end, τα προθέματα του προγράμματος περιήγησης χρησιμοποιούνται για την προσθήκη νέων δυνατοτήτων CSS σε έναν ιστότοπο, ενώ έχουν άνεση γνωρίζοντας ότι τα προγράμματα περιήγησης θα υποστηρίζουν αυτά τα στυλ. Αυτό μπορεί να είναι ιδιαίτερα χρήσιμο όταν διαφορετικοί κατασκευαστές προγραμμάτων περιήγησης εφαρμόζουν ιδιότητες με ελαφρώς διαφορετικούς τρόπους ή με διαφορετική σύνταξη. Τα προθέματα του προγράμματος περιήγησης CSS που μπορείτε να χρησιμοποιήσετε (καθένα από αυτά είναι ειδικά για ένα διαφορετικό πρόγραμμα περιήγησης) είναι:
- Android: -webkit-
- Chrome: -webkit-
- Firefox: -moz-
- Internet Explorer: -ms-
- iOS: -webkit-
- Όπερα: -o-
- Safari: -webkit-
Προσθήκη προθέματος
Στις περισσότερες περιπτώσεις, για να χρησιμοποιήσετε μια ολοκαίνουργια ιδιότητα στυλ CSS, παίρνετε την τυπική ιδιότητα CSS και προσθέτετε το πρόθεμα για κάθε πρόγραμμα περιήγησης. Οι προκαθορισμένες εκδόσεις θα ήταν πάντα πρώτες (με οποιαδήποτε σειρά που προτιμάτε), ενώ η κανονική ιδιότητα CSS θα είναι τελευταία. Για παράδειγμα, εάν θέλετε να προσθέσετε μια μετάβαση CSS3 στο έγγραφό σας, θα χρησιμοποιήσετε την ιδιότητα μετάβασης όπως φαίνεται παρακάτω: -webkit-transition: all 4s easy;
-moz-μετάβαση: και οι 4s ευκολία
-ms-μετάβαση: όλα τα 4s ευκολία?
-o-μετάβαση: όλες οι ευκολίες 4s
μετάβαση: όλες οι ευκολίες 4s
class = «ql-syntax»> Θυμηθείτε, ορισμένα προγράμματα περιήγησης έχουν διαφορετική σύνταξη για συγκεκριμένες ιδιότητες από άλλες, οπότε μην υποθέσετε ότι η προκαθορισμένη έκδοση προγράμματος περιήγησης μιας ιδιότητας είναι ακριβώς η ίδια με την τυπική ιδιότητα. Για παράδειγμα, για να δημιουργήσετε μια διαβάθμιση CSS, χρησιμοποιείτε την ιδιότητα γραμμικής διαβάθμισης. Οι Firefox, Opera και σύγχρονες εκδόσεις Chrome και Safari χρησιμοποιούν αυτήν την ιδιότητα με το κατάλληλο πρόθεμα, ενώ οι πρώτες εκδόσεις Chrome και Safari χρησιμοποιούν την προκαθορισμένη ιδιότητα -webkit-gradient. Επίσης, ο Firefox χρησιμοποιεί διαφορετικές τιμές από τις τυπικές. Ο λόγος για τον οποίο τερματίζετε πάντα τη δήλωσή σας με την κανονική, μη προκαθορισμένη έκδοση της ιδιότητας CSS είναι ότι όταν ένα πρόγραμμα περιήγησης υποστηρίζει τον κανόνα, θα το χρησιμοποιεί. Θυμηθείτε πώς διαβάζεται το CSS. Οι τελευταίοι κανόνες υπερισχύουν των παλαιότερων εάν η ιδιαιτερότητα είναι η ίδια, οπότε ένα πρόγραμμα περιήγησης θα διαβάσει την έκδοση προμηθευτή ενός κανόνα και θα το χρησιμοποιήσει εάν δεν υποστηρίζει την κανονική, αλλά μόλις το κάνει, θα παρακάμψει την έκδοση προμηθευτή με τον πραγματικό κανόνα CSS.
Τα προθέματα προμηθευτών δεν είναι εισβολή
Όταν τα προθέματα προμηθευτών εισήχθησαν για πρώτη φορά, πολλοί επαγγελματίες του διαδικτύου αναρωτήθηκαν αν ήταν hack ή επιστροφή στις σκοτεινές μέρες της πλαστογράφησης κώδικα ενός ιστότοπου για την υποστήριξη διαφορετικών προγραμμάτων περιήγησης (θυμηθείτε ότι «Αυτός ο ιστότοπος εμφανίζεται καλύτερα στο IEΩστόσο, τα προθέματα προμηθευτών CSS δεν είναι hacks, και δεν πρέπει να έχετε επιφυλάξεις σχετικά με τη χρήση τους στην εργασία σας. Ένα hack CSS εκμεταλλεύεται ατέλειες στην εφαρμογή ενός άλλου στοιχείου ή ιδιοκτησίας προκειμένου να λειτουργήσει σωστά μια άλλη ιδιοκτησία. Για Για παράδειγμα, το hack model box εκμεταλλεύτηκε ατέλειες στην ανάλυση της οικογένειας φωνής ή στον τρόπο με τον οποίο τα προγράμματα περιήγησης αναλύουν τις ανάστροφες κάθετες . Αλλά αυτά τα hacks χρησιμοποιήθηκαν για να διορθώσουν το πρόβλημα της διαφοράς μεταξύ του τρόπου με τον οποίο ο Internet Explorer 5.5 χειρίστηκε το μοντέλο κουτιού και πώς το ερμήνευσε το Netscape , και δεν έχουν καμία σχέση με το φωνητικό οικογενειακό στυλ. Ευτυχώς, αυτά τα δύο ξεπερασμένα προγράμματα περιήγησης είναι αυτά που δεν χρειάζεται να ανησυχούμε για αυτές τις μέρες. Ένα πρόθεμα προμηθευτή δεν είναι χάκερ, επειδή επιτρέπει στην προδιαγραφή να ορίζει κανόνες για το πώς ένα η ιδιότητα μπορεί να εφαρμοστεί, ενώ ταυτόχρονα επιτρέπει στους κατασκευαστές προγραμμάτων περιήγησης να εφαρμόσουν μια ιδιότητα με διαφορετικό τρόπο χωρίς να σπάσουν τα πάντα. Επιπλέον, αυτά τα προθέματα λειτουργούν με ιδιότητες CSS που τελικά θα είναι μέρος της προδιαγραφής. Απλώς προσθέτουμε κάποιον κωδικό για να αποκτήσουμε πρόσβαση στο κατάλυμα νωρίς. Αυτός είναι ένας άλλος λόγος για τον οποίο τερματίζετε τον κανόνα CSS με την κανονική, μη προκαθορισμένη ιδιότητα. Με αυτόν τον τρόπο μπορείτε να αποθέσετε τις προκαθορισμένες εκδόσεις μόλις επιτευχθεί η πλήρης υποστήριξη του προγράμματος περιήγησης. Θέλετε να μάθετε ποια είναι η υποστήριξη του προγράμματος περιήγησης για μια συγκεκριμένη λειτουργία; Ο ιστότοπος CanIUse.com είναι ένας θαυμάσιος πόρος για τη συλλογή αυτών των πληροφοριών και για να σας ενημερώσουμε ποια προγράμματα περιήγησης και ποιες εκδόσεις αυτών των προγραμμάτων περιήγησης υποστηρίζουν αυτήν τη στιγμή μια δυνατότητα.
Τα προθέματα προμηθευτών είναι ενοχλητικά αλλά προσωρινά
Ναι, μπορεί να είναι ενοχλητικό και επαναλαμβανόμενο να γράφουμε τις ιδιότητες 2-5 φορές για να λειτουργήσει σε όλα τα προγράμματα περιήγησης, αλλά είναι μια προσωρινή κατάσταση. Για παράδειγμα, πριν από λίγα χρόνια, για να ορίσετε μια στρογγυλεμένη γωνία σε ένα κουτί που έπρεπε να γράψετε: -moz-border-radius: 10px 5px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 5px;
-webkit-border-κάτω-δεξιά-ακτίνα: 10px;
-webkit-border-κάτω-αριστερά-ακτίνα: 5px;
ακτίνα περιγράμματος: 10px 5px;
Αλλά τώρα που τα προγράμματα περιήγησης έχουν υποστηρίξει πλήρως αυτήν τη λειτουργία, χρειάζεστε πραγματικά μόνο την τυποποιημένη έκδοση: border-radius: 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 και κάτω δεν το υποστήριξε με ή χωρίς προθέματα). Να θυμάστε ότι τα προγράμματα περιήγησης θα αλλάζουν πάντα και θα απαιτούνται δημιουργικές προσεγγίσεις για την υποστήριξη παλαιότερων προγραμμάτων περιήγησης, εκτός εάν σκοπεύετε να δημιουργήσετε ιστοσελίδες που είναι χρόνια πίσω από τις πιο σύγχρονες μεθόδους. Στο τέλος, η σύνταξη προθεμάτων προγράμματος περιήγησης είναι πολύ ευκολότερη από την εύρεση και την εκμετάλλευση σφαλμάτων που πιθανότατα θα διορθωθεί σε μια μελλοντική έκδοση, απαιτώντας να βρείτε ένα άλλο σφάλμα για εκμετάλλευση και ούτω καθεξής.