Sélectionnez votre langue

CSS, mise en forme selon le navigateur

 

Langage : CSS / HTML
Détails : Personnalisation des styles en fonction du navigateur IE ou Firefox

 

Il existe un grand nombre de navigateurs web permettant de surfer sur internet, le problème
est que chaque navigateur interprète les feuilles de style d'une manière qui lui est propre, la
plupart sont standardisés via une norme standard du web : W3C
Il existe aussi des tests pour vérifier cela, notamment le test Acid.

Pour cet article je vais m'arrêter aux deux navigateurs web les plus utilisés, à savoir "Internet Explorer" et "Firefox".
Vous avez déjà sans doute remarqué les incohérences entre ces 2 navigateurs lorsque vous essayez de développer un site web (dimensions incorrectes, décalages, etc...).

Je vous propose des petites astuces pour contourner ces différents problèmes :

Propriétés CSS spécifiques à Internet Explorer :

Dans cette partie, nous allons utiliser un hack CSS, ce qui va permettre de donner des propriétés uniquement IE.
Ce qui règlera une grande partie des problèmes liés aux décalages présents sous IE, directement dans le fichier CSS
Voici le code d'une classe CSS, avec des valeurs différentes pour IE et Firefox :

.tableau {

/* Spécifique à tous les navigateurs */
border-style : solid ;
border-width : 1px ;

border-color : #FFFFFF ;

/* Spécifique à IE */
#border-width : 10px ;

#border-color : #FF0000 ;
}
Vous remarquerez le "#" qui définit les propriétés pour Internet Explorer.
Voici le résultat sur les 2 navigateurs web :

Mozilla Firefox :

 

Internet Explorer :

 


Les commentaires conditionnels interprétés par Internet Explorer :

Dans une page il est possible d'insérer des zones de code qui ne seront exécutées que par IE,
Pour cela, il faut mettre en place des commentaires conditionnels comme ci-dessous :


<!--[if IE]>

Détection Internet explorer

<![endif]-->
Le code implémenté entre ces balises ne sera exécuté que si l'internaute est sous IE

Remarque : Les commentaires conditionnels ne fonctionnent que sous Internet Explorer.
Il existe plusieurs types de conditions notamment le test sur la version d'IE utilisée.

Liens :

FaQ Alsacreation





- haut de page -

About

Créateur de solutions innovantes
Android | iOS | Web | NFC

Keep in touch