Όπως γνωρίζετε, υπάρχουν πολλά περισσότερα για την οικοδόμηση ιστοσελίδων που ανταποκρίνονται περισσότερο σε σχέση με το πλάτος. Χρειάζεστε αισθητήρες που σας δίνουν ανατροφοδότηση για να προσαρμόσετε τοποθεσίες βάσει άλλων παραγόντων.
Ο καλύτερος τρόπος για να βελτιώσετε την ανατροφοδότηση από τον αισθητήρα ή το πρόγραμμα περιήγησης του χρήστη σας είναι χρησιμοποιώντας μια βιβλιοθήκη JavaScript που ονομάζεται Modernizr. Σε αυτό το άρθρο θα σας εξηγήσω γιατί, όταν υπερβείτε το πλάτος, το Modernizr είναι ένα τόσο ανεκτίμητο εργαλείο.
Στην ανάπτυξη του front-end, οι προγραμματιστές χρησιμοποίησαν για να προσαρμόσουν έναν ιστότοπο ώστε να ταιριάζουν στους περιορισμούς του μηχανισμού διάταξης που χρησιμοποιείται από ένα συγκεκριμένο πρόγραμμα περιήγησης. Το 2003, υπήρχαν μόνο τρία προγράμματα περιήγησης: Netscape, Internet Explorer και Opera. Το Firefox, το Safari και το πρώτο πρόγραμμα περιήγησης για κινητά, το Opera Mini, κυκλοφόρησαν το 2005. Το Chrome δεν κυκλοφόρησε μέχρι το 2008.
Αυτή τη στιγμή υπάρχουν πέντε μεγάλα προγράμματα περιήγησης, το καθένα με τη δική του έκδοση για κινητά. Σε ολόκληρη τη σειρά των προγραμμάτων περιήγησης, υπάρχουν και παλαιότερες εκδόσεις που δεν έχουν αναβαθμιστεί από τους χρήστες. Με τον ίδιο τρόπο που η δημιουργία πολλαπλών σχημάτων για πολλαπλά μεγέθη οθόνης τελικά γίνεται παιχνίδι με μηδενικό άθροισμα, δημιουργεί επίσης πολλαπλά μπροστινά άκρα για πολλαπλά προγράμματα περιήγησης.
Χρησιμοποιούμε ανταποκρινόμενο σχεδιασμό ιστοσελίδων για να φιλοξενήσουμε νέα, πρωτοποριακά προγράμματα περιήγησης για κινητά. Όμως, ενώ φιλοξενεί νέα προγράμματα περιήγησης, είναι σημαντικό να μην το κάνετε σε βάρος των παλαιότερων φυλλομετρητών.
Ιστορικά, η βελτιστοποίηση έρχεται ως προϊόν δημιουργίας ενός ιστότοπου για τα πιο δημοφιλή προγράμματα περιήγησης και στη συνέχεια μικροαλλαγές για να διασφαλιστεί ότι η τοποθεσία θα φαίνεται το ίδιο σε μια σειρά από δημοφιλή προγράμματα περιήγησης. Τα σχέδια θα πρέπει να ικανοποιούν τις δυνατότητες όλων των προγραμμάτων περιήγησης.
Η προοδευτική βελτίωση είναι μια στρατηγική για την αντιμετώπιση της αδυναμίας των browsers να υποστηρίξουν σύγχρονα χαρακτηριστικά. Υπάρχει ένας πειρασμός να δημιουργηθεί για τα πιο σύγχρονα χαρακτηριστικά, αλλά σε ένα ανταποκρινόμενο ιστό, ο σχεδιασμός ενός ιστότοπου είναι συμφραζόμενο με το πλαίσιο που βλέπει κανείς. Ο υπεύθυνος σχεδιασμός ιστοσελίδων έχει γίνει δημοφιλής επειδή επιλύει το πιο εμφανές μεταβαλλόμενο πλαίσιο - το μέγεθος του πλαισίου - αλλά το πλαίσιο ενός προγράμματος περιήγησης λειτουργεί πολύ πιο βαθιά από το μέγεθος του παραθύρου προβολής.
Το SVG κάνει μια εξαιρετική λύση για οθόνες υψηλής ανάλυσης, αλλά τι γίνεται με την υποστήριξή του σε παλαιότερα προγράμματα περιήγησης; Δεν υποστηρίζεται σε IE 8 ή παλαιότερη, οπότε πρέπει να δημιουργήσετε μια εναλλακτική λύση αν υποστηρίζετε αυτό το πρόγραμμα περιήγησης. Θα μπορούσατε να προσδιορίσετε το πρόγραμμα περιήγησης και να χρησιμοποιήσετε εναλλακτικά στυλ έναντι αυτού του προγράμματος περιήγησης, αλλά θα πρέπει να εξυπηρετήσετε αυτά τα ίδια εναλλακτικά στυλ για κάθε πρόγραμμα περιήγησης που δεν υποστηρίζει SVG.
Δεν θα ήταν ευκολότερο να γράψετε ένα στυλ που θα μπορούσε να χρησιμοποιηθεί σε κάθε πρόγραμμα περιήγησης που δεν υποστήριζε το SVG; Με αυτόν τον τρόπο, δεν θα χρειαστεί να παρακολουθείτε τις αναφορές σφαλμάτων από χρήστες παλαιότερων εκδόσεων. Θα μπορούσατε μόνο να ρυθμίσετε το fallback μία φορά και να το ξεχάσετε.
Παραδοσιακά, η ανίχνευση χαρακτηριστικών ολοκληρώθηκε αν εντοπιστεί ο πράκτορας χρήστη του προγράμματος περιήγησης. Αυτό γίνεται μέσω JavaScript, χρησιμοποιώντας το αντικείμενο πλοηγού. Το αντικείμενο πλοήγησης χρονολογείται από τις ημέρες Netscape και χρησιμοποιήθηκε ως το καλύτερο εργαλείο του προγραμματιστή στη συμβατότητα μεταξύ των προγραμμάτων περιήγησης.
Αν έχετε Chrome και έχετε ενεργοποιήσει το DevTools, ανοίξτε τον επιθεωρητή ιστού του προγράμματος περιήγησης κάνοντας δεξί κλικ σε μια σελίδα και επιλέγοντας Επιθεώρηση στοιχείου. Στη συνέχεια, κάντε κλικ στην κονσόλα και, μετά την καρφίτσα, πληκτρολογήστε "navigator.userAgent" και πατήστε Enter. Αυτό θα επιστρέψει τον τρέχοντα παράγοντα χρήστη του τρέχοντος προγράμματος περιήγησης, που είναι μια σειρά κειμένου που χρησιμοποιείται για την αναγνώριση του χρησιμοποιούμενου προγράμματος περιήγησης. Το Chrome επιστρέφει τα εξής:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.35 (KHTML, like Gecko) Chrome/27.0.1443.2 Safari/537.35Με πολλούς τρόπους, το αντικείμενο πλοήγησης είναι ένας από τους καλύτερους αισθητήρες που έχουμε στη διάθεσή μας για να ενημερώσουμε το σύστημά μας για το τι είναι ικανό ο χρήστης μας. Ωστόσο, δεν είναι πολύ φιλικό προς το μέλλον. Βασίζει τους ενεργοποιητές του ιστότοπού σας σε πολλές υποθέσεις σχετικά με το τι κάνει και δεν υποστηρίζει το πρόγραμμα περιήγησης. Είναι επίσης αναξιόπιστο επειδή οι χρήστες μπορούν να τις ρυθμίσουν ώστε να έχουν πρόσβαση σε ιστότοπους που ενδέχεται να μην είναι σε θέση να υποστηρίξουν το πρόγραμμα περιήγησης.
Το Modernizr είναι μια βιβλιοθήκη JavaScript που χρησιμοποιείται για την ανίχνευση λειτουργιών στο πρόγραμμα περιήγησης. Είναι φορτωμένο στην κεφαλή της σελίδας σας και εκτελείται κατά τη φόρτωση σελίδας. Η προσθήκη του στον ιστότοπό σας είναι τόσο απλή όσο η προσθήκη οποιασδήποτε άλλης βιβλιοθήκης JavaScript, όπως το jQuery, αλλά μόλις προστεθεί, ο Modernizer σάς προσφέρει απίστευτο έλεγχο κατά την απόδοση της σελίδας σας και εξασφαλίζοντας ότι κάθε χρήστης θα έχει μια ποιοτική εμπειρία.
Αφού φορτωθεί, το Modernizr εκτελεί μια σειρά ελέγχων κατά του προγράμματος περιήγησης του χρήστη για να καθορίσει ποιες λειτουργίες υποστηρίζει το πρόγραμμα περιήγησης και δημιουργεί ένα αντικείμενο JavaScript το οποίο μπορείτε να το χρησιμοποιήσετε για να δοκιμάσετε. Το Modernizr δεν δημιουργεί υποστήριξη για αυτά τα χαρακτηριστικά. απλώς σας δίνει έναν τρόπο να παρέχετε εναλλακτική υποστήριξη για σύγχρονα χαρακτηριστικά. Για παράδειγμα, στην περίπτωση του SVG, το Modernizr μας επιτρέπει να παρέχουμε μια εφεδρική εικόνα για προγράμματα περιήγησης που δεν διαθέτουν υποστήριξη SVG.
Το Modernizr εφαρμόζει επίσης ένα σύνολο κατηγοριών στην ετικέτα HTML, δίνοντάς σας τη δυνατότητα να τροποποιήσετε το CSS της σελίδας χρησιμοποιώντας τις αντίστοιχες τάξεις CSS. Αυτές οι κλάσεις CSS σάς επιτρέπουν να χρησιμοποιείτε συστήματα CSS για την κατασκευή ενεργοποιητών που θα προσαρμόζουν τις σελίδες σας ώστε να επιτρέπουν στα προοδευτικά βελτιωτικά που είναι διαθέσιμα για μια σελίδα.
Σε αντίθεση με τη χρήση του User Agent, το Modernizr ανιχνεύει άμεσα τις λειτουργίες εκτελώντας μια σειρά από δοκιμές JavaScript που επιστρέφουν τιμές boolean (true ή false). Αυτό υπαγορεύει τις κατηγορίες που έχουν οριστεί στην ετικέτα html και σας δίνει τη δυνατότητα να χρησιμοποιήσετε το JavaScript για να ανιχνεύσετε αν υπάρχει διαθέσιμη μια δυνατότητα.
Η εγκατάσταση του Modernizr είναι τόσο απλή όσο η σύνδεση με τη βιβλιοθήκη JavaScript στην κεφαλή της σελίδας σας, αλλά όπου η διαδικασία εγκατάστασης γίνεται πολύπλοκη, δημιουργεί την έκδοση που χρειάζεστε. Το Modernizr είναι διαθέσιμο για λήψη σε δύο εκδόσεις, την έκδοση ανάπτυξης και την έκδοση παραγωγής.
Η έκδοση ανάπτυξης είναι ένα πλήρες 42 KB, μη συμπιεσμένο αρχείο. Αυτή η έκδοση είναι μεγάλη αν είστε πολύ έμπειροι στο JavaScript και θέλετε να κάνετε κάποια tweaks στις δοκιμές που εκτελεί. Επειδή είναι ασυμπίεστη, είναι εύκολο να διαβαστεί και να αυξηθεί, αλλά είναι καλύτερα να αφεθεί στους προγραμματιστές με πλήρη κατανόηση του JavaScript.
Για όσους από εσάς μπορεί να μην είστε πλήρως έμπειροι στο JavaScript ή θέλετε να δημιουργήσετε γρήγορα μια προσαρμοσμένη έκδοση του Modernizr, εδώ θα τεθεί σε λειτουργία η έκδοση παραγωγής της βιβλιοθήκης. Το εργαλείο δημιουργίας έκδοσης παραγωγής στον ιστότοπο σας δίνει τη δυνατότητα να δημιουργήσετε μια έκδοση με μόνο τις δοκιμές που χρειάζεστε.
Αυτό είναι χρήσιμο όταν ξέρετε ότι χρειάζεστε μόνο ένα συγκεκριμένο σύνολο δοκιμών. Για παράδειγμα, ο ιστότοπός σας ενδέχεται να μην εκμεταλλεύεται τις σκιές κουτιού CSS, αλλά ίσως χρειαστεί να υποστηρίξει κλίσεις CSS. Χρησιμοποιώντας το εργαλείο δημιουργίας, μπορείτε να συμπεριλάβετε τις δοκιμές που χρειάζεστε και να αποκλείσετε εκείνες που δεν χρειάζεστε, διατηρώντας την περικοπή πηγαίου κώδικα και τον συνολικό χρόνο φόρτωσης του χρήστη σας προς τα κάτω.
Για παράδειγμα, θα δουλέψω την έκδοση ανάπτυξης. Βρίσκω ότι όταν κάνω ένα site, είναι καλύτερο να δουλέψω με την πλήρη έκδοση και στη συνέχεια, μόλις μάθεις ποιες λειτουργίες θα χρησιμοποιήσεις στον ιστότοπό σου, κόβεις την έκδοση κάτω.
Ας κάνουμε κάποια απλή ανίχνευση χαρακτηριστικών με το Modernizr. Θα ξεκινήσουμε με έναν ωμό δείγμα ιστότοπου.
Ας χρησιμοποιήσουμε αυτή τη μικρή δοκιμή για να εντοπίσουμε αν το πρόγραμμα περιήγησης είναι ικανό να υποστηρίζει SVG. Για λόγους απλότητας, θα προσθέσουμε στη σελίδα δύο ετικέτες για την ανίχνευση υποστήριξης.
Huzzah! You have SVG support.BOO! You don't have SVG support.Εάν το δοκιμάσετε σε ένα πρόγραμμα περιήγησης που υποστηρίζει το SVG, θα δείτε το μήνυμα "Huzzah! Έχετε υποστήριξη από το SVG ", ενώ αν έχετε ένα πρόγραμμα περιήγησης που δεν υποστηρίζει SVG, θα βρείτε το" BOO! Δεν έχετε υποστήριξη SVG ".
Αυτό το παράδειγμα είναι αρκετά υποτυπώδες, αλλά εμφανίζει την ιδέα του πυρήνα της χρήσης του Modernizr για να διορθώσει τα ζητήματα του cross browser. Αν κάναμε αυτή την ίδια διόρθωση χρησιμοποιώντας τη μέθοδο του παλιού πράκτορα χρήστη, θα έπρεπε να έχουμε ένα φύλλο στυλ για κάθε πρόγραμμα περιήγησης που δεν υποστηρίζει SVG και να αλλάξει το CSS για καθένα. (Για όσους ενδιαφέρονται, οι μόνοι μεγάλοι φυλλομετρητές που δεν διαθέτουν υποστήριξη SVG είναι ο Internet Explorer 7 και κάτω.)
Με την προσθήκη της κλάσης svg / no-svg στο html της σελίδας, το CSS σας διαθέτει τώρα έναν επιλογέα που μπορεί να χρησιμοποιηθεί για να αντικαταστήσει τους υπάρχοντες κανόνες CSS. Επειδή βρίσκεται στην πιο πάνω ετικέτα γονέα, μπορεί να χρησιμοποιηθεί για να αντικαταστήσει άλλες κλάσεις στη σελίδα.
Έτσι, σε αυτή την περίπτωση, και οι δύο ετικέτες span εμφανίζονται: none ;. Εάν δεν υπάρχει υποστήριξη SVG, η εμφάνιση: ένθετη ένδειξη στην ετικέτα εύρους με την κλάση .no υπερισχύει στην οθόνη: κρυφή χάρη στον κανόνα no-svg στην ετικέτα html.
Ας δοκιμάσουμε ένα πιο χρήσιμο παράδειγμα της ίδιας ιδέας. Μπορούμε να θέλουμε να έχουμε μια εικόνα φόντου SVG στη σελίδα, η οποία επιστρέφει σε PNG, αν το πρόγραμμα περιήγησης δεν υποστηρίζει το SVG. Από προεπιλογή θα χρησιμοποιήσουμε την εικόνα PNG. Με αυτό τον τρόπο, το SVG δεν εξυπηρετείται αν δεν είναι απαραίτητο και γίνεται προοδευτική ενίσχυση.
Τώρα έχουμε ένα φοβερό SVG κρανίο που θα φανεί τρομερό και ευκρινές για τους χρήστες με οθόνες υψηλής ανάλυσης και εξακολουθεί να φαίνεται καλό για χρήστες με παλαιότερα προγράμματα περιήγησης.
Υπάρχει ένας μεγάλος πλούτος πληροφοριών για την εκμάθηση του Modernizr. Σας παρουσιάσαμε πώς κάνει το έργο των δυνατοτήτων cross-browser χωρίς να χρειάζεται να θυμάστε ή να διατηρήσετε έναν τρέχοντα κατάλογο των browsers που υποστηρίζουν το SVG.
Λειτουργεί κατ 'εξαίρεση ως σύστημα με το οποίο θα εξυπηρετεί τους ενεργοποιητές των χρηστών σας για τη δημιουργία γρήγορων και άκρως λειτουργικών ιστοσελίδων.
Χρησιμοποιείτε το Modernizr στα σχέδιά σας; Ποιες άλλες μέθοδοι χρησιμοποιήσατε για την παροχή ανταποκριτικού περιεχομένου; Ενημερώστε μας στα σχόλια.
Προτεινόμενη εικόνα / μικρογραφία, εικόνα απόκλισης γραμμών μέσω Shutterstock.