Τι είναι τα προθέματα CSS Vendor ή Browser;

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

Προέλευση προθεμάτων προμηθευτών

Όταν κυκλοφόρησε για πρώτη φορά το CCS3, ένας αριθμός ενθουσιασμένων ιδιοτήτων άρχισε να χτυπά διαφορετικά προγράμματα περιήγησης σε διαφορετικές χρονικές στιγμές. Για παράδειγμα, τα προγράμματα περιήγησης που υποστηρίζονται από το Webkit (Safari και Chrome) ήταν τα πρώτα που παρουσίασαν ορισμένες από τις ιδιότητες σε στυλ κινούμενης εικόνας, όπως μετασχηματισμός και μετάβαση. Χρησιμοποιώντας προθέματα προμηθευτή

ιδιότητες, οι σχεδιαστές ιστοσελίδων μπόρεσαν να χρησιμοποιήσουν αυτές τις νέες δυνατότητες στη δουλειά τους και να τις δουν στα προγράμματα περιήγησης που τους υποστήριζε αμέσως, αντί να πρέπει να περιμένουμε να πιάσει κάθε άλλος κατασκευαστής προγράμματος περιήγησης πάνω!

Κοινά προθέματα

Έτσι, από την οπτική γωνία ενός προγραμματιστή web front-end, τα προθέματα του προγράμματος περιήγησης χρησιμοποιούνται για την προσθήκη νέων δυνατοτήτων CSS σε έναν ιστότοπο, ενώ έχουν άνεση γνωρίζοντας ότι τα προγράμματα περιήγησης θα υποστηρίζουν αυτά τα στυλ. Αυτό μπορεί να είναι ιδιαίτερα χρήσιμο όταν διαφορετικοί κατασκευαστές προγραμμάτων περιήγησης εφαρμόζουν ιδιότητες με ελαφρώς διαφορετικούς τρόπους ή με διαφορετική σύνταξη.

Τα προθέματα του προγράμματος περιήγησης CSS που μπορείτε να χρησιμοποιήσετε (καθένα από αυτά είναι ειδικά για ένα διαφορετικό πρόγραμμα περιήγησης) είναι:

• Android:

  -webkit-

• Χρώμιο:

  -webkit-

• Firefox:

  -μοζ

• Internet Explorer:

  -Κυρία-

• iOS:

  -webkit-

• ΛΥΡΙΚΗ ΣΚΗΝΗ:

  -ο-

• Σαφάρι:

  -webkit-

Προσθήκη προθέματος

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

-webkit-μετάβαση: και τα 4s ευκολία
-moz-μετάβαση: και οι 4s ευκολία
-ms-μετάβαση: όλα τα 4s ευκολία?
-o-μετάβαση: όλες οι ευκολίες 4s
μετάβαση: όλες οι ευκολίες 4s 

Θυμηθείτε, ορισμένα προγράμματα περιήγησης έχουν διαφορετική σύνταξη για συγκεκριμένες ιδιότητες από άλλες, οπότε μην υποθέσετε ότι η προκαθορισμένη έκδοση προγράμματος περιήγησης μιας ιδιότητας είναι ακριβώς η ίδια με την τυπική ιδιότητα. Για παράδειγμα, για να δημιουργήσετε μια διαβάθμιση CSS, χρησιμοποιείτε την ιδιότητα γραμμικής διαβάθμισης. Οι Firefox, Opera και σύγχρονες εκδόσεις Chrome και Safari χρησιμοποιούν αυτήν την ιδιότητα με το κατάλληλο πρόθεμα, ενώ οι πρώτες εκδόσεις Chrome και Safari χρησιμοποιούν την προκαθορισμένη ιδιότητα -webkit-gradient.

Επίσης, ο Firefox χρησιμοποιεί διαφορετικές τιμές από τις τυπικές.

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

Τα προθέματα προμηθευτών δεν είναι εισβολή

Όταν τα προθέματα προμηθευτών εισήχθησαν για πρώτη φορά, πολλοί επαγγελματίες του διαδικτύου αναρωτήθηκαν αν ήταν hack ή επιστρέψτε στις σκοτεινές μέρες της διακλάδωσης του κώδικα μιας ιστοσελίδας για υποστήριξη διαφορετικών προγραμμάτων περιήγησης (θυμηθείτε αυτό "Αυτός ο ιστότοπος εμφανίζεται καλύτερα στο IE"μήνυμα). Τα προθέματα προμηθευτών CSS δεν είναι hacks, ωστόσο, και δεν πρέπει να έχετε επιφυλάξεις σχετικά με τη χρήση τους στην εργασία σας.

Ένα hack CSS εκμεταλλεύεται ατέλειες στην εφαρμογή ενός άλλου στοιχείου ή ιδιοκτησίας, προκειμένου να λειτουργήσει σωστά μια άλλη ιδιότητα. Για παράδειγμα, το hack box box εκμεταλλεύτηκε ατέλειες στην ανάλυση της οικογένειας φωνής ή στον τρόπο με τον οποίο τα προγράμματα περιήγησης αναλύουν τις ανάστροφες κάθετες \. Αλλά αυτές οι παραβιάσεις χρησιμοποιήθηκαν για να διορθώσουν το πρόβλημα της διαφοράς μεταξύ του τρόπου με τον οποίο ο Internet Explorer 5.5 χειρίστηκε το μοντέλο κουτιού και πώς Netscape το ερμήνευσε και δεν έχει καμία σχέση με το στυλ της οικογένειας φωνής. Ευτυχώς, αυτά τα δύο ξεπερασμένα προγράμματα περιήγησης είναι αυτά που δεν χρειάζεται να ανησυχούμε με αυτές τις μέρες.

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

Τα προθέματα προμηθευτών είναι ενοχλητικά αλλά προσωρινά

Ναι, μπορεί να είναι ενοχλητικό και επαναλαμβανόμενο να πρέπει να γράφετε τις ιδιότητες 2-5 φορές για να λειτουργήσει σε όλα τα προγράμματα περιήγησης, αλλά είναι μια προσωρινή κατάσταση. Για παράδειγμα, πριν από λίγα χρόνια, για να ορίσετε μια στρογγυλεμένη γωνία σε ένα κουτί που έπρεπε να γράψετε:

-moz-border-radius: 10px 5px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 5px;
-webkit-border-κάτω-δεξιά-ακτίνα: 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 και το χαμηλότερο δεν το υποστηρίζει με ή χωρίς προθέματα).

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