- c'est la capacité d'une ressource Web à s'afficher de manière égale et à fonctionner dans toutes les ressources populaires, sans interruption de fonctionnement ni erreurs de mise en page, ainsi qu'avec une lisibilité tout aussi correcte du contenu. En raison du développement rapide de la technologie, il est recommandé de rendre le site multi-navigateurs uniquement en ce qui concerne dernières versions navigateurs.

Ce terme a été utilisé pour la première fois dans les années 90, lorsque la rivalité entre navigateurs était à son paroxysme. À cette époque, les ressources multi-navigateurs étaient considérées comme fonctionnant aussi bien dans Netscape Navigarot (le navigateur a cessé d'exister en 2007) que dans Internet Explorer. Au fil du temps, les fabricants d’applications ont commencé à implémenter des fonctionnalités spécifiques à un seul des navigateurs. En conséquence, ils ont commencé à différer les uns des autres dans la manière dont les pages sont affichées et comment elles fonctionnent.

Tout navigateur moderne utilise ses propres algorithmes pour traiter la source et le code. À cet égard, les développeurs de ressources rencontrent des problèmes de compatibilité des sites avec l'un ou l'autre navigateur. Pour rendre un projet compatible avec tous les navigateurs, vous ne pouvez pas faire exactement cela : outils standards CSS. Cela nécessitera également des sélecteurs CSS spéciaux (hacks) propres à un navigateur spécifique, ils devront donc être écrits séparément pour chaque application.

Il y en a pas mal méthodes efficaces, à l'aide duquel vous pouvez obtenir un affichage correct des pages même sur les anciennes versions des navigateurs. Cependant, il n'est logique de recourir à de telles procédures que si vous êtes sûr que la majorité des visiteurs de votre site proviennent d'eux.

Ces dernières années, les référenceurs ont été confrontés à moins de problèmes entre navigateurs, les développeurs de logiciels cessant de prendre en charge les anciennes versions de leurs navigateurs. Par exemple, Microsoft déclare déjà ouvertement la nécessité d'utiliser Internet Explorer mis à jour, appelant à l'abandon versions obsolètes produit.

Sur une note. Aujourd'hui, de nombreux créateurs de sites Web installent page spéciale, appelé « stub », qui apparaît sur l'écran des utilisateurs de navigateurs non pris en charge par le site. Une telle page suggère de les remplacer par de nouvelles versions ou des navigateurs populaires afin que le contenu s'affiche correctement.

Il convient de noter que les éléments d'une ressource Web ne doivent pas être absolument identiques dans tous les navigateurs existants. Un site peut être considéré comme conforme si :

• les informations sur la page sont lisibles ;
• structure préservée ;
• aucune erreur de mise en page ;
• le texte n’est pas « superposé » sur d’autres textes et images, sauf indication contraire de l’auteur du contenu.

Lors du test d'une ressource Web pour la compatibilité entre navigateurs, il est nécessaire d'utiliser les dernières versions des navigateurs les plus populaires :

1. Google Chrome.
2. Mozilla Firefox.
3. Opéra.
4. Internet Explorer.
5. Netscape.
6. Safari.

Pour la raison que dans Dernièrement pour cent trafic mobile s'est considérablement développé et que Google l'a mis en œuvre, les webmasters s'impliquent de plus en plus pour assurer la compatibilité des pages avec les tablettes et les smartphones. Les écrans de ces appareils sont beaucoup plus petits que ceux des moniteurs Ordinateur personnel, ils doivent donc s’adapter aux appareils mobiles.

Comment rendre un site Web compatible avec tous les navigateurs ?

Il y a un peu méthodes actuelles, avec lequel vous pouvez obtenir la compatibilité entre navigateurs de votre ressource Web.

ApplicationCSS hacks

Les hacks CSS sont des morceaux de code que seul un navigateur comprend. Par exemple, si votre site s'affiche correctement dans trois navigateurs, mais que certains « jambages » sont visibles dans les trois autres, alors le problème peut être résolu en écrivant séparément les hacks appropriés pour chacun des trois navigateurs qui interprètent incorrectement le contenu du page.

Sur une note. Le kaki n'est pas le meilleur La meilleure façon corriger les erreurs dans le code, car elles le rendent laid et incorrect. Il continue cependant d’exercer ses fonctions.

Introduction d'éléments universels

Ces éléments fonctionnent aussi bien dans la plupart des navigateurs, il est donc recommandé d’y prêter une attention particulière. Utiliser uniquement des éléments universels source car votre site sera esthétique, court et clair, tout en étant compatible avec tous les navigateurs couramment utilisés.

Vous pouvez vérifier quelles balises sont prises en charge par quelle version du moteur en utilisant le service caniuse.com, disponible entièrement gratuitement.

Préfixes du fournisseur

Ils sont une relique de la guerre des navigateurs, notamment WebKit. Cette méthode est plus efficace et « plus propre » que l’utilisation de hacks.

Chaque navigateur possède des propriétés uniques dotées d'un préfixe de fournisseur. En prenant le cas de Google Chrome, l'élément border-radius est représenté ici par la propriété -webkit-border-radius. Et Mozilla Firefox ajoute le préfixe -moz-. De telles propriétés modifient la fonctionnalité d'un élément uniquement dans un navigateur spécifique et n'affectent en aucune façon les autres navigateurs.

Services de vérification multi-navigateurs

Si votre site Web n’est pas compatible avec tous les navigateurs, il sera difficile pour la plupart des visiteurs de découvrir son contenu de la même manière, ce qui entraînera des performances médiocres. facteurs comportementaux, dont il faut tenir compte moteurs de recherche dans le processus de classement des résultats de recherche.

Par conséquent, il est important de connaître la compatibilité entre navigateurs de votre ressource Web. Vous pouvez tester cet indicateur en utilisant un grand nombre de services disponibles à la fois en ligne et après installation sur l'appareil. Nous présentons à votre attention les services payants et gratuits les plus pratiques.

N°1. Tests multi-navigateurs

Ce service de test est payant et fonctionne en ligne. Il est pris en charge par presque toutes les versions systèmes d'exploitation, navigateurs, adaptés à la plupart des appareils mobiles et des résolutions d'écran.

Vous pouvez vérifier la conformité du site avec les différents navigateurs des manières suivantes :

• Test "en direct". Vous pouvez travailler avec la ressource dans un navigateur avec des paramètres présélectionnés, enregistrer des vidéos et prendre des captures d'écran.
• Test au sélénium. Implique une vérification automatique conformément à un script réalisé à l'avance. Il est permis d'enregistrer les résultats au format de fichier vidéo.
• Mode sauvegarde automatique captures d'écran Vous pouvez combiner différents systèmes d'exploitation, navigateurs, appareils et tailles d'écran.
• Connexion locale. Vous pouvez vérifier les documents qui n'ont pas encore été téléchargés sur le site.

Malgré le fait que le service soit payant, vous disposez d'une limite de 60 minutes pour l'utiliser pendant 7 jours afin d'évaluer les fonctions et capacités de l'application avant de souscrire à un abonnement payant.

N°2. Captures d'écran du navigateur

Un autre un service en ligne, où il est possible d'enregistrer des captures d'écran d'un site dont la compatibilité entre navigateurs est vérifiée, à partir de nombreux navigateurs et de leurs assemblages (plus de 200 pièces), y compris les plus obsolètes et les moins populaires.

À la fois gratuit et version payante. Le mauvais côté de la version gratuite est que votre demande est mise en file d'attente et les captures d'écran commenceront à être téléchargées sur le serveur une par une après la publication des sites. Cette procédure peut prendre de 10 minutes à 2-3 heures, ce qui est assez long.

Avec un abonnement payant, vos demandes de tests multi-navigateurs seront prioritaires. Vous pouvez également choisir la résolution d'écran, JavaScript et Flash différentes versions, ainsi que la profondeur des couleurs.

N ° 3. IE NetRenderer

Implique chèque gratuit, disponible en mode en ligne. Le service diffère en ce qu'il est possible de vérifier la conformité d'un site uniquement pour Internet Explorer, à partir de la version 5.5 à 11. Ici, vous pouvez uniquement spécifier la version du navigateur et l'adresse de la ressource testée.

Numéro 4. Testeur IE

Est navigateur spécial, où vous pouvez vérifier différentes versions d’IE. Il s'agit d'une application locale qui peut être utilisée après son installation sur votre ordinateur. Les principales fonctions de l'application sont de simuler le fonctionnement de la version sélectionnée du navigateur et de gagner de l'argent en ligne en consultant des pages Internet.

N ° 5. Navigation dans le navigateur

À travers de ce service vous avez la possibilité de travailler avec la ressource en cours de vérification non pas dans une ressource émulée, mais dans une véritable fenêtre de navigateur installée dans machine virtuelle programmes. La vérification peut être effectuée pour 5 navigateurs populaires (Chrome, Opera, IE, Safari, Firefox), pour 5 versions du système d'exploitation Windows et 4 versions du système d'exploitation Anrdoid. Vous pouvez ajuster la résolution de l'écran et prendre des captures d'écran. Toutes les fonctions du service sont payantes, seules les 3 premières minutes de test sont gratuites, avec une résolution de 1024x768 et Windows Vista.

Numéro 6. Bac à sable du navigateur Spoon

Offre une vérification de compatibilité du site avec précision Versions Chrome, IE, Opera, Safari et Firefox. Dernières versions les navigateurs sont testés gratuitement, mais si vous souhaitez tester des versions plus anciennes, vous devrez payer un certain montant.

Après avoir sélectionné un navigateur, celui-ci s'ouvrira dans une nouvelle fenêtre, puis dans la barre d'adresse, vous devrez spécifier l'URL de la page, puis la tester. L'outil permet de tester tous les paramètres de compatibilité entre navigateurs. Cependant, pour l’utiliser, vous devrez télécharger un plugin spécial.

N°7. Multi-navigateur

Vérificateur multi-navigateurs payant. Cela fonctionne avec tous ceux actuellement disponibles Versions de Firefox et Chrome, Safari 5.1, plusieurs versions d'Explorer et des émulations de la plupart des smartphones et tablettes avec une grande variété de résolutions d'écran.

L'application est capable d'utiliser les navigateurs déjà installés sur le PC ou de télécharger les versions dont l'utilisateur a besoin. Un énorme avantage du service est la fonction qui permet de tester le site en différents navigateurs hors ligne si vous enregistrez des fichiers Internet.

Grâce à la variété des modes, vous pouvez :

• travailler avec la ressource dans le navigateur souhaité ;
• regarder des sites Web sur des smartphones et des tablettes émulés, enregistrer des vidéos ;
• Enregistrez automatiquement des captures d'écran de divers navigateurs et appareils, en fonction de l'abondance des tailles d'écran.

Pour commencer, vous pouvez installer une version démo du programme, disponible pendant 2 semaines.

N°8. Laboratoires de sauces

Service de test multi-navigateurs en ligne. version d'essai c'est assez limité, mais lors de la conception abonnement payant sera disponible contrôle automatique. Il existe environ 700 combinaisons de navigateurs, de résolutions et d'appareils.

N°9. Navigateur

L'application de vérification multi-navigateurs est disponible en version payante et version gratuite. Les fonctions du second sont bien entendu considérablement limitées par le nombre de pages du site vérifiées et de navigateurs disponibles.

N°10. Tournesol

Une application en ligne utilisable gratuitement uniquement pendant les 3 premiers jours. Prend en charge de nombreuses nouvelles versions de navigateurs populaires et appareils mobiles.

N° 11. Équafy

Ce programme le plus efficace non seulement pour tester la compatibilité entre navigateurs d'une ressource Web en ligne, mais également pour numériser et rechercher automatiquement les erreurs de mise en page lors du processus d'affichage des documents de la manière la plus optimale possible. différents navigateurs.

Avant de vérifier ce qui peut être enregistré au format vidéo, vous pouvez effectuer de nombreux réglages qui ne sont pas disponibles dans de nombreux autres services similaires. Le seul problème - langue anglaise, mais avec l'aide d'un traducteur, il ne sera pas du tout difficile de comprendre la fonctionnalité.

Vous pouvez visualiser des captures d'écran dans la liste des pages du rapport terminé en cliquant sur la flèche Afficher dans la colonne extérieure.

N°12. Pile de navigateur

Une application payante dont la version démo peut être essayée dans les 30 premières minutes. Tester la fonctionnalité multi-navigateurs d'un site peut être effectué avec 7 navigateurs modernes de versions différentes, une abondance de smartphones et de tablettes émulés, ainsi que des logiciels installés sur l'ordinateur.

Le navigateur que vous avez choisi pour tester la ressource apparaît dans la fenêtre du navigateur. Internet y est entièrement accessible et il est également possible de créer des captures d'écran.

N°13. Viewlike.us

Un excellent service pour vérifier l'affichage d'une ressource avec différentes extensions. C'est une excellente option si vous souhaitez tester l'apparence de votre site Web et découvrir sa réactivité.

En plus de vérifier la compatibilité entre navigateurs, vous découvrirez également la vitesse de chargement et la facilité d'utilisation de la ressource. Viewlike.us vous aidera à connaître la taille des éléments de code HTML et des images, ainsi que le nombre de ressources statiques.

Un autre outil vous permet d'obtenir des recommandations concernant les règles d'utilisabilité. Par exemple, le site a-t-il une taille de police mal reconnue et utilise-t-il des plugins ? Ensuite, vous recevrez des captures d'écran des pages de ressources Web testées dans différentes résolutions.

N°14. Laboratoire fantôme

Gratuit-payant programme multifonctionnel essai. La version d'essai est disponible pendant les 7 premiers jours.

Tous les services ci-dessus permettant de vérifier la compatibilité entre navigateurs d'un site Web diffèrent dans une certaine mesure les uns des autres par certaines capacités qui leur sont propres. Par conséquent, il est préférable d'utiliser plusieurs applications à la fois pour tester afin de vérifier complètement la ressource et d'obtenir toutes les données nécessaires.

Conclusion

La compatibilité entre navigateurs a un grand impact sur les indicateurs comportementaux et, par conséquent, sur la position du site dans le classement des moteurs de recherche. Le nombre de visiteurs et l'intérêt des utilisateurs pour son contenu dépendent de la qualité et du nombre de navigateurs pris en charge par votre projet.

Il n’est pas nécessaire d’être un spécialiste expérimenté pour comprendre que lorsqu’elle visite un site Web à partir d’un smartphone, une personne est susceptible de le quitter si le design et la structure de son appareil semblent illisibles et inesthétiques. N’oubliez pas non plus que les moteurs de recherche récompensent les ressources web adaptées, dont la conception respecte les règles de mise en page, élevant leur classement interne et améliorant ainsi la conversion.

Alexander Ovsyannikov alias Internet Major

Je fais la promotion et gagne de l'argent sur des sites Web depuis 2009.

Nous avons libéré nouveau livre"Le marketing de contenu dans dans les réseaux sociaux: Comment entrer dans la tête de vos abonnés et les faire tomber amoureux de votre marque.

S'abonner

La compatibilité entre navigateurs est la capacité d'une ressource Web à s'adapter à plusieurs navigateurs et à s'afficher correctement dans ceux-ci.

Plus de vidéos sur notre chaîne - apprenez le marketing Internet avec SEMANTICA

Par exemple, vous avez créé un site Web pour votre boutique en ligne. tu as développé Beau design, ce qui est agréable à l'oeil. Mais les utilisateurs accèdent à votre site via différents navigateurs. Certaines personnes utilisent effectivement un smartphone. Et si vous n'avez pas vérifié la compatibilité entre navigateurs de la ressource, il peut arriver que le site ne s'affiche pas bien dans certains navigateurs.

Les éléments peuvent bouger, les images peuvent ne pas s'afficher et les polices peuvent devenir laides. Une personne n'utilisera pas un tel service. Il poursuivra ses recherches.

La tâche du développeur du site est de faire en sorte que, quels que soient le navigateur et l'appareil, la ressource s'affiche correctement.

Disposition multi-navigateur

Il existe une concurrence entre les navigateurs. Auparavant, tout le monde essayait d'ajouter des fonctionnalités et des options exceptionnelles. Cela a entraîné le non-respect des normes HTML et le rendu des pages par chaque navigateur différemment.

Netscape Navigator abandonne la course, laissant le monopole à Internet Explorer. Presque simultanément, ils ont commencé à prendre de l'ampleur Projets Mozilla Firefox (Gecko), Google Chrome (Blink), Opera (WebKit) et Safari (WebKit), se partageant le marché et obligeant la communauté à réfléchir à la question de la compatibilité entre navigateurs de leurs sites.

Aujourd’hui, il existe plusieurs des navigateurs les plus populaires que les gens utilisent pour surfer sur Internet. Et le casse-tête constant de tout concepteur de sites Web est que le même code HTML apparaît différemment selon les navigateurs. De plus, le même code apparaît différemment selon les différentes versions du même navigateur.

Naturellement, tout webmestre doit s'assurer que le site a la même apparence dans le plus grand nombre navigateurs. C'est cette compétence (lorsque le code est identique dans différents navigateurs) qui est appelée « mise en page HTML multi-navigateurs ». La possibilité de taper un tel code est très utile et appréciée par les employeurs potentiels. Très souvent, cette exigence est l'une des premières conditions que doit satisfaire un candidat potentiel à un poste de programmeur web dans une entreprise sérieuse.
Pourquoi le site apparaît-il différemment selon les navigateurs ?

Il y a plusieurs raisons à l'apparition divers types site sur différents navigateurs.

1. Utilisation de fonctionnalités HTML non standard.

Le concepteur peut utiliser des fonctionnalités qui ne sont pas incluses dans le standard HTML. En effet, les navigateurs peuvent prendre en charge de nombreux divers attributs balises qui ne sont pas décrites dans la norme. Il n'est pas recommandé d'utiliser ces fonctionnalités. Pour une raison simple : si quelque chose n'est pas décrit dans la norme, aucun des navigateurs peut ne pas le prendre en charge. Et les créateurs d'un tel navigateur auront tout à fait raison. Pas besoin d'utiliser des fonctionnalités non standard.

Vérifiez toujours le code que vous écrivez pour vous assurer qu’il est conforme à la norme.

Laissez-moi vous donner un exemple classique. Considérez le code HTML suivant pour un tableau simple.

Bonjour le monde

Ce code affiche un tableau composé d'une cellule. Le web designer souhaite que la hauteur de la première ligne de ce tableau soit de 100 pixels. Cependant, dans le standard HTML, la balise L'attribut de hauteur n'est pas valide.

Dans ce cas, l’erreur n’est pas grande, puisque l’attribut height de la balise compris par la plupart des navigateurs modernes. (Seul InternetExplorer 4 ne reconnaît pas cet attribut). Mais dans d’autres cas, négliger la norme peut conduire à des résultats encore plus désastreux. Nous avons sûrement tous été sur des sites où certains éléments se sont déplacés soit vers le côté, soit vers le bas. Chacun de nous pensait très probablement dans son cœur que le site n'avait pas été réalisé par un professionnel. Bien que, très probablement, le site n'ait tout simplement pas été testé sur les principaux types de navigateurs. En règle générale, les sites sont créés et testés uniquement dans Internet Explorer, car il s'agit de la version la plus simple. navigateur populaire parmi les utilisateurs. Par conséquent, la prochaine fois, nous serons indulgents, sachant pourquoi la perte d’apparence se produit.

La bonne solution pour l’exemple de tableau consiste à utiliser des styles. Voici à quoi pourrait ressembler le code « correct » :

Bonjour le monde

Cette option affichera (ou du moins devrait) la même chose dans tous les types de navigateurs.

2. Valeurs d'attribut par défaut.

Chaque élément HTML possède de nombreux attributs. Cela inclut la couleur, la distance par rapport aux éléments adjacents, l’alignement et bien plus encore. Lors de la mise en page du code HTML, le concepteur définit généralement les valeurs uniquement des attributs importants pour la présentation des éléments sur la page. Que doit faire le navigateur avec les valeurs d'attributs non spécifiés ? Dans ce cas, les navigateurs utilisent les valeurs par défaut. Et c’est là que réside le danger. Les valeurs par défaut peuvent varier selon les navigateurs. Par exemple, la taille de police par défaut peut varier. Pour cette raison, le texte occupera plus d’espace dans certains navigateurs que dans d’autres. Ce qui, à son tour, peut entraîner des différences dans l’affichage des pages.

Comment puis-je résoudre ce problème? Tout d’abord, un conseil universel : vérifiez l’affichage du site dans un maximum de navigateurs. Deuxièmement, vous pouvez définir vos valeurs par défaut dans le fichier CSS pour tous les éléments utilisés sur la page. Cela évitera au navigateur d'avoir à déterminer les valeurs des propriétés. Éléments HTML. Vous pouvez faire cela, par exemple, comme ceci :
html, corps, div, span, applet, objet, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pré,
a, abbr, acronyme, adresse, gros, citer, code,
del, dfn, em, police, img, ins, kbd, q, s, samp,
petit, grève, fort, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, formulaire, étiquette, légende,
tableau, légende, tcorps, tpied, tête, tr, th, td (
marge : 0 ;
remplissage : 0 ;
bordure : 0 ;
contour : 0 ;
font-weight : hériter ;
style de police : hériter ;
taille de police : 14 px ;
font-family : hériter ;
alignement vertical : haut ;
fond : transparent ;
police : verdana, geneva, lucida, « lucida grande », arial, helvetica, sans-serif ;
couleur de fond : blanc ;
}

Ainsi, tous les éléments de la page auront les propriétés spécifiées dans ce fichier. S'il est nécessaire qu'un élément ait des propriétés différentes des propriétés par défaut, elles doivent alors être explicitement remplacées.

3. « Fonctionnalités » de certains navigateurs.

Cependant, même si le webmaster utilise uniquement caractéristiques standards HTML a défini ses attributs par défaut pour tous les éléments, le site peut toujours avoir un aspect différent selon les navigateurs. En effet, les navigateurs eux-mêmes peuvent ne pas être conformes à la norme HTML. Les navigateurs, comme n'importe quel autre logiciel, peut contenir des erreurs. En règle générale, ces erreurs sont rapidement corrigées, mais il est toujours possible que l'utilisateur ne dispose pas du meilleur logiciel installé. dernière version navigateur.
Il est également possible que les fabricants de navigateurs (MicroSoft en est particulièrement coupable) pensent qu'ils savent mieux afficher tel ou tel élément.

Étant donné qu'Internet Explorer est le principal responsable des problèmes d'incompatibilité, de nombreuses solutions de contournement possibles ont été créées pour donner à un site la même apparence dans IE que dans d'autres navigateurs.

Le moyen le plus courant consiste à commenter conditionnellement pour IE. Microsoft, comme s'il était conscient des problèmes de son navigateur, a donné aux développeurs un moyen d'exécuter du code HTML uniquement sur une version spéciale d'IE. Par exemple, le code suivant inclura un fichier CSS spécial pour le navigateur IE version 7 et ultérieure : http://msdn2.microsoft.com/en-us/library/ms537512.aspx

Les commentaires conditionnels présentent un inconvénient. Une page qui inclut de tels commentaires n’est pas valide. Page HTML. Comme vous pouvez le constater, Microsoft viole ici également la norme.

Le sujet collecté en lui-même comme tout le monde méthodes connues mise en page multi-navigateurs, ainsi que plusieurs intéressantes et assez rares.

Préface. Pourquoi est-ce arrivé

Après l'apparition en 1994 d'un des premiers navigateurs à succès, Netscape Navigator, créé sur la base du premier navigateur avec coque graphique Mosaic, Microsoft a décidé de créer son propre navigateur et de l'appeler Internet Explorer. Les première et deuxième versions d'IE étaient livrées avec Forfait Microsoft En plus !, complémentaire Fonctionnalités Windows, mais n'étaient pas largement utilisés. Ensuite, Microsoft a décidé de développer un navigateur radicalement différent d'IE 1.0 et 2.0, pour lequel l'entreprise a embauché des programmeurs de Spyglass, qui ont développé nouveau navigateur basé sur Mosaïque. C'est ainsi qu'est apparu Internet Explorer 3.0 en 1996. Cependant, les développeurs ont introduit dans le navigateur des extensions HTML non conformes aux normes, qui ont ensuite été conservées de version en version. Le développement parallèle ultérieur d'IE et de Netscape Navigator a permis à IE de conquérir 95 % du marché. La stagnation du développement d'IE de la version 4.0 à la version 6.0, avec une mauvaise prise en charge des standards, une faible vitesse de fonctionnement et un affichage des pages faible, a conduit à la renaissance de Netscape dans la version 6.0, écrite sur le nouveau moteur Gecko. Le Netscape Navigator mis à jour n'a pas pu atteindre ses anciens sommets et, au fil du temps, Netscape a annoncé la fin du support pour son navigateur.
Cependant Moteur Gecko a servi de base à la création en 2004 navigateur moderne Mozilla Firefox. En 1996, Opera apparaît et connaît le succès avec rapidité et simplicité d'utilisation. En 2003 entreprise Apple a sorti son navigateur Safari basé sur le moteur WebKit, abandonnant IE, précédemment utilisé sous Mac OS. En 2008 année Google a également décidé de se lancer dans la course aux navigateurs en lançant Google Chrome, basé sur le même moteur que Safari.
Ainsi, chacun des navigateurs a son propre historique, ses propres versions, qui à leur tour diffèrent Prise en charge de Javascript, HTML et CSS.

Aujourd'hui, la part de marché mondiale des navigateurs est de : 45 % pour IE, 31 % pour Firefox, 15 % pour Chrome, 5 % pour Safari et 2 % pour Opera.
Par ailleurs, je voudrais me réjouir de la baisse de la part de marché du navigateur « le plus ancien » et problématique IE6, qui n'en occupe désormais que 6 %.

Compatibilité entre navigateurs

La compatibilité entre navigateurs signifie le même affichage et le même fonctionnement d’un site Web dans différents navigateurs. Dans ce sujet, je ne considérerai pas les problèmes Travail JavaScript dans différents navigateurs, mais je me concentrerai sur la mise en page.

Il existe deux manières principales d'obtenir le même affichage d'un site dans les navigateurs :

Séparation des styles à l'aide de commentaires conditionnels

La séparation des styles pour différents navigateurs est l’une des méthodes les plus courantes de mise en page entre navigateurs. L'essence de la méthode est d'identifier le type de navigateur de l'utilisateur et d'appliquer le style approprié avec le style principal.

Les commentaires conditionnels ne sont compris que par IE, donc les autres navigateurs liront ce code comme des commentaires normaux.

Vous pouvez définir des styles qui seront vus par tous les navigateurs sauf IE :

Il est également possible d'identifier la version d'IE de l'utilisateur :
pour IE6
pour IE6 et supérieur
pour IE inférieur à la version 6
pour IE inférieur ou égal à la version 6
pour IE supérieur à la version 6
et connecter le style approprié pour chaque version d'IE (le numéro de version d'IE peut être modifié par celui souhaité).

Vous pouvez éviter d'avoir à inclure différents styles CSS pour différentes versions IE, définition des versions d'IE et attribution de classes au corps :

Et en les utilisant davantage dans le style général de chaque version :
.ie6 .elementstyle (
arrière-plan : #123 ;
}

Plus cette méthode est la validité de son utilisation.

Astuces CSS

Une autre méthode non moins courante de mise en page multi-navigateurs est le hack CSS, qui vous permet de définir des propriétés pour des éléments spécifiques.

Pour IE6 :
.elementstyle (
_arrière-plan : #123 ;
}
ou:
.elementstyle (
-arrière-plan : #123 ;
}
ou valide :
*html.elementstyle(
arrière-plan : #123 ;
}

Pour IE7 :
*+html .style (
arrière-plan : #123 ;
}
ou valide :
*:premier-enfant+html . style d'élément (
arrière-plan : #123 ;
}

Pour IE8 :
.elementstyle (
arrière-plan : #F12\3/ ;
}

Pour Firefox :
@-moz-document url-prefix() (
.elementstyle (
arrière-plan : #123 ;
}
}

Pour Safari et Chrome (un seul moteur, vous vous souvenez ?) :
Écran @media et (-webkit-min-device-pixel-ratio:0) (
. style d'élément (
arrière-plan : #123 ;
}
}
ou
corps:dernier-enfant:not(:root:root).elementstyle (
arrière-plan : #123 ;
}

Pour Opera, tout est plus compliqué. Les hacks CSS pour Opera sont compris par Safari et Chrome, vous devez donc utiliser le hack pour Opera et Safari\Chrome ensemble pour redéfinir le style :
@media all et (min-width:0px) (
tête~corps .elementstyle (
arrière-plan : #123 ;
}
}
corps:dernier-enfant:not(:root:root).elementstyle (
arrière-plan : #fff ;
}
Une alternative à ces deux hacks est manière intéressante Définition de styles pour Opera à l'aide de l'objet "opera" intégré en JavaScript :

La méthode n'est pas fiable car elle ne fonctionnera pas si l'utilisateur a désactivé JavaScript.

Conclusion

Résumons : lors de la conception de grands sites Web avec gros montantéléments, en comptant sur la poursuite du développement et la croissance du site, il est toujours préférable d'utiliser la séparation des styles. C'est valable, pratique, c'est une règle de savoir-vivre. Mais il n’y a rien de mal à utiliser des hacks CSS pour les petits sites, d’autant plus que de nombreux hacks sont également validés.

En conclusion, je dirai qu'idéalement, vous devriez vous efforcer d'abandonner l'utilisation de hacks et de séparation des styles, améliorant ainsi vos compétences en mise en page.

Tags: mise en page html, hacks css

Parlons de la mise en page correcte des sites Web. Disposition fixe, bloc, adaptative, mobile, fluide, flexible, sémantique, valide et multi-navigateur. Voyons ce que tout cela signifie.

Mise en page du site Web en HTML/HTML5 et CSS/CSS3

Depuis le début de l'année, j'ai commencé à améliorer mes points faibles dans les technologies web. Après l'avoir compris, je l'ai décrit. J'ai respecté ce plan et le résultat a été bon.

Récemment, j'ai commencé à comprendre les types de mise en page, ce que signifient tous ces concepts, et j'ai réalisé qu'il y avait déjà beaucoup d'informations, mais elles sont toutes du même type. Et surtout, il est déjà obsolète. Habituellement, ils parlent de types de mise en page fixes, tabulaires et en blocs.

Vous avez peut-être entendu d’autres noms sans comprendre ce qu’ils signifient. Vous ne saurez peut-être jamais ce qu'est la flexbox, mais c'est une flexibilité incroyable qui vous permet de faire des merveilles aujourd'hui.

De manière générale, j'ai décidé de combler un peu ce vide et d'écrire un article qui sera utile aujourd'hui à tous ceux qui ont décidé de comprendre les types de mise en page web.

Je ne pense pas qu’il soit utile d’expliquer longtemps ce qu’est la mise en page d’un site Web. Bref, c'est Création HTML code et feuilles de style CSS basés sur le design précédemment conçu. Le plus souvent, les pages sont mises en page sur la base d'une mise en page PSD préparée à l'avance dans Photoshop.

Plus le résultat est proche de l’original, mieux c’est. Idéalement, la page devrait avoir la même apparence dans différents navigateurs et bien paraître sur les appareils mobiles.

Exigences pour une mise en page moderne

Plus la mise en page du site Web est bonne, plus le site Web ou le blog fonctionnera mieux. La mise en page professionnelle ne peut être réalisée que par un bon spécialiste de la mise en page. Quelles sont les exigences en matière d’aménagement aujourd’hui ? Les voici:

• compatibilité entre navigateurs
• adaptabilité
• code minimum
• vitesse de chargement des pages élevée
• sémantique
• validité

Regardons quels types de mise en page existent aujourd'hui et vous comprendrez ce que tout cela signifie.

Types de mise en page de sites Web

Dans cet article, je veux donner le maximum idée générale. Il est possible que je décrirai bientôt nombre d’entre eux plus en détail.

• Disposition fixe ou statique. Quelle que soit la taille de la fenêtre du navigateur ou de l'appareil, la largeur des pages sera constante. Tous les éléments occupent une largeur en pixels strictement définie sur la page. Si la résolution de l'écran est grande et que la fenêtre du navigateur est agrandie pour remplir tout l'écran, alors, en règle générale, il reste place libre. A l’inverse, sur les appareils mobiles, avec une mise en page fixe, une barre de défilement apparaît en bas de page.
• Disposition en caoutchouc. La page occupe toute la largeur du navigateur, quelle que soit sa taille et quel que soit l'appareil sur lequel vous ouvrez cette page. La largeur des éléments de la page est définie en pourcentage de la largeur de la fenêtre et occupe donc toute la surface disponible. Il est difficile de réaliser quelque chose de bien avec cette mise en page conception pratique dans toutes les résolutions d'écran possibles, car les pages seront différentes.
• Disposition tabulaire ou disposition en tableau. Dans ce cas, la grille des pages est construite à l'aide de tableaux. Imaginez qu'il y ait un tableau principal sur la page, et dans ses cellules, si nécessaire, il y a des tableaux imbriqués, et leurs cellules peuvent contenir de nouveaux tableaux, et ainsi de suite à l'infini. Le code s'avère encombrant, très gênant et il n'est plus nécessaire. Aujourd’hui, les pages n’ont pas été ainsi disposées depuis longtemps. De plus, les moteurs de recherche n’aiment pas ces pages et les indexent mal. Si vous en avez besoin, vous pouvez placer un ou plusieurs tableaux sur la page, mais ne les utilisez pas pour structurer la page.
• Disposition en bloc, disposition en bloc ou disposition div. C'est peut-être la disposition la plus courante aujourd'hui. La grille de page est construite à partir de nombreux blocs
  , qui sont imbriqués les uns dans les autres. Pour y accéder, les attributs id et class sont utilisés. Ouvrez le code source (Ctrl + U) de presque n'importe quelle page Web et vous verrez cette mise en page.
• Mise en page adaptative ou mise en page mobile. On l’appelle aussi parfois mise en page réactive. Caractéristique clé le fait que les pages s'adaptent bien à n'importe quelle résolution d'écran utilisateur. Peu importe si vous avez ouvert la page sur ordinateur portable de bureau, sur un grand écran large ou sur un smartphone - dans tous les cas, la page doit être belle et conviviale. Ceci est réalisé en utilisant plusieurs feuilles de style pour différentes résolutions.
• Mise en page flexible ou mise en page flexible. Tout d'abord, la disposition en blocs bien connue est utilisée, puis blocs requis convertis en conteneurs flexibles (flexboxes). Les styles d'éléments indiquent display: flex; Vous pouvez spécifier la direction et l'alignement d'un axe principal pour un élément. Ces fonctionnalités sont devenues disponibles avec l'arrivée de CSS3. Désormais, les pages deviennent très flexibles. Ce mécanisme est discuté en détail à l'adresse. Je vous recommande de vous familiariser avec cela, c'est le présent et le futur de l'aménagement.
• Disposition sémantique. C'était une suite logique de la disposition en blocs et est devenue disponible en HTML5. De nouvelles balises rendent la page plus structurée. Les moteurs de recherche adorent ces pages. Vous pouvez voir ce que c’est dans mon autre article.
• Mise en page valide ou en d'autres termes, mise en page sans erreur. Il s'agit d'une mise en page réalisée conformément aux normes du W3C. Vous pouvez vérifier l'exactitude de votre page HTML en utilisant validateur spécial W3C.
• Disposition multi-navigateur. Comme son nom l’indique, avec cette mise en page, les pages se ressemblent dans différents navigateurs. La première chose par laquelle ils commencent généralement est de connecter un fichier CSS spécial à la page - en réinitialisant les styles.

Ce sont les types de mises en page disponibles aujourd'hui ou Propriétés HTML mises en page. Les pages Web d’un bon site satisfont simultanément à de nombreux critères, dont les plus importants sont la compatibilité et l’adaptabilité entre navigateurs.

Selon les statistiques que j'ai collectées, environ 40 % des personnes visitent les pages de mon blog depuis des appareils mobiles. De plus, plus de 30 % des smartphones et environ 7 % des tablettes. Oui, cela a également l'air bien sur les smartphones. Jusqu'à présent, il y a des erreurs de validation, mais je pense que nous y parviendrons bientôt.

Dans un avenir proche, je souhaite refaire le modèle en tenant compte de la flexibilité et disposition sémantique selon toutes les règles, et alors cela deviendra encore meilleur.

Dans cet article, je n’ai abordé le sujet que de manière très superficielle. Les sites Web sans mise en page adaptative sont déjà considérés comme en retard et obsolètes. Un peu de temps passera, et les sites avec mise en page adaptative pour les appareils mobiles dépasseront facilement leurs concurrents. Si vous commencez à étudier ce sujet, vous investirez bien votre temps dans un avenir prospère.

Pour ceux qui envisagent d'avoir une bonne compréhension de la mise en page moderne et demandée et d'apprendre à mettre en page de manière professionnelle et compétente, je suggère de prêter attention à ces cours.