Τα προγράμματα περιήγησης στο Web έχουν γύρω από τη στιγμή που οι ιστότοποι έχουν. Στην πραγματικότητα, τα προγράμματα περιήγησης αποτελούν βασικό συστατικό της εμπειρίας ή των ανθρώπων που βλέπουν τον ιστότοπό σας - αλλά δεν δημιουργούνται εξίσου όλα τα προγράμματα περιήγησης. Είναι απολύτως εφικτό (και μάλλον αρκετά πιθανό) να έχουν οι πελάτες να βλέπουν τις ιστοσελίδες σας σε προγράμματα περιήγησης τα οποία είναι εξαιρετικά παλιά και λείπουν τα χαρακτηριστικά που βρίσκονται σε πιο σύγχρονα προγράμματα περιήγησης. Αυτό μπορεί να δημιουργήσει σημαντικά προβλήματα καθώς προσπαθείτε να αναπτύξετε ιστότοπους που επωφελούνται από τις τελευταίες εξελίξεις στον σχεδιασμό και την ανάπτυξη ιστοτόπων . Αν κάποιος έρχεται στον ιστότοπό σας χρησιμοποιώντας ένα από αυτά τα παλαιότερα προγράμματα περιήγησης και οι τελευταίες σας προηγμένες τεχνικές δεν δουλεύουν γι 'αυτούς, θα μπορούσατε να προσφέρετε μια κακή εμπειρία συνολικά. Η προοδευτική βελτίωση είναι μια στρατηγική διαχείρισης του σχεδιασμού ιστοσελίδων για διαφορετικά προγράμματα περιήγησης, συγκεκριμένα εκείνων των παλιών φυλλομετρητών που στερούνται σύγχρονης υποστήριξης.
Η προοδευτική βελτίωση είναι ένας τρόπος σχεδιασμού ιστοσελίδων έτσι ώστε όσο περισσότερες λειτουργίες υποστηρίζει ένας πράκτορας χρήστη, τόσο περισσότερες δυνατότητες θα έχει η ιστοσελίδα. Είναι το αντίθετο της στρατηγικής σχεδίασης που είναι γνωστή ως χαλαρή υποβάθμιση . Αυτή η στρατηγική δημιουργεί πρώτα σελίδες για τα πιο σύγχρονα προγράμματα περιήγησης και στη συνέχεια διασφαλίζει ότι λειτουργούν αρκετά καλά με λιγότερο λειτουργικά προγράμματα περιήγησης - ότι η εμπειρία "υποβαθμίζεται χαριτωμένα". Η προοδευτική βελτίωση αρχίζει με τα λιγότερο ικανά προγράμματα περιήγησης και δημιουργεί μια εμπειρία από εκεί.
Πώς να χρησιμοποιήσετε την προοδευτική βελτίωση
Όταν δημιουργείτε ένα σχέδιο ιστού χρησιμοποιώντας προοδευτική ενίσχυση, το πρώτο πράγμα που θα κάνετε είναι να δημιουργήσετε ένα σχέδιο που να λειτουργεί για τον χαμηλότερο κοινό παρονομαστή των προγραμμάτων περιήγησης ιστού. Στον πυρήνα της, η προοδευτική βελτίωση αναφέρει ότι το περιεχόμενό σας θα πρέπει να είναι διαθέσιμο σε όλα τα προγράμματα περιήγησης ιστού, όχι μόνο ένα υποσύνολο.Αυτός είναι ο λόγος για τον οποίο αρχίζετε υποστηρίζοντας αυτά τα παλιά, ξεπερασμένα και λιγότερο ικανά προγράμματα περιήγησης.Αν δημιουργήσετε έναν ιστότοπο που λειτουργεί καλά για αυτούς, ξέρετε ότι έχετε δημιουργήσει μια γραμμή βάσης που θα πρέπει να προσφέρει τουλάχιστον μια χρήσιμη εμπειρία σε όλους τους επισκέπτες.
Όταν ξεκινάτε πρώτα με τα λιγότερο ικανά προγράμματα περιήγησης, θα θέλετε να διασφαλίσετε ότι όλα τα HTML σας θα είναι έγκυρα και σωστά σωστά. Αυτό θα βοηθήσει να διασφαλιστεί ότι η ευρύτερη ποικιλία πράκτορων χρηστών μπορούν να προβάλουν τη σελίδα και να την εμφανίσουν με ακρίβεια.
Θυμηθείτε ότι τα στυλ οπτικού σχεδιασμού και η συνολική διάταξη σελίδας προστίθενται χρησιμοποιώντας εξωτερικά φύλλα στυλ . Αυτό είναι πραγματικά όπου συμβαίνει η προοδευτική ενίσχυση. Χρησιμοποιείτε το φύλλο στυλ για να δημιουργήσετε ένα σχέδιο ιστότοπου που λειτουργεί για όλους τους επισκέπτες. Στη συνέχεια, μπορείτε να προσθέσετε επιπλέον στυλ για να βελτιώσετε τη σελίδα καθώς οι πράκτορες χρήστη αποκτούν λειτουργικότητα. Ο καθένας παίρνει τα βασικά στυλ, αλλά για κάθε πρόγραμμα περιήγησης ειδήσεων που μπορεί να υποστηρίξει τα πιο προηγμένα και πιο μοντέρνα στυλ, παίρνουν κάποια επιπλέον. Μπορείτε να "βελτιώσετε προοδευτικά" τη σελίδα για προγράμματα περιήγησης που μπορούν να υποστηρίξουν αυτά τα στυλ.
Υπάρχουν μερικοί τρόποι με τους οποίους μπορείτε να εφαρμόσετε προοδευτική βελτίωση. Πρώτα απ 'όλα, πρέπει να σκεφτείτε τι κάνει ο περιηγητής αν δεν κατανοεί μια γραμμή CSS - το αγνοεί! Αυτό λειτουργεί πραγματικά υπέρ σας. Εάν δημιουργήσετε ένα σύνολο γραμμών βασικών γραμμών που κατανοούν όλα τα προγράμματα περιήγησης, μπορείτε να προσθέσετε επιπλέον στυλ για νέα προγράμματα περιήγησης. Αν υποστηρίζουν τα στυλ, θα τα εφαρμόσουν. Αν όχι, θα τα αγνοήσουν και θα χρησιμοποιήσουν μόνο αυτά τα βασικά στυλ. Ένα απλό παράδειγμα προοδευτικής ενίσχυσης μπορεί να δει σε αυτό το CSS:
.κυρίως περιεχόμενο {
background: # 999;
υπόβαθρο: rgba (153,153,153, .75);
}}
Αυτό το στυλ θέτει πρώτα το φόντο σε ένα γκρι χρώμα. Ο δεύτερος κανόνας χρησιμοποιεί τιμές χρώματος RGBA για να ορίσει ένα επίπεδο διαφάνειας. Εάν ένα πρόγραμμα περιήγησης υποστηρίζει RGBA, θα αντικαταστήσει το πρώτο στυλ με το δεύτερο. Αν όχι, θα εφαρμοστεί μόνο το πρώτο. Έχετε ορίσει ένα βασικό χρώμα και στη συνέχεια προσθέσατε επιπλέον στυλ για πιο σύγχρονα προγράμματα περιήγησης.
Χρησιμοποιώντας τις λειτουργίες ερωτήματος
Ένας άλλος τρόπος με τον οποίο μπορείτε να εφαρμόσετε προοδευτική βελτίωση είναι να χρησιμοποιήσετε τα γνωστά ως "ερωτήματα χαρακτηριστικών". Αυτά είναι παρόμοια με τα ερωτήματα των μέσων ενημέρωσης , τα οποία είναι ένα ουσιαστικό κομμάτι των ανταποκρινόμενων σχεδίων ιστοτόπων . Ενώ τα μέσα διερεύνησης κειμένου για συγκεκριμένα μεγέθη οθόνης, τα ερωτήματα των δυνατοτήτων θα ελέγχουν εάν μια συγκεκριμένη λειτουργία υποστηρίζεται ή όχι. Η σύνταξη που χρησιμοποιείτε είναι:
@supports (εμφάνιση: flex) {}Οποιαδήποτε στυλ που προσθέσατε σε αυτόν τον κανόνα θα λειτουργούσε μόνο αν το πρόγραμμα περιήγησης υποστηρίζει το "flex", το οποίο είναι τα στυλ για το Flexbox. Θα μπορούσατε να ορίσετε ένα σύνολο κανόνων για όλους και, στη συνέχεια, να χρησιμοποιήσετε ερωτήματα χαρακτηριστικών για να προσθέσετε επιπλέον για επιλεγμένα προγράμματα περιήγησης μόνο.
Αρχικό άρθρο από την Jennifer Krynin. Επεξεργασμένο από τον Jeremy Girard στις 12/12/16.