Auteur	Guidal (Philippe)
Titre	Style Guide
Lieu	Paris
Date	23 juillet 2010
Dewey	006.7 GUI
Classe	Systèmes multimédia (conception de pages web ; ouvrages généraux sur l’infographie et la synthèse des sons par ordinateur, l’utilisation de HTML et XML pour la création de documents hypertextes ; vidéo interactive)
Notes	Section « Feuille de style commentée »

Style Guide

Feuille de style commentée

1. Précisons d’emblée que la feuille de style du site est parfaitement valide en profil CSS3 ; néanmoins, nous n’avons pas mis de lien avec le CSS Validation Service du W3C. En effet, pour des raisons liées au développement en cours du site et à des recherches personnelles, on a largement fait usage, comme on le verra ci-après, de préfixes propriétaires, ce que le validateur ne supporte pas…

2. Soutenant la Viewable With Any Browser Campaign, Regnat s’efforce d’être en conformité avec les standards du Web, de façon à ne pas privilégier l’usage d’un navigateur particulier. Ce site est régulièrement testé sous Windows avec les navigateurs Firefox, Google Chrome, Internet Explorer 9, Lynx, Opera, Safari et Seamonkey. Il est parfaitement lisible avec les versions récentes de ces navigateurs, et c’est bien là l’essentiel. Il n’en reste pas moins vrai que tous les navigateurs ne sont pas égaux : certains sont plus respectueux des standards du Web que d’autres, ou bénéficient d’avancées technologiques encore exclusives. Pour le dire sans ambages : Regnat gagne à être consulté avec autre chose qu’Internet Explorer…

3. Enfin, pour la clarté du commentaire et la lisibilité du code, les regroupements de déclarations ont été évités ; qu’on ne soit donc pas étonné des nombreuses redondances.

/* *************************************** */ /* Regnat.css */ /* (c) Regnat 2008 */ /* Update : 23 août 2013 */ /* --------------------------------------- */ /* Debugging : outline: 1px solid red; */ /* *****************************************/

Un moyen tout simple pour analyser les problèmes de mise en page consiste à appliquer un contour coloré aux éléments concernés afin d’en visualiser l’interaction : c’est l’objet de la ligne outline: 1px solid red;. Placée dans l’en-tête de la feuille de style, elle peut ainsi être facilement copiée/collée plus bas ; il suffit de changer la couleur pour visualiser plusieurs éléments simultanément.

html { margin: 0; padding: 0; -ms-scrollbar-3dlight-color: #f00; -ms-scrollbar-arrow-color: #f00; -ms-scrollbar-darkshadow-color: #000; -ms-scrollbar-face-color: #f90; -ms-scrollbar-highlight-color: #ff0; -ms-scrollbar-shadow-color: #ccc; -ms-scrollbar-track-color: #fc0 } ::-webkit-scrollbar { width: 16px } ::-webkit-scrollbar-thumb { background: rgba(255,153,0,1); -webkit-border-radius: .25em; border-radius: .25em; -webkit-box-shadow: inset .25em .25em .25em rgba(255,255,0,.8); box-shadow: inset .25em .25em .25em rgba(255,255,0,.8) } ::-webkit-scrollbar-track { -webkit-border-radius: .25em; border-radius: .25em; -webkit-box-shadow: inset .125em .125em .125em rgba(153,153,153,.5); box-shadow: inset .125em .125em .125em rgba(153,153,153,.5) } body { -webkit-animation-name: gradient; animation-name: gradient; -webkit-animation-duration: 10s; animation-duration: 10s; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-timing-function: linear; animation-timing-function: linear; background: #0f0; /* background: #00f; (blue) */ /* background: #0f0; (lime) */ /* background: #90c; (purple) */ /* background: #f00; (red) */ /* background: #fff; (white) */ /* background: #ff0; (yellow) */ color: #000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; line-height: 1.5em; margin: 0; padding: 0 0 0 145px; text-align: center }

Définition des bases typographiques du site (plus de détails dans la section « Typographie » de ce document). On a conservé pour mémoire le préformatage text-align: center;, destiné à centrer le contenu de la page dans les anciennes versions d’Internet Explorer qui ne géraient pas margin: auto;. Six couleurs d’arrière-plan sont prévues pour correspondre au calendrier liturgique ; reste à savoir si l’administrateur du site aura le temps de procéder aux commutations requises…

La taille de la police d’écriture a été déterminée en pensant à nos lecteurs les plus âgés, qui peinent souvent à déchiffrer les pattes de mouche largement répandues sur Internet, mais on peut la modifier au clavier en maintenant la touche Ctrl appuyée et en jouant des touches + et – du pavé numérique ; ce raccourci fonctionne normalement avec tous les navigateurs. Qui plus est, en optant pour une taille assez grande, Regnat est parfaitement en phase avec le web design le plus moderne (entre mille autres, on peut lire ce qu’en dit Ben Hunt, de l’agence londonienne Scratchmedia, dans son article « Web 2.0 How-To Design Style Guide »).

ms-scrollbar est une propriété spécifique au navigateur Internet Explorer. Elle est censée être placée dans l’élément body, mais l’expérience montre que cette pratique est incompatible avec une déclaration DOCTYPE orthodoxe ; de fait, il vaut donc mieux la placer dans l’élément html.

webkit-animation et webkit-scrollbar sont des propriétés spécifiques au moteur WebKit, utilisées par les navigateurs Google Chrome, Safari et quelques autres. Les fonctions d’animation sont regroupées à la fin de la feuille.

#wrapper { background: #f90; border-left: 1px groove #ccc; border-right: 1px groove #ccc; margin: .75em auto; text-align: justify; width: 90% }

Conteneur primaire.

#content { background: #fff url(Pictures/Background.jpg) fixed; border-left: 1px groove #ccc; border-right: 1px groove #ccc; margin: 0 3%; padding: 0 3em; position: relative }

Conteneur secondaire.

#logo { background: url(Pictures/Gradient0f0.png); /* background: url(Pictures/Gradient00f.png); */ /* background: url(Pictures/Gradient0f0.png); */ /* background: url(Pictures/Gradient90c.png); */ /* background: url(Pictures/Gradientf00.png); */ /* background: url(Pictures/Gradientfff.png); */ /* background: url(Pictures/Gradientff0.png); */ height: 150px; margin: 0 0 3em 0; padding: 0; text-align: center } #logo img { -ms-filter: progid:DXImageTransform.Microsoft.Shadow (color=#999999, direction=135, strength=4); -webkit-box-shadow: .25em .25em .25em #999; box-shadow: .25em .25em .25em #999 } #logo img:hover { background: #fe0; -ms-filter: progid:DXImageTransform.Microsoft.Shadow (color=#ffee00, direction=180, strength=144); -webkit-box-shadow: 0 0 6em 6em #fe0; box-shadow: 0 0 6em 6em #fe0 }

Conteneur du grand logo Regnat. Six dégradés de couleurs correspondant à l’arrière-plan sont prévus ; reste à savoir si l’administrateur du site aura le temps de procéder aux commutations requises…

box-shadow est une propriété CSS3, qui n’est pas encore prise en charge par tous les navigateurs. Actuellement, Firefox, Google Chrome, Opera, Safari et Seamonkey l’acceptent ; par précaution, on fait usage du préfixe propriétaire webkit.

filter est une propriété spécifique au navigateur Internet Explorer.

Inutile de le passer sous silence, chacun l’aura remarqué tant cela saute aux yeux (…) : #fe0 n’appartient pas à notre charte des couleurs. C’est pourtant celle du bord supérieur du logo, élaboré bien avant la création de ce site. Que faire ? Élargir la charte ? Tolérer cette petite infraction stylistique ?

#spinner { -webkit-animation-name: background, bounce, rotate; animation-name: background, bounce, rotate; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-duration: 3s, 15s, 15s; animation-duration: 3s, 15s, 15s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-timing-function: linear; height: 60px; left: 3%; -webkit-mask-image: url(Pictures/Spinner_mask.gif); mask: url(Pictures/Spinner_mask.gif); position: absolute; text-align: center; top: 50px; width: 60px } #spinner:hover { -ms-filter: progid:DXImageTransform.Microsoft.Glow (color=#ffcc00, strength=30); -webkit-transform: scale(1.2); transform: scale(1.2) }

Définition du spinner Regnat.

filter est une propriété spécifique au navigateur Internet Explorer.

transform est une propriété CSS3, qui n’est pas encore prise en charge par tous les navigateurs. Actuellement, Firefox, Google Chrome, Opera (partiellement), Safari et Seamonkey l’acceptent ; par précaution, on fait usage du préfixe propriétaire webkit.

webkit-animation est une propriété spécifique au moteur WebKit, utilisé par les navigateurs Google Chrome, Safari et quelques autres. Les fonctions d’animation sont regroupées à la fin de la feuille.

#header { background: url(Pictures/Header.gif); border-bottom: 1px solid #f90; margin: 0 0 3em 0 }

Conteneur de l’en-tête des articles.

#footer { background: #f90; -webkit-border-radius: .5em; border-radius: .5em; -ms-filter: progid:DXImageTransform.Microsoft.Shadow (color=#999999, direction=135, strength=4); -webkit-box-shadow: .125em .125em .375em #999; box-shadow: .125em .125em .375em #999; font-size: .75em; margin: 3em 0 0 0; }

Conteneur du cartouche de bas de page.

filter est une propriété spécifique au navigateur Internet Explorer.

#footnotes { border-top: 1px solid #f90; font-size: .875em; line-height: 1.3125em; margin: 3em 0 0 0 } #footnotes li { background: url(Pictures/Bullet.gif) no-repeat 0 6px; margin-bottom: .656em; padding-left: 1.3125em } #footnotes ul { list-style: none; margin: 0; padding: 0 0 0 3em }

Conteneur des notes de bas de page, avec liste à puces personnalisée.

/* HTML Tags */ a:link { color: #00f; text-decoration: none } a:visited { color: #093 } #footer a { background: none; padding-right: 0 } a[href$="Beno%C3%AEt_XVI"] { position: relative } a[href$="Beno%C3%AEt_XVI"]:focus .popup, a[href$="Beno%C3%AEt_XVI"]:hover .popup { background: url(Doc200/Pictures/BenoitXVI.jpg); border: 2px groove #f90; bottom: 1.5em; height: 85px; left: 0; position: absolute; width: 60px } a[href$=".doc"]:hover { cursor:url("data:image/png;base64,…"),pointer } a[href$=".pdf"]:hover { cursor:url("data:image/png;base64,…"),pointer } a[href$=".zip"]:hover { cursor:url("data:image/png;base64,…"),pointer } a[href*="mailto"]:hover { cursor:url("data:image/png;base64,…"),pointer } a:focus, a:hover { background: #ff0; text-decoration: underline } a:active { background: red; color: #ff0 } a[title*="?"] { cursor: help }

Définition des pseudo-classes pour les liens hypertextes :

a:link : couleur par défaut d’un lien.
a:visited : lien visité.
Embellissement des liens pour le ‍Saint Père glorieusement régnant.
modification du pointeur de souris au survol des liens vers des fichiers DOC.
modification du pointeur de souris au survol des liens vers des fichiers PDF.
modification du pointeur de souris au survol des liens vers des fichiers ZIP.
modification du pointeur de souris au survol des liens vers des adresses e-mail.
a:focus : sélection d’un lien au clavier.
a:hover : affectation d’un lien survolé par le pointeur de la souris.
a:active : lien activé (clic de souris ou appui sur la touche ↵).
modification du pointeur de souris au survol des liens de type « Qu’est-ce que c’est ? » ou « Qui est-ce ? ».

Est-il vraiment nécessaire de modifier le style des liens visités ? C’est une pratique courante, et la plupart des webdesigners la recommandent, mais elle peut se discuter [1].

abbr, acronym { border-bottom: 1px dotted #f90; cursor: help; letter-spacing: .0625em }

Définition des balises <abbr> et <acronym>.

blockquote { margin: 0 3em; }

Définition des blocs de citation :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ante orci, vehicula eu eleifend ut, facilisis sed diam. In ac purus ut sapien vehicula tristique. Nulla eu mauris leo. Mauris rhoncus tincidunt lorem, sit amet cursus dui rutrum sit amet. Nulla tincidunt nibh id mi feugiat ac imperdiet massa bibendum. Donec elementum pellentesque enim a tempus. Sed ante erat, eleifend at congue ac, adipiscing ac magna. Sed sed arcu id sapien molestie posuere. Integer ac lacus ut nibh tempus tempus vel eu massa. Nullam eleifend nulla sed dui semper id pulvinar eros rutrum. Etiam odio nunc, suscipit at aliquet quis, interdum eu metus. Sed tristique erat quis leo vestibulum aliquam. Vestibulum cursus elit non quam tempus varius ut in turpis.

caption { background: #f90; border-bottom: 1px solid #999; border-right: 1px solid #999; font-family: Arial, Helvetica, sans-serif; font-size: 1.5em; font-weight: bold; line-height: 32px; text-shadow: #ff0 1px 1px 1px }

Titre d’un tableau de données :

*Table caption*
Table data	Table data

text-shadow est une propriété CSS3, qui n’est pas encore prise en charge par tous les navigateurs. Actuellement, Firefox, Google Chrome, Opera, Safari et Seamonkey l’acceptent. Tant pis pour les utilisateurs d’Internet Explorer…

code { font-family: monospace; font-weight: bold }

Définition de la balise <code> pour l’affichage de code informatique.

dd { background: url(Pictures/ArrowDR.gif) no-repeat 3px 6px; margin: .75em 0; padding-left: 1.5em } dd h1, dd h2, dd h3, dd h4, dd h5 { margin: 0 0 .75em 0 } dd ul.none { list-style: none } dd #TOC_H { margin: 0 0 1.5em 0 } dl { margin: .75em 0 } dl.css, dl.css dd { margin: 1.5em 0 } dt { font-family: Arial, Helvetica, sans-serif; font-weight: bold }

Paramètres des listes de définition, comme celle utilisée pour ce commentaire (d’après une idée de Dan Cederholm).

h1 { background: #f90; -webkit-border-radius: .25em; border-radius: .25em; -webkit-box-shadow: .125em .125em .375em #999; box-shadow: .125em .125em .375em #999; -ms-filter: progid:DXImageTransform.Microsoft.Shadow (color=#999999, direction=135, strength=4); font-family: Arial, Helvetica, sans-serif; font-size: 1.5em; line-height: 32px; margin: 0 0 1.5em 0; padding-left: .5em; text-shadow: #ff0 .0625em .0625em .0625em }

Titre de niveau 1

filter est une propriété spécifique au navigateur Internet Explorer.

h2 { background: #ff0; -webkit-border-radius: .25em; border-radius: .25em; -webkit-box-shadow: .125em .125em .375em #999; box-shadow: .125em .125em .375em #999; -ms-filter: progid:DXImageTransform.Microsoft.Shadow (color=#999999, direction=135, strength=4); font-family: Arial, Helvetica, sans-serif; font-size: 1.5em; line-height: 32px; margin: 1.5em 0 .75em 0; padding-left: .5em; text-shadow: #f90 .0625em .0625em .0625em }

Titre de niveau 2

filter est une propriété spécifique au navigateur Internet Explorer.

h3 { color: red; font-family: Arial, Helvetica, sans-serif; font-size: 1.5em; line-height: 32px; margin: 1.5em 0 .75em 0; text-shadow: #fc0 .0625em .0625em .0375em }

Titre de niveau 3

h4 { border-bottom: 2px ridge #f90; border-top: 2px groove #f90; font-family: Arial, Helvetica, sans-serif; font-size: 1.5em; line-height: 32px; margin: 1.5em 0 .5em 0; text-shadow: #f90 .0625em .0625em .0625em }

Titre de niveau 4

h5 { -ms-filter: progid:DXImageTransform.Microsoft.MotionBlur (direction=135, strength=4); font-size: 1.125em; font-weight: normal; line-height: 1.6875em; margin: 1.6875em 0; text-align: center; text-shadow: #f90 .0625em .0625em .0375em }

Titre de niveau 5

filter est une propriété spécifique au navigateur Internet Explorer.

text-shadow est une propriété CSS3, qui n’est pas encore prise en charge par tous les navigateurs. Actuellement, Firefox, Google Chrome, Opera, Safari et Seamonkey l’acceptent.

img { border: 0 solid; }

Petite astuce pour éviter le cadre bleu infligé par le navigateur Internet Explorer aux images lorsqu’elles sont associées à un lien hypertexte : il suffit d’imposer une bordure invisible (0 pixel).

img.rotate { background: white; border: 1px solid #bbb; -webkit-box-shadow: 4px 4px 15px rgba(0,0,0,.6); box-shadow: 4px 4px 15px rgba(0,0,0,.6); margin: 5px 0 0 25px; padding: 14px 14px 50px; -webkit-transform: rotate(5deg); transform: rotate(5deg) } img.rotate:hover { -webkit-box-shadow: 1px 4px 15px rgba(0,0,0,.6); box-shadow: 1px 4px 15px rgba(0,0,0,.6); -webkit-transform: rotate(-5deg); transform: rotate(-5deg) }

Images rotatives :

Bomb

#TOC_V1 a img:hover, #TOC_V2 a img:hover { border-left: 6px solid red; border-right: 6px solid red }

Bordure des boutons actifs placés au-dessous du menu vertical.

kbd { background: #ccc; border: 2px outset; -webkit-border-radius: .25em; border-radius: .25em; font-family: Arial, Helvetica, sans-serif; font-weight: bold; padding: 0 2px }

Embellissement de la balise <kbd> pour représenter les touches de clavier. Exemple : F1.

ol { list-style-type: decimal; margin-bottom: 1.5em } ol li { margin-bottom: .75em }

Définition d’une liste ordonnée classique :

List Item
List Item

p { margin: .75em 0; text-indent: 1.5em }

Définition des paragraphes.

p.initial { text-indent: 0 } p.initial:first-letter { background: #f90; border: 1px outset #ff0; -webkit-border-radius: .125em; border-radius: .125em; -webkit-box-shadow: .125em .125em .125em #999; box-shadow: .125em .125em .125em #999; float: left; font-size: 3em; font-style: italic; line-height: 1em; margin: .125em .25em 0 0; padding: .125em .25em; text-shadow: #ff0 .0625em 0 .0625em }

Définition des lettrines :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ante orci, vehicula eu eleifend ut, facilisis sed diam. In ac purus ut sapien vehicula tristique. Nulla eu mauris leo. Mauris rhoncus tincidunt lorem, sit amet cursus dui rutrum sit amet. Nulla tincidunt nibh id mi feugiat ac imperdiet massa bibendum. Donec elementum pellentesque enim a tempus. Sed ante erat, eleifend at congue ac, adipiscing ac magna. Sed sed arcu id sapien molestie posuere. Integer ac lacus ut nibh tempus tempus vel eu massa. Nullam eleifend nulla sed dui semper id pulvinar eros rutrum. Etiam odio nunc, suscipit at aliquet quis, interdum eu metus. Sed tristique erat quis leo vestibulum aliquam. Vestibulum cursus elit non quam tempus varius ut in turpis.

#content table { width: 100% } #content td { vertical-align: top }

Définition générale des tableaux de données.

ul { list-style: url(Pictures/LEDorange.png); margin-bottom: 1.5em } ul li { margin-bottom: .75em } li ul { margin-top: .75em }

Définition d’une liste à puce personnalisée :

List Item
List Item

var { font-family: Arial, Helvetica, sans-serif; font-style: italic; font-weight: bold; letter-spacing: .0625em; text-shadow: #0f0 .0625em .0625em .0625em }

Embellissement de la balise <var> pour représenter les variables informatiques.

/* ID TOC */ #TOC_H { background: #ff0 url(Pictures/Fire.jpg); font-size: .75em; line-height: 1.125em; margin: 0 4px 3em 4px; padding: 0 } #TOC_H a { background: #fc0; border-left: 1em solid red; border-right: 1px solid #ff0; border-top: 1px solid red; display: block; padding: .25em .5em .25em .75em; text-decoration: none } #TOC_H a:hover { background: #f60; border-color: #fc0; color: #ff0 } #TOC_H table { border-bottom: 1px solid #ff0; border-right: 1px solid #ff0 } #TOC_H td { vertical-align: middle }

Définition du menu horizontal présentant les index Dewey de deuxième rang :

040

090

Utiliser une table pour un menu est une fort mauvaise pratique. Ce n’est qu’une béquille provisoire…

#TOC_V1 { background: #ff0 url(Pictures/Fire.jpg); border: 1px outset #ff0; -webkit-border-radius: .5em; border-radius: .5em; -webkit-box-shadow: .125em .125em .375em #999; box-shadow: .125em .125em .375em #999; -ms-filter: progid:DXImageTransform.Microsoft.Shadow (color=#999999, direction=135, strength=4); font-size: 12px; left: 12px; line-height: 16px; padding-left: 15px; padding-top: 15px; position: absolute; width: 117px } #TOC_V1 td { text-align: center }

Conteneur du menu vertical (version complète), avec centrage des images de la partie inférieure.

filter est une propriété spécifique au navigateur Internet Explorer.

#TOC_V2 { background: #ff0 url(Pictures/Fire.jpg); border: 1px outset #ff0; -webkit-border-radius: .5em; border-radius: .5em; -webkit-box-shadow: .125em .125em .375em #999; box-shadow: .125em .125em .375em #999; -ms-filter: progid:DXImageTransform.Microsoft.Shadow (color=#999999, direction=135, strength=4); font-size: 12px; left: 12px; line-height: 16px; padding-left: 15px; padding-top: 15px; position: fixed; width: 117px } #TOC_V2 td { text-align: center }

Conteneur du menu vertical (version courte), avec centrage des images de la partie inférieure. La nécessité d’une version courte nous est apparue en testant le site avec Internet Explorer, doté de plusieurs extensions qui diminuaient sensiblement la surface de l’écran (1280×800) de notre ordinateur ; la partie inférieure du menu complet devenait alors inaccessible… Une feuille de style particulière est utilisée pour les anciennes versions d’Internet Explorer, qui ne prennent pas en charge, entre autres, la propriété position: fixed; (les menus verticaux reçoivent la propriété position: absolute;).

filter est une propriété spécifique au navigateur Internet Explorer.

#TOC_V3 { background: #ff0 url(Pictures/Fire.jpg); border: 1px outset #ff0; -webkit-border-radius: .5em; border-radius: .5em; -webkit-box-shadow: .125em .125em .375em #999; box-shadow: .125em .125em .375em #999; font-size: .75em; line-height: 1.125em; margin: 0 auto 2.25em; padding: 0 1.125em; width: 50% }

Conteneur du menu de page (comme celui placé en haut de celle-ci).

/* classes */ .bulletin { border-left: 1px solid #999; border-top: 1px solid #999; font-size: .75em; line-height: 1.25em } .bulletin li { background: url(Pictures/Bullet.gif) no-repeat 0 6px; margin: 0 1.125em .625em 0; padding-left: 1.5em } .bulletin td { border-bottom: 1px solid #999; border-right: 1px solid #999; text-align: center } .bulletin th { border-bottom: 1px solid #999; border-right: 1px solid #999; font-family: Arial, Helvetica, sans-serif; text-align: center } .bulletin tr:hover { background-color: #ff9; outline: 1px solid #f90 } .bulletin ul { list-style: none; margin: 0; padding: 0 0 0 .75em }

Définition du tableau de téléchargement du bulletin, avec liste à puces personnalisée :

Couverture	Numéro	Date de parution	Principaux sujets traités	Nom du fichier	Taille (Ko)
Image	Numéro	Date de parution	List Item List Item	Nom du fichier	Taille

.caps { font-variant: small-caps; }

Petites capitales.

.center { text-align: center; }

Centrage.

.chalk { background: #ff9; }

Fond de couleur craie.

.code { background: #000; border-bottom: 4px groove #ccc; border-left: 1em ridge #ccc; border-right: 4px groove #ccc; border-top: 2px groove #ccc; color: #0f0; font-family: monospace; font-weight: bold; line-height: 1.125em; padding: 1.125em; white-space: pre }

Classe utilisée pour représenter du code informatique préformaté, comme sur cette page (d’après une idée de Sébastien Laoût).

.left { float: left; margin: 0 1em 0 0 }

Positionnement d’une image flottante à gauche.

.leftB { border: 1px solid #f90; float: left; margin: 0 1em 0 0 }

Positionnement d’une image flottante à gauche, avec bordure.

.line { border-bottom: 2px dotted #f90; margin-bottom: 1.5em; padding-bottom: 1.5em }

Paragraphe avec bordure inférieure pointillée :

.orange { background: #f90; }

Fond de couleur orange.

.question { background: url(Pictures/Question1.gif) no-repeat 3px 3px; border: 1px dotted #fc0; min-height: 32px; padding-left: 2.5em; padding-right: .25em }

Paragraphe pour sujet à question : « La sagesse dans la vie commence peut-être à se demander à tout propos : pourquoi [2] ? »

.red { color: red; }

Police de couleur rouge.

.right { float: right; margin: 0 0 0 1em }

Positionnement d’une image flottante à droite.

.rightB { border: 1px solid #f90; float: right; margin: 0 0 0 1em }

Positionnement d’une image flottante à droite, avec bordure.

.table1 { border-left: 1px solid #999; border-top: 1px solid #999 } .table1 td { border-bottom: 1px solid #999; border-right: 1px solid #999; text-align: center } .table1 tr:hover { background-color: #ff9; outline: 1px solid #f90 }

Définition d’un tableau de données avec bordure et contenu centré :

Table data

.table2 { border-left: 1px solid #999; border-top: 1px solid #999 } .table2 td { border-bottom: 1px solid #999; border-right: 1px solid #999 } .table2 tr:hover { background-color: #ff9; outline: 1px solid #f90 }

Définition d’un tableau de données avec bordure et contenu justifié :

Table data

.title { background: #f90; border-bottom: 1px solid #999; border-right: 1px solid #999; font-family: Arial, Helvetica, sans-serif; font-size: 1.125em; font-weight: bold; text-shadow: #ff0 1px 1px 1px }

Classe de titre pour tableau de données :

Title

Table data

.TOC { background: red; border-bottom: 1px solid #ff0; border-left: 1px solid #ff0; margin: 1em 0; padding: 1px 1px 1px 0 } #TOC_V1 .TOC, #TOC_V2 .TOC { width: 100px } .TOC li { display: inline; list-style: none; margin: 0; text-align: left } .TOC li a { background: #fc0; border-bottom: 1px solid red; border-left: 1em solid red; border-right: 1px solid red; border-top: 1px solid red; display: block; padding: .25em .5em .25em .75em; text-decoration: none } .TOC li a:hover { background: #f60; border-color: #fc0; color: #ff0 } .TOC li p { color: #ff0; margin: 0; padding: .5em 0 }

Définition du menu vertical (d’après une idée de Soren Pedersen).

.warning { background: url(Pictures/Warning.png) no-repeat 3px 1px ; border: 1px dotted red; min-height: 32px; padding-left: 2.5em; padding-right: .25em }

Paragraphe pour avertissements divers : « Celui qui croira et sera baptisé, sera sauvé ; celui qui ne croira pas, sera condamné [3]. »

.yellow { background: #ff0; }

Fond de couleur jaune.

/* @rules */ @media print { body { font-size: 12pt; padding: 0 } body, #content, #logo, #wrapper { background: none } #wrapper { margin: 0; width: 100% } #content { margin: 0; padding: 0 } #content a { color: blue; text-decoration: none } #content a[href^="http:"]:after { content: " (" attr(href) ") " } #spinner, #TOC_H, #TOC_V1, #TOC_V2, #TOC_V3 { display: none } h1, h2, h3, h4, h5 { font-size: 16pt } }

Styles d’impression.

@-webkit-keyframes background { from { background-color: #fcfe04; } 25% { background-color: #fc7c04; } 50% { background-color: #280204; } 75% { background-color: #fc7c04; } to { background-color: #fcfe04; } } @keyframes background { from { background-color: #fcfe04; } 25% { background-color: #fc7c04; } 50% { background-color: #280204; } 75% { background-color: #fc7c04; } to { background-color: #fcfe04; } } @-webkit-keyframes bounce { from { left: 0%; } to { left: 94%; } } @keyframes bounce { from { left: 0%; } to { left: 94%; } } @-webkit-keyframes gradient { from { background-color: #fff; } 25% { background-color: #bfffbf; } 50% { background-color: #80ff80; } 75% { background-color: #40ff40; } to { background-color: #0f0; } } @keyframes gradient { from { background-color: #fff; } 25% { background-color: #bfffbf; } 50% { background-color: #80ff80; } 75% { background-color: #40ff40; } to { background-color: #0f0; } } /* **************************************** @keyframes gradient { from { background-color: #fff; } 25% { background-color: #e6bfb2; } 50% { background-color: #cc80e6; } 75% { background-color: #b340d9; } to { background-color: #90c; } } from { background-color: #fff; } 25% { background-color: #bfbfff; } 50% { background-color: #8080ff; } 75% { background-color: #4040ff; } to { background-color: #00f; } from { background-color: #fff; } 25% { background-color: #bfffbf; } 50% { background-color: #80ff80; } 75% { background-color: #40ff40; } to { background-color: #0f0; } from { background-color: #fff; } 25% { background-color: #ffbfbf; } 50% { background-color: #ff8080; } 75% { background-color: #ff4040; } to { background-color: #f00; } from { background-color: #fff; } 25% { background-color: #ffffbf; } 50% { background-color: #ffff80; } 75% { background-color: #ffff40; } to { background-color: #ff0; } **************************************** */ @-webkit-keyframes rotate { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @keyframes rotate { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } }

Fonctions d’animation de l’arrière-plan et du spinner.

Ces fonctions sont spécifiques au moteur WebKit, utilisé par les navigateurs Google Chrome, Safari et quelques autres. Les lecteurs intéressés par les détails techniques peuvent se reporter au Safari CSS Visual Effects Guide.

Très bizarrement, l’animation du spinner est beaucoup plus fluide avec Google Chrome qu’avec Safari ; de plus, ce dernier peine à gérer simultanément l’animation et #logo img:hover…

1. Lire les réflexions suivantes, pro and contra :

Allsopp (John), « Visited links revisited » ;
Collison (Simon), « Question Time: Visited Links » ; du même auteur, voir aussi « Ticked-off visited links Reloaded » ;
Davidson (Mike), « Making Visited Links Radical » ;
Dugonjić (Marko), « The ways to style visited links » ;
Herasimchuk (Andrei Michael), « Design Eye for the Usability Guy » (réponse caustique à l’article de Jakob Nielsen) ;
Korpela (Jukka "Yucca"), « Links Want To Be Links » ;
Nielsen (Jakob), « Change the Color of Visited Links »;
Robinson (Keith), « Visited Links–Your Take » (et les très nombreux commentaires de ce blogpost).

2. Balzac (Honoré, de), La peau de chagrin (Paris, Flammarion, s.d., p. 252).

3. Mc 16 16.