«force» l'ouverture du lien dans un nouvel onglet ou une nouvelle fenêtre

Transcription

1 MEMO HTML 5 / CSS 3 Mémo basé sur le tutoriel HTML5 / CSS3 de Mathieu Nebra sur le site OpenClassrooms. Rédigé (en 2014) et diffusé librement par Raphaël Dujardin, au vu que le tutoriel original est consultable librement. Le droit d'auteur revient à Mathieu Nebra. Attention, ce mémo ne convient pas à un débutant complet souhaitant apprendre le HTML et le CSS, cela requiert la lecture du tutoriel original. Le mémo a pour unique but d'accélérer la remise à niveau et la recherche d'une information précise quand nécessaire pour quelqu'un ayant déjà appris le sujet auparavant.

2 Balises HTML <!DOCTYPE html> <meta charset=''utf-8'' /> <p> <br /> <h1>..<h6> <em> <strong> <mark> <ul> <li> <ol> Paragraphe Retour à la ligne (dans un paragraphe) Titres Mettre en valeur (dans un paragraphe) Mettre bien en valeur (dans un paragraphe) Faire ressortir visuellement sans forcément avoir de l'importance (ex : résultat de recherche dans un texte) (apparence par défaut : surligné) (dans un paragraphe) Liste à puces Puce Liste ordonnée Liens & title target=''_blank'' href=''mailto:'' &amp ; (notamment dans les href) info bulle «force» l'ouverture du lien dans un nouvel onglet ou une nouvelle fenêtre Images img doit se trouver dans un paragraphe src,alt (obligatoire!) title info bulle Figures balise bloc (comme paragraphe) peut contenir un peu tout ex : <figure><img /><figcaption>blabla</figcaption></figure> figcaption : légende Une même figure peut contenir plusieurs trucs, plusieurs images, etc.

3 CSS / Mettre en place le CSS le css applique l'héritage : si on donne des propriétés à une balise, ces propriétés seront héritées par toutes les balises contenues. <link rel=''stylesheet'' href=''...'' /> appliquer un style à plusieurs balises : les énumérer avec des virgules ex : h1, em { } classes (.), id (#) * : sélecteur universel A B : balise contenue dans une autre A + B : balise qui en suit une autre (sélectionne la première balise b située après un a) A[attribut] : balise qui possède un attribut A[attribut=''valeur''] : balise qui possède un attribut de telle valeur (valeur exacte) A[attribut*=''valeur''] : l'attribut doit cette fois contenir tel truc dans sa valeur (peu importe sa position) il existe d'autres sélecteurs CSS. (cf CSS3 module W3C selectors) CSS / Formatage du texte Taille de texte font-size:16px ; font-size : small ; font-size : 0.8em ; taille absolue (px : pixels ; cm, mm) taille relative (recommandé) (xx-small, x-small, small, medium, large, x-large, xx-large) taille relative (recommandé) (ex : autre unité sur le même principe mais plus petit de base ;%) Polices font-family : police1, police2 ; polices (dans l'ordre de la préférée à la par défaut) - en dernier : serif ou sans-serif - polices courantes : Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana. Formats de polices : ttf (ie9 et tous les autres navigateurs), eot (ie uniquement, toutes versions, format propriétaire microsoft), otf (pas ie), svg (seul format reconnu sur les iphones et ipads pour le moment), woff (nouveau format conçu pour le web, ie9 et tous les autres navigateurs). Définir une nouvelle police { font-family : 'MaSuperPolice' ;

4 } src : url('masuperpolice.eot') { font-family : 'MaSuperPolice' ; src : url('masuperpolice.eot') format('eot'), url('masuperpolice.woff') format('woff'), url('masuperpolice.ttf') format('truetype'), url('masuperpolice.svg') format('svg') ; } Cette forme permet de proposer plusieurs formats, le browser téléchargera celui qu'il sait { font-family :'a' ; src : url('a.eot') ; src : url('a.eot?#iefix') format('embedded-opentype'), url('a.woff') format('woff'), url('a.ttf') format('truetype'), url('a.svg#a') format('svg') ; } Cette dernière forme permet de pallier certains bugs sur IE car les anciennes versions ne comprennent pas quand on définit plusieurs formats. Puis on peut l'utiliser dans un font-family. Apparence font-style : normal ; font-style : italic ; font-style : oblique ; font-weight : normal ; font-weight : bold ; text-decoration : none ; text-decoration : underline ; text-decoration : line-through ; text-decoration : overline ; text-decoration : blink ; (ne fonctionne pas sur tous les navigateurs, ie et chrome notamment). Alignement text-align : left / center / right / justify ; texte justifié : prend toute la largeur possible sans laisser d'espace blanc à la fin des lignes. Les textes des journaux par ex sont toujours justifiés. L'alignement ne fonctionne que sur des balises de type block, et pas inline.

5 Flottants float : left / right ; fait flotter l'élément à gauche ou à droite. Fonctionne sur les block et les inline (rappel : img est inline). L'élément flottant doit précéder l'habillage dans le HTML. Faire arrêter un flottant : clear : left/right/both; le texte se poursuit en-dessous après un float:left / right ou après un float quelconque. On utilisera souvent both. CSS / Couleur et fond Couleurs standard : Couleur de texte : color : blue ; color : #ffffff ; color : rgb(128,128,128) ; background-color

6 background-image : url(''neige.png'') ; background-attachment : fixed/scroll ; (fixed : fixée, scroll : défilante avec le texte (par déf)) background-repeat : no-repeat / repeat-x / repeat-y / repeat ; background-position : 30px 50px ; (x puis y) ou : top, bottom, left, center, right (combinables, ex top right). On peut combiner les propriétés, ex : background : url(''soleil.png'') fixed no-repeat top right ; C'est une super-propriété. L'ordre des valeurs n'a pas d'importance, elles sont toutes facultatives. Plusieurs images de fond : séparer par des virgules. background : url(''soleil.png'') fixed no-repeat top right, url(''neige.png'') fixed ; de l'avant plan vers l'arrière plan. Cela fonctionne sur tous les browsers sauf ie < 9. Transparence opacity : 0.6 ; (0 1) fonctionne sur tous les browsers sauf ie < 9 attention à l'héritage : tout le contenu devient transparent background-color : rgba(255,0,0,0.5) ; composante alpha idem 0->1 d'opacité même compatibilité recommandé de faire succéder background-color rgb et background-color rgba pour la compatibilité CSS / Bordures et ombres Bordures standard super-propriété border largeur (en px), couleur, type types : none, solid (trait simple), dotted (pointillés), dashed (tirets), double (bordure double), groove (en relief), ridge (autre effet relief), inset (effet 3d global enfoncé), outset (effet 3d global surélevé)

7 on peut appliquer des bordures différentes selon le côté : border-top, border-bottom, border-left, border-right (super-propriétés également). Bordures arrondies border-radius : 10px ; border-radius : 10px 5px 10px 5px ; formes différentes pour chaque coin (en haut à gauche, en haut à droite, en bas à droite, en bas à gauche). On peut affiner l'arrondi des angles en créant des courbes elliptiques : il faut indiquer deux valeurs séparées par un slash. Border-radius : 20px / 10px ; les bordures arrondies fonctionnent sur tous browsers sauf ie < 9. Ombres ombres des boîtes : box-shadow : s'applique à tout le bloc et prend 4 valeurs dans l'ordre suivant : décalage x (px), décalage y (px), adoucissement du dégradé (px), couleur de l'ombre. L'adoucissement peut être faible (inférieur au décalage), normal (égal au décalage), élevé (supérieur au décalage). On peut rajouter une 5è valeur facultative : inset. L'ombre sera placée à l'intérieur du bloc pour donner un effet enfoncé. Fonctionne sur tous sauf ie < 9. il faut encore rajouter une version -webkit-box-shadow. Ombre du texte : text-shadow : même principe que box-shadow. Marche sur tous browsers sauf ie < 10.

8 Apparences dynamiques :hover au survol :active au moment du clic :focus lorsque l'élément est sélectionné :visited lorsque le lien a déjà été consulté

9 MISE EN PAGE DU SITE header footer nav section aside article en-tête pied de page principaux liens de navigation section de page informations complémentaires article indépendant ces balises doivent encore contenir des blocs. on peut avoir des header et des footer dans les section ou les article, etc. tout peut s'imbriquer. Tout est sémantique. Compatibilité IE < 9

10 Modèle des boîtes Plusieurs types de balises : block, inline, table-cell, list-item, etc. Balises universelles : div (block), span (inline). Dimensions uniquement pour les block. width (px / % ), height (px / % ) : taille du contenu (à laquelle viennent s'ajouter les marges pour donner la taille de l'élément) tailles minimales et maximales : min-width, min-height, max-width, max-height en général tailles en % et tailles limites en px. Marges tous les blocs et les inlines possèdent des marges. Marges intérieures, marges extérieures : padding, margin. Margin-top, padding-bottom, etc. superpropriétés : margin : 2px 0 3px 1px ; en haut, à droite, en bas, à gauche margin : 2px 1px ; en haut et en bas, à gauche et à droite margin:auto ; centre l'élément (horizontalement seulement). Dépassements overflow (texte % bloc) visible (par défaut) : si le texte dépasse, il reste visible et sort volontairement du bloc hidden : il est coupé scroll : coupé mais avec barres de défilement auto : le browser décide de mettre ou non des barres de défilement (il n'en mettra que si c'est nécessaire). Valeur conseillée. word-wrap (largeur des textes) break-word : césure forcée (conseillé dès qu'un bloc est susceptible de contenir du texte saisi par des utilisateurs, par ex dans un forum).

11 Positionnement Positionnement flottant : obsolète. display inline : éléments d'une ligne, se placent les uns à côté des autres block : éléments en forme de blocs, se placent les uns en dessous des autres et peuvent être redimensionnés inline-block : éléments positionnés les uns à côté des autres (comme les inlines) mais qui peuvent être redimensionnés (comme les blocs) none : éléments non affichés Positionnement inline-block (recommandé). display : inline-block ; Les éléments vont se placer côte à côte et être redimensionnables. Problème : ils s'alignent par le bas, selon une baseline (ligne de base). On utilise vertical-align : baseline (par défaut) / top / middle / bottom / valeur en px ou en % qui aligne à une certaine distance de la baseline. Attention, transformer un élément block en inline-block fait qu'il ne va plus prendre toute la largeur disponible, mais uniquement la largeur dont il a besoin. Il faut utiliser width. Compatibilité IE < 8 :  A mettre après la feuille normale dans le HTML. Dans la feuille réservée à IE < 8, mettre sur les éléments considérés : display : inline ; zoom : 1 ; Positionnements absolu, fixe et relatif Il existe d'autres techniques un peu particulières permettant de positionner avec précision des éléments sur la page. Comme pour les flottants, elles fonctionnent aussi sur des balises inline, mais on les utilise bien plus souvent sur des balises block. Choix du mode de positionnement. position : absolute / fixed / relative. Positionnement absolu. left : right : top : bottom :. px ou %. On peut n'utiliser qu'une partie de ces propriétés, par ex utiliser right:0px pour forcer l'affichage sur la droite. Les éléments positionnés en absolu sont placés par-dessus le reste. Propriété z-index : z plus grand met à l'avant plan si des éléments se chevauchent. Le positionnement absolu ne se fait pas forcément toujours par rapport au coin haut et gauche de la fenêtre! Si on positionne en absolu un bloc A qui se trouve dans un autre bloc B, lui-même positionné en absolu (ou fixe ou relatif), le bloc A se positionne par rapport au coin haut et gauche du bloc B.

12 Positionnement fixe. Idem. Positionnement relatif. L'élément est décalé par rapport à sa position initiale. Compatibilité IE IETester, ou bien sur IE9 faire F12 pour afficher le dock développeurs. Un menu «mode navigateur» permet de simuler les anciennes versions à partir de IE 7. Erreurs courantes d'affichage : positionnement inline-block (cf astuce), balises structurantes de HTML 5 (cf astuce avec un petit script). Il faut faire une croix sur certaines fonctionnalités CSS 3 : coins arrondis, images de fond multiples, transparence, ombres. On fera une dégradation gracieuse : sur les anciennes versions des navigateurs on ne cherche pas à obtenir tous les effets, mais on s'efforce d'avoir un site qui reste quand même lisible sur les vieux navigateurs. Faire fonctionner les balises structurantes de HTML5 :  Positionnement inline-block : cf astuce plus haut avec une feuille de style spéciale. D'autres erreurs existent sur les vieilles versions d'ie : le texte n'est pas toujours à la bonne taille, certains blocs sont eux aussi mal dimensionnés, etc. Ces différences doivent être réglées au cas par cas dans la feuille spéciale vieux IE. Vérifier la validité Ce n'est pas parce que votre page web s'affiche correctement qu'elle ne comporte pas d'erreur. Mais rien ne vous dit que certains navigateurs ne vont pas se comporter bizarrement! Avoir une page web valide, c'est avoir la possibilité de dormir tranquille en sachant que l'on a bien fait les choses comme il faut.

13 FONCTIONNALITES EVOLUEES Tableaux Tableaux simples <table></table> <caption></caption> : titre du tableau <tr></tr> : ligne <td></td> : cellule <th></th> : cellule dans la ligne d'en-tête (première ligne du tableau) table { border-collapse : collapse / separate ; } td, th{ border : 1px solid black ; } propriété caption-side : top/bottom (position du titre au-dessus ou en-dessous du tableau, top par défaut). Tableaux structurés On peut diviser les gros tableaux en trois parties : en-tête, corps, pied. <thead></thead>, <tbody></tbody>, <tfoot></tfoot>. Généralement si le tableau est long, on remet dans tfoot les cellules d'en-tête. Il est conseillé d'écrire les balises dans l'ordre thead, tfoot, tbody. On peut fusionner des cellules avec un attribut dans td. Fusion de colonnes : colspan. Fusion de lignes : rowspan. L'attribut prend en valeur le nombre de cellules à fusionner. Ex : <td colspan=''2''>. Indique que la cellule prend la place de deux cellules à la fois (du coup il y a un td en moins après). On peut modifier l'alignement vertical du texte des cellules de tableaux avec la propriété verticalalign. Formulaires <form></form> Il faut obligatoirement le remplir de balises de type block. On mettra les champs dans des paragraphes. Attributs de form : method : ''get'' / ''post'' (get déprécié car données visibles dans l'adresse et limitées à 255 caractères) action : adresse de la page ou du programme qui va traiter les informations Les attributs name des champs permettront le traitement. Labels <label for=''pseudo''>pseudo</label> for fait référence à l'id et non pas au name. Zones de texte monoligne : <input type=''text'' name=''pseudo'' id=''pseudo'' /> attributs supplémentaires : size pour agrandir le champ (en caractères), maxlength pour limiter le

14 nombre de caractères que l'on peut saisir, value pour pré-remplir le champ, placeholder pour indiquer quoi saisir, par un exemple par exemple. mot de passe : type=''password'' multiligne : <textarea></textarea> taille modifiable en CSS avec width et height, ou avec des attributs rows et cols. Dans le textarea on met le texte de pré-remplissage. Pas d'attribut value donc. Zones de saisie enrichies Apparues avec HTML5 mais pas de problème pour les vieux navigateurs qui les remplacent par des input text. input même apparence qu'un text mais certains navigateurs vont entourer le champ en rouge si le champ est mal renseigné, et certains navigateurs mobiles notamment vont afficher un clavier adapté à la saisie d' input url : là encore clavier adapté sur les mobiles input tel : numéro de téléphone, idem. input number : champ avec des petites flèches pour changer la valeur. attributs : min (valeur minimale autorisée), max (valeur max autorisée), step (pas) input range : réglette, là encore attributs min max et step input color : permet de saisir une couleur. Assez peu mis en œuvre par les navigateurs à l'heure actuelle. input date : sélection de date time : heure week : semaine month : mois datetime : date et heure (avec gestion du décalage horaire) datetime-local : date et heure (sans gestion du décalage horaire) actuellement peu mis en œuvre. input search : champ de recherche. Le navigateur décide ensuite comment l'afficher. Ainsi, il peut afficher une petite loupe au champ pour signifier que c'est un champ de recherche et éventuellement mémoriser les dernières recherches effectuées par le visiteur. Elements d'options cases à cocher, zones d'options, listes déroulantes. Cases à cocher. input checkbox. On mettra le label après le input pour afficher le texte à droite de la case à cocher. Donner un name différent à chaque case à cocher. Attribut checked (sans valeur) pour cocher par défaut.

15 Zones d'options. input radio, toutes avec le même name pour les regrouper. Là encore, attribut checked. Listes déroulantes. <select></select> munie de name et id. Contenu : <option value=''machin''>machin</option> <option value=''truc''>truc</option>. Option peut prendre l'attribut selected pour être sélectionnée par défaut. On peut regrouper les options avec <optgroup label=''bidules''></optgroup>. Les groupes ne peuvent pas être sélectionnés, ils catégorisent juste les options. Finitions et envoi du formulaire Regrouper les champs. <fieldset></fieldset> : groupe de champs. Fieldset peut contenir une balise <legend></legend> contenant du texte. Sélectionner automatiquement un champ. Attribut autofocus dans un champ. Dès que le visiteur chargera la page, le curseur se placera dans ce champ. Pseudo-format CSS =>:focus. Rendre un champ obligatoire. Attribut required dans un champ. Le navigateur indiquera alors au visiteur, si le champ est vide au moment de l'envoi, qu'il doit impérativement être rempli. Les anciens navigateurs, qui ne reconnaissent pas cet attribut, enverront le contenu du formulaire sans vérification. Pour ces navigateurs il faut compléter les tests avec par exemple du javascript. Pseudo-formats CSS =>:required,:invalid. Bouton d'envoi. Input submit : principal bouton d'envoi de formulaire. Le visiteur sera conduit à la page indiquée dans l'attribut action du formulaire. Input reset : remise à zéro du formulaire. Input image : équivalent du bouton submit, présenté cette fois sous forme d'image. Rajouter l'attribut src pour indiquer l'url de l'image. Input button : bouton générique, qui n'aura par défaut aucun effet. En général géré en javascript. Les inputs de type boutons peuvent prendre un attribut value pour modifier leur texte. Vidéo et audio Formats audio. MP3 : compatible IE, Chrome, Safari. Incompatible Firefox, Opera. OGG : compatible Chrome, Firefox, Opera. Incompatible IE, Safari. On pourra donc proposer différents formats aux navigateurs qui sélectionneront celui qu'ils savent lire. Formats vidéo. Le stockage d'une vidéo a trois paramètres : format conteneur (avi, mp4, mkv...) contenant les deux éléments suivants, codec audio (cf ci-dessus), codec vidéo. Voici la compatibilité des codecs vidéo :

16 H.264 : compatible IE, Safari, Opera. Incompatible Chrome, Firefox. Ogg Theora : compatible Chrome, Firefox, Opera. Incompatible IE, Safari. WebM : compatible IE, Chrome, Firefox, Opera. Incompatible Safari. Là encore on proposera plusieurs formats. Pour la conversion on pourra utiliser le logiciel Miro Video Converter. Insertion d'un élément audio <audio></audio> Compatible sauf IE < 9. Attributs. Src : fichier. Controls : pour ajouter les contrôles de lecture et la barre de défilement. N'y figure pas par défaut, certains sites web préfèrent créer eux-mêmes leurs propres boutons et commander la lecture avec du javascript. Width : modifier la largeur de l'outil de lecture audio (en pixels sans préciser px). Loop : la musique sera jouée en boucle. Autoplay : la musique sera jouée dès le chargement de la page. Eviter d'en abuser. Preload : indique si la musique peut être préchargée dès le chargement de la page ou non. Valeurs : auto (par défaut) : le nav décide s'il doit précharger toute la musique, uniquement les métadonnées ou rien du tout ; metadata : charge uniquement les métadonnées (durée, etc), none : pas de préchargement. On ne peut pas forcer le préchargement de la musique, c'est toujours le navigateur qui décide. Contenu de la balise : texte alternatif vieux navigateurs. Il est conseillé en texte alternatif de mettre un player flash, comme Dewplayer. Pour proposer plusieurs formats, au lieu de mettre un attribut src on met dans le contenu des balises <source src=''machin.mp3''>. Le navigateur prendra automatiquement le format qu'il reconnaît. Attention, la balise source ne doit pas être fermée ni avoir le /> d'une balise orpheline. Insertion d'une vidéo <video></video> Même compatibilité. Attributs (cf audio pour les détails déjà mentionnés). Poster : image à afficher à la place de la vidéo tant que celle-ci n'est pas lancée. Par défaut, le navigateur prend la première image de la vidéo mais il est conseillée d'en créer une. Controls width height loop autoplay preload (mêmes valeurs, même remarque) Les proportions de la vidéo sont toujours conservées. Si vous définissez une largeur et une hauteur, le navigateur fera en sorte de ne pas dépasser les dimensions indiquées mais il conservera les proportions. Même principe pour le contenu alternatif. Même principe pour proposer plusieurs formats.

17 Attention, les iphone ipad et ipod ne reconnaissent à l'heure actuelle que le H.264 (fichier.mp4) et uniquement si celui-ci apparaît en premier dans la liste! Il est donc conseillé d'indiquer ce format en premier. A l'heure actuelle, impossible d'afficher la vidéo en plein écran (même en javascript), et impossible de protéger la vidéo du téléchargement. Mise en page adaptative avec les media queries Compatible tous browsers sauf IE < 9. Une media query va permettre de ne considérer un code CSS que si une règle est vérifiée. Mettre en place une media query Deux façons d'appliquer une media query : en chargeant une feuille différente en fonction de la règle, ou en écrivant la règle directement dans la feuille habituelle. Chargement d'une feuille différente : ajouter à la balise link un attribut media dans lequel on va écrire la règle. Directement dans la feuille : (à préférer) règle { }. Règles disponibles color : gestion de la couleur (en bits/pixel) height : hauteur de la zone d'affichage (fenêtre) width : largeur de la zone d'affichage (fenêtre) device-height : hauteur du périphérique device-width : largeur du périphérique orientation : orientation du périphérique (portrait ou paysage) media : type d'écran de sortie valeurs possibles : screen (écran classique), handheld (périphérique mobile), print (impression), tv (télévision), projection (projecteur), all (tous types d'écran) On peut rajouter le préfixe min- ou max- devant la plupart de ces règles. Les règles peuvent être combinées à l'aide des mots suivants : only (uniquement), and (et), not (non). Exemples screen and (max-width : all and (min-width : 1024px) and (max-width : all and (orientation : portrait) Les anciens navigateurs (notamment IE < 9) ne connaissent pas les media queries mais sont capables d'interpréter le début de la règle (ils savent screen par ex). Ils vont donc lire les propriétés CSS qui suivent même s'ils ne sont pas concernés par la règle! Pour éviter cela, une astuce consiste à utiliser le mot-clé only que ces vieilles versions ne connaissent pas : «@media only screen» ne provoquera pas de bug sur les vieux navigateurs. Les media queries sont surtout utilisées pour adapter le design du site aux différentes largeurs d'écran. Media queries et navigateurs mobiles Les navigateurs mobiles affichent le site en «dézoomant», ce qui permet d'avoir un aperçu de l'ensemble de la page. La zone d'affichage simulée est appelée le viewport : c'est la largeur de la

18 fenêtre du navigateur sur le mobile. Autrement dit, les navs mobiles simulent une largeur d'écran, on appelle cela le viewport. Si l'on cible l'écran avec max-width sur un mobile, celui-ci va comparer la largeur que vous indiquez avec celle de son viewport. Le problème c'est que le viewport change selon le navigateur mobile utilisé : opera mobile (850px), iphone safari (980px), android (800px), windows phone 7 (1024px). En bref, un iphone se comporte comme si la fenêtre faisait 980px de large, tandis qu'un android se comporte comme si la fenêtre faisait 800px. Pour cibler les smartphones, plutôt que d'utiliser max-width, on utilisera max-device-width. Les périphériques mobiles ne dépassant pas 480px de large, on pourra viser uniquement les navs mobiles avec cette media query all and (max-device-width : 480px). On n'utilise pas media handheld car quasi aucun nav mobile ne la reconnaît, ils se comportent tous comme s'ils étaient des écrans normaux (screen). On peut modifier la largeur du viewport du nav mobile avec une balise meta à insérer dans le head : <meta name=''viewport'' content=''width=320'' />. Pour obtenir un rendu facile à lire, sans zoom : <meta name=''viewport'' content=''width=device-width'' />. TECHNOLOGIES LIEES A HTML 5 Canvas SVG Drag & Drop File API Géolocalisation Web Storage Appcache Web Sockets WebGL MEMENTOS HTML ET CSS cf tutoriel GERER LA COMPATIBILITE ENTRE LES NAVIGATEURS Commentaires conditionnels Souvent ce sont les anciennes versions d'ie qui posent problème.  Au lieu d'ie on peut mettre : IE8 : cible une version précise précédé de lt (inférieur), lte (inférieur ou égal), gt (supérieur) ou gte (supérieur ou égal). Au contraire, pour un code HTML lu par tous les navigateurs sauf IE :  Code HTML pour les navigateurs différents d'ie  Plutôt que faire une feuille par version, mettra la balise body avec une class dans les commentaires conditionnels et finir par un test non IE avec une balise body simple. Remarque : on peut donner plusieurs noms de classes à une balise, en les séparant par un espace.

19 Hacks CSS Astuces qui permettent de faire en sorte que les propriétés CSS soient lues par certaines versions d'ie uniquement. Déconseillé car on se base sur des bugs des navigateurs, rien ne garantit qu'ils fonctionneront à l'avenir. Idée : dans le nom d'une propriété CSS, mettre un antislash pour que la propriété soit lue par IE6 et 7 et ignorée par le reste des browsers ; ou bien la précéder d'un * pour le même effet, ou bien la précéder d'un _ pour la faire lire uniquement par IE6. Les outils de débogage Soit simplement mettre temporairement une couleur de fond flashy à un élément qui pose problème pour bien le voir, par ex pour régler un problème de positionnement. Soit utiliser les outils de débogage des navigateurs (cf tutoriel pour un peu de détails).