Ellipse Tutorial

Comment réaliser des CSS spécifiques à chaque navigateur ?


ATTENTION : Tutorial en cours d'écriture ! N'hésitez pas à nous signaler toute erreur ou suggestion.

CSS est une recommandation du W3C(World Wide Web Consortium) . En tant que telle, cette recommandation devrait être supportée à l'identique par l'ensemble des navigateurs classiques. Mais cela n'est pas toujours vrai et il vous sera souvent nécessaire d'appliquer des définitions CSS différentes d'un navigateur à un autre. De base, CSS ne propose pas de sélecteur conditionnel. Le framework Ellipse a donc cherché à vous proposer une technique simple pour proposer des définitions différentes d'un navigateur à un autre.

Pour ce faire, le framework Ellipse utilise la possibilité de pouvoir appliquer plusieurs classes CSS à un même tag. Effectivement, vous pouvez, grâce à l'attribut class de n'importe quel tag HTML, fournir une liste de classes de styles CSS (chaque classe étant séparée par un espace). Dans ce cas, toutes les définitions des styles se cumulent. Via cette technique, le framework Ellipse rajoutera sur le tag <body> une classe de style associée au navigateur. De plus, CSS permet de définir des sélecteurs de styles pour des tags contenus (directement ou indirectement) dans un tag portant une classe de styles particulière. Il est donc possible d'utiliser un sélecteur tel que celui là : .CSS_FF #tagId : ce sélecteur signifiant "pour le tag ayant l'id tagId fils (direct ou indirect) d'un tag portant la classe CSS_FF. Dit autrement la définition CSS ne s'appliquera que si le framework Ellipse a détecté (et modifié en conséquence le tag body) que le navigateur utilisé est FireFox.

Informations complémentaires : l'ajout de la classe de style CSS sur le tag body est effectué par la librairie Javascript JWT (proposée par le Framework Ellipse) - les classes de styles pour les navigateurs supportés actuellement sont CSS_IE (pour Internet Explorer), CSS_FF (pour FireFox) et CSS_CH (pour Chrome). Voici un petit exemple d'utilisation de cette possibilité. Le résultat produit par votre navigateur suivra l'exemple proposé. 

 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
 10 
 11 
 12 
 13 
 14 
 15 
 16 
 17 
 18 
 19 
 20 
 21 
 22 
 23 
 24 
 25 
 26 
 27 
 28 
 29 
 30 
 31 
 32 
 33 
 34 
 35 
 36 

<?xml version="1.0" encoding="ISO-8859-1" ?>
<web:Html xmlns:web="corelib.services.web.components"
          codeBehind="corelib.services.web.webapplications.WebPage">
    <head>
        <title>Browser dependant CSS definitions</title>
        <style>
            #theNode {
                border: 1px solid black;
                width: 60%;
                margin-left: 20%;
                font-family: verdana;
            }    
            
            .CSS_IE #theNode {
                background: green;
                color: black;
            }

            .CSS_FF #theNode {
                background: Blue;
                color: white;
            }

        </style>
    </head>
    <body>
        <h1 align="center">Browser dependant CSS definitions</h1> <br/>
        
        <p id="theNode">
            A simple paragraph. The text displayed on a green
            background with IE and on a blue background with FireFox.
            There will be no background color for other browsers.
        </p>
        
    </body>
</web:Html>
Exemple de style CSS conditionnel

A simple paragraph. The text displayed on a green background with IE and on a blue background with FireFox. There will be no background color for other browsers.


ATTENTION : Ellipse Framework vous est proposé en version beta (d'évaluation) afin de vous permettre d'évaluer ce framework. Infini Software se dégage de toutes responsabilités relatives à l'utilisation de ce framework. De plus, Infini Software ne pourra nullement être tenu responsable de l'utilisation des informations présentes dans ces tutoriaux.

Dominique LIARD - © 2007..2010 SARL Infini Software - Tous droits réservés
Les autres marques et les noms de produits cités dans ces documents sont la propriété de leurs détenteurs respectifs.