Chez Jérémie - Tag - css

Améliorez vos liens avec la génération de contenu CSS

Jeremie — Wed, 23 Jun 2010 14:19:00 +0200

Les liens hypertextes sont la colonne vertébrale du Web. La plus part du temps, ils se résument à un texte graphiquement mis en évidence (historiquement, bleu et souligné). Néanmoins, techniquement et sémantiquement parlant, les liens peuvent bénéficier de méta-données qui offrent un certain nombre d'informations qui pourraient être utile à l'utilisateur mais ne sont pas mises en évidence par les navigateurs. Par exemple, l'attribut target permet de définir dans quel fenêtre ou cadre va s'ouvrir le lien, ou l'attribut hreflang qui permet de connaitre la langue de la page où mène le lien et je ne vous parle même pas de l'attribut rel. Dans cet article je vais vous montrer comment utiliser la génération de contenu CSS pour afficher certaines de ces informations à l'utilisateur.

Le résultat attendu

L'idée est d'afficher au survol d'un lien le contenu de son attribut hreflang et target dans un badge en surimpression. Une image valant mieux qu'un long discourt, voila le résultat attendu :

L'arrière plan des liens

Afin de facilité la lecture du badge et surtout son association visuelle avec le lien, on va attribuer aux liens un arrière plan coloré qui va légèrement déborder de la zone de lecture "normal".

On commence par leurs donner une couleur d'arrière plan au survol :

a:hover{
    background : #CCD;
}

L'effet de débord est réalisé en jouant sur les propriétés padding et margin. L'utilisation de padding va permettre d'élargir la zone visuelle. Malheureusement, cela agrandi aussi réellement la zone occupée par le lien qui va repousser ce qui l'entoure. Pour éviter cet effet, on va attribuer une valeur négative de margin équivalente à chacune des valeurs de padding. Cet artifice permet de donner assez facilement l'illusion d'un élément qui "déborde" tout en étant à sa place naturel dans le flux HTML.

a{
    display : inline-block;

    padding :  0.1em  0.6em;
    margin  : -0.1em -0.6em;
}

Notez que la balise a est une balise de type inline. Cela veux dire que certains navigateurs ne vont pas appliquer (ou seulement partiellement) le padding et le margin à l'élément. Pour corriger cela, vous devez ajouter la propriété display: inline-block. Si vos intitulés de liens sont longs, il faut se poser la question de savoir si on veut réellement réaliser un tel effet graphique. En effet, en cas de retour à la ligne avec une balise inline-block, c'est l'intégralité du contenu de la balise qui passe à la ligne (ce qui peut casser la continuité et la lisibilité de votre texte) et si le contenu continue d'être trop grand pour tenir sur une seule ligne, le retour à la ligne se fera à l'intérieur de la balise inline-block. C'est donc à vous de voir ce que vous voulez faire selon le contexte sachant que l'utilisation de la valeur inline-block est obligatoire avec Internet Explorer 8 lorsque vous voulez créer un contenu généré, positionné de manière absolue (ce qu'on va faire ci-après). Si vous n'utilisez pas cette valeur, le badge s'affichera sous le lien !

Avec le truc du débord que je viens de vous montrer, vous allez constater un effet assez déplaisant. Au survol de votre lien le texte qui précède le lien sera masqué par l'arrière plan alors que le texte qui suit restera visible par dessus l'arrière plan. Vous pouvez régler l'empilement des éléments en jouant avec la propriété z-index. Vous pouvez soit lui donner la valeur -1, mais dans ce cas, les liens vont se retrouver sous les paragraphes et ils ne seront jamais survolés par la souris (vous les voyez, mais en fait ils sont "masqués" par l'élément contenant le texte), soit vous lui donnez la valeur 1 et dans ce cas le lien passera entièrement au dessus du texte qui l'entoure. C'est assez intéressant graphiquement, mais pas forcément très satisfaisant en terme de lisibilité je vous montrerai un peu plus loin comment s'en sortir avec CSS 3.

a{
    position : relative; /* nécessaire pour la bonne application de z-index */
    z-index  : 1;
}

La génération de contenu

Le badge qui contiendra les informations supplémentaires va être créer à la volé au survol d'un lien directement en utilisant CSS. Pour cela, nous allons utiliser le pseudo-élément :after en conjonction avec la propriété content.

Le pseudo élément :after va simuler la présence d'un éléments après le contenu du lien. On appel cela un pseudo élément car ce sélecteur va créer une zone qui va avoir le même comportement qu'un élément HTML traditionnel, exactement comme si vous agissiez sur une balise span. La seul différence, c'est que ce pseudo-élément n'apparait pas dans l'arbre DOM du document. Je vous reparlerai un peu plus loin de ce sujet quand on abordera les questions d'accessibilité. Ce qu'il faut retenir ici c'est que vous allez pouvoir ajouter des styles à un élément sans que vous ayez besoin de rajouter quoi que ce soit dans le balisage HTML de vos liens.

La propriété content, elle, va permettre de rajouter du texte et des images au sein de votre pseudo-éléments. Là encore, rien n'apparait dans l'arbre DOM de votre document HTML.

Nous allons gérer ici quatre cas de figure pour notre badge :

Si l'attribut hreflang est présent, on affichera sont contenu dans notre badge : l'objectif est de dire visuellement à l'internaute quelle est la langue du lien qu'il va ouvrir.
Si l'attribut target est présent et à la valeur _blank, on affichera une icône qui montre l'ouverture d'une nouvelle fenêtre dans notre badge.
Si les deux attributs sont présents, on affichera et la langue et l'icône.
Si aucun des deux attributs n'est présents, on n'affichera pas le badge du tout.

La gestion de ces quatre cas va passer par une utilisation judicieuse du sélecteur d'attribut et de la cascade

a:after{
 /* On masque le badge, mais on utilisera le sélecteur générique pour définir le style global du badge */

    display : none;
}

a[hreflang]:hover:after{
 /* On affiche le contenu de l'attribut hreflang */

    content : attr(hreflang);
    display : block;
}

a[target="_blank"]:hover:after{
 /* Si l'attribut hreflang est définie, on affichera son contenu. S'il n'existe pas, il ne s'affichera pas. Dans tous les cas, on affichera une icône qui matérialise le changement de fenêtre */

    content : attr(hreflang) " " url("external.png");
    display : block;
}

Assez simplement, la fonction attr permet d'extraire le contenu de l'attribut et la fonction url permet d'inclure une image. Notez que dans la déclaration ci-avant, dans le cas ou les deux attributs hreflang et target sont tous les deux définis, c'est la dernière règle CSS qui sera appliquée car elle a, selon les règles de la cascade, le même poids que la règle précédente, mais elle la surcharge du fait de son positionnement dans le code source.

Le positionnement et le design du badge

Maintenant que le contenu du badge est générer il faut lui donner un peu de style (oui, je sais, elle un peu facile celle là :-p )

On va commencer par le sortir du flux en le positionnant de manière absolu et on le fera légèrement déborder en haut et à droite. En suite, on va détailler le minimum syndical graphique : Couleur d'arrière plan, bordures, styles typographiques, marges pour aérer un peu tout ça.

a{
 /* nécessaire pour que le positionnement du badge soit relatif à son lien*/

    position : relative;
}

a:after{
    position : absolute;
    top   : -1.3em;
    right : -1.3em;

 /* L'arrière plan est rouge foncé et le texte blanc */
    background : #009;
    color : #FFF;

 /* On ajoute une bordure blanche de 2 pixels de larges */
    border : 2px solid #FFF;

 /* Le texte est graissé et 1/3 plus petit que le texte du lien. Il est également mis systématiquement en majuscule */
    font : bold 0.6em Verdana, Helvetica, Arial, sans-serif;

    text-transform : uppercase;

 /* L'ajout de marge permet de laisser le texte respirer */
    padding : 0.4em 0.5em;
}

CSS 3 is sexy !

Voila ! Avec ce que vous venez de voir, vous avez fait tous ce qu'il est possible de faire simplement avec CSS 2. Cependant, on n'est pas encore au résultat attendu. On va donc rajouter une petite touche de CSS 3 pour rendre ça plus fin, plus youpi-tralala, plus waow !

Couleur transparentes

Actuellement, l'arrière plan de nos liens est opaque au survol, ce qui fait qu'on masque une partie du texte à cause de l'effet de "débord" de l'arrière plan. En utilisant une couleur semi-transparente on peut atténuer ce problème. pour cela, il suffit d'utiliser la notation rgba définie dans le module "Border & Background" de CSS 3.

a:hover{
    background : #CCD;
    background : rgba(128, 128, 160, .4);
}

Notez dans l'exemple ci-avant que la propriété background est déclarée deux fois. C'est normal. En effet, de cette manière si un navigateur ne comprend pas la notation rgba (IE8 par exemple), il ignorera la déclaration inconnu et se rabattra sur la déclaration précédente qui respecte la norme CSS 2. Le mécanisme qui consiste à ignorer une déclaration de style inconnue ou mal formée est un comportement standard. C'est une façon simple de gérer les capacités des navigateurs sans avoir à recourir à des artifices comme Modernizr.

Une autre solution pour régler ce problème de sur-impression consisterai à appliquer un z-index négatif au lien et à utiliser la propriété css pointer-events définie par SVG. Néanmoins, cette solution est plus lourde à mettre en œuvre (il faut appliquer au conteneur de chaque lien la valeur none et réapliquer la valeur auto à tous les liens). A noter que seul Firefox, Chrome et Safari supportent la propriété pointer-events sur les éléments HTML (je n'ai pas eu l'occasion de tester avec IE9, mais IE8 et Opera 10.53 ne la supportent pas).

Bords arrondis

Pour adoucir un peu l'effet on va rajouter des bords arrondis aux liens et aux badges

a:hover{
    -moz-border-radius : 1.3em;
 -webkit-border-radius : 1.3em;
         border-radius : 1.3em;
}

a:after{
    -moz-border-radius : 50%;
 -webkit-border-radius : 1.3em;
         border-radius : 1.3em;
}

Comme souvent avec les propriété issu de CSS3, vous aller devoir faire plusieurs déclarations. En effet, peu de modules ont atteint le statut de Candidate Recommendation au W3C, or, c'est seulement à partir de ce statut que les constructeurs peuvent retirer leur préfixe spécifique aux propriétés qu'ils ont implémenté. le module Border & Background a atteint ce statut et tous les constructeurs sont d'accord pour dire qu'en ce qui concerne la propriété border-radius, il est plus que temps de retirer ce préfixe. Opera 10.53 supporte déjà cette propriété sans préfixe et les futures IE9 et Firefox 4 (en cour de discussion) devraient aussi la supporter sans préfixe.

Notez que pour le badge, avec Firefox, j'ai utilisé la valeur 50%. Cette valeur permet de créer des demi-cercles parfaits aux extrémités gauche et droite. Néanmoins, c'est un comportement spécifique à Firefox et mes tests ont montrés que certaines implémentations de Webkit (Chrome 5 par exemple) ainsi qu'Opera ne supporte par les pourcentages avec cette propriété. En outre, de ce que je comprend de la spécification, cette déclaration devrait produire une boite ovale plutôt que deux demi cercle réparti de part et d'autre de la boite, donc, pour la propriété standard, j'ai préféré mettre également une valeur absolue.

Ombres et lumières

Notre badge commence à être pas mal, on va le finaliser en lui donnant un peu de relief avec des effets d'ombres et de lumières.

a:after{
    background : #900;
    background : -moz-radial-gradient(35% 35% 0deg, ellipse cover, #E00 0%, #800, 90%);
    background :      radial-gradient(35% 35% 0deg, ellipse cover, #E00 0%, #800, 90%);

 -webkit-box-shadow : rgba(0, 0, 0, .8) 0 2px 5px;

    -moz-box-shadow : rgba(0, 0, 0, .8) 0 2px 5px,
                      rgba(255, 247, 0, .9) 0 0 3px inset;

         box-shadow : rgba(0, 0, 0, .8) 0 2px 5px,
                      rgba(255, 247, 0, .9) 0 0 3px inset;

}

On commence par ajouter un dégradé radial en arrière plan pour donner l'illusion d'un éclairage venant du haut et de la gauche (positionnement du centre du dégradé à 35% du haut de la boite et à 35% du bord gauche de la boite). Ce dégradé aura la forme d'une ellipse horizontal (0 degrés de rotation) qui couvrira toute la boite. Le dégradé va d'un rouge vif au centre à un rouge sombre prés des bords). La syntaxe des dégradés sous Webkit est très différentes de celle de Gecko et honnêtement je n'y comprend rien donc, tant pis pour Safari et Chrome (faite vous plaisir dans les commentaires si vous avez la solution qui va bien). La syntaxe de Gecko étant celle qui est en cour de standardisation, je reproduit la déclaration sans le préfixe -moz-, mais c'est un parie sur l'avenir. En effet, les dégradés CSS font partie du module "Image Values" qui en est à son tout premier draft. Autant dire que ça peut (va ?) sérieusement bouger.

Ensuite on ajoute une ombre porté qui va permettre de "détacher" le badge de la surface de la page. Cette ombre est décalé de 2 pixels vers le bas et sont rayon de flou est de 5 pixels. Dans la mesure ou tout les navigateurs majeurs du marché qui supportent la propriété box-shadow supportent également les couleurs rgba, on ne va pas s'amuser à gérer une alternative sans couleur transparente (mais on pourrait :-p ).

Comme box-shadow supporte les déclarations multiples séparées par un virgule, on va en profiter pour rajouter une ombre intérieur (mot clé inset). C'est une ombre de couleur jaune pour créer un effet de lumière spéculaire (on aurait pu le faire via le dégradé radial, mais personnellement je trouve ça plus simple via box-shadow). Vous noterez que je n'ai pas appliqué cette deuxième ombre à Webkit. Cela tiens au fait que l'implémentation des ombres internes couplé à l'utilisation de border-radius est une catastrophe sous Chrome 5 et Safari 4 (je n'ai pas eu l'occasion de tester avec Safari 5). En effet, l'ombre reste carré la où la boite est arrondie... horrible !

Attention à l'accessibilité

Voilà, on a créer un jolie badge qui illumine la vie de notre internaute. Mais le loup se cache au coin du bois !

Au royaume des aveugles les borgnes sont rois.

Comme je vous le disait ci-avant, le problème majeur de la génération de contenu via CSS, c'est que ce contenu n'est pas inclus dans le DOM du document HTML. Ainsi, toute les outils d'aide à l'accessibilité qui repose sur le DOM ne pourront pas exploiter ce contenu généré. C'est par exemple le cas des revus d'écran qui vocalisent les pages Web. A ma connaissance, aucune ne prend en charge les contenus généré via CSS. Pour cette raison, il est vivement déconseillé de générer un contenu signifiant à l'aide de CSS. Dans le cas qui nous occupe ici, cette question n'est pas un problème. En effet, il s'agit uniquement d'enrichir l'expérience utilisateur, donc, tant pis pour les aveugles et les personnes utilisant de vieux navigateur (vous voyez de quoi je parle là, n'est-ce pas), ils pourront toujours utiliser les liens tel qu'ils ont l'habitude de les pratiquer, pour les autres, c'est cadeau, c'est bonheur

Les souris, ce fléau de l'humanité !

Vous aurez noté que l'apparition et la disparition du badge sont conditionnées par l'application de la pseudo-classe :hover. Cette pseudo-classe correspond au survol de la souris sur le lien. Pas de bol, certains excentriques utilisent leur clavier, d'autres utilisent des interfaces tactiles (et même si Safari sous iPhone sait s'accommoder de cette pseudo-classe, ce n'est pas le cas de tous le monde) ... pire, votre souris pourrait tomber en panne ! Vous pourriez avoir la même attitude que précédemment et décréter que "tant pis pour ces êtres étranges qui sont mal équipé" et en rester là. C'est toujours possible mais ce serait dommage car il est assez facile de leur offrir la même expérience en étendant légèrement nos sélecteurs CSS en incluant les pseudo-classes :active et :focus.

a[hreflang]:hover:after,
a[hreflang]:active:after,
a[hreflang]:focus:after{
    ...
}

a[target="_blank"]:hover:after,
a[target="_blank"]:active:after,
a[target="_blank"]:focus:after{
    ...
}

Mon royaume pour un cheval.

Certains navigateurs sont comparables à des piétons et d'autres à des calèches grand luxe tractées par au moins 4 chevaux (ce qui sous entend également que même les navigateurs actuels les plus en pointe ont encore un long chemin à parcourir pour pouvoir être comparé à des coupés sport à injection directe !). Vous pouvez bien sur tester ce badge avec votre propre navigateur, et si vous n'avez pas tout un panel de navigateurs à votre disposition, voila quelques exemples de rendus :

Tableau comparatif de quelques rendus navigateurs
Navigateur	OS	Résultat du rendu
IE 6	Windows XP
IE 7	Windows XP
IE 8	Windows XP
IE 9 (Test Drive)	Windows 7
Firefox 3.5	Mac OS Leopard
Firefox 3.6	Windows XP
Firefox 3.7a5	Ubuntu 10.04
Chrome 5	Windows XP
Safari 4	Windows XP
Safari 5	Mac OSX Leopard
Opera 10.53	Windows XP
Opera 10.60 beta	Ubuntu 10.04

Vous noterez que, au delà des dégradations prévisibles (Dégradés, ombre, coins arrondis), c'est le rendu typographique qui diffère le plus d'un OS à l'autre (d'où l'importance d'utiliser des em pour définir la taille des arrondis plutôt que des pixels). Vous noterez également un bug (?) avec IE8 (non, ne levez pas les yeux au ciel !), où le badge est positionné au dessus de l'arrière plan du lien, mais au dessous du texte (!!). Il semblerai que pour l'instant, l'équipe de IE9 ne se soit pas encore penchée sur la gestion des pseudo éléments qui se comportent exactement comme avec IE8.

Conclusion

Comme vous pouvez le voir, il n'est pas très difficile d'enrichir l'expérience des utilisateurs. On est dans un cas typique d'enrichissement progressif. Avec un navigateur ancien, l'utilisateur ne gagne rien, mais il ne perd rien non plus. Avec un navigateur moderne, il gagne en confort. Personne n'est lésé, tout le monde est gagnant.

Certes, cela est intéressant pour l'utilisateur, mais cela peut également être intéressant pour vous à titre personnel. En effet, rien ne vous empêche d'utiliser cette technique dans la feuille de style utilisateur de votre navigateur préféré pour enrichir votre propre expérience de navigation sur tous les sites sur lesquels vous surfez

Enfin, c'est grâce à ce genre de test qu'on peut remarquer que Webkit n'est pas aussi bon que l'affirme Apple et Google en terme de support de CSS3 (quand il ne font pas un honteux amalgame avec HTML5). Je ne parle pas des dégradés radiaux (là, c'est moi qui fait volontairement l'impasse) mais plutôt du support de box-shadow couplé à border-radius qui est loin de ce que propose les dernières versions de Gecko. Bon soyons claire, il ne sert à rien de se lancer dans un pinaillage du genre "Ah oui mais Webkit supporte mieux tel truc que Gecko". Ce que je veux vous dire, c'est qu'il ne faut pas prendre pour argent comptant ce que racontent les constructeurs de navigateurs. Testez, testez et testez encore ! Il n'y a que ça pour vous permettre de savoir ce qui marche dans les cas qui vous intéressent.

La propriété CSS display: inline-block

Jeremie — Thu, 28 Jan 2010 14:00:00 +0100

La propriété CSS display reste sous-employée par les intégrateurs web. Ce n'est pas entièrement leur faute, les implémentations dans les navigateurs n'étant pas entièrement à la hauteur de la norme. Je reviens ici sur la valeur inline-block de cette propriété qui est désormais implémenté dans tous les navigateurs du marché et qui peut facilement nous aider à sortir de la sur-utilisation de la propriété float.

La propriété display permet d'indiquer explicitement le mode de rendu d'un élément HTML. Les valeurs les plus connues sont none, block et inline. Pourtant il y en a beaucoup d'autres et en particulier la valeur inline-block

`Block` et `inline`, les basiques

Chacune de ces valeurs va avoir une incidence sur la façon de rendre les éléments HTML ciblés. Malheureusement, les normes HTML 4.01 et CSS 2.1 sont assez floues sur ce que sont des éléments de type block ou inline et les futures normes HTML 5 et CSS 3 sont à peines plus loquaces sur le sujet. Pour mieux comprendre ce que sont ces types de rendu, je vous propose une caractérisation de ceux-ci selon mon expérience (c'est totalement empirique, et si vous pensez que j'ai omis des choses, n'hésitez pas à le signaler).

Les caractéristiques d'un élément de type `block` :

Les éléments de type block peuvent contenir à la fois d'autres éléments de type block, des éléments de type inline ou du texte¹.
Il est possible de fixer une largeur et une hauteur à ces éléments
Par défaut, la largeur d'un élément de type block est aussi grande que celle de son conteneur
Ils s'empilent naturellement les uns au-dessus des autres, dans l'ordre du flux HTML (Dans un flux de texte, ils passent à la ligne et forcent le retour à la ligne des éléments qui les suivent, les caractères invisibles présents avant et après sont ignorés)

Les caractéristiques d'un élément de type `inline` :

Les éléments de type inline ne peuvent contenir que d'autres éléments de type inline ou du texte
Il n'est pas possible de définir une largeur et une hauteur explicite pour ces éléments
Par défaut, leur largeur et leur hauteur dépendent du contenue de l'élément
Ils s'écoulent selon le flux du texte HTML

inline-block, un mélange des deux !

Avec cette valeur de la propriété display, vous allez avoir des éléments qui vont se comporter à la fois comme s'ils étaient de type block et de type inline. Concrètement, ça va donner les caractéristiques suivantes :

Les éléments de type inline-block peuvent contenir à la fois d'autres éléments de type block, des éléments de type inline ou du texte.
Il est possible de fixer une largeur est une hauteur à ces éléments
Par défaut, leurs largeurs et leurs hauteurs dépendent du contenu de l'élément
Ils s'écoulent selon le flux du texte HTML

Cela va avoir quelques conséquences :

La hauteur d'un élément de type inline-block va contrarier la hauteur des lignes de texte (même si vous l'avez fixée avec la propriété line-height) et donc potentiellement compromettre le rythme vertical de votre design.
Vous pouvez influer sur le positionnement de l'élément sur la ligne de base typographique en utilisant la propriété vertical-align.
Si une partie du contenu de l'élément doit passer à la ligne, c'est tout l'élément qui passera à la ligne

Implémentation de cette valeur dans les navigateurs

Le plus important à retenir, c'est que tous les navigateurs du marché implémentent la valeur inline-block pour la propriété display.

Attention tout de même à sont utilisation dans IE6 et IE7. En effet, l'implémentation de cette valeur est buggée sur ces deux navigateurs et ils ne supportent celle-ci que pour les éléments HTML qui sont nativement considérés de type inline par ces navigateurs. Cela à peu d'incidence pour peu qu'on y prenne garde. De toute façon, IE6 va bien finir par disparaitre et IE7 va rapidement être remplacé par IE8. D'ailleurs, IE8 est déjà le navigateur dominant de la gamme IE sur le marché des particuliers, il est donc plus que temps d'utiliser cette valeur de la propriété display.

Cas d'utilisations

Menu de navigation

L'usage de la propriété display:inline-block peut résoudre bon nombre des difficultés liées à l'usage de la propriété float. Néanmoins, il faut rester prudent.

Ce premier exemple reprend un balisage classique de menu sur une base de liste non-ordonnée. Cela fonctionne bien mais à deux conditions qui disqualifient presque l'usage de la valeur inline-block ici. Premièrement, dans la mesure où la balise LI est considérée nativement comme étant de type block, IE6 et IE7 ne géreront pas correctement l'usage de display. En outre, si vous voulez pouvoir contrôler l'espacement entre les onglets, vous devez accoler les balises LI dans le code HTML. En effet, les balises étant déclarées comme inline-block, elles vont suivre le flux de texte HTML ce qui veux dire que les espaces entre les balises sont affichés.

Ce deuxième exemple utilise un balisage plus simple (une succession de balises A) et utilise les spécificités qu'offre inline-block : centrage horizontal et vertical et utilisation des espaces typographiques. De fait, cette approche fonctionne parfaitement dans IE6 et IE7.

Nuage de tags

L'utilisation de inline-block sur un nuage de tags offre un monde de possibilités. Le fait de pouvoir donner explicitement une hauteur et une largeur ou de pouvoir spécifier des marges explicites aux éléments ouvre d'énormes portes aux graphistes. L'avantage le plus immédiat est d'éviter que des tags en plusieurs mots soient coupés par un retour à la ligne impromptu.

Titraille dépendante du contenu

Ce dernier exemple montre comment cette valeur permet de gagner en subtilité sur la gestion graphique des titres en permettant de créer simplement des effets liés à la taille du contenu plutôt qu'à la taille du contenant.

Aller plus loin

La propriété display a bien d'autres valeurs : certaines sont peu ou pas implémentées (la valeur compact), certaines sont partiellement implémentées et particulièrement difficiles à comprendre (la valeur run-in) et certaines sont largement implémentées mais peu ou pas utilisées (les valeurs table-* qui mériteraient un article à elles-seules... peut-être un jour si j'ai le temps ).

Pour en savoir plus sur le sujet, je vous renvoie vers ma bible du support des propriétés CSS : le site quirksmode.org et plus spécifiquement, sa section dédié à la propriété display.
Pour savoir comment contourner les limites des vieux navigateurs, je vous recommande l'excellent article de Florent Verschelde : Inline-block dans tous les navigateurs modernes ?
Pour une vue d'ensemble de la propriété display, il y a cette excellent tutoriel chez Alsacréations : Mise en page CSS avancée grace à la propriété display
En anglais : Robert Nyman, CSS display: inline-block: why it rocks, and why it sucks

Attention, il s'agit de la définition générale (selon la norme CSS) de ce qu'est un élément de type block. Cela ne remet pas en cause les spécificités propres à HTML comme par exemple la balise P qui selon la norme HTML 4.01/ XHTML 1.0 est bien de type block mais ne peut pas contenir d'autres éléments de type block.

Le modèle de boite flexible en CSS 3

Jeremie — Tue, 10 Nov 2009 12:13:00 +0100

La future norme CSS3 introduits plusieurs façons différentes d'appréhender la mise en page d'un document web. Il y a quelques temps, je vous ai parlé du module "Template Layout". Cette fois je vais vous présenter le module "Flexible Box Layout" qui est sans doute le plus prometteur de tous, d'autant plus qu'il commence déjà à être implémenté (non, pas dans IE, arrêtez de rêver !)

Update: Dear English readers, I've made an English version of this article available on hacks.mozilla.org.

Update 2: There's a Chinese version available... amazing!

Un modèle de boite flexible

CSS3 introduit donc un nouveau modèle de boite en plus du modèle de boite traditionnel issu de CSS 1 et 2. Un modèle de boite flexible permet de déterminer la façon dont des boites sont distribuées au sein d'autres boites (horizontalement ou verticalement) et comment elles se répartissent l'espace disponible entre elles.

Pour ceux qui connaissent, ce modèle de boite est utilisé par XUL (le langage de définition d'interface des produits Mozilla). Des mécanismes similaires sont utilisés par de nombreux autres langages de description d'interface comme XAML ou GladeXML.

Pour résumer de manière un peu simpliste, le modèle de boite flexible est exactement ce qu'il vous faut si vous voulez réaliser des designs liquides (qui s'adaptent automatiquement à la taille de la fenêtre du navigateur) ou élastiques (qui s'adaptent à la taille de la police typographique de l'utilisateur)

Pour la suite de l'article, tous mes exemples se baseront sur le code HTML suivant :

<body>
    <div id="boite1">1</div>
    <div id="boite2">2</div>
    <div id="boite3">3</div>
</body>

Distribuer des boites, kézaco ?

Par défaut, le modèle de boite CSS traditionnel distribue les boites verticalement, les unes au dessous des autres selon l'ordre du flux HTML. Dans le cadre du modèle de boite flexible, on peut spécifier cela explicitement et même inverser l'ordre d'affichage des boites. Le passage au modèle de boite flexible se fait de manière explicite en utilisant la propriété display avec la valeur box (ou inline-box) sur une boite qui en contient d'autres.

Distribution horizontale ou verticale

La propriété box-orient permet de spécifier l'axe de distribution. Cette propriété prend plusieurs valeurs, mais les plus simple à comprendre sont vertical et horizontal. Les autres valeurs (inline-axis et block-axis) ont les mêmes effets, mais permettent en plus de jouer sur la ligne de base de l'alignement (les boites sont alors considérées comme des boites "en ligne").

body{
    display : box;
    box-orient : horizontal;
}

Distribution inversée

La propriété box-direction permet de spécifier l'ordre de disposition des boites. En effet, une fois que vous avez spécifier votre axe de distribution, les boites se disposent selon l'ordre du flux HTML, de haut en bas dans le cadre d'une distribution verticale et de gauche à droite dans le cas d'une distribution horizontale. En utilisant la valeur reverse, vous pouvez inverser l'ordre de disposition des boites par rapport à leur apparition dans le flux HTML. J'ignore ce que cela donnera au point de vue accessibilité, cependant dans la mesure ou ces déclarations sont explicites quand à l'ordre du flux à suivre (contrairement à ce qui se fait avec les techniques du modèle de boites CSS traditionnel), les navigateurs qui implémentent déjà ce modèle de boites arrivent sans trop de difficultés à gérer les mécanismes d'accessibilité de base (l'ordre des tabulations par exemple).

Méfiez-vous de cette propriété car elle influe sur le comportement d'autres propriétés et peut donc donner lieu à des résultats contre intuitif.

body{
    display : box;
    box-orient : vertical;
    box-direction : reverse;
}

Distribution explicite

La propriété box-ordinal-group permet de définir explicitement l'ordre de distribution des boites. Là on obtient l'ultime degrés de la personnalisation en pouvant définir soit même l'ordre de distribution des boites, quelque soit l'ordre des boites dans le flux HTML. Ces groupes sont définie par un nombre commençant à 1 (la valeur par défaut). Le modèle de boite va donc commencer par distribuer ces groupes puis ensuite les boites au seins d'un même groupe. La distribution se fait du plus petit (le groupe 1) au plus grand (le groupe 2). Il y a un petit flou dans la spécification (en tout cas je n'ai pas su la décrypter avec certitude) sur l'influence exacte de box-direction vis à vis du positionnement des groupes, donc attention si vous mélanger l'usage de box-ordinal-group et box-direction.

body{
    display : box;
    box-orient : vertical;
}

#boite1{
    box-ordinal-group : 2;
}

#boite2{
    box-ordinal-group : 2;
}

#boite3{
    box-ordinal-group : 1;
}

Et la flexibilité dans tout ça ?

Si déjà, pouvoir influer sur l'ordre du flux HTML est énorme, là ou ça devient vraiment fun c'est quand on commence à gérer l'espace disponible.

La taille des boites

Par défaut une boite n'est pas flexible. Elle n'est flexible que si elle à la propriété box-flex avec une valeur supérieur ou égal à 1.

Si une boite n'est pas flexible, elle prendra le maximum de place possible afin que sont contenu soit affiché sans débord (overflow). Ce maximum pouvant être fixé avec les propriétés width et height (ou leur version min-* et max-*).

Si une boite est déclarée flexible, sa taille va être calculée en fonction de 2 critères :

Les déclaration de taille explicites (width, height, min-* et max-*)
La taille du conteneur et l'espace restant.

De cette manière, si aucune des boites n'a de déclaration de taille explicite, elle auront toute une taille proportionnel à celle du conteneur. Cela se fera sur le principe suivant , la taille d'une boite est égale à la taille du conteneur multipliée par la valeur de la propriété box-flex de la boite divisée par la somme des valeurs des propriétés box-flex de toutes les boites incluse dans le conteneur.

Par contre, si une ou plusieurs boites ont une taille explicitement définie, la taille de toutes ses boites est cumulé et les boites flexibles se répartissent l'espace restant sur le principe précédent.

Ça à l'aire un peu compliqué comme ça, mais vous allez voir, avec quelques exemple, on comprend mieux.

Toutes les boites sont flexibles

Dans l'exemple ci-dessous, la boite 1 est deux fois plus grande que la boite 2 et la boite 2 à la même taille que la boite 3. Ça ressemble beaucoup à ce que l'on aurait obtenu si on avait utilisé des boites avec des largeurs exprimées en pourcentage. Il y a néanmoins une différence fondamental. Si vous rajoutez une boite, vous n'avez pas besoin de recalculer le pourcentage correspondant de chaque boite. Avec le modèle de boite flexible, à chaque fois que vous allez rajouter une boite, toute les autres se feront plus petites pour laisser de la place à la nouvelle sans intervention de votre part.

body{
    display : box;
    box-orient : horizontal;
}

#boite1{
    box-flex : 2;
}

#boite2{
    box-flex : 1;
}

#boite3{
    box-flex : 1;
}

Certaines boites ont une taille prédéfinie

Dans l'exemple ci-après, la boite 3, qui n'est pas flexible, fera 160px de large et il restera 240 px d'espace libre à distribuer entre la boite 1 et la boite 2, ce qui donnera une largeur de 160px pour la boite 1 (240px x 2/3) et 80px pour la boite 2 (240px x 1/3). Rien ne vous empêche de faire en sorte que la boite 3 soit également flexible. Dans ce cas, le comportement sur la taille de cette boite ressemble à l'application de la propriété CSS min-width.

body{
    display : box;
    box-orient : horizontal;
    width : 400px;
}

#boite1{
    box-flex : 2;
}

#boite2{
    box-flex : 1;
}

#boite3{
    width : 160px;
}

La gestion du débord

Dans la mesure, ou l'on peut mélanger des boites flexibles, des boites rigides et des boites flexibles avec des tailles prédéfinies, on peut se retrouver avec des boites dont la taille cumulé est supérieur ou inférieur à la taille de la boite qui les contient. Donc soit on a trop d'espace, soit on en a pas assez !

Il y a trop d'espace, qu'est-ce que j'en fait ?

L'espace surnuméraire va se répartir en suivant les règles imposées par les propriétés box-align et box-pack.

La propriété box-pack va gérer la répartition horizontal de l'espace et peut prendre 4 valeurs : start, end, justify et center :

start : les boites sont positionné à gauche et tout l'espace restant est positionné à droite ;
end : les boites sont positionné à droite et tout l'espace restant est positionné à gauche ;
justify : l'espace se répartis de manière équitable entre les boites ;
center : l'espace se répartis de manière équitable aux extrémités du conteneur.

La propriété box-align va gérer la répartition vertical de l'espace et peut prendre 5 valeurs : start, end, center, baseline et stretch :

start : Les boites s'alignent sur le bord haut du conteneur et l'espace restant est placé en dessous des boites ;
end : Les boites s'alignent sur le bord bas du conteneur et l'espace restant est placé au dessus des boites ;
center : les lignes médiane des boites s'alignent sur la ligne médiane du conteneur et l'espace restant se répartie équitablement au dessus et au dessous des boites ;
baseline : le bord bas des boites s'alignent sur la ligne de base typographique du conteneur (c'est une interprétation simplifié de la spécification, mais ça donne une idée du comportement)
stretch : Les boites sont étiré pour combler l'espace restant.

Attention à l'interprétation de ces deux propriétés. Elles sont fortement influencé par l'usage des propriétés box-orient et box-direction et peuvent donner lieu à des comportements contre-intuitifs (les comportements des valeur start et end peuvent être complètement inversés par exemple). J'espère que d'ici à la version final de la spécification, on aura plus d'éclaircissement (et d'exemple) sur ces interactions entre propriétés.

body{
    display : box;
    box-orient : horizontal;

    /* Le contenu de body est centré horizontalement */
    box-pack : center;
    /* et verticalement ... \o/ */
    box-align : center;

    width : 100%;
    height : 100%;
}

Il n'y a pas assez d'espace, comment est gérer le débord ?

Comme dans le modèle de boite traditionnel, c'est la propriété overflow qui permet de spécifier le mode de débord des éléments surnuméraire, pas de surprise à ce niveau là.

Néanmoins, là aussi il faut faire attention. En effet, l'usage des propriété box-orient et box-direction peut avoir des effets surprenant comme le fait de voir les élément déborder à droite plutôt qu'à gauche ou en haut plutôt qu'en bas. Prenez le temps d'expérimenter ça tranquillement avant de vous arracher les cheveux sur une mise en page complexe.

Enfin, cerise sur le gâteau, il est possible d'éviter un débord en privilégiant un affichage sur plusieurs lignes (ou colonnes en fonction de l'orientation) grâce à la propriété box-lines : multiple.

Et sinon, ça marche dans la vraie vie ?

Oui, Gecko et Webkit implémente tous les deux une version expérimental de ce modèle de boite (les propriétés sont respectivement préfixées par -moz- et par -webkit- et leur comportement n'est pas garanti). Ce qui signifie que Firefox, Safari, Chrome et les autres navigateurs utilisant ces moteurs de rendu sont capables de s'en servir (à priori depuis un certain temps déjà, Firefox 3.0 et Safari 3 supportant déjà cette fonctionnalité). Si vous avez le bon gout d'utiliser un de ces navigateurs moderne, voici une petite démo en ligne du modèle de boite flexible.

Pour les autres, voila comment devrait s'afficher l'exemple précédent :

Conclusion

Si vous n'avez que faire de Internet Explorer, vous pouvez d'ors et déjà commencer à utiliser cette méthode pour gérer vos mises en page. Attention tout de même. Il s'agit de la première itération d'un "Working Draft" du W3C. Il va donc nécessairement y avoir des changements. Ceci dit, les implémentation de Gecko et de Webkit sont extrêmement cohérente et aboutis donc, si changement il y a, ils ne devraient pas être trop important.

Ce modèle de boite permet de résoudre simplement des problèmes assez récurrent de web design (gestion des formulaires, placement des pieds de page, centrage vertical, dissociation du flux rendu et du flux HTML, etc.). Je vous encourage vivement à vous familiariser avec car il pourrait bien faire partie de notre quotidien de Webdesigner assez rapidement (si Microsoft décide de l'implémenter, ça peut arriver très vite).

Les implémentations disponibles sont déjà suffisamment complètes pour faire beaucoup de choses. Néanmoins, la collision entre le modèle de boite traditionnel et le modèle de boite flexible n'est pas encore très claire (par exemple, impossible d'utiliser la propriété position : relative avec une propriété left ou top sur un élément ayant la propriété box-ordinal-group). Cela va s'affiner, mais ne vous étonnez pas si vos réflexes habituels sont un peu mis à mal. Autre point un peu délicat, l'interaction entre les différentes propriétés spécifiques à ce modèle de boite peuvent parfois donner lieux à des résultats franchement déroutant. Ça vous rappellera sans doute l'époque ou vous avez découvert les boites flottantes

A lire également sur le sujet

Shawn J. Goff : CSS3 Flexible Box Layout Module
CSS3.info : Introducing the flexible box layout module
W3C : Flexible Box Layout Module

La préséance des sélecteurs CSS

Jeremie — Wed, 26 Aug 2009 20:00:00 +0200

Comment savoir quelle règle CSS va s'appliquer à un éléments, en particulier quand deux règles entre en conflit ? Pour déterminer cela, les sélecteurs CSS on un poids et une priorité qui va permettre aux navigateurs de calculer la préséance des règles à appliquer. Voyons un peu comment ça ce passe.

Avant de se plonger des les arcanes de la méthode de calculs, revenons à quelques petites considérations pratiques, bien utiles dans la vie quotidienne du développeur web :

Plus vous ciblez précisément l'élément à styliser, plus il y a de chance que ce soit ce style qui s'applique à cet élément.
Firebug est votre ami : lorsque vous sélectionnez un élément dans la vue HTML de Firebug, celui-ci vous montre les styles CSS qui s'y appliquent par ordre d'importance.

Voila pour la vraie vie, maintenant voyons comment ça marche de manière un peu plus savante.

Pour les anglophone puriste, sachez que tout est décris dans la norme CSS 2.1, à cet endroit là très précisément : http://www.w3.org/TR/CSS2/cascade.html#specificity Je vais essayer de vous en faire une retranscription humainement compréhensible.

Priorité et poids !

En CSS, certains sélecteurs sont considérés comme plus prioritaire que d'autre. Concrètement, peu importe le nombre de sélecteurs, certain passerons avant les autres et détermineront donc la règle qui va s'appliquer. La priorité des sélecteurs CSS est la suivante (du plus important au moins important) :

Une déclaration de style "en ligne" (dans le code HTML avec l'attribut style) est toujours prioritaire sur tout le reste (c'est tout de même un cas un peu particulier, j'y reviendrai plus loin)
Le sélecteur d'identifiant #
Les sélecteurs faisant référence à des attributs d'éléments HTML (sélecteurs de classe . et d'attribut []) et les pseudo classes
Le nom des éléments (p, div, strong, etc.) et les pseudo éléments

Si vous êtes attentif, vous aurez remarqué que je n'ai pas parlé des sélecteurs d'enfant, de frère ou de parent ni du sélecteur générique *, c'est normal, ils ne comptent pour rien. Ils n'ont aucune priorité et ils n'ont aucun poids... bref, il ne permettent pas de déterminer une quelconque priorité d'application des règles CSS.

Ainsi, si pour un même élément vous avez une règle de sélection qui utilise le sélecteur #, et une autre qui utilise 50 sélecteurs de classe, c'est la règle avec le sélecteur # qui s'appliquera d'abord. Par exemple, imaginons le cas suivant :

<p id="content" class="alert">Ceci est un message important que je veux afficher en rouge !</p>

Si vous utilisez les règles ci-après, le texte apparaitra en vert (la règle #content est prioritaire sur la règle .alert) :

#content{
    color : #0C0;
}

.alert{
    color : #900;
}

Par contre, avec les règles de sélection suivantes, le texte du paragraphe apparaitra bien en rouge (la règle .alert est prioritaire sur la règle p) :

p{
    color : #0C0;
}

.alert{
    color : #900;
}

C'est seulement quand vous avez des sélecteurs de même priorité dans votre règle de sélection qu'il va falloir calculer le poids de cette règle de sélection. Pour faire simple, c'est la règles qui à le plus de sélecteur de la plus haute priorité qui s'applique.

Une notation pour comprendre

Pour matérialiser cette double notion de priorité (préséance absolue) et de poids (préséance par le nombre), le W3C propose une notation à 4 nombres : "a, b, c, d" ou a représente le nombre de sélecteurs de la plus haute priorité (la déclaration de style en ligne) et d le nombre de sélecteurs de la plus basse priorité (les noms d'élément et les pseudo éléments).

En utilisant cette notation, on peut donc immédiatement voir quel est le style qui va s'appliquer à un élément. Par exemple, si on reprend notre exemple précédent, voila ce que ça donnera :

0, 1, 0, 0 : #content {...}
0, 0, 1, 0 : .alert {...}
0, 0, 0, 1 : p {...}

Vous me direz que sur un exemple aussi simple, c'est s'embêter pour rien. Je ne vous contredirais pas. Mais ça prend du sens quand on commence à avoir des règles un peu plus complexe comme celles-ci :

0,1,0,1 : p#content {...}
0,1,0,0 : #content {...}
0,0,2,1 : p:not(:last-child()) {...}
0,0,1,2 : h1 + p.alert {...} Notez que le sélecteur + n'est ni compté ni comptable
0,0,1,1 : p[id="content"] {...} Notez que la sélection d'ID par ce biais est moins prioritaire qu'avec le sélecteur #
0,0,1,0 : .alert {...}
0,0,0,2 : body > p {...} Notez que le sélecteur > n'est ni compté ni comptable
0,0,0,1 : p {...}

Et la cascade dans tout ça ?

Ben oui, CSS ça veut dire : "Cascading Style Sheets", autrement dit "feuilles de style en cascade". Si je vous ai bien seriné avec la méthode de calcul de la préséance des règles de style, il faut savoir que celle-ci s'inscrit dans le cadre plus général de la "cascade" qui est définie comme suit :

On vérifie que des règles sont applicables au type de média concerné (vérification de la porté de la règle @media)
On définie un premier niveau de préséance en fonction de l'origine de la règle :
1. Les feuilles de style de l'utilisateur avec la règle !important sont toujours appliqués prioritairement sur tout le reste
2. Les feuilles de style de l'auteur avec la règle !important viennent en suite.
3. Les feuilles de style de l'auteur sans la règle !important
4. Les feuilles de style de l'utilisateur sans la règle !important
5. Les style définie par défaut par le navigateur quand rien d'autre ne s'est appliqué
On calcul la préséance des règles au sein de chaque origine comme vu ci-dessus
Si enfin, pour une même origine donnée, deux règles ont la même préséance, c'est la dernière déclarée (la plus basse dans le code source) qui s'applique.

Dans la plus part des cas, en temps que webdesigner, vous vous situerez quasiment exclusivement dans le cas d'un calcul de préséance sur une feuille de style auteur et vous vous soucierez finalement assez peu de la cascade, mais c'est toujours bon de s'en souvenir, surtout quand un client viens vous dire "oui-mais-ça-marche-pas-chez-moi".

Un petit exemple pour bien comprendre le rôle de la cascade. Si vous définissez la règle #content (préséance 0,1,0,0) dans votre feuille de style auteur et que l'utilisateur définie dans sa propre feuille de style la règle p (préséance 0,0,0,1), c'est bien votre style qui va s'appliquer. Néanmoins, si l'utilisateur rajoute le mot clé !important dans sa règle p, alors ces celle-ci qui s'appliquera, même si la préséance propre à votre règle est plus élevé. La cascade prend le pas sur la préséance.

Un petit mot sur les styles en ligne

L'utilisation de l'attribut HTML style est très problématique. Au delà des questions de séparation fond/forme et de la maintenabilité du code HTML, cet attribut est compliqué à gérer. En effet, si vous relisez ce que j'ai écrit sur la cascade, ou se situe cet attribut en terme d'origine pour déterminer sa préséance ? Je n'ai rien trouvé ni dans la norme CSS ni dans la norme HTML qui détermine explicitement cette origine. Néanmoins, quelques test confirme l'intuition que l'on pourrait avoir, les styles en ligne appartiennent à la 3ème origine : "les feuilles de style de l'auteur sans la règle !important".

Cela veux dire qu'il est possible de surcharger un style en ligne en faisant usage de la règle !important. Ceci étant, je vous encourage vivement à éviter ce genre de recours "de la dernière chance" car cela rendra votre code vraiment très difficile à maintenir.

Voila, avec toute ses informations, vous ne devriez pas avoir de problèmes à comprendre pourquoi vos styles ne sont pas pris en compte alors que vous êtes pourtant sur d'avoir tout bien fait comme il faut... parfois, juste en comptant un peu, on s'en sort

Un peu de lecture ailleurs

CSS 3 : Le module "Template Layout"

Jeremie — Thu, 16 Jul 2009 20:10:00 +0200

Le future norme CSS3 est composée de modules qui sont normalisés plus ou moins indépendamment. Parmi eux, il y en un, discret, mais qui représente quasiment le sain Graal de la mise en page en CSS : le module "Template Layout". Eric Mayer s'est récement fait la voix des Web Designer afin d'insister sur le besoins que représente un système de mise en page totalement indépendant du flux de la source HTML. Ok, ce module n'est encore implémenté par aucun navigateur, quoi que... mais voyons ce que cela pourrait apporter.

Avoir un système de mise en page qui permettrai de s'affranchir du flux de la source HTML... le rêve de tout les Web Designer. Aujourd'hui ce rêve est à porter de main, grâce au module "Template Layout" de CSS 3. Pas de fausse joie, à ce jour ce module est jeune (seulement 2 itérations en "Working Draft" dont la première date de 2005) et aucun constructeur de navigateur n'envisage de l'implémenter pour le moment, même à titre expérimental.

Comment ça marche ?

Dans sa forme la plus basique, le système de gabarit proposé par ce module repose sur l'utilisation de deux propriétés CSS existantes : display et position.

display va permettre de définir la grille de positionnement. La technique mise en œuvre ressemble à de l'ASCII Art puisqu'on utilise des lettres réparties sur plusieurs lignes pour définir le gabarit. Chaque lettre du gabarit définie une zone ("Slot" en anglais) dans lequel on pourra placer n'importe quel élément HTML.

Par exemple, un gabarit classique (1 en-tête, 2 colones et 1 pied de page) peut être représenté de la manière suivante¹ :

body{
    display : "aa"
              "bc"
              "dd";
}

C'est la propriété position qui nous permettra d'assigner un élément HTML à un des emplacements. Pour cela, il suffit d'utiliser la lettre représentant la zone désirée comme valeur de la propriété position.

Concrètement, cela se matérialisera de la manière suivante :

#header { position : a ; }
#footer { position : d ; }
#content{ position : b ; }
#sidebar{ position : c ; }

Mouais, mais en quoi c'est vraiment détaché de ma structure HTML ?

Imaginons que vous ayez un élément h2 dans votre partie #content, mais que vous vouliez que celui ci soit visuellement placé dans la zone d'en-tête. Avec les techniques actuelles (floating, positionnement absolu, etc), c'est un vrai casse-tête qui n'a pas de solution élégante. Avec cette nouvelle technique il suffit de rajouter la règle suivante :

#content > h2 { position : a ; }

De cette manière votre élément h2 va se placer dans la zone d'en-tête ou il se comportera exactement comme s'il était un élément enfant de cette zone. Les différents éléments placés dans cette zone s'y empileront dans l'ordre natif du flux HTML.

Mais cette zone, elle est virtuelle, comment je fait pour la styliser ?

Et oui, dans notre exemple, les élément #header et h2 font tout les deux partie de la zone d'en-tête, mais ne sont pas relier au niveau du flux HTML, ou si peu (il ne sont pas enfant d'un même élément qui représente cet en-tête). Bref, structurellement parlant, ils n'ont rien en commun. Cependant, il est tout de même possible de faire "comme si". En effet, pour styliser cette zone d'en-tête virtuel, on peut utiliser le pseudo-élément ::slot()

Ainsi, si je veux que ma zone d'en-tête ait un arrière plan rose, il suffit de faire :

body::slot(a){
    background : #FCC;
}

Malheureusement, à partir de là, je trouve que la spécification est mal fichue. En effet, les styles applicables au pseudo élément ::slot() sont très restreints. On ne peux modifier que les propriétés d'arrière plan, la propriété vertical-align et la propriété overflow. En l'état, il est impossible de modifier les bordures (iiirk !) ou d'appliquer les règles de colonages (mmmh ?) ni même de fixer... la hauteur et la largeur (huuu ?).

Quoi ! On ne peut pas spécifier la taille des zones du gabarit ?

En fait, si, on peut spécifier la hauteur et la largeur des zones du gabarit mais pas via le pseudo élément ::slot(). De mon point de vue, je trouve ça contre intuitif et en désaccord avec les habitudes déjà connu qu'on peut avoir des CSS. En effet, les largeurs et hauteurs des zones ne sont pas spécifiées à l'aide des propriétés width et height, mais directement via la propriété display. Oui, oui, vous avez bien lu : "via la propriété display" !

Ainsi dans notre exemple, si l'on veut avoir un en-tête d'une hauteur de 100px, un corps d'une hauteur qui s'ajuste en fonction du flux et un pied de page d'une hauteur de 2em, il suffit de spécifier les hauteurs voulu après la déclaration de chaque ligne du gabarit. Ce qui donnera (notez la présence du symbole /) :

body{
    display : "aa" /100px
              "bc"
              "dd" /2em;
}

Et si on veut spécifier une largeur automatique pour la colonne de contenu principal et en même temps une largeur fixe de 150px pour la colonne de droite me diriez vous ? Et bien pour cela, il suffit de spécifier vos largeurs à la fin de votre déclaration display dans l'ordre des colonnes de votre gabarit de la manière suivante² :

body{
    display : "a   a"  /100px
              "b   c"
              "d   d"  /2em
               * 150px;
}

Notez l'utilisation du caractère * pour spécifier une largeur qui doit être calculée automatiquement en fonction de l'espace disponible pour cette colonne. Il est également possible de spécifier des largeurs minimum et maximum pour les gabarit fluide, mais je ne vous assomme pas avec ça car je suis près à parier que cela va évoluer (par exemple, il n'est pas possible de spécifier des hauteurs minimum et maximum pour le moment !!!)

Et au fait, pour les bordure on fait comment ?

Comme je vous le disais précédement, il est impossible de spécifier une bordure pour une zone (ni même un padding ou un margin), et de mon point de vu, c'est un très gros manque pour ce module. Ceci dit, il est éventuellement possible de tricher en créant des zones vides ou des espaces entre ces zones. Pour cela vous pouvez utiliser le symbole .

Par exemple, on peut simplement centrer un gabarit de cette manière :

body{
    display : ".  a    a   ."  /100px
              ".  b    c   ."
              ".  d    d   ."  /2em
               * 50% 150px *;
}

Tout cela reste malheureusement un peu insatisfaisant et je soupçonne des raisons liées à la difficulté de maitre en œuvre ce module. Ceci dit, cela évoluera sans doute très vite dès que les première implémentation verront le jour.

Ok, c'est cool, mais on ne peut pas s'en servir ! Non ?

Effectivement, aucun navigateur n'implémente nativement cette fonctionnalité à ce jour. Néanmoins, il existe une implémentation en Javascript sous la forme d'un plugin jQuery (développé par Alexis Deveria) qui ouvre cette fonctionnalité à tout les navigateurs (allez jeter un coup d'œil aux demos, c'est bluffant). Alors oui, vous pouvez commencer à jouer avec les possibilité de ce module.

Néanmoins, temps que ce module ne sera pas plus stable, je vous invite à ne pas en faire usage dans un environnement de production industriel, ou alors avec parcimonie. C'est encore hautement expérimentale.

Mais franchement... ça déchire grave !

la présentation sur plusieurs ligne est là pour simplifier la lecture du gabarit, mais il est tout à fait possible de tout mettre sur une seul ligne
les espaces surnuméraires n'ont aucune influence sur le gabarit, il sont là pour simplifier la lecture

Passez à la vitesse superieure avec CSS 3

Jeremie — Tue, 30 Jun 2009 20:00:00 +0200

Cet article est une traduction de l'article "Take Your Design To The Next Level With CSS3" rédigé par Inayaili de Leon pour Smashing Magazine. Merci à eux de m'avoir autorisé à la faire.

Sans être exhaustif, cet article propose un grand tour d'horizon de l'état de l'art des implémentations de la future norme CSS 3 dans nos navigateurs favoris. C'est la première fois que je réalise une telle traduction donc, toute les remarques sur ce point sont les bienvenues. Merci à tous ceux que j'ai embêtés sur Twitter et Identi.ca sur certains points de traduction (ils se reconnaitront).

Les feuilles de styles CSS ont été créées il y a 13 ans et CSS 2.1, la norme la plus largement adopté à ce jour, existe depuis 11 ans. En observant l'écart entre les sites Web créés à cette époque et ceux d'aujourd'hui, on constate l'ampleur du chemin parcouru. Au fil des ans, le développement Web a vraiment évolué dans des directions toujours plus surprenantes.

Dès lors, on peut s'interroger. Pourquoi, dès qu'on parle de CSS, se retrouve-t-on embourbé dans nos habitudes, incapable d'expérimenter ? Pourquoi continuons-nous d'utiliser du code CSS spécifique à chaque navigateur et du Javascript pour gérer la présentation ? Pourquoi n'utilisons-nous pas les nouveautés de CSS 3 disponibles dans les navigateurs modernes pour améliorer la qualité graphique de nos sites ?

C'est le moment d'utiliser ces nouveautés dans nos projets. Il ne faut pas avoir peur d'exploiter progressivement les propriétés et sélecteurs CSS 3 dans nos feuilles de style. Informer nos client des avantages de CSS 3 (et contribuer au déclin des navigateurs obsolètes) est en notre pouvoir. C'est même de notre responsabilité, en particulier si cela implique de produire des sites Web plus souples pour diminuer les couts de développement et de maintenance.

Cet article va vous présenter quel sont les avantages de CSS 3 et des exemples de mises en œuvres concrètes par certains Webdesigners. L'ambition, c'est qu'à la fin de votre lecture vous sachiez quoi attendre de CSS 3 et comment l'utiliser dans vos projets.

N'hésitez pas également à lire cet autre article sur le sujet :

Push Your Web Design Into The Future With CSS 3

L'utilisation des propriétés spécifiques des navigateurs

Aujourd'hui, la plupart des propriétés CSS 3 disponibles sont préfixées de manière spécifique par chaque navigateur. En effet, d'une part les fabricants de navigateurs n'ont implémenté qu'une toute petite partie des propriétés CSS3 et d'autre part une partie des propriétés ne seront peut être jamais normalisées par le W3C. Cela permet donc de différencier les propriétés spécifiques aux navigateurs en cour de normalisation des propriétés déjà standardisées (quitte à remplacer une version spécifique par la version standards le jour ou la norme sera stabilisé).

Cette approche à bien sur des défauts, a savoir des feuilles de style surchargé et un design inconsistant d'un navigateur à l'autre. Après tout, nous ne voulons plus gérer des feuilles de styles spécifiques pour chaque navigateur. Tout le monde se souvient des balises propriétaires de mise en forme que furent <marquee>, <blink> et bien d'autres, largement employé dans les années 90. Elles continuent de rendre certain site web inconsistant si ce n'est complètement illisible. Nous ne voulons surtout pas nous retrouver dans une tel situation, n'est-ce pas ?

Ceci étant dit, n'oublions pas que les sites web n'ont pas à être parfaitement identiques dans tous les navigateurs. Ainsi, le fait d'utiliser des propriétés spécifiques pour réaliser certains effets sur certains navigateurs peut parfois avoir du sens.

Les préfixes les plus communs sont ceux utilisés par les navigateurs utilisant Webkit (Safari par exemple), qui à la forme -webkit-, et par les navigateurs utilisant Gecko (Firefox par exemple), qui à la forme -moz-. Konqueror (-khtml-), Opera (-o-) et Internet Explorer (-ms-) ont aussi leur propre préfixe.

L'utilisation de ses propriétés spécifiques nous conduira à produire un code CSS non-standard. En temps que webdesigners professionnels, nous ne devons pas l'oublier. En effet, les puristes pourraient soutenir que l'utilisation de ces propriétés dans une feuille de style finalisée n'est pas une très bonne idée. Cependant, lorsqu'il s'agit d'expérimenter ou d'apprendre, nous pouvons envisager de les inclure dans nos feuilles de styles tout en les couplant avec les propriétés standards.

Liens utiles

1. Sélecteurs

Les sélecteurs CSS sont un outil incroyablement puissant : ils nous permettent de cibler des éléments HTML spécifiques au sein de notre balisage sans avoir à recourir à des class, des ID ou du Javascript superflue. La plus part d'entre eux ne sont pas une nouveauté de CSS 3 bien qu'ils ne soient pas utilisés autant qu'ils le devraient. L'utilisation adéquate des sélecteurs peut être d'un grand secours si vous essayez de réaliser un balisage à la fois propre et léger afin de mieux séparer le fond de la forme de votre site. Ils peuvent permettre de réduire le nombre de classes et d'ID dans le balisage et rendre les feuilles de style plus simple à maintenir par les designers.

Les sélecteurs d'attributs

3 nouveaux sélecteurs d'attributs font partie de la spécification CSS3 :

[att^="valeur"]
Cible les éléments ayant un attribut "att" dont le contenu commence par "valeur"
[att$="valeur"]
Cible les éléments ayant un attribut "att" dont le contenu se termine par "valeur"
[att*="valeur"]
Cible les éléments ayant un attribut "att" dont le contenu contient la chaine "valeur"

tweetCC utilise un sélecteur d'attribut pour cibler les liens dont l'attribut title se termine par le mot "tweetCC" :

a[title$="tweetCC"] {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 140px;
    height: 140px;
    text-indent: -9999px;
}

Implémentation dans les navigateurs : Le seul navigateur qui ne supporte pas les sélecteurs d'attribut est IE6. Que ce soit IE7 ou IE8, Opera et les navigateurs basés sur Webkit ou sur Gecko, ils les supportent tous. De fait, utiliser ces sélecteurs dans vos feuilles de style est parfaitement sûr.

Les sélecteurs combinatoires

Le seul nouveau sélecteur combinatoire introduit dans CSS 3 est le sélecteur globale d'éléments voisins (sibling). Il permet de cibler tous les voisins d'un élément qui ont le même élément parent.

Par exemple, pour ajouter une bordure grise à toutes les images qui sont voisines d'une div particulière (la div et les images ayant le même parent), utilisez simplement la règle de style suivante :

div~img{
    border: 1px solid #ccc;
}

Implémentation dans les navigateurs : Le seul navigateur qui ne supporte pas le sélecteur d'élément voisin est notre petit chouchou : Internet Explorer 6.

Les pseudo-classes

L'ajout le plus important de CSS 3 à la norme CSS est probablement l'ensemble des nouvelles pseudo-classes. Celles qui suivent sont sans doute les plus intéressantes et les plus utiles

:nth-child(n)
Permet de cibler des éléments en se basant sur leur position dans la liste des enfants de leur élément parent. La valeur "n" peut être un nombre, une expression numérique ou les mots clé odd (paire) ou even (impaire) (idéal pour créer des lignes de tableau avec des alternances de couleurs). Par exemple, si vous voulez cibler un groupe de trois éléments après le quatrième élément vous n'avez qu'à écrire :
```
:nth-child(3n+4){background-color: #ccc;}
```
:nth-last-child(n)
Sur la même logique que la pseudo-class précédente, mais uniquement pour cibler les derniers éléments enfant d'un parent. Par exemple, pour cibler les deux derniers paragraphes d'une DIV, nous n'avons qu'à utiliser la règle suivante :
```
div p:nth-last-child(-n+2)
```
:last-child
Cible le dernier enfant d'un élément parent. C'est équivalent à :
```
:nth-last-child(1)
```
:checked
Cible des éléments cochés, par exemple des cases à cocher activées.
:empty
Cible des éléments ne contenant ni texte ni éléments enfant.
:not(s)
Cible les éléments qui ne satisfont pas la déclaration "s". Par exemple, si nous voulons mettre en noir le texte de tous les paragraphes qui n'ont pas la classe "lead", nous pouvons écrire :
```
p:not([class*="lead"]) {color: black;}
```

Sur son site Internet, Andrea Gandino utilise la pseudo-classe :last-child pour cibler le dernier paragraphe de chaque billet de son blog afin de lui appliquer la propriété margin avec une valeur de 0.

#primary .text p:last-child {  
    margin: 0;  
}

Implémentation dans les navigateurs : Opera et les navigateurs basés sur Webkit supportent toutes les nouvelles pseudo-classes de CSS 3. Firefox 2 et 3 (basés sur Gecko) ne supportent que :not(s), :last-child, :only-child, :root, :empty, :target, :checked, :enabled et :disabled. Néanmoins, Firefox 3.5 supportera un panel bien plus large de pseudo-classes et sélecteurs issus de CSS 3. A priori, aucune version de Internet Explorer ne supportent ces pseudo-classes.

Les pseudo-éléments

Le seul pseudo-élément introduit par CSS 3 est ::selection. Il permet de cibler les éléments sélectionnés par l'utilisateur.

Implémentation dans les navigateurs : Internet Explorer et Firefox ne supporte pas le pseudo-élément ::selection contrairement à Safari, Opera et Chrome.

Liens utiles

2. RGBA et opacity

La notation RGBA permet de spécifier non seulement une couleur, mais aussi l'opacité de celle-ci. Certains navigateurs ne supportent toujours pas cette notation, en conséquence, il est recommandé de spécifier une couleur opaque classique compréhensible par les anciens navigateurs avant de spécifier une couleur RGBA.

Tim Van Damme utilis des couleurs RGBA au survol de ses lien

Sur son site Internet, Tim Van Damme utilise des couleurs RGBA au survol de certains éléments ; par exemple sur les liens "network" de sa page d'accueil :

#networks li a:hover,  
#networks li a:focus {
    background: rgba(164, 173, 183, .15);  
}

Pour définir une couleur RGBA, nous devons spécifier les composantes rouge, bleu et vert à l'aide d'un entier compris entre 0 et 255 ou à l'aide d'un pourcentage. La valeur du canal alpha doit être comprise entre 0.0 et 1.0 ; par exemple, 0.5 pour une opacité de 50%.

Il y a une grande différence entre les couleurs RGBA et la propriété opacity. La notation RGBA définie une couleur qui ne s'applique qu'à une propriété de l'élément ciblé. La propriété opacity définie l'opacité globale qui s'applique à l'intégralité de l'élément et à tous ses enfants.

Voici un exemple de la façon d'appliquer une opacité de 80% a une DIV :

div{
    opacity: 0.8;
}

Implémentation dans les navigateurs : La notation RGBA est supportée par les navigateurs basés sur Webkit. Aucune version d'Internet Explorer ne la supporte. Firefox la supporte à partir de sa version 3 et Opera à partir de sa version 9.5. La propriété opacity est disponible dans Opera et dans tous les navigateurs basés sur Webkit et Gecko. Aucune version de IE ne la supporte à ce jour.

Liens utiles

3. Colones multiples

CSS 3 offre un ensemble de propriétés permettant de réaliser du multi-colonage sans avoir à faire appel à une foultitude de div. Les navigateurs interprètent les propriétés et créés automatiquement les colonnes, donnant au texte un look de journal.

tweetCC utilise les propriétés de multi-colonage sur sa page d'accueil.

tweetCC affiche son texte d'introduction sur 4 colonnes sur sa page d'accueil. Ces 4 colonnes ne sont pas des div flottantes ; En fait, le webdesigner utilise les propriétés de colonage de CSS3 de la manière suivante :

.index #content div {
    -webkit-column-count : 4;
    -webkit-column-gap : 20px;
    -moz-column-count : 4;
    -moz-column-gap : 20px;
}

Les propriétés de multi-colonage définissent au moins trois choses : le nombre de colonnes (column-count), la largeur de chaque colonne (column-width, pas utilisé dans ce cas) et la taille de la gouttière entre les colonnes (column-gap). Si column-count n'est pas définie, le navigateur va faire au mieux selon l'espace dont il dispose.

Pour ajouter un séparateur vertical entre les colonnes, nous pouvons utiliser la propriété column-rule. Cette propriété ressemble beaucoup à la propriété border :

div{
    column-rule: 1px solid #000000;
}

Les navigateurs qui ne supportent pas ses propriétés affichent le texte comme s'il n'y avait pas de colonnes.

Propriétés connexes : column-break-after, column-break-before, column-span, column-fill.

Implémentation dans les navigateurs : Les propriétés de multi-colonage sont disponibles dans Safari 3 et 4 et dans Firefox depuis sa version 1.5.

Liens utiles

4. Arrière-plans multiples

CSS 3 permet d'appliquer plusieurs couches d'arrière-plan sur un élément en utilisant les propriétés classiques d'arrière-plan : background-image, background-repeat, background-size, background-position, background-origin et background-clip.

La façon la plus simple d'appliquer des arrière-plans multiples, consiste à utiliser la propriété raccourcis background. Grace à ça, Vous pouvez spécifier l'ensemble des propriétés ci-dessus en une seule fois. Néanmoins, les propriétés les plus utilisé sont la définition de la source de l'image, sa position et sa répétition :

div {
    background: url(example.jpg) top left no-repeat,
        url(example2.jpg) bottom left no-repeat,
        url(example3.jpg) center center repeat-y;
}

L'ordre de définition des images définie l'ordre d'empilement ce celles-ci, la première étant "la plus proche" de l'utilisateur.

Une version plus complexe des mêmes propriétés pourrait être :

div {
    background: url(example.jpg) top left (100% 2em) no-repeat,
        url(example2.jpg) bottom left (100% 2em) no-repeat,
        url(example3.jpg) center center (10em 10em) repeat-y;
}

Dans ce cas, là, (100% 2em) équivaux à la valeur de la propriété background-size ; l'image de fond dans le coin haut/gauche sera étiré en largeur aux dimensions de la div et fera 2em de haut.

Actuellement, cette fonctionnalité est très peu implémentée dans les navigateurs. Or, si cette fonctionnalité n'est pas supporté, les navigateurs n'afficherons aucun arrière-plan ce qui peut avoir un impact significatif sur le design d'un site Web. En conséquence, cette fonctionnalité de CSS 3 est franchement peu utilisée. Ceci dit, à terme, cette propriété peut avoir d'importantes conséquences sur le travail des Webdesigner et permettre de réduire considérablement le balisage nécessaire à la réalisation de ce type d'effet.

Implémentation dans les navigateurs : Seul Safari et Konqueror supportent les arrière-plans multiples.

Liens utiles

5. Césure

La propriété word-wrap est utilisée afin de définir le mode de césure des mots. Elle peut prendre deux valeurs : normal et break-word. La valeur par défaut (normal) coupe les mots seulement là ou cela et requis par les règles typographiques du navigateur (au niveau du trait d'union par exemple). Si la valeur break-word est utilisée, le mot peut être coupé au niveau de n'importe quel caractère afin d'éviter que celui-ci ne déborde de la zone de texte maximal définie par l'élément conteneur.

L'interface d'administration de WordPress utilise word-wrap sur ses tableaux de données

Dans l'interface d'administration de WordPress, la propriété word-wrap est utilisée dans les cellules de certains tableaux ; par exemple sur la liste des billets et des pages :

.widefat * {  
    word-wrap: break-word;  
}

Implémentation dans les navigateurs : word-wrap est disponible dans Internet Explorer et Safari. Firefox l'intégrera à partir de sa version 3.5.

Liens Utiles

6. Texte ombré

la propriété text-shadow a été introduite dès CSS 2, mais reste fort peu utilisée. Cependant il y a de forte chance que cela change avec CSS 3. Cette propriété offre aux webdesigners un outil multi-navigateur permettant de rehausser leurs designs et de faire ressortir le texte.

Bien évidement, dans l'éventualité ou le navigateur de l'utilisateur n'interprèterait pas cette propriété, vous devez vous assurer que votre texte reste lisible. Pour cela, pensez à contraster suffisamment les couleurs du texte et de l'arrière-plan.

BeakApp utilise la propriété text-shadow sur la zone de contenu de son site.

BeakApp.com utilise la propriété text-shadow dans sa zone de contenu pour donner du relief et de la profondeur au texte sans avoir à recourir à une solution de substitution à base d'image. Cet effet n'est visible que dans Safari et Google Chrome.

La feuille de style du site utilise la règle suivante :

.signup_area p {  
    text-shadow: rgba(0,0,0,.8) 0 1px 0;
}

Nous avons dans l'ordre : la couleur de l'ombre (définie en RGBA, voir ci-avant), le décalage vers la droite, le décalage vers le bas et enfin, le rayon de dispersion.

Il est possible d'appliquer plusieurs ombres en les séparant par une virgule :

p {  
    text-shadow: red 4px 4px 2px,
        yellow -4px -4px 2px,
        green -4px 4px 2px;
}

Implémentation dans les navigateurs : Opera 9.5 et les navigateurs basés sur Webkit supportent text-shadow. Cette propriété ne sera disponible dans Firefox qu'à partir de la version 3.5 et Internet Explorer ne l'implémente pas.

Liens Utiles

7. La règle @font-face

Bien que cette fonctionnalité soit une des plus attendu de CSS 3 (et bien qu'elle fasse déjà partie de CSS 2), @font-face est loin d'être aussi bien implémentée que les autres fonctionnalités de CSS 3 qui sont déjà disponibles. C'est principalement dû à des questions de droits d'auteurs liés aux Polices typographiques : Les polices embarquées dans un site web sont facilement téléchargeables, ce qui représente un problème majeur pour les principaux fabriquant de polices typographiques.

Cependant, une solution à cette question de droits semble voir le jour. TypeKit propose de fournir une solution de gestion des droits capable de simplifier la vie des designers et des fabriquant. Cela permettrait d'enrichir significativement l'usage des Polices Typographiques sur Internet et de rendre la règle @font-face utilisable en pratique.

Le site du projet JetPack sur le Mozilla Labs utilise la règle @font-face pour afficher la Police DroidSans

Un des rares sites web à utiliser cette règle est celui du projet JepPack sur le Mozilla Labs.

@font-face{  
    font-family: 'DroidSans';  
    src: url('../fonts/DroidSans.ttf') format('truetype');  
}

Pour pouvoir utiliser des polices typographiques embarquées sur votre site Web, vous devez déclarer chaque déclinaison séparément (par exemple, normal, bold et italic). Assurez-vous d'utiliser uniquement des polices autorisant leur usage sur le Web et n'oubliez pas de citez les créateurs à chaque fois que cela est requis.

Après avoir déclaré une police typographique à l'aide de la règle @font-face, vous pouvez faire appelle à cette police en utilisant la propriété font-family dans votre feuille de style.

p {  
    font-family: "DroidSans";  
}

Si un navigateur ne supporte pas @font-face, il suivra le comportement normal de la propriété font-family et utilisera la première police typographique disponible parmi celles qui ont été déclarées avec cette propriété. Ce comportement peut suffire si l'utilisation de la règle @font-face est un luxe réservé aux navigateurs qui la supporte. Cependant, si la police typographique joue un rôle majeur dans le design ou si elle fait partie de l'identité visuelle d'une entreprise, il vous faudra sans doute recourir à une autre solution comme sIFR ou Cufón. N'oubliez pas que ces outils alternatifs sont plutôt adaptés à la titraille ou à de courte citations car copier/coller du texte traité de cette manière est difficile et peu convivial.

Ça ne serait pas génial d'avoir des polices typographiques comme ça sur le Web ? Une expérience de Dave Shea avec Cufón et Museo Sans. Magnifique !

Implémentation dans les navigateurs : La règle @font-face est supportée par Safari 3.1+. Internet Explorer la supporte uniquement avec des polices au format EOT. Opera 10 et Firefox 3.5 devraient la supporter.

Liens utiles

8. Angles arrondis

La propriété border-radius permet de créer des angles arrondis sur les éléments HTML sans avoir à utiliser d'images de fond. A l'heure actuelle, il s'agit probablement de la propriété CSS 3 la plus utilisé car c'est sympa d'avoir des coins arrondis sans que cela soit critique du point du vue du design ou de l'utilisabilité s'il ne sont pas affichés.

Plutôt que d'ajouter des scripts incompréhensibles ou de surcharger votre balisage HTML, ajoutez quelques propriétés CSS dans votre feuille de style et croisez les doigts. Cette solution, qui a le mérite d'être plus propre et plus efficace, vous évitera de vous battre avec des techniques à base de Javascript et CSS mélangées pour garantir une gestion multi-navigateurs.

Le blog de Sam Brown utilise border-radius sur les en-têtes, les catégories et les liens.

Sur son site Internet, Sam Brown utilise massivement la propriété border-radius sur les en-têtes, les liens et certains blocs. Réaliser cet effet avec des images aurait pris beaucoup de temps. C'est une des raisons qui nous permet de réaliser l'avancé qu'est CSS 3 pour nos projets en termes d'efficacité des développements Web.

Pour ajouter des coins arrondis à ses catégories d'article, Sam utilise le code CSS suivant :

h2 span {
    color: #1a1a1a;
    padding: .5em;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
}

Il est possible d'aller un peu plus loin en rajoutant la propriété standard CSS 3 et la propriété avec le préfixe de Konqueror, ce qui donne :

h2 span {
    color: #1a1a1a;
    padding: .5em;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -khtml-border-radius: 6px;
    border-radius: 6px;
}

Si nous voulions appliquer la propriété à certains angles spécifiques de notre élément, nous pourrions cibler chaque coin séparément :

div {
    -moz-border-radius-topright: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-bottomright: 6px;
    -moz-border-radius-bottomleft: 6px;
    -webkit-border-top-right-radius: 6px;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
}

Implémentation dans les navigateurs : la propriété border-radius est supportée par tous les navigateurs basés sur Webkit et Gecko. Par contre, aucune version de Internet Explorer ni d'Opera ne la supporte.

Liens utiles

9. Bordures illustrées

La propriété border-image vous permet d'utiliser une image pour définir la bordure d'un élément, vous permettant de vous libérer des styles de bordures traditionnels tel que solid, dotted, etc. Cette propriété offre aux designers un excellent outil pour travailler graphiquement les bords d'un élément sans avoir recourt à la propriété background-image (pour les design recherché) ou pour se détacher de la rigidité des styles de bordures traditionnels. Avec cette propriété, nous pouvons également définir explicitement la façon dont une bordure doit être étirée ou répliquée.

Le blog SpoonGraphics utilise la propriété border-image pour gérer la bordure autour de ses images.

Le blog SpoonGraphics utilise la propriété border-image de la manière suivante :

#content .post img {  
    border: 6px solid #f2e6d1;
    -webkit-border-image: url(main-border.png) 6 repeat;
    -moz-border-image: url(main-border.png) 6 repeat;
    border-image: url(main-border.png) 6 repeat;
}

Pour définir la propriété border-image, nous devons spécifier l'emplacement de l'image à utiliser, quelle partie de l'image doit être utilisée pour chacun des bords de l'élément et comment l'image sera étirée et répliquée.

Pour créer une div avec une bordure utilisant l'image ci-après, il nous faudra utiliser le code suivant (nous ajouterons les propriétés avec les préfixes pour Opera et Konqueror dans cet exemple) :

div {
    border-width: 18px 25px 25px 18px;
    -webkit-border-image: url(example.png) 18 25 25 18 stretch stretch;
    -moz-border-image: url(example.png) 18 25 25 18 stretch stretch;
    -o-border-image: url(example.png) 18 25 25 18 stretch stretch;
    -khtml-border-image: url(example.png) 18 25 25 18 stretch stretch;
    border-image: url(example.png) 18 25 25 18 stretch stretch;
}

La dernière valeur de cette propriété, peut être stretch (default), round (seul un nombre entier d'image remplira l'espace disponible) ou repeat. Dans notre exemple, les bordures de chacun des coté, seront étirées (stretch). Si nous voulions seulement étirer les images des bordures du haut et du bas , nous utiliserions la règle CSS suivante :

div {
(...)
border-image: url(example.png) 18 25 25 18 stretch repeat;
}

Il est également possible de cibler chaque coin et chaque bord indépendamment si l'on veut utiliser une image différente pour chacun d'eux :

div {
    border-top-image: url(example.png) 5 5 stretch;
    border-right-image: url(example.png) 5 5 stretch;
    border-bottom-image: url(example.png) 5 5 stretch;
    border-left-image: url(example.png) 5 5 stretch;
    border-top-left-image: url(example.png) 5 5 stretch;
    border-top-right-image: url(example.png) 5 5 stretch;
    border-bottom-left-image: url(example.png) 5 5 stretch;
    border-bottom-right-image: url(example.png) 5 5 stretch;
}

Si un navigateur ne supporte pas la propriété border-image, il l'ignorera tout simplement et appliquera les autres propriétés des bordures comme par exemple border-width et border-color.

Implémentation dans les navigateurs : Actuellement, seul les navigateurs basés sur Webkit supporte border-image. Firefox l'intégrera à partir de sa version 3.5.

Liens utiles

10. Les boites ombrées

La propriété box-shadow permet d'ajouter une ombre à un élément HTML sans avoir à recourir à du balisage supplémentaire ou à une image de fond. De la même façon que la propriété text-shadow, elle enrichie les possibilités graphiques offertes aux designers. Dans la mesure où cela n'affecte pas vraiment la lisibilité du contenu rien n'empèche d'ajouter cette petite touche supplémentaire.

10to1 utilise la propriété box-shadow sur l'arrière plan de sa barre de navigation et pour ses états au survol de la souris.

10to1 rajoute un simple effet d'ombre à sa zone de navigation et l'utilise pour rajouter un effet au survol des liens :

#navigation {
    -webkit-box-shadow: 0 0 10px #000;
    -moz-box-shadow: 0 0 10px #000;
}

#navigation li a:hover,
#navigation li a:focus {
    -webkit-box-shadow: 0 0 5px #111;
    -moz-box-shadow: 0 0 5px #111;
}

La propriété box-shadow prend plusieurs valeurs : le décalage horizontal, le décalage vertical, le rayon de flou, le rayon de propagation et la couleur de l'ombre. Les décalages horizontaux et verticaux, ainsi que la couleur de l'ombre sont les plus utilisés.

Pour appliquer à une div une ombre rouge décalée de 4 pixels vers le bas et la droite sans effet de flou, nous avons besoin du code suivant :

div {
    -moz-box-shadow: 4px 4px 0 #f00;
    -webkit-box-shadow: 4px 4px 0 #f00;
    box-shadow: 4px 4px 0 #f00;
}

Implémentation dans les navigateurs : Actuellement, la propriété box-shadow n'est supportée que par les navigateurs basés sur Webkit. Néanmoins, elle sera également supportée par le prochain Firefox 3.5.

Liens utiles

11. Model de boite

Conformément à la norme CSS 2.1, lorsque l'on calcul la taille complète d'une boite, la taille des bordures et des marges intérieur (padding) doivent être ajoutées aux largeurs et hauteurs déclaré dans la feuille de style. Mais les navigateurs vieillissant, voir obsolètes, sont connus pour leur interprétation fantaisiste de cette partie de la spécification. La propriété box-sizing vous permet donc de spécifier explicitement la façon dont un navigateur doit calculer la largeur et la hauteur d'un élément donné.

WordPress utilise la propriété box-sizing pour tout les champs et zones de textes de son espace d'administration.

La zone d'administration de WordPress utilise cette propriété pour toutes les balises input avec un attribut type ayant la valeur text et pour toutes les balises textarea (entre autre choses)

input[type="text"],
textarea {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

La troisième propriété (-ms-box-sizing) ne fonctionne qu'avec Internet Explorer 8. Sur d'autres éléments, le style de WordPress fait également appel à la version de la propriété pour konqueror : -khtml-box-sizing.

La propriété box-sizing peut prendre deux valeurs : border-box et content-box. La valeur content-box indique que les largeurs et auteurs doivent être calculé tel que définis dans le standard CSS 2.1. La valeur border-box indique au navigateur qu'il doit soustraire les valeurs des propriétés padding et border des valeurs spécifiées dans les propriétés width et height pour calculer la taille réel de l'intérieur d'une boite (comme ce que font les vieux navigateurs)

Implémentation dans les navigateurs : box-sizing est supporté par IE8, Opera et tous les navigateurs basés sur Webkit et sur Gecko.

Liens utiles

12. Media Queries

Les "Media Queries" vous permettent de définir des styles différents selon les capacités du terminal qui les affichent. Par exemple, vous pourriez souhaiter voir la colonne de droite de votre site web se positionner sous la zone de contenu principale si celui si est affiché sur un terminal ayant une zone d'affichage inférieur à 480px :

#sidebar {
    float: right;
    display: inline; /* IE Double-Margin Bugfix */
}

@media all and (max-width:480px) {
    #sidebar {
        float: none;
        clear: both;
    }
}

Il est également possible de cibler les terminaux avec un écran couleur :

a {
    color: grey;
}

@media screen and (color) {
    a {
        color: red;
    }
}

Les possibilités sont infinies. Cette fonctionnalité est utile dans la mesure où vous n'avez plus à écrire des feuilles de styles différentes en fonction des terminaux, ni à utiliser du Javascript pour connaitre les capacités d'affichage de chaque navigateur. Une solution plus populaire, basée sur Javascript, pour produire des gabarits plus souples, consisterait à utiliser un gabarit fluide adaptatif, ce qui rendrait le gabarit plus sensible à la résolution des navigateurs.

Implémentation dans les navigateurs : Les "Media Queries" sont supportées par les navigateurs basés sur Webkit et par Opera. Firefox les supportera dans sa version 3.5. Internet Explorer ne les supporte pas et ne prévois pas de les supporter dans les prochaines versions de IE.

Liens utiles

13. Restitution vocal

Le module de restitution vocal (speech) de CSS 3 vous permet de styliser le rendu vocal d'un lecteur d'écran. Vous pouvez contrôler divers aspect de la restitution tel que :

voice-volume
Permet de définir le volume en utilisant un nombre compris entre 0 et 100, un pourcentage ou un mot clé (silent, x-soft, soft, medium, loud et x-loud).
voice-balance
Permet de contrôler la balance de la sortie son (si le système de l'utilisateur supporte la stéréo).
speak
Signal au lecteur d'écran s'il doit épeler un mot, un nombre ou dire la ponctuation. Les mots clés disponibles sont none, normal, spell-out, digits, literal-punctuation, no-punctuation et inherit.
pauses et rests
Permet de définir une pause ou une respiration avant ou après la vocalisation du contenu d'un élément. Vous pouvez utiliser soit une valeur de temps (par exemple, "2s" pour 2 secondes) soit un mot clé (none, x-weak, weak, medium, strong et x-strong).
cues
Permet d'utiliser des sons personnalisés pour délimiter des éléments particuliers et contrôler le volume de ces sons supplémentaires.
voice-family
Permet de spécifier les types de voix et combinaison de voix à utiliser (comme pour les polices typographiques).
voice-rate
Permet de contrôler la vitesse de diction des éléments. Cela peut être défini à l'aide d'un pourcentage ou d'un mot clé : x-slow, slow, medium, fast et x-fast.
voice-stress
Permet de spécifier une emphase à appliquer à l'élément en utilisant un de ces mots clés : none, moderate, strong et reduced.

Par exemple, pour demander à un lecteur d'écran de lire toutes les balises h2 avec une voie féminine, avec une sortie dans l'enceinte de gauche, sur un ton doux et suivi d'un son spécifique, utilisez la feuille de style suivante :

h2 {
    voice-family: female;
    voice-balance: left;
    voice-volume: soft;
    cue-after: url(sound.au);
}

Malheureusement, ces propriétés sont très peu supportées. Néanmoins, il est indispensable de les avoir en tête car elles pourront nous permettre d'améliorer l'accessibilité de nos sites Web à l'avenir.

Implémentation dans les navigateurs : Actuellement, seul Opera pour Windows XP et 2000 supporte une partie du module speech. Pour l'utiliser, il faut se servir du préfix -xv- ; par exemple : -xv-voice-balance: right.

Liens utiles

Conclusion

Les propriétés CSS3 peuvent grandement contribuer à votre confort de travail, en simplifiant certaines des taches les plus consommatrice de temps tout en vous permettant d'utiliser un meilleur balisage, plus claire et plus léger. Certes, certaines propriétés sont encore assez peu supportées, même par les navigateurs les plus récents. Cela ne signifie pas pour autant que nous ne devrions pas les utiliser et offrir aux visiteurs ayant des navigateurs de dernière génération une expérience graphique enrichie.

Dans cette optique, gardez à l'esprit que l'éduquation de nos client est à la fois utile et nécessaires : les sites n'ont pas besoin d'être identiques d'un navigateur à l'autre, en particulier si la différence n'impacte pas négativement l'esthétique et l'utilisabilité du site. Si l'on continue à perdre du temps et de l'argent à gérer chaque détail au pixel près (au lieu d'adopter des solutions plus souples et porteuses d'avenir), les utilisateurs n'auront aucune raison de mettre leurs navigateurs à jours. Dans un tel cas de figure, nous aurions longtemps à attendre avant de voir disparaitre les navigateurs obsolètes au profit de navigateurs robustes et modernes.

Plus vite nous commenceront à expérimenter l'usage des propriétés CSS 3, plus vite elles seront implémentées dans les navigateurs les plus populaire, plus vite nous seront capable de les utiliser à grande échelle.

Références et lectures supplémentaires

A propos de l'auteur original

Inayaili de León est une Web Designer portugaise. Elle a une vraie passion pour le webdesign et le codage de site Web ; elle adore les sites web propres et esthétiques. Elle vit à Londres (et blogue à ce propos) et adore les pizza (elle fait aussi des trucs avec ses chats, mais je n'ai pas compris ce que c'est). Vous pouvez lire d'autre de ses articles sur Web Designer Notebook et suivre ses aventures quotidiennes sur Twitter.

Le webdesign des coins arrondis

Jeremie — Mon, 27 Apr 2009 18:32:00 +0200

Réaliser des boites avec des coins arrondis, c'est une tarte à la crème du webdesign. Seulement, ce n'est pas aussi simple qu'on le croit. Je me suis donc amusé à faire un petit tour des différentes solutions possibles pour réussir cela.

Cet article ne se veut pas exhaustif. En effet, les techniques à mettre en œuvre et leur déclinaison dépendront grandement des contraintes imposées par le contexte d'intégration et la nature du design sur lequel vous travaillez. Mon parti-pris dans la suite de cet article est le suivant : produire une boite avec des coins arrondis extensible en hauteur et en largeur avec les quatre coins transparents. Il s'agit d'une des contraintes les plus fortes quand on réalise des coins arrondis, mais il est toujours possible de faire plus contraignant

Faire des coins arrondis sans utiliser ni image ni Javascript

Je commence par cette méthode qui est la plus restrictive : n'utiliser aucune image ni aucun script pour réaliser des bords arrondis.

Pour cela, vous ne pouvez utiliser que CSS. Dans ce cas, la solution consiste à utiliser la propriété border-radius. Cette propriété fait partie du module "Background and Border" de la spécification CSS3 qui n'est à ce jour qu'à l'état de document de travail.

De fait à l'heure où j'écris ces lignes aucun navigateur ne l'implémente nativement. Seul Firefox et Safari ont un support expérimental de cette propriété via -moz-border-radius (FF2+) et -webkit-border-radius (S3+)

Ainsi, si cette solution à le mérite de la simplicité, le défaut de support de cette propriété rend son utilisation caduque dans un cadre industriel.

> Exemple d'utilisation de la propriété CSS border-radius

Faire des coins arrondis avec des images, mais toujours sans Javascript

Les solutions pour réaliser des coins arrondis avec des images sont légions, aussi, je me contenterai de vous en présenter deux.

La propriété CSS `border-image`

Il s'agit la aussi d'une nouveauté de CSS3, elle aussi issue du module "Background and Border". Son support est encore plus expérimental que border-radius ! A ma connaissance, seul Firefox 3.5 et Safari 3 supportent cette propriété via -moz-border-image et -webkit-border-image.

Cette propriété semble assez complexe à gérer la première fois que l'on met le nez dedans, mais elle offre des perspectives immenses dans la gestion des bordures au design complexe (par exemple pour des designs de type "papier déchiré").

Je ne vais pas partir dans des explications détaillées mais tout commence par une image type (les habitués des "CSS Sprite" vont apprécier) qui comprend les 4 coins, les 4 bordures et une partie central, soit 9 parties dans l'image. Par exemple, cette image de 21px x 21px (9 sections de 7px x 7px) :

Ensuite au niveau du code, cela va donner ce qui suit. Notez l'utilisation de la propriété border qui permet de fournir, outre la taille de la bordure, une alternative aux navigateurs qui ne supportent pas la propriété border-image ou bien dans le cas ou l'image serait indisponible (à cause d'un lien brisé par exemple)

-moz-border-image: url(border.png) 7 repeat;
-webkit-border-image: url(border.png) 7 repeat;
border-image: url(border.png) 7 repeat;

border : 7px solid #1E4262;

> Exemple d'utilisation de la propriété CSS border-image

La propriété CSS `background` et un balisage HTML "adapté"

Il s'agit sans doute de la méthode la plus commune et elle se décline en de nombreuses variations selon les contraintes que l'on se fixe. Cela va de "mon cadre a une taille fixe" à "mon cadre est extensible en hauteur et en largeur avec des coins transparent". Le nombre de coins à prendre en considération a lui aussi une influence.

Pour illustrer le cas de figure le plus extrême, j'ai essayé de limiter au maximum le sur-balisage HTML mais pour les adeptes du POSH ça va piquer les yeux. C'est une solution, il en existe beaucoup d'autres qui dépendent du contexte d'utilisation. Afin d'alléger le tout, je ne saurais trop vous conseiller d'éviter de gérer la transparence dans la mesure du possible. Sans cette contrainte, vous pouvez au moins diviser par deux le nombre de balises HTML nécessaires.

> Exemple d'utilisation de la propriété CSS background avec un balisage HTML spécifique

Le principal défaut de cette méthode c'est de coupler trop étroitement la structure HTML avec la mise en forme CSS. Dans un contexte industriel, c'est un sujet important à anticiper car cela à des répercussions forte sur les coûts de maintenance.

Finalement, on peut aussi utiliser Javascript

Utiliser un script "qui fait tout"

Si vous utilisez un framework Javascript, il y a fort à parier qu'il existe une extension de ce framework qui permettra de faire des coins arrondis d'une manière ou d'une autre. L'intérêt de ces extensions, c'est que vous n'avez qu'à leur dire ce que vous voulez pour qu'elles le fassent à moindre frais. Par contre, si le plug-in que vous utiliser est mal fichu, vous vous exposez à des effets de bord parfois surprenant.

> Exemple d'utilisation d'un plug-in JQuery pour réaliser des coins arrondis

Enrichir l'arbre DOM de votre document

Si vous préférer rester maitre de votre document, vous pouvez choisir d'enrichir vous même l'arbre DOM de votre page HTML pour lui permettre d'afficher des coins arrondis sur les éléments de votre choix. Ainsi, vous rester avec un document HTML compréhensible et facilement maintenable et vous déléguez à Javascript la responsabilité d'enrichir l'arbre DOM et les style CSS pour obtenir le rendu de votre choix.

> Exemple d'utilisation de Javascript pour enrichir l'arbre DOM d'un document

C'est deux solutions peuvent être intéressantes dans certains contextes industriels en permettant de préserver la séparation des rôles entre HTML et CSS. Néanmoins, elles induisent une complexité parfois difficile à maitriser du point de vue de Javascript et cela peut avoir un coût non négligeable en terme de maintenance.

En conclusion

Comme on a pu le voir, il n'y a pas vraiment de solution miracle. Tant que la spécification CSS3 sur les bordures ne sera pas plus largement implémentée, la création de coins arrondis restera un point complexe à gérer. La maintenabilité des solutions misent en œuvres dépendra grandement de la (sur)compétence des intégrateurs web et de la qualité de la documentation qu'ils produiront. Je ne saurais trop encourager à l'économie de moyen sur ce point : pensez simple, pensez efficace et surtout, pensez à ceux qui devront passer derrière vous pour maintenir votre création.

Chez Jérémie - Tag - css

Améliorez vos liens avec la génération de contenu CSS

Le résultat attendu

L'arrière plan des liens

La génération de contenu

Le positionnement et le design du badge

CSS 3 is sexy !

Couleur transparentes

Bords arrondis

Ombres et lumières

Attention à l'accessibilité

Au royaume des aveugles les borgnes sont rois.

Les souris, ce fléau de l'humanité !

Mon royaume pour un cheval.

Conclusion

La propriété CSS display: inline-block

Block et inline, les basiques

Les caractéristiques d'un élément de type block :

Les caractéristiques d'un élément de type inline :

inline-block, un mélange des deux !

Implémentation de cette valeur dans les navigateurs

Cas d'utilisations

Menu de navigation

Nuage de tags

Titraille dépendante du contenu

Aller plus loin

Le modèle de boite flexible en CSS 3

Un modèle de boite flexible

Distribuer des boites, kézaco ?

Distribution horizontale ou verticale

Distribution inversée

Distribution explicite

Et la flexibilité dans tout ça ?

La taille des boites

Toutes les boites sont flexibles

Certaines boites ont une taille prédéfinie

La gestion du débord

Il y a trop d'espace, qu'est-ce que j'en fait ?

Il n'y a pas assez d'espace, comment est gérer le débord ?

Et sinon, ça marche dans la vraie vie ?

Conclusion

A lire également sur le sujet

La préséance des sélecteurs CSS

Priorité et poids !

Une notation pour comprendre

Et la cascade dans tout ça ?

Un petit mot sur les styles en ligne

Un peu de lecture ailleurs

CSS 3 : Le module "Template Layout"

Comment ça marche ?

Mouais, mais en quoi c'est vraiment détaché de ma structure HTML ?

Mais cette zone, elle est virtuelle, comment je fait pour la styliser ?

Quoi ! On ne peut pas spécifier la taille des zones du gabarit ?

Et au fait, pour les bordure on fait comment ?

Ok, c'est cool, mais on ne peut pas s'en servir ! Non ?

Passez à la vitesse superieure avec CSS 3

L'utilisation des propriétés spécifiques des navigateurs

Liens utiles

1. Sélecteurs

Les sélecteurs d'attributs

Les sélecteurs combinatoires

Les pseudo-classes

Les pseudo-éléments

Liens utiles

2. RGBA et opacity

Liens utiles

3. Colones multiples

Liens utiles

4. Arrière-plans multiples

Liens utiles

5. Césure

Liens Utiles

6. Texte ombré

Liens Utiles

7. La règle @font-face

Liens utiles

8. Angles arrondis

Liens utiles

9. Bordures illustrées

Liens utiles

`Block` et `inline`, les basiques

Les caractéristiques d'un élément de type `block` :

Les caractéristiques d'un élément de type `inline` :

La propriété CSS `border-image`

La propriété CSS `background` et un balisage HTML "adapté"