Τι είναι το cross browser. Διάταξη crossbrawser στις σύγχρονες συνθήκες - μια γενική κατανόηση της απαιτούμενης αρχής

Το θέμα που συλλέγεται από μόνο του ως όλα Διάσημες μέθοδοι CrossBox καφέ διάταξη, και κάπως ενδιαφέρουσα, αρκετά σπάνια συναντήθηκε.

Πρόλογος. Γιατί συνέβη

Μετά την εμφάνιση το 1994, ένα από τα πρώτα επιτυχημένα προγράμματα περιήγησης NetScape Navigator που δημιουργήθηκαν με βάση το πρώτο πρόγραμμα περιήγησης με Γραφικό περίβλημα Μωσαϊκό, η σκάψιμο της Microsoft αποφάσισε να κάνει το πρόγραμμα περιήγησής του και να τον καλέσει τον Internet Explorer. Η πρώτη και η δεύτερη έκδοση του IE παρέχεται με τη Microsoft Plus!, Συμπληρωματική Χαρακτηριστικά των Windowsαλλά δεν έλαβε διαδεδομένη. Στη συνέχεια, η Microsoft αποφάσισε να αναπτυχθεί ριζικά διαφορετική από το IE 1.0 και 2.0 Browser, ποιες εταιρείες προσέλαβαν προγραμματιστές από το Spyglass, το οποίο αναπτύχθηκε Νέο πρόγραμμα περιήγησης Με βάση το μωσαϊκό. Έτσι, το 1996, εμφανίστηκε ο Internet Explorer 3.0. Ωστόσο, οι προγραμματιστές που εισήχθησαν στο πρόγραμμα περιήγησης ασυμβίβαστες με τα πρότυπα της επέκτασης HTML, τα οποία στη συνέχεια αποθηκεύτηκαν από την έκδοση στην έκδοση. Η επακόλουθη παράλληλη ανάπτυξη του IE και του Netscape Navigator οδήγησε στην κατάσχεση του 95% της αγοράς. Η στασιμότητα στην ανάπτυξη του IE από 4,0 έως 6,0 έκδοση, με κακή υποστήριξη για πρότυπα, χαμηλή ταχύτητα και οθόνη, οδήγησε στην αναβίωση του Netscape στην έκδοση 6.0, η οποία γράφτηκε σε μια νέα μηχανή Gecko. Η ενημέρωση Netscape Navigator δεν μπόρεσε να επιτύχει παλιές κορυφές και με το χρόνο Netscape ανακοίνωσε τον τερματισμό της υποστήριξης του προγράμματος περιήγησης του.
Ωστόσο, ο κινητήρας Gecko χρησίμευσε ως βάση για τη δημιουργία σύγχρονων το 2004 browser Mozilla. Firefox. Το 1996, η όπερα εμφανίστηκε, η οποία πέτυχε την ταχύτητα επιτυχίας και την ευκολία χρήσης του. Το 2003. apple Company Απελευθερώθηκε το πρόγραμμα περιήγησης Safari στον κινητήρα webkit, αρνήθηκε να δηλαδή, που προηγουμένως χρησιμοποιήθηκε στο Mac OS. Το 2008, η Google αποφάσισε επίσης να εγγραφεί στη φυλή του προγράμματος περιήγησης, απελευθέρωση Google Chrome.με βάση τον ίδιο κινητήρα με το Safari.
Έτσι, κάθε ένα από τα προγράμματα περιήγησης έχει τη δική του ιστορία, έχει τις δικές του εκδόσεις ότι, με τη σειρά τους, ποικίλλουν ανάλογα με την υποστήριξη JavaScript, HTML και CSS.

Μέχρι σήμερα, το μερίδιο της παγκόσμιας αγοράς του προγράμματος περιήγησης είναι: 45% για το IE, 31% Firefox, 15% Chrome, 5% Safari και Opera 2%.
Ξεχωριστά, θέλω να χαίρομαι που μειώνοντας το μερίδιο στην αγορά του παλαιότερου και προβληματικού προγράμματος περιήγησης IE6, το οποίο τώρα είναι μόνο 6%.

Εγκληματικότητα

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

Υπάρχουν δύο κύριοι τρόποι για να επιτευχθεί η ίδια εμφάνιση του ιστότοπου στα προγράμματα περιήγησης:

Διαχωρισμός στυλ χρησιμοποιώντας σχόλια υπό όρους

Ο διαχωρισμός των στυλ για διαφορετικά προγράμματα περιήγησης είναι μία από τις πιο συνηθισμένες μεθόδους διάταξης cross-browser. Η ουσία της μεθόδου είναι να προσδιορίσετε τον τύπο του προγράμματος περιήγησης χρήστη και την εφαρμογή του κατάλληλου στυλ μαζί με το κύριο.

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

Μπορείτε να ορίσετε στυλ που θα δείτε όλα τα προγράμματα περιήγησης εκτός από το IE:

Είναι επίσης δυνατή η αναγνώριση της έκδοσης IE του χρήστη:
Για το IE6
για το IE6 και παραπάνω
Γιατί ήτοι λιγότερες από 6 εκδόσεις
Γιατί λιγότερο ή ίσο με την έκδοση 6
Γιατί περισσότερες από 6 εκδόσεις
και τη σύνδεση του κατάλληλου στυλ για κάθε έκδοση του IE (π.χ. αριθμός έκδοσης μπορεί να αλλάξει στο επιθυμητό).

Μπορείτε να αποφύγετε τη σύνδεση διαφορετικών στυλ CSS για διαφορετικές εκδόσεις του IE, ορίζοντας τις εκδόσεις και την ανάθεση κλάσεων για το σώμα:

Και τη χρήση τους στο μέλλον γενικά στυλ για κάθε έκδοση:
.Ie6 .elentstyle (
Ιστορικό: # 123;
}

Συν Αυτή τη μέθοδο είναι η εγκυρότητα της χρήσης του.

CSS-Khaki.

Άλλο, δεν είναι λιγότερο συχνή μέθοδος διάταξης cross-browser - CSS-Khaki, επιτρέποντας τον προσδιορισμό των ιδιοτήτων των συγκεκριμένων στοιχείων.

Για το IE6:
.ELEMENTYLE (
_Background: # 123;
}
ή:
.ELEMENTYLE (
-Background: # 123;
}
Ή έγκυρη:
* Html .elentstyle (
Ιστορικό: # 123;
}

Για το IE7:
* + Html .style (
Ιστορικό: # 123;
}
Ή έγκυρη:
*: πρώτο παιδί + HTML. Στοιχείο
Ιστορικό: # 123;
}

Για το IE8:
.ELEMENTYLE (
Ιστορικό: # F12 \\ 3 /;
}

Για τον Firefox:
@ -Moz-έγγραφο URL-πρόθεμα () () (
.ELEMENTYLE (
Ιστορικό: # 123;
}
}

Για το Safari και το Chrome (ένας κινητήρας, θυμηθείτε;):
@ Οθόνη @media και (-Webkit-min-pixel-pixel - 0) (
. Στοιχείο
Ιστορικό: # 123;
}
}
ή
Σώμα: το τελευταίο παιδί: όχι (: root: root) .elementstyle (
Ιστορικό: # 123;
}

Για την όπερα, όλα είναι πιο περίπλοκα. CSS Khaki για την όπερα Κατανοήστε το σαφάρι και το Chrome, οπότε πρέπει να χρησιμοποιήσετε ένα hack για την όπερα και για το Safari \\ Chrome να παρακάμψει το στυλ πίσω:
@Media όλα και (min-πλάτος: 0px) (
Κεφάλι ~ σώμα .elementstyle (
Ιστορικό: # 123;
}
}
Σώμα: το τελευταίο παιδί: όχι (: root: root) .elementstyle (
Ιστορικό: #FFF;
}
Μια εναλλακτική λύση σε αυτά τα δύο khanku μπορεί να χρησιμεύσει ως ενδιαφέρον τρόπο για να ορίσετε στυλ για την όπερα χρησιμοποιώντας το ενσωματωμένο αντικείμενο της όπερας στο Javascript:

Ο τρόπος είναι αναξιόπιστος, επειδή δεν θα λειτουργήσει εάν ο χρήστης απενεργοποιημένος JavaScript.

συμπέρασμα

Ας συνοψίσουμε: Αγροτική μεγάλες τοποθεσίες με μεγάλο αριθμό αντικειμένων, μετρώντας την περαιτέρω ανάπτυξη και εξερεύνηση του χώρου, εξακολουθεί να είναι προτιμότερο να χρησιμοποιηθεί ο διαχωρισμός των στυλ. Είναι έγκυρο, βολικό, αυτός είναι ένας καλός κανόνας τόνου. Αλλά δεν υπάρχει τίποτα τρομερό να χρησιμοποιήσετε τα CSS Hacks για μικρές τοποθεσίες, ειδικά επειδή πολλά από τα hacks περνούν επίσης την επικύρωση.

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

Ετικέτες: Διάταξη HTML, CSS-Khaki

Μέχρι σήμερα, υπάρχουν πολλά περισσότερα Δημοφιλή προγράμματα περιήγησηςπου οι άνθρωποι χρησιμοποιούν για να εργαστούν στο Διαδίκτυο. Και ο συνεχής κεφαλαλγία οποιουδήποτε σχεδιαστή ιστοσελίδων είναι ότι ο ίδιος κώδικας HTML φαίνεται με διαφορετικούς τρόπους σε διαφορετικά προγράμματα περιήγησης. Επιπλέον, ο ένας και ο ίδιος κώδικας φαίνεται διαφορετικός Διαφορετικές εκδόσεις Το ίδιο πρόγραμμα περιήγησης.

Φυσικά, κάθε webmaster πρέπει να φροντίζει ώστε ο ιστότοπος να φαίνεται εξίσου Η μεγαλύτερη ποσότητα προγράμματα περιήγησης. Είναι αυτή η ικανότητα (όταν ο κώδικας φαίνεται εξίσου μέσα Διάφορα προγράμματα περιήγησης) και ονομάζεται "CrossBruster html διάταξη"Η ικανότητα διασποράς ενός τέτοιου κώδικα είναι πολύ χρήσιμη και αποτιμάται από τους δυνητικούς εργοδότες. Πολύ συχνά, μια τέτοια απαίτηση είναι ένα από τα πρώτα όρους που ο δυνητικός υποψήφιος προγραμματιστής υποψήφιων θέσεων πρέπει να πληροί μια σοβαρή εταιρεία.
Γιατί ο χώρος μοιάζει διαφορετικός σε διάφορα προγράμματα περιήγησης;

Υπάρχουν διάφοροι λόγοι για το περιστατικό. διαφόρων τύπων Τοποθεσία σε διάφορα προγράμματα περιήγησης.

1. Χρήση μη τυπικών δυνατοτήτων HTML.

Ο σχεδιαστής μπορεί να χρησιμοποιήσει τις δυνατότητες που δεν περιλαμβάνονται στο πρότυπο HTML. Πράγματι, τα προγράμματα περιήγησης μπορούν να υποστηρίξουν πολλά διαφορετικά χαρακτηριστικά ετικέτας που δεν περιγράφονται στο πρότυπο. Χρησιμοποιήστε αυτές τις λειτουργίες δεν συνιστώνται. Για έναν απλό λόγο, αν δεν περιγράφεται οτιδήποτε δεν περιγράφεται στο πρότυπο, οποιοδήποτε από τα προγράμματα περιήγησης ενδέχεται να μην υποστηρίζει. Και οι δημιουργοί ενός τέτοιου προγράμματος περιήγησης θα είναι εντελώς σωστές. Δεν χρειάζεται να χρησιμοποιείτε μη τυποποιημένα χαρακτηριστικά.

Ελέγχετε πάντα τον κωδικό που γράφτηκε για να συμμορφωθείτε με το πρότυπο.

Θα δώσω ένα κλασικό παράδειγμα. Εξετάστε τον επόμενο κώδικα HTML του απλούστερου πίνακα.

Γειά σου Κόσμε

Αυτός ο κώδικας εμφανίζει έναν πίνακα που αποτελείται από ένα κύτταρο. Ο σχεδιασμός ιστοσελίδων θέλει το ύψος της πρώτης σειράς αυτού του πίνακα να είναι 100 εικονοστοιχεία. Ωστόσο, στο πρότυπο HTML της ετικέτας Μη έγκυρο χαρακτηριστικό ύψους.

Σε αυτή την περίπτωση, το σφάλμα δεν είναι μεγάλο, αφού το χαρακτηριστικό ύψους στην ετικέτα Κατανοήστε τα περισσότερα μοντέρνα προγράμματα περιήγησης. (Μόνο Internexplorer 4, δεν αναγνωρίζει αυτό το χαρακτηριστικό). Αλλά σε άλλες περιπτώσεις, η παραμέληση του προτύπου μπορεί να οδηγήσει σε πιο αναπτυγμένα αποτελέσματα. Σίγουρα, όλοι μας είμαστε σε ιστότοπους όπου οποιοδήποτε στοιχείο ήρθε είτε σε μια πλάγια ή προς τα κάτω. Καθένας από εμάς, πιθανότατα, σκέφτηκε στην ψυχή ότι ο ιστότοπος δεν έκανε επαγγελματία. Αν και, κατά πάσα πιθανότητα, ο ιστότοπος απλά δεν δοκιμάζεται στους κύριους τύπους προγραμμάτων περιήγησης. Κατά κανόνα, οι τοποθεσίες δημιουργούν και δοκιμάζουν μόνο στο InternetExplorer, καθώς αυτό είναι το πιο δημοφιλές πρόγραμμα περιήγησης μεταξύ των χρηστών. Ως εκ τούτου, την επόμενη φορά, θα είμαστε συγκαταβατικοί, γνωρίζοντας γιατί υπάρχει απώλεια εμφάνισης.

Σωστή λύση Για παράδειγμα με ένα πίνακα - αυτή είναι η χρήση στυλ. Αυτός είναι ο τρόπος με τον οποίο ο "σωστός" κώδικας μπορεί να φαίνεται:

Γειά σου Κόσμε

Αυτή την επιλογή Θα εμφανιστεί (ή τουλάχιστον, θα πρέπει) θα εμφανιστεί εξίσου σε όλους τους τύπους προγραμμάτων περιήγησης.

2. Οι τιμές προεπιλεγμένης ιδιότητας.

Κάθε στοιχείο HTML έχει πολλά χαρακτηριστικά. Αυτό είναι το χρώμα και η απόσταση από τα γειτονικά στοιχεία και η ευθυγράμμιση και πολλά άλλα. Όταν ο κώδικας HTML είναι έμπειρος, ο σχεδιαστής συνήθως ρυθμίζει τις τιμές μόνο των χαρακτηριστικών που είναι σημαντικά για την παρουσίαση στοιχείων στη σελίδα. Τι να κάνετε ένα πρόγραμμα περιήγησης με τις αξίες των μη καθορισμένων χαρακτηριστικών; Σε αυτή την περίπτωση, τα προγράμματα περιήγησης χρησιμοποιούν προεπιλεγμένες τιμές. Και εδώ βρίσκεται ο κίνδυνος. Οι προεπιλεγμένες τιμές για διάφορα προγράμματα περιήγησης ενδέχεται να διαφέρουν. Για παράδειγμα, το προεπιλεγμένο μέγεθος γραμματοσειράς μπορεί να είναι διαφορετικό. Εξαιτίας αυτού, σε ορισμένα προγράμματα περιήγησης, το κείμενο θα πάρει περισσότερο χώρο απ 'ό, τι σε άλλους. Τι, με τη σειρά του, μπορεί να οδηγήσει σε διαφορές στην οθόνη της σελίδας.

Πώς μπορεί να λυθεί αυτό το πρόβλημα; Πρώτον, η Universal Tip: Ελέγξτε την οθόνη της τοποθεσίας σε όσο το δυνατόν περισσότερα προγράμματα περιήγησης. Δεύτερον, μπορείτε να καθορίσετε τις προεπιλεγμένες τιμές στο αρχείο CSS για όλα τα στοιχεία που χρησιμοποιούνται στη σελίδα. Αυτό θα ανακουφίσει το πρόγραμμα περιήγησης από την ανάγκη να "σκεφτεί" τις τιμές των ιδιοτήτων των στοιχείων HTML. Αυτό μπορεί να γίνει, για παράδειγμα, όπως αυτό:
Html, σώμα, div, span, applet, αντικείμενο, iframe,
H1, Η2, Η3, Η4, Η5, Η6, Ρ, Αποκλεισμός, Προ-,
A, abbr, ακρωνύμιο, διεύθυνση, μεγάλο, cite, κώδικας,
Del, dfn, em, γραμματοσειρά, img, ins, kbd, q, s, samp,
Μικρή, απεργία, ισχυρή, υπο-, sup, tt, var,
DL, DT, DD, OL, UL, LI,
Fieldset, μορφή, ετικέτα, μύθος,
Τραπέζι, λεζάντα, Tbody, Toot, Thead, TR, TD (
Περιθώριο: 0;
Padding: 0;
Σύνορα: 0;
Περίγραμμα: 0;
Γραμματοσειρά γραμματοσειράς: κληρονομεί.
Στυλ γραμματοσειράς: κληρονομεί.
Μέγεθος γραμματοσειράς: 14px;
Οικογένεια γραμματοσειράς: κληρονομεί.
Κάθετη-Ευθυγράμμιση: Κορυφή.
Ιστορικό: διαφανές.
Γραμματοσειρά: Verdana, Γενεύη, Lucida, "Lucida Grande", Arial, Helvetica, Sans-Serif.
Ιστορικό-χρώμα: λευκό?
}

Έτσι, όλα τα στοιχεία στη σελίδα θα έχουν ιδιότητες που καθορίζονται στο Αυτό το αρχείο. Εάν είναι απαραίτητο να διαφέρει οποιοδήποτε στοιχείο της ιδιοκτησίας από τις προεπιλεγμένες ιδιότητες, πρέπει να αντικατασταθούν.

3. "Χαρακτηριστικά" ορισμένων προγραμμάτων περιήγησης.

Ωστόσο, ακόμη και αν ο Οδηγός Ιστού χρησιμοποιεί μόνο τις τυπικές δυνατότητες HTML, εγκατέστησε τα προεπιλεγμένα χαρακτηριστικά του για όλα τα στοιχεία, ο ιστότοπος μπορεί ακόμα να φαίνεται διαφορετικός σε διαφορετικά προγράμματα περιήγησης. Αυτό προέρχεται από το γεγονός ότι τα ίδια τα προγράμματα περιήγησης ενδέχεται να μην συμμορφώνονται με το πρότυπο HTML. Τα προγράμματα περιήγησης όπως οποιαδήποτε λογισμικόμπορεί να περιέχει σφάλματα. Αυτά τα σφάλματα συνήθως διορθώνονται γρήγορα, αλλά υπάρχει πάντα η πιθανότητα ότι ο χρήστης δεν είναι εγκατεστημένος Νέα έκδοση browser.
Είναι επίσης πιθανό οι κατασκευαστές των προγραμμάτων περιήγησης (ειδικά αυτή η αμαρτωλή Microsoft) να πιστεύουν ότι γνωρίζουν καλύτερα, όπως πρέπει να εμφανίζονται, ένα ή άλλο στοιχείο.

Δεδομένου ότι ο κύριος δράστης των προβλημάτων ασυμβατότητας με το πρότυπο είναι ο Internet Explorer, τότε πολλοί πιθανές λύσεις εφευρέθηκαν, πώς να φτιάξετε τον ιστότοπο στο δηλ.

Ο πιο συνηθισμένος τρόπος είναι τα σχόλια υπό όρους για το IE. Η Microsoft, σαν να γνωρίζει τα προβλήματα του προγράμματος περιήγησης, έδωσε στους προγραμματιστές έναν τρόπο να εκτελέσει κώδικα HTML μόνο σε μια ειδική έκδοση του IE. Για παράδειγμα, ο ακόλουθος κώδικας θα συνδέσει ένα ειδικό αρχείο CSS για την έκδοση του προγράμματος περιήγησης IE 7 και άνω: http://msdn2.microsoft.com/en-us/library/ms537512.aspx

Τα εξαρτήματα υπό όρους έχουν ένα μόνο μειονέκτημα. Μια σελίδα που περιλαμβάνει τέτοια σχόλια δεν είναι έγκυρη Σελίδα html. Όπως μπορείτε να δείτε, η Microsoft και εδώ παραβιάζει το πρότυπο.

Έχετε παρατηρήσει ποτέ ότι ο ιστότοπος μπορεί να εμφανιστεί διαφορετικά σε διαφορετικά προγράμματα περιήγησης; Αυτή είναι η σημασία της διάταξης crossbrester.

Τι είναι η διάταξη crossbrawser

Διάταξη crossbrawser - προσέγγιση της ανάπτυξης κώδικα HTML (διάταξη), η οποία παρέχει σωστά εμφανίζεται σε όλα τα υπάρχοντα προγράμματα περιήγησης

Επιπλέον, ακριβώς ακριβώς ακριβώς η ακριβής θέση όλων των τμημάτων της διάταξης και η λειτουργική. Ο ιστότοπος πρέπει να φαίνεται εξίσου σε όλα τα δημοφιλή προγράμματα περιήγησης:

• Firefox.
• Χρώμιο.
• ΛΥΡΙΚΗ ΣΚΗΝΗ.
• Opera Mini.
• Σαφάρι.
• Internet Explorer.

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

Η διάταξη του προγράμματος περιήγησης CrossBox είναι γνωστή σε εκείνους που εργάστηκαν με το πρόγραμμα περιήγησης του Internet Explorer 6 - έβαλε πολλά νεύρα στους στίχους σε βάρος της μοναδικότητάς της. Και αυτή η μοναδικότητα εκφράστηκε στο ότι αυτό το πρόγραμμα περιήγησης δεν υποστηρίζει πολλούς κανόνες και πρότυπα. Ως αποτέλεσμα, ήταν έτσι ώστε η κατάλογη διάταξη να κοίταξε τον Firefox και την όπερα είναι απλά μεγάλη, ψεκάζοντας στο IE6 σε ένα απόλυτο χυλό.

Αιτίες παραβίασης της σωστής προβολής σελίδας

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

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

Τι χρειάζεστε για τη διάταξη Cross-browser - εργαλεία

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

Οι συμβατικοί πίνακες που δείχνουν διαφορές στην αντίληψη των μεμονωμένων στοιχείων διαφόρων προγραμμάτων περιήγησης. Δηλαδή, προκειμένου να εκτελέσουμε τη διάταξη του προγράμματος περιήγησης, θα χρειαστούμε:

• Γενικές γνώσεις της διάταξης.
• Γνώση στον τομέα των χαρακτηριστικών διάταξης κάτω από ορισμένα προγράμματα περιήγησης.
• Αρκετά προγράμματα περιήγησης σε έναν υπολογιστή.
• Ελέγξτε το πρόγραμμα BrowsersHots.org

Με την ευκαιρία, θα ήταν ωραίο να δημιουργήσετε στον υπολογιστή σας Εικονική μηχανήΕγκαταστήστε σε αυτό Λειτουργικό σύστημα Και να κατεβάσετε τις παλιές εκδόσεις των προγραμμάτων περιήγησης - πολλοί εξακολουθούν να χρησιμοποιούν το παλιό λογισμικό που δεν καταλαβαίνει σύγχρονες τεχνολογίες.

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

• Μέγιστη συμμόρφωση με την αρχική διάταξη και τις επιθυμίες του πελάτη.
• Μέγιστη σωστή οθόνη σε όλα τα δημοφιλή προγράμματα περιήγησης.

Στη διαδικασία δημιουργίας μιας διάταξης cross-browser στον κώδικα ρυθμίζει τα χαρακτηριστικά των στοιχείων HTML από προεπιλογή, η οποία ήδη στο αρχικό στάδιο σας επιτρέπει να απαλλαγείτε από την εσφαλμένη εμφάνιση ακόμη και των πιο απλών διατάξεων των μελλοντικών τοποθεσιών. Στη συνέχεια, είναι η ευθυγράμμιση των ετικετών, λαμβάνοντας υπόψη τη συμβατότητα του κώδικα σε διάφορα προγράμματα περιήγησης. Σε αυτό το στάδιο, ο Velocker θα πρέπει να παρακολουθεί συνεχώς την ορθότητα της οθόνης του ιστότοπου, χρησιμοποιώντας τα προγράμματα περιήγησης όλων των εκδόσεων και των γενεών για αυτό (σε κάθε περίπτωση, τουλάχιστον ένα βασικό σύνολο δημοφιλών προγραμμάτων περιήγησης των τελευταίων ετών).

Προκειμένου να διευκολυνθεί η δουλειά της για τη δημιουργία μιας διάταξης διασποράς, πρέπει πρώτα να τοποθετήσετε τη διάταξη για ένα πρόγραμμα περιήγησης, να ελέγχετε την αλληλογραφία του αρχικού προτύπου στο PSD. Μετά από αυτό, η ορθότητα της οθόνης σε άλλα προγράμματα περιήγησης ελέγχεται με ταυτόχρονες αναβαθμίσεις του πηγαίου κώδικα. Αυτή η προσέγγιση επιταχύνει σημαντικά τη δημιουργία διάταξης cross-browser και επιτρέπει σε σύντομο χρονικό διάστημα να λάβει αξιοπρεπή αποτελέσματα.

συμπέρασμα

Το CrossBox Brown Layout είναι ο ακρογωνιαίος λίθος ενός σύγχρονου σχεδιασμού ιστοσελίδων. Οι διαφορές στο έργο των προγραμμάτων περιήγησης αποτελούν συχνά εμπόδιο στην εφαρμογή ορισμένων ευκαιριών. Ως αποτέλεσμα, είμαστε ικανοποιημένοι με τον κατάλογο, αλλά έφεραν στην κορυφή του αποτελέσματος της τελειότητας. Και σήμερα η διάταξη cross-browser συμπληρώθηκε με την ανάγκη δημιουργίας προσαρμοστικού σχεδιασμού, που εμφανίζεται σωστά όχι μόνο σε οποιαδήποτε προγράμματα περιήγησης, αλλά και σε οποιεσδήποτε κινητές συσκευές.

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

Ποια είναι η διάταξη cross-browser;

Το HTML / CSS αποτελεί τη βάση για τη δημιουργία της τοποθεσίας. Πολλοί webmasters είναι κατάλληλοι για αυτό, κατ 'αρχήν: αισθάνομαι καλά - και αρκετά. Και πώς είναι δυσάρεστο όταν προέρχεστε από το πρόγραμμα περιήγησής σας ή Κινητή συσκευήΚαι ο ιστότοπος εμφανίζεται εσφαλμένα. Σε τέτοιες περιπτώσεις, η διάταξη του προσαρμοστικού σχεδιασμού και της διασταύρωσης του προγράμματος περιήγησης έρχεται στη διάσωση.

Το CSS και το HTML είναι σε αυτή την περίπτωση η ραχοκοκαλιά, με την οποία εφαρμόζονται τα πάντα. Σε ορισμένες περιπτώσεις, μπορεί να συμμετάσχει το JavaScript για το σκοπό αυτό. Αλλά ο απώτερος στόχος κάποιος είναι να το κάνουμε έτσι ώστε όλα να εργαστούν σε διαφορετικές εκδόσεις. Ως εκ τούτου, εάν υπάρχει η επιθυμία να παρέχετε διασταυρούμενο πρόγραμμα περιήγησης, έτσι ώστε ο ιστότοπος να εμφανίζεται καλά σε όλα τα προγράμματα περιήγησης, είναι απαραίτητο να το σκεφτείτε συνεχώς, από το πρώτο δευτερόλεπτο του site.

Οδηγός βήμα προς βήμα γενικά

Έτσι, ας δούμε πώς να κάνουμε διάταξη cross-browser. Αρχικά, θα πρέπει να ορίσετε, με ποια προγράμματα θα λειτουργήσει ο ιστότοπος. Παρακαλείστε να σημειώσετε ότι ο αριθμός των προγραμμάτων περιήγησης πλησιάζει δύο εκατοντάδες, τόσο προσπαθώντας να ευχαριστήσουν τα πάντα - το θέμα της απίστευτης πολυπλοκότητας. Ως εκ τούτου, επιλέξτε έναν αριθμό στην περιοχή από 3 έως 8. Για να αποφασίσετε τι να πλοηγηθείτε, μπορείτε να χρησιμοποιήσετε τις βοηθητικές υπηρεσίες όπως το Yandex Metrika και στη συνέχεια θα πρέπει να μάθετε πώς θα λυθεί το πρόβλημα της επίτευξης cross-browser.

Πολλοί κάνουν το στοίχημά τους στο Khaki. Αυτοί είναι ειδικοί κώδικες, επιλογείς και κανόνες που κατανοούν μόνο ένα συγκεκριμένο πρόγραμμα περιήγησης. Ωστόσο, δεδομένου ότι είναι απαραίτητο να γράψουμε τουλάχιστον αρκετές δεκάδες ένθετα για διαφορετικά προγράμματα περιήγησης και τις εκδόσεις τους, πολλοί γράφουν μια τέτοια προσέγγιση λόγω του υψηλού κόστους τους, τη διάρκεια και τον παράλογο του. Ορισμένοι κάνουν ένα στοίχημα σχετικά με τη χρήση αυτών των στοιχείων που εμφανίζονται εξίσου. Αλλά ταυτόχρονα, συχνά χάνονται ορισμένα σημαντικά πλεονεκτήματα. Για να ελαχιστοποιηθούν οι απώλειες, ο προσαρμοστικός σχεδιασμός χρησιμοποιείται επίσης παράλληλα. Τι αντιπροσωπεύει;

Προσαρμοστικός σχεδιασμός

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

Υπάρχουν προγράμματα περιήγησης όπως η όπερα και η όπερα Mini. Το πρώτο χρησιμοποιείται από συνηθισμένοι υπολογιστέςΚαι το δεύτερο είναι σε κινητά τηλέφωνα. Γενικά, είναι παρόμοια, αλλά έχουν πολλά χαρακτηριστικά. Σε τέτοιες περιπτώσεις, είναι σημαντικό να συνδέσετε ξεχωριστά αρχεία ή / και τη χρήση μητρώων πολυμέσων. Τι είναι αυτό? Στην πρώτη περίπτωση δημιουργούνται Ξεχωριστά αρχείαοι οποίοι απευθύνονται στην εργασία ενός συγκεκριμένου προγράμματος περιήγησης και θα συνταγογραφήσουν την κλήση τους. Στη δεύτερη περίπτωση, χρειάζονται αρχεία με το μητρώο πολυμέσων. Εάν το πρόγραμμα που χρησιμοποιεί το πρόγραμμα πληροί συγκεκριμένες απαιτήσεις, το αρχείο φορτώνεται στην επιθυμητή διαμόρφωση.

Τι πρέπει να κάνουμε?

Αρχικά, θα πρέπει να θυμόμαστε ότι όταν εργάζεστε με HTML, η διάταξη Cross-browser απαιτεί ιδιαίτερη προσοχή. Επομένως, για μεγαλύτερη απόδοση, η μέγιστη χρήση των δυνατοτήτων Πίνακες Cascading Στυλ. Πρέπει επίσης να αλλάξει και ορισμένες προσεγγίσεις στην εργασία. Έτσι, πολλοί άπειροι άνθρωποι όταν δείχνουν το μέγεθος του κάτι, χρησιμοποιήστε pixels - px. Εξετάστε ένα παράδειγμα με μια μεγάλη επιγραφή τίτλου που κοσμεί την κορυφή του ιστότοπου.

Έχει ένα πλάτος στο ποσό των 800ης. Με την οθόνη το 1600RX θα είναι αρκετά ελκυστικό. Αλλά στο 700rch θα φανεί γελοίο. Τι να κάνετε σε αυτή την περίπτωση; Μπορείτε να ορίσετε το μέγεθος όχι σε εικονοστοιχεία, αλλά σε ποσοστό! Και δεν θα είναι σταθερό μήκος κατοχής της επιγραφής, αλλά το ήμισυ του πλάτους της οθόνης. Σε ποσοστό, μπορείτε να ορίσετε την απόσταση στην οποία θα τοποθετηθεί ένα συγκεκριμένο στοιχείο στις άκρες της οθόνης. Αλλά τι γίνεται αν η οθόνη είναι πολύ μικρή;

Ας υποθέσουμε ότι είναι 300Rh; Σε αυτή την περίπτωση, το μητρώο των μέσων ενημέρωσης θα μας βοηθήσει, οι οποίοι πρέπει να καθοριστούν ορίζοντας το πλάτος. Και αν είναι 700 ρούβλια και λιγότερο, τότε μπορείτε να διαπιστώσετε ότι η επιγραφή θα διαρκέσει το 75% του τόπου. Και αν το πλάτος είναι 300RH και λιγότερο, τότε μπορείτε να ορίσετε το 100%. Γενικά, το θέμα είναι πολύ ενδιαφέρον και χρήσιμο, οπότε μπορεί να μελετηθεί αρκετά λεπτομερώς. Αλλά, δυστυχώς, εδώ πληροφορίες για το βιβλίο και βάζετε τα πάντα στο άρθρο δεν θα λειτουργήσουν.

Γιατί είναι η προσαρμοστική διάταξη Cross-browser προσελκύει μηχανές αναζήτησης;

Και η απάντηση είναι πολύ απλή: επειδή λέει ότι οι προγραμματιστές παρακολουθούν τον ιστότοπο και κάνουν το πιο ευχάριστο για τους χρήστες τους. Έτσι, οι άνθρωποι αυτοί μπορούν να ενθαρρυνθούν παρέχοντάς τους υψηλότερες θέσεις στις μηχανές αναζήτησης. Φυσικά, ο ιστότοπός σας δεν θα αφαιρεθεί αμέσως στην κορυφή 1, αλλά σε συνδυασμό με άλλους παράγοντες, αυτό θα επιτρέψει έντονα αναρρίχηση. Πρέπει να σημειωθεί ότι αυτό δεν είναι μια απλή άχρηστη απαίτηση, αλλά κάτι που αξίζει να δοθεί προσοχή.

Μετά από όλα, σκεφτείτε το: Τι είναι αυτός ο χρήστης όταν χτυπά τον ιστότοπο που δεν είναι πολύ ευχάριστο εξωτερικά; Αλλά μπορεί να έρθει στη σκέψη ότι Σύστημα αναζήτησης Προσφέρει περιεχόμενο κακής ποιότητας! Ως εκ τούτου, επιλέγονται τόσο προσεκτικά τοποθεσίες που πρέπει να προσφερθούν. Επιπλέον, υπάρχει επίσης το πλεονέκτημα των webmasters, επειδή δημιουργούν ένα κέλυφος ποιότητας για περιεχόμενο, στην οποία οι άνθρωποι θα μπορούν να λαμβάνουν τις πληροφορίες που σας ενδιαφέρουν να χρησιμοποιήσετε οποιοδήποτε υλικό: υπολογιστή, φορητό υπολογιστή, tablet, smartphone, ή κινητό τηλέφωνο. Κατά συνέπεια, οι πιο ικανοποιημένοι επισκέπτες, οι ταχύτεροι ο χώρος και το επίπεδο εισοδήματος αυξάνεται.

συμπέρασμα

Είναι αδύνατο να μην σημειώσουμε το μέτριο γεγονός ότι η δημιουργία μιας τοποθεσίας Cross-Browser με Προσαρμοστικός σχεδιασμός - Αυτό δεν είναι εύκολη επιχείρηση, πολύ καιρό και χρονοβόρα. Επομένως, πρέπει να είστε υπομονετικοί και να θυμάστε ότι η πειθαρχία είναι ένα μεγάλο πράγμα! Είναι πιθανό να μην επιτευχθεί κάτι αρχικά, αλλά πρέπει να δοκιμάσετε, να αναζητήσετε πληροφορίες, να χρησιμοποιήσετε διάφορες προσεγγίσεις και να μην υποχωρήσετε. Και τότε θα χρειαστεί να γίνει ένας ιστότοπος που θα είναι ακριβός να δείξει τους επισκέπτες του.

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

Ορισμένα προγράμματα περιήγησης λειτουργούν μόνο σε μία πλατφόρμα: η άκρη και δηλαδή είναι μόνο σε παράθυρα, σαφάρι μόνο σε macos και Ίο. Υπήρχαν κάποτε από τις παρεμβάσεις, αλλά δεν βγήκε τίποτα. Σίγουρα περιπλέκει τις δοκιμές. Ευτυχώς, υπάρχουν υπηρεσίες όπως το Browserstack, το οποίο σας δίνει πρόσβαση σε όλα τα υπάρχοντα προγράμματα περιήγησης και η Microsoft καθορίζει τις συσκευές των Windows Compact για να ελέγξετε την άκρη και δηλαδή σε εικονικές μηχανές.

Εντάξει! Τώρα γνωρίζουμε για τα προγράμματα περιήγησης. Και τι γίνεται αν το ίδιο πρόγραμμα περιήγησης, ο ίδιος κινητήρας - και το αποτέλεσμα σε διαφορετικές πλατφόρμες είναι διαφορετική; Και τίποτα δεν μπορεί να γίνει! Στην πραγματικότητα, τα προγράμματα περιήγησης μπορούν να διαφέρουν σημαντικά ανάλογα με την πλατφόρμα ή τη συσκευή. Η μεγαλύτερη διαφορά μεταξύ επιφάνειας εργασίας και Κινητά προγράμματα περιήγησης - Στο τελευταίο υπάρχουν πολλές βελτιστοποιήσεις και απλά μαγεία. Αλλά μπορείτε να πιάσετε διαφορετική συμπεριφορά στα παράθυρα των επιτραπέζιων υπολογιστών και του macos.

Νομίζω ότι έχετε ήδη καταλάβει τι είμαι ένας κλώνος. Το CrossBoxgrity είναι ένα τέτοιο Unicorn Rainbow, ακολουθούμενο από όλα κυνηγώντας, αλλά κανείς δεν μπορεί να πιάσει. Ο στόχος του Chase είναι σίγουρα ευγενής: έτσι ώστε οι ιστότοποι να φαίνονται και να εργάζονταν το ίδιο καλά σε όλα τα προγράμματα περιήγησης και όλες τις πλατφόρμες. Και αν το μέγεθος των εσοχών, της γραμματοσειράς, του ύψους γραμμής, το χρώμα μπορούμε ακόμα περισσότερο ή λιγότερες εγγύηση, στη συνέχεια εξομάλυνση του κειμένου, θαμπάδα σκιών, απόδοση γραφικών και εμφάνιση Οι έλεγχοι του συστήματος δεν προσπαθούν να οδηγήσουν σε κοινό μυαλό.

Έτσι, αν ένα pixel-prepe για σας είναι να μπείτε στο πλέγμα και στα οριζόντια μεγέθη μπλοκ, τότε εξακολουθείτε να έχετε πιθανότητες. Αλλά αν στρίβετε το κείμενο εξομάλυνσης, ο αριθμός των γραμμών στην παράγραφο ή Κατακόρυφη διαστάσεις Μπλοκ με περιεχόμενο, αυστηρά στη διάταξη, ξοδεύετε ότι ο χρόνος χάνεται. Μια ιδανική τοποθεσία cross-browser θα φανεί εξίσου αλλοδαπός σε όλες τις πλατφόρμες - τελικά, το καθένα έχει τα δικά του χαρακτηριστικά γνωστά στους χρήστες.

Και πολλά άλλα για τη δοκιμή. Ανεξάρτητα από το πόσο καλά μίλησα τη συσκευή και τα προγράμματα περιήγησης ο εξομοιωτής chromy devtools είναι απλά ένας υπαινιγμός για το πώς θα φαίνονται στην πραγματικότητα. Είναι σημαντικό να ελέγξετε το αποτέλεσμα σε πραγματικές πλατφόρμες και συσκευές, τουλάχιστον: στα παράθυρα, το Android, MacOS και IOS. Τα πραγματικά δάχτυλα στην παρούσα συσκευή, τα πραγματικά προγράμματα περιήγησης στον φυσικό περιβάλλον θα σας ενημερώσουν πολλά για το πώς να χρησιμοποιήσετε τις διεπαφές σας. Είναι πολύ πιο σημαντικό για το πόσο μοιάζουν.

Εγγραφείτε στην ειδήσεις του προγράμματος περιήγησης στο Twitter, εγκαταστήστε το Chrome Canary, το βράδυ του Firefox, η προεπισκόπηση της τεχνολογίας Safari. Ενεργοποιήστε τις σημαίες, δοκιμάστε, να γνωρίζετε και το πιο σημαντικό - αρκετά για να κυνηγήσετε τα εικονοστοιχεία, κάντε καλές διεπαφές. Οι ιστότοποι δεν πρέπει να δουν εξίσου σε όλα τα προγράμματα περιήγησης.

Βίντεο καλλιτέχνης