Διάταξη μεταξύ προγραμμάτων περιήγησης. Διάταξη πολλαπλών προγραμμάτων περιήγησης σε σύγχρονες συνθήκες - μια γενική κατανόηση της απαραίτητης αρχής
Κατά τη δημιουργία ενός ιστότοπου, ειδικά εάν ο στόχος είναι να γίνει φιλικός προς τον χρήστη, η συμβατότητα μεταξύ προγραμμάτων περιήγησης ή συμβατότητα με διαφορετικά προγράμματα περιήγησης είναι ένα από τα πιο συνηθισμένα προβλήματα που αντιμετωπίζουν οι προγραμματιστές ιστού.
Εν ολίγοις, η "συμβατότητα μεταξύ προγραμμάτων περιήγησης" συνεπάγεται την ίδια εμφάνιση και λειτουργικότητα του έργου όταν προβάλλεται σε οποιοδήποτε από τα πιο κοινά προγράμματα περιήγησης ιστού. Αυτή είναι σίγουρα μια από τις πιο δύσκολες και ταυτόχρονα σημαντικές πτυχές που πρέπει να λάβετε υπόψη κατά τη διαδικασία σχεδιασμού της ιστοσελίδας.
Για παράδειγμα, ορισμένες δυνατότητες CSS3 δεν υποστηρίζονται ακόμη από όλα τα μεγάλα προγράμματα περιήγησης και ορισμένες δεν υποστηρίζονται καθόλου, γεγονός που μπορεί να οδηγήσει σε σοβαρά προβλήματα απόδοσης. Επιπλέον, μερικές φορές δεν μιλάμε καν για διαφορετικούς προγραμματιστές προγράμματος περιήγησης, αλλά για διαφορετικές εκδόσεις του ίδιου προγράμματος περιήγησης. 
Μία από τις επιλογές για την επίλυση του προβλήματος με τη χρήση του CSS είναι η δημιουργία αρχείων τροποποιημένου στυλ για διαφορετικά προγράμματα περιήγησης και η φόρτωσή τους ανάλογα με το ποιο χρησιμοποιείται αυτήν τη στιγμή από τον επισκέπτη.
Φυσικά, η προοπτική να εγκαταστήσετε πολλά προγράμματα περιήγησης ταυτόχρονα και να ασχολείστε με αυτά κάθε φορά για να δοκιμάσετε την εμφάνιση των αναπτυγμένων σελίδων είναι απίθανο να αρέσει σε κανέναν. Επομένως, αξίζει να δώσετε προσοχή σε αυτοματοποιημένες λύσεις.
Μπορείτε να ελέγξετε την εμφάνιση του ιστότοπου χρησιμοποιώντας εξειδικευμένες υπηρεσίες που σας επιτρέπουν να δείτε πώς θα φαίνεται η διάταξη των σελίδων στα πιο κοινά προγράμματα περιήγησης και σε διαφορετικές αναλύσεις οθόνης. 
Μια άλλη σημαντική τάση που ήρθε σε εμάς από τη Δύση και κερδίζει ενεργά δυναμική στο RuNet είναι η προσαρμοστική σχεδίαση (διάταξη) ή η σχεδίαση με απόκριση.
Με την ευρεία χρήση smartphone και tablet, ο αριθμός των προβλημάτων που πρέπει να επιλύσει ένας προγραμματιστής ιστού έχει αυξηθεί σημαντικά. Αρκεί να δημιουργήσετε μόνο μια έκδοση για υπολογιστές του ιστότοπου ή να στοχεύσετε και άλλες πλατφόρμες; Πρέπει να περιοριστούμε στην έκδοση για κινητά ή να αναπτύξουμε μια πρόσθετη έκδοση για tablet; Τι γίνεται με συσκευές υψηλής ευκρίνειας όπως το iPad με οθόνη Retina; Όλα τα παραπάνω ζητήματα μπορούν να επιλυθούν με τη χρήση προσαρμοστικής διάταξης. 
Η ουσία αυτού του σχεδιασμού είναι να προσαρμόζει την εμφάνιση και τη δομή του περιεχομένου ανάλογα με τη συσκευή στην οποία το βλέπει ο χρήστης αυτήν τη στιγμή. Δηλαδή, ο ιστότοπος θα φαίνεται εξίσου καλός τόσο σε επιτραπέζιο υπολογιστή ή φορητό υπολογιστή όσο και στην οθόνη ενός tablet ή smartphone. Η διάταξη των διαφόρων μπλοκ θα αλλάξει ανάλογα με το πώς προοριζόταν από τους δημιουργούς του. Έτσι, επιτυγχάνεται η πολλαπλή πλατφόρμα, η οποία έχει θετική επίδραση στην εμπειρία του χρήστη από την εργασία με τον πόρο. 
Η προσαρμοστική διάταξη ορίζεται από μια προσέγγιση που προϋποθέτει ότι ένας ιστότοπος που σχεδιάστηκε από προγραμματιστές πρέπει να ανταποκρίνεται στη συμπεριφορά των χρηστών και στο περιβάλλον στο οποίο χρησιμοποιείται, λαμβάνοντας υπόψη χαρακτηριστικά όπως η ανάλυση και ο προσανατολισμός της οθόνης, καθώς και η πλατφόρμα που χρησιμοποιείται. Αυτό επιτυγχάνεται μέσω ενός συνδυασμού διάταξης, γραφικών και στυλ CSS, που σας επιτρέπει να προσαρμόζετε αυτόματα την εμφάνιση του ιστότοπου όταν ο χρήστης αλλάζει, για παράδειγμα, από επιτραπέζιο υπολογιστή σε tablet. Με άλλα λόγια, μιλάμε για τεχνολογία που επιτρέπει στον ιστότοπο να ανταποκρίνεται αυτόματα στις προτιμήσεις των χρηστών. Αυτό εξαλείφει την ανάγκη ανάπτυξης ξεχωριστής λύσης για κάθε νέο gadget που βγαίνει στην αγορά.
Στον τομέα του web design, οι προγραμματιστές έφτασαν γρήγορα σε ένα σημείο όπου κατέστη αδύνατο να συμβαδίσουν με την ατελείωτη ροή των νέων συσκευών που αναδύονταν. Θα ήταν ανόητο να υποστούμε την απώλεια χρηστών από ένα κανάλι, δίνοντας αναγκαστική προτίμηση σε άλλο. Και η χρήση προσαρμοστικής διάταξης και συμβατότητας μεταξύ προγραμμάτων περιήγησης μπορεί να λύσει αυτό το πρόβλημα.
Σήμερα, υπάρχουν πολλά από τα πιο δημοφιλή προγράμματα περιήγησης που χρησιμοποιούν οι άνθρωποι για να σερφάρουν στο Διαδίκτυο. Και ο συνεχής πονοκέφαλος κάθε σχεδιαστή ιστοσελίδων είναι ότι ο ίδιος κώδικας HTML φαίνεται διαφορετικός σε διαφορετικά προγράμματα περιήγησης. Επιπλέον, ο ίδιος κώδικας φαίνεται διαφορετικός σε διαφορετικές εκδόσεις του ίδιου προγράμματος περιήγησης.
Φυσικά, οποιοσδήποτε κύριος ιστού πρέπει να διασφαλίσει ότι ο ιστότοπος φαίνεται ίδιος στον μεγαλύτερο αριθμό προγραμμάτων περιήγησης. Είναι αυτή η δεξιότητα (όταν ο κώδικας φαίνεται ίδιος σε διαφορετικά προγράμματα περιήγησης) που ονομάζεται "διάταξη HTML μεταξύ προγραμμάτων περιήγησης". Η δυνατότητα πληκτρολόγησης τέτοιου κώδικα είναι πολύ χρήσιμη και εκτιμάται από τους πιθανούς εργοδότες. Πολύ συχνά, αυτή η απαίτηση είναι από τις πρώτες στις προϋποθέσεις που πρέπει να πληροί ένας υποψήφιος υποψήφιος για μια κενή θέση προγραμματιστή Ιστού σε μια σοβαρή εταιρεία.
Γιατί ο ιστότοπος φαίνεται διαφορετικός σε διαφορετικά προγράμματα περιήγησης;
Υπάρχουν διάφοροι λόγοι για τους οποίους ένας ιστότοπος μπορεί να φαίνεται διαφορετικός σε διαφορετικά προγράμματα περιήγησης.
1. Χρήση μη τυπικών χαρακτηριστικών HTML.
Ο σχεδιαστής μπορεί να χρησιμοποιήσει χαρακτηριστικά που δεν περιλαμβάνονται στο πρότυπο HTML. Πράγματι, τα προγράμματα περιήγησης ενδέχεται να υποστηρίζουν πολλά διαφορετικά χαρακτηριστικά ετικετών που δεν περιγράφονται στο πρότυπο. Δεν συνιστάται η χρήση αυτών των δυνατοτήτων. Για έναν απλό λόγο - εάν κάτι δεν περιγράφεται στο πρότυπο, οποιοδήποτε από τα προγράμματα περιήγησης ενδέχεται να μην το υποστηρίζει. Και οι δημιουργοί ενός τέτοιου προγράμματος περιήγησης θα έχουν απόλυτο δίκιο. Δεν χρειάζεται να χρησιμοποιείτε μη τυπικές λειτουργίες.
Ελέγχετε πάντα τον κωδικό που γράφετε για να βεβαιωθείτε ότι συμμορφώνεται με το πρότυπο.
Επιτρέψτε μου να σας δώσω ένα κλασικό παράδειγμα. Εξετάστε τον ακόλουθο κώδικα HTML για έναν απλό πίνακα.
Γειά σου Κόσμε |
Αυτός ο κώδικας εμφανίζει έναν πίνακα που αποτελείται από ένα κελί. Ο σχεδιαστής ιστοσελίδων θέλει το ύψος της πρώτης σειράς αυτού του πίνακα να είναι 100 pixel. Ωστόσο, στο πρότυπο HTML η ετικέτα
Σε αυτήν την περίπτωση, το σφάλμα δεν είναι μεγάλο, αφού το χαρακτηριστικό height της ετικέτας
Η σωστή λύση για το παράδειγμα πίνακα είναι η χρήση στυλ. Δείτε πώς μπορεί να μοιάζει ο "σωστός" κώδικας:
Γειά σου Κόσμε |
Αυτή η επιλογή θα (ή τουλάχιστον θα πρέπει) να εμφανίζεται η ίδια σε όλους τους τύπους προγραμμάτων περιήγησης.
2. Προεπιλεγμένες τιμές χαρακτηριστικών.
Κάθε στοιχείο HTML έχει πολλές ιδιότητες. Αυτό περιλαμβάνει χρώμα, απόσταση από παρακείμενα στοιχεία, ευθυγράμμιση και πολλά άλλα. Κατά τη διάταξη κώδικα HTML, ο σχεδιαστής συνήθως ορίζει τις τιμές μόνο εκείνων των χαρακτηριστικών που είναι σημαντικά για την παρουσίαση των στοιχείων στη σελίδα. Τι πρέπει να κάνει το πρόγραμμα περιήγησης με τις τιμές των απροσδιόριστων χαρακτηριστικών; Σε αυτήν την περίπτωση, τα προγράμματα περιήγησης χρησιμοποιούν προεπιλεγμένες τιμές. Και εδώ βρίσκεται ο κίνδυνος. Οι προεπιλεγμένες τιμές μπορεί να διαφέρουν μεταξύ των προγραμμάτων περιήγησης. Για παράδειγμα, το προεπιλεγμένο μέγεθος γραμματοσειράς μπορεί να διαφέρει. Εξαιτίας αυτού, το κείμενο θα καταλαμβάνει περισσότερο χώρο σε ορισμένα προγράμματα περιήγησης από ό,τι σε άλλα. Το οποίο, με τη σειρά του, μπορεί να οδηγήσει σε διαφορές στην εμφάνιση της σελίδας.
Πώς μπορώ να λύσω αυτό το πρόβλημα; Πρώτον, μια καθολική συμβουλή: ελέγξτε την εμφάνιση του ιστότοπου σε όσο το δυνατόν περισσότερα προγράμματα περιήγησης. Δεύτερον, μπορείτε να ορίσετε τις προεπιλεγμένες τιμές σας στο αρχείο css για όλα τα στοιχεία που χρησιμοποιούνται στη σελίδα. Αυτό θα γλιτώσει το πρόγραμμα περιήγησης από το να χρειάζεται να "σκέφτεται" τις τιμές των ιδιοτήτων των στοιχείων HTML. Μπορείτε να το κάνετε αυτό, για παράδειγμα, ως εξής:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, αρκτικόλεξο, διεύθυνση, μεγάλο, παραπομπή, κωδικός,
del, dfn, em, γραμματοσειρά, img, ins, kbd, q, s, samp,
μικρό, απεργία, ισχυρό, υπο, sup, tt, var,
dl, dt, dd, ol, ul, li,
σύνολο πεδίων, φόρμα, ετικέτα, υπόμνημα,
τραπέζι, λεζάντα, tbody, tfoot, thead, tr, th, td (
περιθώριο: 0;
padding: 0;
περίγραμμα: 0;
περίγραμμα: 0;
font-weight: inherit;
στυλ γραμματοσειράς: inherit;
μέγεθος γραμματοσειράς: 14 px;
font-family: inherit;
κατακόρυφη ευθυγράμμιση: επάνω;
φόντο: διαφανές;
γραμματοσειρά: verdana, geneva, lucida, "lucida grande", arial, helvetica, sans-serif;
Χρώμα φόντου: λευκό;
}
Έτσι, όλα τα στοιχεία στη σελίδα θα έχουν τις ιδιότητες που καθορίζονται σε αυτό το αρχείο. Εάν είναι απαραίτητο ένα στοιχείο να έχει ιδιότητες που διαφέρουν από τις προεπιλεγμένες ιδιότητες, τότε πρέπει να παρακαμφθούν ρητά.
3. «Δυνατότητες» ορισμένων προγραμμάτων περιήγησης.
Ωστόσο, ακόμα κι αν ο webmaster χρησιμοποιεί μόνο τυπικές δυνατότητες HTML και έχει ορίσει τα προεπιλεγμένα χαρακτηριστικά του για όλα τα στοιχεία, ο ιστότοπος μπορεί να φαίνεται διαφορετικός σε διαφορετικά προγράμματα περιήγησης. Αυτό συμβαίνει επειδή τα ίδια τα προγράμματα περιήγησης ενδέχεται να μην συμμορφώνονται με το πρότυπο HTML. Τα προγράμματα περιήγησης, όπως κάθε λογισμικό, μπορεί να περιέχουν σφάλματα. Αυτά τα σφάλματα συνήθως διορθώνονται γρήγορα, αλλά υπάρχει πάντα η πιθανότητα ο χρήστης να μην έχει εγκατεστημένη την πιο πρόσφατη έκδοση του προγράμματος περιήγησης.
Είναι επίσης πιθανό οι κατασκευαστές του προγράμματος περιήγησης (η Microsoft είναι ιδιαίτερα ένοχος για αυτό) ότι γνωρίζουν καλύτερα πώς να εμφανίζουν αυτό ή εκείνο το στοιχείο.
Δεδομένου ότι ο Internet Explorer είναι ο κύριος ένοχος για ζητήματα ασυμβατότητας, έχουν δημιουργηθεί πολλές πιθανές λύσεις για να κάνουν μια τοποθεσία να φαίνεται ίδια στον IE όπως και σε άλλα προγράμματα περιήγησης.
Ο πιο συνηθισμένος τρόπος είναι τα σχόλια υπό όρους για IE. Η Microsoft, σαν να γνωρίζει τα προβλήματα του προγράμματος περιήγησής της, έδωσε στους προγραμματιστές έναν τρόπο να εκτελούν κώδικα HTML μόνο σε μια ειδική έκδοση του IE. Για παράδειγμα, ο ακόλουθος κώδικας θα περιλαμβάνει ένα ειδικό αρχείο CSS για το πρόγραμμα περιήγησης IE έκδοση 7 και νεότερη: http://msdn2.microsoft.com/en-us/library/ms537512.aspx
Τα σχόλια υπό όρους έχουν ένα μειονέκτημα. Μια σελίδα που περιλαμβάνει τέτοια σχόλια δεν είναι έγκυρη σελίδα HTML. Όπως μπορείτε να δείτε, η Microsoft παραβιάζει το πρότυπο και εδώ.
Ανάμεσα σε όλη την ποικιλία των ήδη υπαρχόντων προγραμμάτων περιήγησης όπως Opera, Safari, Internet Explorer, Google Chrome, Mozila Firefox και, φυσικά, το πρόγραμμα περιήγησης Amigo, το οποίο έχει τη δυνατότητα αυθόρμητης εγκατάστασης σε υπολογιστές, δεν έχετε παρά να δείτε τον σύνδεσμο. Και οποιοδήποτε από τα προγράμματα περιήγησης έχει μεγάλο αριθμό εκδόσεων που βγαίνουν η μία μετά την άλλη. Επομένως, κάθε νέα έκδοση κάθε προγράμματος περιήγησης έχει τα δικά της χαρακτηριστικά. Και για να λειτουργεί σωστά ο ιστότοπος σε καθένα από αυτά πρέπει να το χρησιμοποιήσετε διάταξη μεταξύ προγραμμάτων περιήγησης.
Και όταν δημιουργείται ένας ιστότοπος, πρέπει να δοκιμαστεί σε όλα τα προγράμματα περιήγησης. Εάν αυτό δεν γίνει, τότε μετά την παράδοση του ιστότοπου, ενδέχεται να εμφανιστούν δυσάρεστα ελαττώματα.
Το πιο «διασκεδαστικό» από τα προγράμματα περιήγησης, φυσικά, είναι το πρόγραμμα περιήγησης Internet Explorer, αν και παρ 'όλα αυτά, οι περισσότεροι χρήστες εξακολουθούν να χρησιμοποιούν αυτό το πρόγραμμα περιήγησης. Έτσι, εάν ο ιστότοπος είχε ελεγχθεί προηγουμένως στον Chrome και στη συνέχεια ανοίξει στον Explorer, και, ω, φρίκη. Τα μπλοκ μπερδεύονται, τα κουμπιά μενού συγκρούονται μεταξύ τους, οι εικόνες εμφανίζονται λανθασμένα, γενικά, πλήρες χάος.
Επομένως, για να μπορεί ο χρήστης να εργάζεται εύκολα με τον ιστότοπό σας μέσω οποιουδήποτε προγράμματος περιήγησης και να μην βλέπει τέτοια φρίκη, η διάταξη μεταξύ προγραμμάτων περιήγησης είναι υποχρεωτική για οποιονδήποτε ιστότοπο. Με βάση όλα όσα γράφτηκαν παραπάνω, συμπεραίνουμε ότι Διάταξη html και css μεταξύ προγραμμάτων περιήγησης– αυτή είναι μια διάταξη ιστότοπου που στοχεύει στη δημιουργία ενός ιστότοπου που εμφανίζεται εξίσου σωστά σε κάθε πρόγραμμα περιήγησης.
Λαμβάνοντας υπόψη μια τέτοια ποικιλία προγραμμάτων περιήγησης, καθώς και την ανάγκη ο ιστότοπος να είναι καθολικός και να μπορεί να εμφανίζεται σωστά σε όλα τα προγράμματα περιήγησης, οι εργοδότες απαιτούν από τους σχεδιαστές διάταξης να συντάξουν τη διάταξη μεταξύ των προγραμμάτων περιήγησης. Η κατανόηση των λόγων για τη λανθασμένη εμφάνιση ενός ιστότοπου, καθώς και η ικανότητα της διάταξης μεταξύ προγραμμάτων περιήγησης, έρχεται με τον καιρό και με μακροχρόνια εξάσκηση. Μόνο με δοκιμή και σφάλμα μπορεί κάποιος να καταλάβει ποια προγράμματα περιήγησης έχουν ποια προβλήματα. Με εμπειρία, ο σχεδιαστής διάταξης προσπαθεί να συνθέσει τον κώδικα έτσι ώστε να προσαρμόζεται με κάθε δυνατό τρόπο για κάθε ένα από τα προγράμματα περιήγησης και κατά τη διάρκεια της διαδικασίας διάταξης το μόνο που μένει είναι να διορθώσει μικρά λάθη.
Αιτίες προβλημάτων με την εμφάνιση του ιστότοπου.
Τώρα ας δούμε γιατί συμβαίνουν τέτοια προβλήματα με την αντίληψη του κώδικα σε διαφορετικά προγράμματα περιήγησης.- Η διάταξη δεν ταιριάζειορισμένα πρότυπα HTML.
- /i>Νέες βιβλιοθήκες και κανόνες CSS ενημερώνονται και εμφανίζονται συνεχώς. Αναπαράγονται τέλεια από ενημερωμένες εκδόσεις προγραμμάτων περιήγησης, αλλά ενδέχεται να μην εμφανίζονται σωστά από παλαιότερες εκδόσεις.
- Internet Explorer. Το πιο περίεργο πρόγραμμα περιήγησης που δεν καταλαβαίνει τους μισούς κανόνες και επομένως εφευρίσκονται συνεχώς νέα hacks για να ξεπεράσουν αυτά τα προβλήματα IE.
- Προεπιλεγμένη τιμή χαρακτηριστικού. Αυτή η τιμή μπορεί να είναι διαφορετική σε κάθε πρόγραμμα περιήγησης. Χαρακτηριστικά είναι τα χρώματα των στοιχείων, οι γραμματοσειρές και το μέγεθός τους. Όλα αυτά πρέπει να περιγράφονται στο φύλλο στυλ, διαφορετικά το πρόγραμμα περιήγησης θα εισάγει ανεξάρτητα τις τιμές που καθορίζονται σε όλα από προεπιλογή. Επομένως, σε καθένα από αυτά ο ιστότοπος θα εμφανίζεται διαφορετικά.
Συμβουλή 1.Η επίλυση του προβλήματος των χαρακτηριστικών είναι αρκετά απλή, αν και μπορεί να είναι λίγο κουραστική. Για να το κάνετε αυτό, πρέπει απλώς να καθορίσετε όλα τα χαρακτηριστικά στο φύλλο στυλ. Με αυτόν τον τρόπο τα προγράμματα περιήγησης δεν χρειάζεται να εισάγουν τιμές όπως θέλουν.
Συμβουλή 2.Εγκαταστήστε όλα τα δημοφιλή προγράμματα περιήγησης στον υπολογιστή εργασίας σας, καθώς και όλες τις εκδόσεις του Internet Explorer. Δεδομένου ότι δεν είναι εύκολο να εγκαταστήσετε πολλές εκδόσεις σε έναν υπολογιστή χωρίς να χορεύετε πολύ με ένα ντέφι, μπορείτε να εγκαταστήσετε το Internet Explorer Tester. Αυτό το πρόγραμμα καθιστά δυνατό τον έλεγχο ενός ιστότοπου σε πολλές εκδόσεις του προγράμματος περιήγησης ταυτόχρονα.
Συμβουλή 3.Επιλέξτε εκ των προτέρων την επιλογή διάταξης. Υπάρχουν δύο επιλογές εδώ. Το πρώτο είναι να σχεδιάσετε έναν ιστότοπο εντελώς κατάλληλο για ένα μόνο πρόγραμμα περιήγησης και στη συνέχεια να διορθώσετε προβλήματα σε κάθε επόμενο πρόγραμμα περιήγησης. Η δεύτερη επιλογή είναι να ελέγξετε κάθε στοιχείο κώδικα όπως είναι γραμμένο σε όλα τα προγράμματα περιήγησης. Επιλέγοντας την πρώτη επιλογή, μπορείτε να αποφύγετε περιττά προβλήματα ξαναγράφοντας τον κώδικα εντελώς. Αλλά η επιλογή είναι πάντα δική σας.
Συμβουλή 4.Χρησιμοποιήστε πρόσθετα για να βρείτε γρήγορα σφάλματα κώδικα για κάθε πρόγραμμα περιήγησης. Για παράδειγμα, μπορείτε να δοκιμάσετε αυτές τις προσθήκες:
- Για το Chrome στο getfirebug.com
- Για Opera στην επίσημη ιστοσελίδα της Opera
- Για Mozila στον ιστότοπο addons mozila
- Για IE στο γραφείο. Ιστοσελίδα της Microsoft
Ας βγάλουμε ένα συμπέρασμα από όλα τα παραπάνω. Διάταξη μεταξύ προγραμμάτων περιήγησης– δεν είναι τρομακτικό, και μερικές φορές είναι διασκεδαστικό. Στον σύγχρονο κόσμο, είναι πολύ σημαντικό για να γίνεις επιτυχημένος σχεδιαστής layout. Το κύριο πράγμα για να κυριαρχήσετε αυτή τη διάταξη είναι η εμπειρία, η μεγάλη εμπειρία. Επομένως, θα πρέπει να εξασκηθείτε πολύ. Ενώ εκπαιδεύεστε, χρησιμοποιήστε διαφορετικές στρατηγικές, δοκιμάστε διαφορετικές μεθόδους και εργαλεία (για παράδειγμα, χρησιμοποιήστε έτοιμα πλαίσια στην εργασία σας, τα οποία μπορούν να επιταχύνουν την ανάπτυξη ιστότοπου και να δημιουργήσουν εύκολα προσαρμοστικές διατάξεις ιστότοπου). Μετά από κάποιο χρονικό διάστημα, θα μπορείτε να βρείτε ακριβώς τη στρατηγική σας για το πώς να δημιουργήσετε διάταξη μεταξύ προγραμμάτων περιήγησης και να γράψετε έναν ιστότοπο που να εμφανίζεται σωστά σε καθένα από τα δημοφιλή προγράμματα περιήγησης.
Μάθετε τη διάταξη μεταξύ των προγραμμάτων περιήγησης και σας ευχαριστούμε για την προσοχή σας.
Διάταξη μεταξύ προγραμμάτων περιήγησης- αυτή είναι η διάταξη του ιστότοπου με την ίδια ορατότητα σε διαφορετικά προγράμματα περιήγησης. Για να πούμε την αλήθεια, αυτή η εργασία δεν είναι εύκολη, αφού κάθε πρόγραμμα περιήγησης έχει τα δικά του χαρακτηριστικά και μειονεκτήματα. Επομένως, ένα πρόγραμμα περιήγησης είναι για έναν σχεδιαστή ιστοσελίδων ό,τι το Kryptonite για τον Superman. Η ζωή για τους σχεδιαστές ιστοσελίδων σε όλο τον κόσμο θα ήταν πολύ καλύτερη εάν τα προγράμματα περιήγησης απέδιδαν όμορφα σχέδια χωρίς σφάλματα ή παγίδες. Αλλά, δυστυχώς, αυτό δεν θα συμβεί ποτέ. Αυτή είναι η ώρα μας να ξανασκεφτούμε πώς χρησιμοποιούμε το πρόγραμμα περιήγησης. Όταν κάνουμε διάταξη μεταξύ προγραμμάτων περιήγησης, πρέπει να λαμβάνουμε υπόψη όλες τις δυνατότητες κάθε προγράμματος περιήγησης, καθώς ο χρήστης συνδέεται από το πρόγραμμα περιήγησης που έχει συνηθίσει και δεν μπορούμε να τον αναγκάσουμε να μεταβεί σε άλλο λογισμικό και πρέπει να προσαρμοστεί σε αυτό.
Εκτύπωση και διάταξη web
Η σύγχρονη διάταξη ιστού είναι πολύ διαφορετική και έχει μια σειρά από μειονεκτήματα σε σύγκριση με τη σχεδίαση εκτύπωσης, όπου η παγκόσμια πρακτική έχει δημιουργηθεί εδώ και αιώνες. Αν και ένα τυπωμένο σχέδιο δεν μπορεί να τοποθετηθεί λόγω της σταθερής φύσης του, η εκτύπωση έχει πλεονεκτήματα σε άλλους τομείς όπως το χρώμα και η αντίθεση λόγω της ποιότητας του χαρτιού ή της εκτύπωσης.
Τα προγράμματα περιήγησης είναι οι πιο διαβόητοι καταστροφείς καλών σχεδίων, όπως στα παλιά τα παλιά χρόνια οι εκτυπώσεις ή η κακής ποιότητας χαρτί κατέστρεφαν τα τυπωμένα σχέδια. Ωστόσο, σε αντίθεση με την παγκόσμια βιομηχανία εκτύπωσης, ο Ιστός δεν μπορεί να βασιστεί στην παγκόσμια εμπειρία και σε δοκιμασμένες μεθόδους για να χειριστεί τις αποκλίσεις. Ένα άλλο μοναδικό χαρακτηριστικό της δουλειάς ενός σχεδιαστή διάταξης είναι ότι δεν μπορεί να επιτύχει αποτελέσματα για τον έλεγχο της ποιότητας της εκτύπωσης, όπως στην εκτύπωση. Δεν γνωρίζουμε ποιο πρόγραμμα περιήγησης θα επιλέξει ο χρήστης ή ποια οθόνη θα χρησιμοποιήσει. Επομένως, ανεξάρτητα από το ποια είναι η διάταξη μεταξύ των προγραμμάτων περιήγησης, θα εξακολουθούν να υπάρχουν διαφορές στις οθόνες των χρηστών. Αλλά το καθήκον μας είναι να ελαχιστοποιήσουμε τις διαφορές στη σχεδίαση κατά την εμφάνιση του στο παράθυρο του προγράμματος περιήγησης του χρήστη.
Διαφορετικά προγράμματα περιήγησης για διαφορετικούς ανθρώπους
Τα προγράμματα περιήγησης και οι εταιρείες, όπως και κάθε άλλη εταιρεία στον κόσμο, έχουν ανταγωνισμό μεταξύ τους. Αλλά αν υπήρχε κάποιο είδος οργάνωσης των προτύπων Ιστού, τότε δεν θα είχε νόημα η δημιουργία διαφορετικών προγραμμάτων περιήγησης και ο ανταγωνισμός μεταξύ τους θα χαθεί. Υπάρχει μόνο ένα καταπληκτικό πρόγραμμα περιήγησης, νομίζω ότι θα το ονομάζαμε WebKit. Αλλά δεδομένου ότι τα προγράμματα περιήγησης ανταγωνίζονται για τους χρήστες, οι διαφορές στα προγράμματα περιήγησης έχουν ως αποτέλεσμα να προσελκύσουν το κοινό.
Στον κόσμο της εκτύπωσης (εκτύπωση), οι εταιρείες ανταγωνίζονται μεταξύ τους προσθέτοντας νέα χαρακτηριστικά και διαφορετικά χρωματικά προφίλ. Επιπλέον, οι μηχανικοί τους λαμβάνουν υπόψη τα χαρακτηριστικά του κοινού των χρηστών του προϊόντος τους. Για παράδειγμα, οι εκτυπωτές Canon χρησιμοποιούνται περισσότερο για εμπορικές εκτυπώσεις. Οι εκτυπωτές Ricoh δεν έχουν τόσο έντονη χρωματική γκάμα όπως οι προηγούμενοι, επομένως χρησιμοποιούνται για την εκτύπωση εσωτερικών εγγράφων σε εταιρείες (αναφορές, πρωτόκολλα, πράξεις...). Νομίζω ότι η αναλογία είναι σαφής για τους προγραμματιστές σχεδιασμού πολλαπλών προγραμμάτων περιήγησης. Εάν είστε σχεδιαστής που εκτυπώνει πινακίδες για μεγάλες εμπορικές εταιρείες, πιθανότατα θα επιλέξετε έναν εκτυπωτή με εξαιρετική ποιότητα εκτύπωσης και μεγάλη γκάμα χρωμάτων αντί για έναν επαγγελματικό ή προσωπικό.
Τα προγράμματα περιήγησης είναι παρόμοια με τους εκτυπωτές. Ορισμένα είναι κατασκευασμένα για να χειρίζονται βαριές κατασκευές, άλλα είναι κατασκευασμένα περισσότερο για γραφειοκρατία. Το IE έχει σχεδιαστεί περισσότερο για ένα τεχνικό ή επιχειρηματικό κοινό, όπως ο Chrome, ο Firefox, για να εξυπηρετεί ένα πιο δημιουργικό κοινό.
Δεδομένου ότι η πρόοδος στον ιστό της επόμενης δεκαετίας θα οδηγήσει σε ακόμη περισσότερες διαφορές και περισσότερα προγράμματα περιήγησης με τις δικές τους ιδιοσυγκρασίες, θα πρέπει να σκεφτούμε και να αναζητήσουμε τρόπους για να δημιουργήσουμε περισσότερα σχέδια πολλαπλών προγραμμάτων περιήγησης για να αντιμετωπίσουμε τη συμβατότητα των προγραμμάτων περιήγησης και τη διάταξή μας.
Οι εποχές που όλα φαίνονταν ίδια στα προγράμματα περιήγησης έχουν παρέλθει εδώ και πολύ καιρό, επομένως πρέπει να αναζητήσετε λύσεις για τη διάταξη μεταξύ των προγραμμάτων περιήγησης ή να κάνετε ένα πιο απλό, βαρετό σχέδιο. Αυτά τα νέα προγράμματα περιήγησης θα μας αναγκάσουν να ξανασκεφτούμε τον τρόπο που σχεδιάζουμε cross-browser.
Ποιότητα πολλαπλών προγραμμάτων περιήγησης
Η ποιότητα είναι μια ευέλικτη έννοια. Επειδή τα απλά έργα θα είναι πολύ πιο εύκολο να γίνουν από κάποιο είδος αριστουργήματος σχεδιαστή. Επομένως, όταν εργάζεστε με έναν πελάτη, πρέπει να λαμβάνετε υπόψη την πολυπλοκότητα του έργου σε σχέση με τη διάταξη μεταξύ των προγραμμάτων περιήγησης. Δεδομένου ότι είναι σχεδόν αδύνατο να δημιουργήσετε μια πραγματικά δροσερή, δημιουργική, δυναμική σχεδίαση μέσω προγράμματος περιήγησης, επομένως, όταν εργάζεστε με έναν πελάτη, πρέπει να επισημάνετε τις ελλείψεις, ή ακριβέστερα, τις διαφορές στην απόδοση ορισμένων στοιχείων σχεδίασης διαφορετικά προγράμματα περιήγησης. Πρέπει να τους αφήσετε να δουν την ποιότητα της διάταξης στα κύρια προγράμματα περιήγησης (δημοφιλή) και σε δευτερεύοντα και στη συνέχεια να τους δώσετε την ευκαιρία να επιλέξουν. Εάν γνωρίζετε τις διαφορές μεταξύ των προγραμμάτων περιήγησης τόσο καλά που μπορείτε να τις υποδείξετε στο έργο όταν δημιουργείτε μια διάταξη στο Photoshop, τότε αυτό είναι μόνο ένα πλεονέκτημα για την εργασία σας με τον πελάτη.
Με εμπειρία, κατά την αξιολόγηση της ποιότητας της διάταξης μεταξύ προγραμμάτων περιήγησης, μπορείτε να δημιουργήσετε ένα γενικό πρότυπο ή πίνακα που θα δείχνει τις διαφορές μεταξύ ορισμένων προγραμμάτων περιήγησης και να το χρησιμοποιήσετε για να εργαστείτε με τον πελάτη.
Μερικές συμβουλές για τη διάταξη μεταξύ προγραμμάτων περιήγησης:
Ας βγάλουμε συμπεράσματα:
Στο μέλλον, μας περιμένουν νέες εκπλήξεις με διάταξη cross-browser. Ας προετοιμαστούμε για αυτά και ας αναζητήσουμε νέες εναλλακτικές λύσεις (λύσεις). Ίσως η υψηλή ταχύτητα Διαδικτύου, οι ισχυροί υπολογιστές και οι νέες τεχνολογίες ιστού όπως το Flash και άλλες θα μας βοηθήσουν σε αυτό.
- Γνωρίζετε το κοινό; Ίσως το κοινό σας να μην απαιτεί νέα καμπανάκια και σφυρίχτρες ή νέες δυνατότητες προγράμματος περιήγησης.
- Υποστηρίξτε την επωνυμία σας με συνέπεια χρώματος, λογότυπου και στυλ. Μην σκοτώσετε τη μάρκα με νέες ιδέες σχεδίασης. Η μάρκα είναι ποιοτική και παράδοση.
- Βεβαιωθείτε ότι το πρόγραμμα περιήγησης δεν παρεμβαίνει στο σκοπό του ιστότοπού σας. Το περιεχόμενο της σελίδας και η συνολική έννοια του ιστότοπου θα πρέπει να διαχωριστούν.
- Παρόμοια με τις παραπάνω συμβουλές, το περιεχόμενο (περιεχόμενο σελίδας) πρέπει να διαχωρίζεται από το σχέδιο και το στυλ. Κατά μία έννοια, το περιεχόμενο θα πρέπει να είναι καθαρά ορατό και να μην συγχωνεύεται σε μια συνολική εικόνα ή σε κάποιο σύνολο μπλοκ και συμβόλων.
- Εάν σχεδιάζετε τον προσωπικό σας ιστότοπο, τότε ελέγχετε συνεχώς τη συμβατότητα του σχεδιασμού του με cross-browser σε νέες εκδόσεις του προγράμματος περιήγησης για να μην χάσετε χρήστες.
Εάν συλλέξετε ένα σωρό σύγχρονα προγράμματα περιήγησης, μπορείτε να τα ταξινομήσετε με διαφορετικούς τρόπους: ανά συσκευή, κατά πλατφόρμα, ανά τύπο εργασίας και ακόμη και ανά χρώμα εικονιδίου. Το πιο χρήσιμο πράγμα για έναν προγραμματιστή είναι να μπορεί να τα ταξινομήσει σε κινητήρες. Είναι ο κινητήρας, δηλαδή ο ίδιος ο πυρήνας του προγράμματος περιήγησης, που καθορίζει πώς λειτουργεί με τη διάταξή σας.
Ορισμένα προγράμματα περιήγησης λειτουργούν μόνο σε μία πλατφόρμα: το Edge και το IE είναι διαθέσιμα μόνο στα Windows, το Safari μόνο σε macOS και iOS. Κάποτε έγιναν προσπάθειες παρέμβασης, αλλά τίποτα δεν πέτυχε. Αυτό φυσικά περιπλέκει τη δοκιμή. Ευτυχώς, υπάρχουν υπηρεσίες όπως το BrowserStack που σας δίνουν πρόσβαση σε όλα τα υπάρχοντα προγράμματα περιήγησης και η Microsoft καθιστά διαθέσιμες συμπαγείς εικόνες Windows για δοκιμή του Edge και του IE σε εικονικές μηχανές.
ΕΝΤΑΞΕΙ! Τώρα γνωρίζουμε τα προγράμματα περιήγησης. Τι γίνεται όμως αν το ίδιο πρόγραμμα περιήγησης, η ίδια μηχανή - αλλά το αποτέλεσμα είναι διαφορετικό σε διαφορετικές πλατφόρμες; Αλλά τίποτα δεν μπορεί να γίνει! Στην πραγματικότητα, τα προγράμματα περιήγησης μπορεί να διαφέρουν σημαντικά ανάλογα με την πλατφόρμα ή τη συσκευή. Η μεγαλύτερη διαφορά μεταξύ των προγραμμάτων περιήγησης για υπολογιστές και κινητά είναι ότι τα τελευταία έχουν πολλές βελτιστοποιήσεις και απλά μαγικά. Αλλά μπορείτε επίσης να παρατηρήσετε διαφορετική συμπεριφορά σε επιτραπέζιους υπολογιστές Windows και macOS.
Νομίζω ότι καταλαβαίνεις ήδη τι καταλαβαίνω. Η συμβατότητα μεταξύ προγραμμάτων περιήγησης είναι αυτός ο μονόκερος του ουράνιου τόξου που όλοι κυνηγούν αλλά κανείς δεν μπορεί να πιάσει. Ο στόχος της επιδίωξης είναι, φυσικά, ευγενής: να κάνουν τους ιστότοπους να φαίνονται και να λειτουργούν εξίσου καλά σε όλα τα προγράμματα περιήγησης και σε όλες τις πλατφόρμες. Και αν μπορούμε ακόμα περισσότερο ή λιγότερο να εγγυηθούμε τα μεγέθη των εσοχών, των γραμματοσειρών, των υψών γραμμής, των χρωμάτων, τότε είναι καλύτερα να μην προσπαθήσουμε καν να φέρουμε την εξομάλυνση του κειμένου, το θάμπωμα των σκιών, την απόδοση γραφικών και την εμφάνιση των στοιχείων ελέγχου συστήματος σε μια γενική εμφάνιση.
Έτσι, αν για εσάς το τέλειο pixel σημαίνει να μπείτε στο πλέγμα και στις οριζόντιες διαστάσεις των μπλοκ, τότε έχετε ακόμα μια ευκαιρία. Αλλά αν προσαρμόσετε την εξομάλυνση του κειμένου, τον αριθμό των γραμμών ανά παράγραφο ή τις κατακόρυφες διαστάσεις του αποκλεισμού περιεχομένου αυστηρά σύμφωνα με τη διάταξη, χάνετε τον χρόνο σας. Στην ιδανική περίπτωση, ένας ιστότοπος με πολλαπλά προγράμματα περιήγησης θα φαίνεται εξίσου ξένος σε όλες τις πλατφόρμες - σε τελική ανάλυση, η καθεμία έχει τα δικά της χαρακτηριστικά που είναι γνωστά στους χρήστες.
Και περισσότερα για τις δοκιμές. Ανεξάρτητα από το πόσο καλά ο εξομοιωτής Chrome DevTools μιμείται συσκευές και προγράμματα περιήγησης, αυτό είναι μόνο μια υπόδειξη για το πώς θα μοιάζουν στην πραγματικότητα. Είναι σημαντικό να ελέγχετε το αποτέλεσμα σε πραγματικές πλατφόρμες και συσκευές, τουλάχιστον: Windows, Android, macOS και iOS. Τα πραγματικά δάχτυλα σε μια πραγματική συσκευή, τα πραγματικά προγράμματα περιήγησης στο φυσικό τους περιβάλλον θα σας πουν πολλά για το πώς θα χρησιμοποιηθούν οι διεπαφές σας. Αυτό είναι πολύ πιο σημαντικό από το πόσο παρόμοια είναι με τη διάταξη.
Εγγραφείτε στα νέα του προγράμματος περιήγησης στο Twitter, εγκαταστήστε τα Chrome Canary, Firefox Nightly, Safari Technology Preview. Ενεργοποιήστε τις σημαίες, δοκιμάστε το, μείνετε ενημερωμένοι και το πιο σημαντικό, σταματήστε να κυνηγάτε pixel και ξεκινήστε να δημιουργείτε καλές διεπαφές. Οι ιστότοποι δεν πρέπει να φαίνονται ίδιοι σε όλα τα προγράμματα περιήγησης.
Έκδοση βίντεο
