Easy-Micro

LANGAGE Langage CSS
CSS dynamique

Réaliser des styles CSS dynamique

CSS Feuilles de style dynamique suivant le navigateur

L'idée est ici de proposer une gestion dynamique de feuilles de styles en fonction du navigateur en utilisant le langage Javascript. On utilise ici, un script javascript dont voici le code à coller dans le head de votre code HTML :

<script type="text/javascript">

if(navigator.userAgent.indexOf("Firefox")!=-1) {
document.write('<link href="css/firefox.css" rel="stylesheet" type="text/css" />');
}
else {
document.write('<link href="css/ie.css" rel="stylesheet" type="text/css" />');
}

</script>

Pour fonctionner, cet exemple nécessite 2 feuilles de styles (firefox.css et ie.css) qui contiennent chacune un style différent pour la balise H2, par exemple :
h2 { color:#0000ff; } pour ie.css et
h2 { color:#ff0000; } pour firefox.css
Enfin, un titre dans une balise H2 dans le body de notre document nous permétra de vérifier si cela fonctionne.

Pour aller plus loin, voir les propriétés et les méthodes de l'objet javascript navigator.

CSS Feuilles de style dynamique suivant le visiteur

• Proposer des styles alternatif aux visiteurs via l'interface du navigateur:
L'idée est de dévelloper l'accessibilité du web à tous les visiteurs (déficient visuel). Les navigateurs modernes sont en mesure d'afficher dans leur interface ces feuilles alternatives (alternate stylesheets), pour peu qu'elles soient décrites dans votre code de la manière suivante :

<link rel="stylesheet" type="text/css" media="screen" title="default" href="css/default.css">
<link rel="alternate stylesheet" type="text/css" media="screen" title="Grande Taille" href="css/big-texte.css">

Pour changer de style avec votre navigateur, utilisez le bouton "Page" > "Style" dans l'interface d'Internet Explorer 8 ou le menu "Affichage" > "Style de la page" sous FireFox.

• Proposer des styles alternatif aux visiteurs via un menu visible dans votre site:
Pour les navigateurs qui n'affichent pas les feuilles des style alternatives, on propose un menu, comme ci-dessous, dans notre site qui utilise un code javascript (réalisé par le développeur Paul Sowden) qui permet de changer de style : styleswitcher.js. Ce code est proposé au téléchargement sur l'incontournable site du Journal du net.

Voici un exemple de menu proposant une feuille de style alternative pour malvoyant :
Voici le code correspondant de ce menu :
<ul>
<li><a href="#" onclick="setActiveStyleSheet('default'); return false;">Style par défaut</a></li>
<li><a href="#" onclick="setActiveStyleSheet('Textes Grande Taille'); return false;">Textes Grande Taille</a></li>
</ul>


Et le code du head du même document :
<script type="text/javascript" src="css/styleswitcher.js"></script>

<link rel="stylesheet" type="text/css" media="screen" title="default" href="css/defaut.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="Textes Grande Taille" href="css/grande-taille.css" />

Note: C'est l'attribut "title" de cette balise link qui permet de faire le lien avec le menu ci-dessus.

Contenu du fichier grande-taille.css :
@import url("defaut.css");

body {
font-size:30px;
}
Note : est utilisé ci-dessus la règle CSS2 @import qui doit être suivie de l'URL d'un fichier. Cette règle CSS permet d'importer une feuille de style au seins même d'une autre feuille de style.


< Page précédente LANGAGE CSS Page suivante >