Je ne suis pas partisan des commentaires conditionnels en CSS (vous pouvez me gronder pour cela), mais je préfère utiliser divers hacks CSS afin de résoudre le problème de la compatibilité entre navigateurs pendant le processus de codage, sans « mouvements de corps » inutiles. ». Oui, c'est faux du point de vue des standards et c'est moche, mais de cette façon, il m'est beaucoup plus facile de faire des mises en page.
En visitant diverses ressources Internet étrangères sur le développement Web, je découvre de plus en plus de hacks CSS qui peuvent être appliqués personnellement à l'un des navigateurs les plus populaires aujourd'hui : Opéra, FireFox, Internet Explorer, Safari, Google Chrome.
Au fur et à mesure que de nouveaux hacks seront découverts, cette liste sera élargie.
Hacks CSS pour le navigateur Opera
*|html .style ( background: #F00; ) html:first-child .style ( background: #F00; ) /* code valide */ /* uniquement pour Opera< 9.5 */ opera:-o-prefocus .style { background: #F00; } /* для Opera 9.5 - 12.16 */ /* вместо "opera" можно подставить любое слово/символ */Hack CSS pour le navigateur FireFox
@-moz-document url-prefix() ( .style (arrière-plan : #F00;) )Hacks CSS pour le navigateur Internet Explorer 6
.style ( _background: #F00; ) /* code valide */Même si le validateur CSS considère le hack du soulignement comme un bug, la spécification CSS 2.1 autorise l'utilisation de cette construction.
* html .style ( arrière-plan : #F00; ) /* code valide */
Hacks CSS pour Internet Explorer 7
*+html .style ( arrière-plan : #F00; ) /* code valide */ *:first-child+html .style ( arrière-plan : #F00; ) /* code valide */ html>body .style ( *arrière-plan : # F00 ; )Piratage CSS pour le navigateur Internet Explorer 8
@media \0screen ( .style (arrière-plan : #F00;) )Piratage CSS pour Internet Explorer 9
:root .style ( arrière-plan : #F00\9; )Malheureusement, IE10 comprend également ce hack.
Piratage CSS pour le navigateur Internet Explorer 10
Écran @media et (-ms-high-contrast : actif), (-ms-high-contrast : aucun) ( .style (background: #F00;) )Hacks CSS pour le navigateur Safari
body:last-child:not(:root:root).style ( background: #F00; ) /* pour Safari< 4.0 */ html body:last-child .style { background: #F00; } /* для Safari < 4.0 */Navigateurs et normes. Poursuite éternelle. En raison des incohérences dans les normes, dues aux différentes manières de rendre les pages, la plupart du temps d'un concepteur Web est consacré à lisser ces incohérences (à l'aide de hacks). En conséquence, au lieu de travailler efficacement, le concepteur entre dans une relation contre nature avec les navigateurs, lui faisant perdre un temps précieux.
Compatibilité entre navigateurs- la propriété du site à s'afficher et à fonctionner dans tous les navigateurs courants est identique.
Pirater- corriger un bug ou ajouter une nouvelle fonctionnalité en utilisant une autre fonctionnalité non documentée ou mal implémentée. (c) Lurkmore
Sale hack- c'est une solution rapide à tout problème, principalement à court terme, privant l'essence du code de beauté intérieure et de disharmonie avec sa structure interne. (c) Lurkmore
Hacks CSS pour le navigateur Internet Explorer
ZOOM : 1 :Hacker pour déterminer hasLayout
* (zoom : 1 ; )
PNG dans IE6 :
Pour IE6, le fichier htc iepngfix.htc est inclus, pour le bon fonctionnement des images de fond au format PNG pour tous les éléments, dans le fichier cssf-ie6.css. La dernière version d’IE PNG Fix v1.0 RC4 est utilisée.
* ( comportement : url ("css/iepngfix.htc"); )
Si les octets sont importants, il existe un exemple d'utilisation d'un filtre pour IE :
.class ( arrière-plan : aucun ; filtre : progid : DXImageTransform.Microsoft.AlphaImageLoader (src= "/images/png-image.png" , sizingMethod= "scale"); )
Séparation des styles par rapport à IE6 :
html>corps .class ( ) tête+corps .class ( ) html:premier-enfant .class ( )
Séparer les styles de IE6 et IE7 :
html>/**/corps ( )
Séparation des styles de IE6 à IE8 :
*|html .class ( ) html:not() .class ( )
Commentaires conditionnels dans IE :
Les commentaires conditionnels ne fonctionnent que dans IE sous Windows ; dans d'autres navigateurs, ce sont des commentaires normaux, ils peuvent donc être utilisés sans aucun problème. La syntaxe est :
/* Si vous voulez que l'explorateur ignore un morceau de code, alors utilisez !condition */ /* La condition peut être comme ceci : IE - pour n'importe quelle version d'IE lt IE v - (inférieur à) pour tous les navigateurs IE dont la version est inférieur à v lte IE v – (inférieur ou égal) pour tous les navigateurs IE dont la version est inférieure à v, ou le même gte IE v – (supérieur ou égal) – pour IE dont la version est supérieure ou égale à v gt IE v – ( supérieur à) – pour IE dont la version est supérieure à v. */
Commentaires conditionnels dans IE6, IE7, IE8 :
/* Feuille de style pour IE6 */ /* Feuille de style pour IE7 */ /* Feuille de style pour IE8 */
Hack du modèle de boîte :
Il y a des problèmes dans IE lorsque la bordure et le remplissage sont inclus dans la largeur d'un élément. Le hack Box Model les corrigera.
.class ( padding : 4em ; border : 1em rouge uni ; width : 30em ; width /**/ : /**/ 25em ; ) /* Pour IE, la largeur du bloc est plus petite par padding + border */
Largeur minimale et largeur maximale dans IE :
IE ne comprend pas ces propriétés CSS. Le hack de bloc ressemble à ceci :
.class ( largeur min : 500 px ; largeur : expression (document.body.clientWidth< 500? "500px" : "auto"); } /* Для IE ширина блока меньше на величину padding + border */
.class ( largeur min : 500 px ; largeur max : 750 px ; largeur : expression (document.body.clientWidth< 500? "500px" : document.body.clientWidth >750 ? "750px" : "auto"); ) /* Pour IE, la largeur du bloc est plus petite par padding + border */
Hack de hauteur minimale de Dustin Diaz
.class (hauteur min : 100 % ; hauteur : auto !important ; hauteur : 100 % ; )
Sélecteurs simples :
Il n'est pas nécessaire de créer un fichier distinct pour les différents navigateurs. Vous pouvez utiliser des sélecteurs CSS individuels dans le fichier CSS principal :
* html .class ( ) /* Dans le cas où la page html a un doctype, ce hack fonctionne dans IE6 */ /* En cas de mode bizarrerie, le hack fonctionne dans IE6 et IE7. */ *:first-child+html .class ( ) /* Pour IE 7 et versions antérieures (premier enfant) */ *+html .class ( ) /* Pour IE 7 */ *:first-child+html .class ( ) /* Pour IE 7 */ html>body .class ( ) /* Pour IE 7 et les navigateurs normaux */ html>/**/body .class ( ) /* Pour les navigateurs normaux (sauf IE 7) */ / * Exemple : .class ( background:red ) *html .class ( background:green ) Dans tous les navigateurs sauf IE6 et versions antérieures, l'arrière-plan sera rouge, et dans les navigateurs IE6 et versions antérieures, l'arrière-plan sera vert */
Astuces sales pour IE6 :
.class ( _background : #F00 ; ) .class ( -background : #F00 ; ) .class ( couleur : #F00 ; ) /* Ne fonctionne pas avant les lettres a, b, c, d, e, f * /
Astuces sales pour IE7 :
>body ( background: #F00 ; ) /* sélectionne l'élément body dans IE7 uniquement */ html* ( background: #F00 ; ) /* sélectionne tous les éléments à l'intérieur de l'élément html. Uniquement pour IE7 et versions antérieures */ -,.class ( background: #F00 ; ) .class ( background: #F00 !important! ; ) /* Le hack fonctionne de la même manière que la propriété !important. Fonctionne pour IE7 et versions antérieures */
Astuces sales pour IE8 :
.class ( background: #F00\0/ ; ) /* sélectionne l'élément body dans IE7 uniquement */
Des hacks sales qui fonctionnent dans IE6 et IE7 :
.class ( *background: #F00 ; ) .class ( //background: #F00 ; ) .class ( background: #F00 !ie ; ) /* Le hack fonctionne de la même manière que la propriété!important */
Hacks CSS pour le navigateur Mozila FireFox
Hacks pour toutes les versions de MFF :#class ( couleur : #F00 ; ) @-moz-document url-prefix () ( .class ( couleur : #F00 ; ) ) *>.class ( couleur : #F00 ; )
Pour MFF 1.5 et versions ultérieures :
.class, x:-moz-any-link, x:only-child ( couleur : #F00 ; )
Pour MFF 2.0 et versions ultérieures :
body:empty .class ( couleur : #F00 ; ) #class ( couleur : #F00 ; ) html>/**/body .class, x:-moz-any-link ( couleur : #F00 ; )
Pour MFF 3.0 et éventuellement supérieur :
html>/**/body .class, x:-moz-any-link, x:default ( couleur : #F00 ; )
Hacks CSS pour le navigateur Google Chrome
body:nth-of-type(1).class ( arrière-plan: #000 ; )Hacks CSS pour le navigateur Opera
Hacks pour toutes les versions d'Opera :@media tout et (-webkit-min-device-pixel-ratio:10000), pas tout et (-webkit-min-device-pixel-ratio: 0) ( .style ( background : #F00 ; ) )
@media all et (min-width: 0px) ( .class ( color: #F00 ; ) )
Pour Opéra 6 :
@media all et (largeur min : 1px) ( ( ) .class ( couleur : #F00 ; ) )
Pour Opéra 7, 8 :
@media all et (largeur min : 1px) ( .class ( couleur : #F00 ; ) )
Pour Opéra 9 :
@media all et (width) ( .class ( color: #F00 ; ) )
@media all et (min-width: 0px) ( head~body .class ( color: #F00 ; ) )
Hacks CSS pour le navigateur Safari
body:premier de type .class ( couleur : #F00 ; ) html:root*.class ( couleur : #F00 ; ) corps :premier de type .class ( couleur : #F00 ; ) corps :premier de -type .class ( couleur : #F00 ; )@media screen et (-webkit-min-device-pixel-ratio: 0) ( .class ( color: #F00 ; ) ) /* Hack Opera et Safari */
CSS pour le navigateur Firefox uniquement :
HTML/XHTML. Code:
<p>Dans Firefox ce texte est rougep>
@-moz-document url-prefix()(p(couleur : #f00;))
Contrairement à la méthode d'application CSS réservée à Opera, il s'agit essentiellement d'un hack - puisque la règle était initialement destinée à un objectif différent. Cependant, le manque de prise en charge dans d'autres navigateurs permet d'isoler le code pour une utilisation uniquement par le navigateur Web Firefox.
D'autres navigateurs dotés du moteur Gecko, tels que SeaMonkey 1.0+ ou l'ancien Netscape 9.0, prennent également en charge ce hack CSS.
Différentes versions d'Internet Explorer, Google Chrome, Opera, Safari réagissent au piratage comme elles le devraient : ces navigateurs ignorent tout le code du piratage.
Il existe un autre navigateur dans lequel le texte devient rouge : ELinks, un navigateur Web textuel avec une certaine prise en charge CSS.
Sous-dits et thème Aliosque
CSS pour le navigateur Firefox uniquement : dans Firefox, ce texte est en HTML/XHTML rouge. Code:
Dans Firefox, ce texte est rouge
CSS. Code : @-moz-document url-prefix() (p (color : #f00 ;)) Contrairement à la méthode CSS Opera uniquement, il s'agit essentiellement d'un hack - puisque la règle était à l'origine destinée à un objectif différent. Cependant, le manque de prise en charge dans d'autres navigateurs permet d'isoler le code pour une utilisation uniquement par le navigateur Web Firefox. [ 1 ] D'autres navigateurs dotés du moteur Gecko, tels que SeaMonkey 1.0+ ou l'ancien Netscape 9.0, prennent également en charge ce hack CSS. [ 2 ] Différentes versions d'Internet Explorer, Google Chrome, Opera, Safari réagissent au piratage comme elles le devraient : ces navigateurs ignorent tout le code du piratage. [ 3 ] Il existe un autre navigateur dans lequel le texte devient rouge : ELinks, un navigateur Web basé sur du texte avec un certain support CSS.R : Installation du navigateur Web Arachne sur un disque créé dans la RAM - dans ce cas, le navigateur Web Arachne fonctionne le plus rapidement. La taille de la RAM doit vous permettre de créer un disque RAM de 6 Mo ou plus. Pour installer et configurer le navigateur Web Arachne afin de vous connecter à Internet via un modem et une ligne téléphonique (connexion commutée), vous avez besoin de plusieurs programmes : 1. Navigateur Web Arachne [Télécharger] 2. Package avec encodage cyrillique KOI8-R koi8-r .apm [Télécharger] 3. Package avec encodage cyrillique CP-1251 / Windows-1251 cp1251.apm [Télécharger] 4. Pilote de souris, par exemple mouse.com [Télécharger] 5. Archiveurs. Par exemple, PKZIP [Télécharger] et PKUNZIP [Télécharger] 6. Si MS-DOS 6.0+ n'est pas utilisé, QEMM97 [Télécharger] 7. Si MS-DOS 6.0+ n'est pas utilisé, TDSK [Télécharger] Installation et configuration d'Arachne navigateur Web par étapes : 1. Créez un disque dans la RAM. La lettre qui lui sera attribuée par le système d'exploitation sera obtenue sur la base que A : et B : seront utilisés pour les lecteurs de disquettes (même s'il n'y en a qu'un, deux lettres seront quand même réservées), C : pour la première partition principale active sur le premier disque dur ; s'il y a plus de disques, autant de lettres seront utilisées séquentiellement pour tous les nommer. S'il n'y a aucun périphérique installé via DRIVER.SYS ou des pilotes similaires, la lettre suivante fera référence au disque RAM. Bien sûr, vous pouvez, après avoir ajouté la ligne appropriée dans CONFIG.SYS (voir ci-dessous) pour créer un disque RAM, par exemple, redémarrer l'ordinateur et vérifier expérimentalement sous quelle lettre se trouve le disque RAM. Dans ce cas, il s'agit de E : en fonction de la quantité de RAM, vous devez décider combien de mégaoctets peuvent être alloués au disque RAM. En gros, plus il y en a, mieux c'est. Puisque, par exemple, le cache du navigateur va croître en volume avec une utilisation prolongée et intensive au sein d'une session. Dans cet exemple, la taille du disque RAM est assignée à 12 000 Ko. Pour le pilote MS-DOS RAMDRIVE.SYS, la limite supérieure est de 32 767 Ko et pour TDSK, de 64 Mo. Pour créer un tel disque, vous devez écrire ce qui suit quelque part au milieu du fichier CONFIG.SYS : DEVICE=C:\DOS\RAMDRIVE.SYS 12000 512 512 /E 2. Créez un dossier, par exemple C:\ DRIVERS\, où placer le pilote de la souris, par exemple mouse.com. 3. Ajoutez une ligne au fichier AUTOEXEC.BAT qui lancera le pilote de la souris. Indiquez-y le montant total de la location au conducteur ; peut être n'importe lequel : LH C:\DRIVERS\MOUSE.COM 4. Exécutez MemMaker ou OPTIMIZE à partir de QEMM97 pour optimiser la gestion de la mémoire de base. Si vous êtes MemMaker, vous pouvez simplement ENTRER toutes les suggestions - MemMaker fera tout lui-même. L'ordinateur redémarrera plusieurs fois, à chaque démarrage de MemMaker - encore une fois, vous n'aurez rien d'autre à faire que ENTRÉE. Si QEMM97 est utilisé (notamment l'application OPTIMIZE), il y aura également plusieurs redémarrages et dans tous les cas seul ENTER est possible. 5. Commencez l'installation du navigateur Web Arachne sur le disque RAM, dans l'exemple considéré, il s'agit du lecteur E : A195GPL.EXE Pour continuer l'installation, appuyez sur Y. Appuyez sur N pour saisir le chemin souhaité vers le dossier où le navigateur Web Arachne sera installé. être installé. Entrez le chemin souhaité vers le dossier dans lequel le navigateur Web Arachne sera installé. Dans cet exemple, il s'agit de E:\ARACHNE\.
Imaginons une situation : vous utilisez un site Web tous les jours, vous en êtes satisfait, mais il y a une sorte de défaut dans la conception qui interfère avec la perception du contenu ou même vous irrite. Et puis vous vous demandez : « Et si vous pouviez définir vos propres styles pour les sites Web ? Après tout, l’affichage du site Web est généré par le navigateur à partir du code source, alors comment pouvons-nous entrer dans ce processus de génération d’affichage et apporter nos propres modifications ? »
Pour être honnête, je ne me souviens pas exactement pourquoi cette question m'a été posée la première fois, mais elle sonnait à peu près la même chose. Ensuite, j'ai même voulu fouiller dans les fichiers du navigateur, mais j'étais trop paresseux - et j'ai fait ce qu'il fallait. Il n'est pas nécessaire de bricoler les fichiers (d'ailleurs, après avoir mis à jour la version du navigateur il faudra bricoler à nouveau), car un élément a déjà été inventé pour influencer les styles de tous ou de certains sites : - addon pour Firefox.
Mais d’abord, un exemple concret. Pour une raison quelconque, Yandex a récemment affiché des résultats de travers pour Nadyusha. Soit le moteur de recherche est en contradiction avec la nouvelle version du génial navigateur Firefox, soit un plugin gâche l'image, mais les résultats ressemblent à ceci :
Il faudra beaucoup de temps pour découvrir qui est à blâmer, mais que faire est évident. N'écrivez pas dans Yandex "Téléchargement élégant et gratuit"- Vous allez encore pomper plus de virus. Nous récupérons ce plugin depuis le dépôt officiel :
En suivant le lien, vous verrez la même chose que sur ma photo au début du post. Là, vous devez cliquer sur « Ajouter à Firefox », effectuer quelques clics plus intuitifs et redémarrer le navigateur (l'addon lui-même le suggérera après l'installation).
Vous devez maintenant créer un nouveau style sur la page des résultats de recherche Yandex. Dans l'image de gauche, j'ai montré comment j'avais cliqué sur l'icône Élégant en bas du navigateur et sélectionné « Créer un nouveau style pour Yandex.ru ».
Après cela, une fenêtre s'ouvrira dans laquelle vous devrez saisir un nouveau style. À propos, un autre plugin FF, FireBug, m'a aidé à comprendre quel était le problème de conception. Bizarrement, je n’en ai pas encore parlé sur ce blog. 
(Corrigé : .) Et voici la fenêtre du style en cours de création :
Pour correction, j'ai entré les styles suivants dans cette fenêtre :
B-serp-item ( padding-left : 60px !important; ) b-serp-item__favicon, .b-wizard-icon ( gauche : 30px !important; )
Le reste du code a déjà été renseigné à l'avance. Cela indique que la conception sera appliquée uniquement au site Web Yandex.ru. Enregistrez et regardez le résultat :
Beau? D’ailleurs, ce n’est pas ma première expérience avec le plugin Stylish. Je peux vous montrer une autre option. Zusiks s'est plaint un jour que sur le blog hyperseo.ru, sous les articles, les boutons d'abonnement ne semblaient pas adéquats, mais exactement comme ceci :
Je peux corriger cela dans les styles du site, mais la raison de cet affichage est que le plugin RDS, dans le but de mettre en évidence le noindex (dans lequel j'ai le texte de l'abonnement), place ce texte dans un conteneur de telle sorte qu'il soit en ligne les éléments deviennent des éléments de bloc.
En général, j'ai créé un style spécial pour le bloc de classe pageNoIndex_hilite, qui crée RDS. Maintenant, cela ressemble à l'image de droite pour moi.
C'est tellement beau maintenant. Bien sûr, j'ai créé ce style non seulement pour que hyperseo.ru soit magnifique. J'ai fait cela pour que tous les éléments de tous les sites qui se trouvent à l'intérieur de noindex au premier niveau d'imbrication soient mis en évidence avec un fond translucide avec des motifs en damier - donc maintenant, je ne manquerai certainement pas noindex. Et le texte de ce bloc non indexable ne fusionnera plus avec l'arrière-plan de surbrillance noindex, comme cela arrivait parfois auparavant. De plus, le montant "inline/block" que j'ai vu sur certains autres sites ne me dérangera plus. Sinon, j'ai dû désactiver cette mise en avant SEO auparavant afin de visualiser le site normalement. Et ici j'ai appliqué les styles suivants :
PageNoIndex_hilite ( display:inline !important; ) .pageNoIndex_hilite * ( arrière-plan: url("http://hitecinfo.net/wp-content/uploads/2011/11/noindex-fon.png"); ) .pageNoIndex_hilite * * ( arrière-plan : transparent ; )
Bien sûr, il serait plus correct d'encoder l'image en base64 et de la coller sous forme de texte, sinon c'est un peu nul... Mais l'essentiel est que ça marche !
Ça y est, vous êtes désormais vous-même responsable de vous assurer que les sites toiétaient magnifiquement exposés. Et maintenant, je vais te rendre riche aussi. Utilisez les réductions Yeysk si vous effectuez des achats à Yeysk. Couponator vous y aidera. Comme l’a dit un type sur le billet d’un dollar, « un centime économisé est un centime gagné ».
Lorsque CSS est utilisé non seulement pour la conception de texte, mais également pour travailler avec des calques dans une mise en page sans tableau, il faut se rappeler que les navigateurs modernes ne traitent pas de la même manière des paramètres aussi importants que la marge - l'espace externe d'un élément, le remplissage - la marge interne d'un élément, ainsi que les paramètres de position, le retour à la ligne flottant et un certain nombre d'autres.
En raison de ces différences dans l'interprétation des valeurs des paramètres, il arrive souvent que des sites et des interfaces Web qui s'affichent bien dans les navigateurs Mozilla Firefox, Opera et Safari commencent soudainement à diverger dans le navigateur Internet Explorer.
La base de ces différences dans l'interprétation du CSS par les navigateurs est le manque de conformité des navigateurs Internet Explorer antérieurs à la version 7 avec les normes CSS adoptées par le W3C. Par conséquent, pour une mise en page sans table réussie pour les versions d'IE antérieures à 7, vous devez utiliser un certain nombre de constructions spéciales appelées Astuces CSS. Il est également important de noter que pour les autres navigateurs il est parfois nécessaire de recourir à un hack CSS.
Voyons comment écrire du CSS qui ne serait interprété que par certains types de navigateurs :
Table des matières du document
CSS pour IE 5, 5.5, 6, 7
Commentaires conditionnels
Les navigateurs IE prennent depuis longtemps en charge ce que l'on appelle les commentaires conditionnels, qui vous permettent de rendre le contenu visible uniquement par IE. Les commentaires conditionnels sont simplement des commentaires HTML spécialement formés qui ne sont compris que par certaines versions d'Internet Explorer pour Windows. À titre d'exemple, vous pouvez utiliser des commentaires conditionnels pour corriger le bug de transparence PNG dans IE.Pour les utiliser, il vous faut :
- Tout d'abord, créez une feuille de style commune pour tous les navigateurs, sans aucun hack, puis continuez à travailler sur la correction des erreurs lors de l'affichage de la page dans IE.
- La feuille de style avec les erreurs corrigées est ensuite enregistrée séparément et devient la feuille de style pour toutes les versions d'IE (par exemple, all-ie.css).
- Enregistrez des feuilles de style distinctes avec des corrections de bogues séparément pour chaque version d'IE (par exemple, ie-5.0.css).
- Ensuite, vous devez connecter séquentiellement ces feuilles de style via du code HTML à l'aide de commentaires conditionnels.
Syntaxe des commentaires conditionnels
Le commentaire conditionnel suivant sera compris par les navigateurs IE5, IE5.5 et IE6, ainsi que IE7 et IE8 :
Application de CSS pour IE5
Si vous devez appliquer un commentaire conditionnel uniquement pour IE5, il vous suffit de spécifier la version 5.0 dans la clause if d'IE 5.0 :
Application de CSS pour IE5.5
Si vous devez postuler par rapport à IE5.5, cela ressemblera à ceci :
Application de CSS pour IE6
Idem pour IE6 :
Application de CSS pour IE5 et IE5.5 en même temps ou pour plusieurs versions
Si vous devez utiliser des commentaires conditionnels pour corriger un bug avec le modèle de boîte dans les navigateurs IE5 et IE5.5, vous pouvez utiliser une partie de l'index de version ou des opérateurs de comparaison.Le premier exemple connectera la feuille de style à n'importe quelle version d'Internet Explorer dont le premier chiffre est 5 :
Alternativement, vous pouvez spécifier que les feuilles de style se connectent à n'importe quelle version de navigateur inférieure à 6 :
Au lieu de lt (je ess t poule - moins) peut également être utilisé LTE (je ess t poule ou e qual à - inférieur ou égal), GT (g réaérateur t poule - plus), gite (g réaérateur t poule ou e qual à - supérieur ou égal à) l'essentiel avec toute cette variété de possibilités est de choisir le bon ordre pour spécifier les commentaires conditionnels, afin de ne pas se retrouver dans une situation où pour certains navigateurs des groupes de commentaires conditionnels se croisent, donnant un inattendu résultat.
Comment utiliser
Si vous ne souhaitez pas que les feuilles de style générales dominent les tableaux créés spécifiquement pour IE, vous devez d'abord inclure les feuilles de style générales, puis ensuite seulement les tableaux pour IE. Dans un exemple, cela ressemble à ceci :
Autres avantages de cette méthode
En utilisant des commentaires conditionnels, vous disposez également d’un moyen de déterminer de manière plus fiable la version du navigateur. Les navigateurs qui prétendent être Internet Explorer, mais ne le sont pas, n'utiliseront pas de feuilles de style conçues pour IE. Avec cette méthode, vous pouvez générer des statistiques précises sur la version d'IE que vos visiteurs utilisent, sans erreurs causées par des programmes et des navigateurs usurpant l'identité d'IE.Validité
L’un des avantages de cette technique est peut-être que vos feuilles de style et vos documents (X)HTML soigneusement formatés resteront entièrement conformes à la spécification.Débogage des commentaires conditionnels
Il y a une mise en garde qui mérite d’être mentionnée.Si vous utilisez plusieurs versions d'Internet Explorer sur la même machine, toutes ces versions prétendront être la version la plus récente installée. Cela signifie que si IE6 est installé, mais que vous consultez la page avec IE5, ce commentaire conditionnel sera exécuté :
Mais ce commentaire conditionnel ne sera pas exécuté :
Pour le suivi le plus précis des différences dans le traitement du CSS par les différentes versions d'IE, le programme gratuit IETester, qui prend en charge toutes les versions d'IE de 5 à 8, a bien fonctionné. Et pour modifier rapidement les paramètres CSS dans IE8 en appuyant sur F12, un outil de développement est disponible, qui rappelle FireBug dans Mozilla Firefox.
Semblable à la déclaration de feuilles de style, cette méthode peut masquer le code HTML de certaines versions ou de toutes les versions d'IE. Par exemple, le texte « Code HTML » sera affiché dans tous les navigateurs sauf IE6 si vous le mettez dans un commentaire conditionnel comme celui-ci :
HTML-код
Étiqueter
Une chose à retenir est que les commentaires conditionnels dans IE peuvent être utilisés n'importe où sur une page, pas seulement pour déclarer des feuilles de style pour la version appropriée du navigateur. À l'aide de commentaires conditionnels, vous pouvez afficher des informations supplémentaires aux utilisateurs d'IE qui ne sont pas visibles pour les utilisateurs d'autres navigateurs. Semblable aux commentaires conditionnels dans IE 5--IE 8, la balise est prise en charge
Ce
Les utilisateurs d'IE seront affichés comme suit : Ceci est Internet Explorer, et les utilisateurs d'autres navigateurs seront affichés comme suit : Ceci n'est pas Internet Explorer.
Étiqueter
CSS pirate IE
Afin de ne pas encombrer le code HTML en déclarant plusieurs feuilles de style, ou si vous devez enregistrer un seul fichier CSS, vous pouvez écrire des styles distincts qui ne fonctionneront que dans IE. De plus, il existe une option pour IE6 et IE7.Pour IE toutes les versions. Si vous préfixez une propriété avec deux barres obliques (//), elle ne sera acceptée que par les navigateurs IE de toutes les versions. Les autres navigateurs ignoreront cette propriété.
Pour IE6 Il est possible de mettre un signe moins (-) ou un trait de soulignement (_) devant une propriété sans que IE7 n'y réponde. Vous pouvez également utiliser la construction suivante :
*html.style { ...}
Par exemple:
Style (fond : rouge ; /* pour les navigateurs normaux *///fond : vert ; /* pour tous les IE */ -background : blue; /* pour IE6 */ ) * html .style ( arrière-plan : bleu; /* une autre façon pour IE6 */ }
Dans ce cas, l'arrière-plan sera rouge dans les navigateurs Opera et Firefox, vert dans IE7 et bleu dans Internet Explorer 6.
L'exemple modifie la couleur d'arrière-plan pour différents navigateurs. En pratique, cette méthode est utilisée pour obtenir un affichage identique et une compatibilité entre navigateurs. Le plus souvent, vous devez y recourir lors du positionnement et définir différentes valeurs pour des propriétés telles que left, top, padding, margin, width et autres liées aux tailles, pourcentages et pixels.
Pour IE7 Hack CSS utilisé :
*: premier-enfant+html .style (...)
*+html .style { ...}
CSS pour Firefox
Il existe également des hacks CSS spéciaux qui permettent d'afficher les styles uniquement dans le navigateur Firefox.HTML : racine .style (...) /* cela fonctionne aussi pour Safari */
Style,x : -moz-any-link (...)
Pour modifier rapidement les paramètres CSS dans Firefox en appuyant sur F12, l'outil de développement Firebug est disponible (nécessite une installation préalable) - c'est le meilleur parmi ses analogues.