Notes sur CSS niveau 3

En français
Ce billet date de plusieurs années, ses informations peuvent être devenues obsolètes.

Depuis quelques années j'ai davantage la tête dans le guidon Python que dans CSS. Pourtant les spécifications des feuilles de style en cascade évoluent à grande vitesse et ça devient vraiment balèze. Voici mes notes et références personnelles pour rester à flot ;)

Références

Fonctionnement du CSS Working Group

Pour les CSS nerds, vous pouvez lire les articles de Fantasai sur le fonctionnement du CSS Working Group et le mode de prise de décision. Une traduction française est disponible.

Pour les gens pressés, l'essentiel est de bien comprendre les différents statuts des documents de standardisation :

  • Working Draft : brouillon, validation et perfectionnement par la communauté.
  • Last Call : tous les problèmes sont résolus, dernière chance de modifier la spécification.
  • Candidate Recommendation : les fabricants de navigateurs peuvent commencer à implémenter.
  • Proposed Recommendation : interopérabilité validée, 2 navigateurs au moins implémentent la spécification de façon identique, le groupe de travail doit valider une dernière fois.
  • Recommendation: la spécification ne devrait théoriquement plus bouger.

Au regard de cette liste, on devrait se dire que les seules spécifications saines d'utilisation sont celles marquées du sceau de Recommendation. Hélas l'abus d'utilisation de propriétés de développement en production a débouché sur ce que l'on sait. Heureusement un consensus semble s'être dessiné au sein du CSS WG, ce qui n'est pas pour nous déplaire :)

Mise en page (Working Draft - Candidate Recommendation)

Voir cette présentation de Fantasai (encore) : Evolution of CSS Layout: 1990s to the Future.

Vous souvenez-vous de 2003 ? 10 ans plus tard on devrait être en mesure de faire fi de la mise en page à base de hacks floats/clears et pouvoir utiliser du display: table; et table-layout.

Prospectives à plus ou moins long terme :

Media Queries (Recommendation)

Pour illustrer la syntaxe des Media Queries un petit schéma qui tente de représenter la pseudo-BNF vaut mieux qu'un long discours :

Media Queries

Pour illustrer leur utilité, un bon lien vaut mieux qu'un long blabla.

Voir aussi le rapport d'implémentation de cette spécification estampée du statut Recommendation.

Sélecteurs - Pseudo-éléments (Recommendation)

Leur syntaxe change afin de les différencier des pseudo-classes, les pseudo-éléments doivent être préfixés par :: (deux deux-points). Hors cette syntaxe n'est pas encore très bien supportée, beaucoup de monde préfixe encore avec un seul deux-point.

::selection a été rayé de la carte.

Les pseudo-éléments existent depuis CSS 2.1 mais leur usage s'est vraiment démocratisé dernièrement grâce à leur meilleur support par les navigateurs. Voici quelques techniques parfois sioux, parfois vraiment smart :

Sélecteurs - Pseudo-classes (Recommendation)

Une nouvelle grammaire apparait pour les pseudo-classes qui sont divisées en catégories : dynamic, target, language, structural, UI etc.

Parmis les nouveautés simples à appréhender :

  • :disabled { cursor: not-allowed; } (via) (UI element states)
  • E:first-of-type : premier enfant de type E (structural)
  • E:last-of-type : dernier enfant de type E (structural)
  • E:only-of-type : element E avec aucun frère du même type (structural)
  • E:only-child : element E avec aucun frère (structural)
  • :target : voir cette démo (target)
  • :empty (structural)
  • p:not(:first-child) { font-style: italic; } (negation)

Sélecteurs - Pseudo-classes n-ièmes (Recommendation)

Leur principe est de sélectionner les n-ièmes enfants d'un élément parent parmis :

  • tous les enfants quels que soient leurs types en partant du premier : :nth-child(an+b)
  • tous les enfants quels que soient leurs types en partant du dernier : :nth-last-child(an+b)
  • tous les enfants de même type en partant du premier : :nth-of-type(an+b)
  • tous les enfants de même type en partant du dernier : :nth-last-of-type(an+b)

Voici un schéma de l'ordre des éléments qui sont pris en compte par les pseudo-classes n-ièmes pour la règle div p:nth-*(n) {} :

Nth

L'ordre est valable uniquement au niveau des frères de même niveau.

Explication de la formule de positionnement (an+b) :

  • n est un nombre qui commence à 0 et s'incrémente de 1 (0, 1, 2, 3, etc.), notez qu'il est possible de le faire précéder d'un signe - (moins) pour décrémenter (0, –1, –2, -3, etc.), c'est n qui permet de sélectionner plusieurs éléments
  • a est un multiplicateur optionnel qui s'applique à n
  • b est un chiffre qui peut-être ajouté (+) ou retranché (-) de an

Avec ces règles en tête vous pouvez jouer avec le testeur de n-ièmes (dans le contexte de :nth-child) qui utilise l'implémentation de jQuery et voir ce que produisent ces exemples :

  • E:nth-child(2) => 2.
  • E:nth-child(n) => 0, 1, 2, 3, 4, etc.
  • E:nth-child(3n) => 0, 3, 6, 9, etc.
  • E:nth-child(2n+1) => 1, 3, 5, 7, etc.
  • E:nth-child(3n–1) => -1, 2, 5, 8, etc.
  • E:nth-child(-n+2) => 2, 1, 0.

CSS Fonts Module - Web Fonts (Working Draft)

Les Web Fonts ont été introduites par IE4 en 1997 !

La technique qui fait référence aujourd'hui est The New Bulletproof @Font-Face Syntax et son patch IE9. Elle tente de palier aux différents problèmes posés par @font-face.

local('☺') avec sa valeur un temps forcée à nul avec le smiley comme convention est désormais complètement omis pour cause de bug Android entre autres.

Les ayatollahs de la performance vous diront d'encoder vos fonts en base64.

Rappel des différents formats :

  • TrueType (Apple)
  • OpenType (Microsoft, Adobe)
  • EOT Embedded OpenType (Microsoft)
  • WOFF - Web Open Font Format (W3C)
  • SVG Fonts - Scalable Vector Graphics

Et parce que foutre ses fonts dans le cloud c'est trendy à souhait, je vous présente le FAAS :

Pour les typo nerds, voir aussi Typographisme.

CSS Text (Working Draft)

Toujours à l'état de brouillon, cette spécification propose une chiée de nouvelles propriétés.

Un mot sur text-shadow (déjà dans CSS 2.0) à cause de la syntaxe des coordonnées sur les axes x et y parce qu'elle est identique pour beaucoup de propriétés :

E { text-shadow: x y color; }
E { text-shadow: x y blur color; }
E { text-shadow: x y blur color, x y blur color; } /* Multiple Shadows */

x représente le décalage horizontal sur l'axe des abscisses (horizontal) et y le décalage sur l'axe des ordonnées (vertical) par rapport à l'élément cible E.

Vous êtes maintenant armés pour écrire des CSS pour le vrai monde !

CSS Backgrounds and Borders Module (Candidate Recommendation)

Encore une spécification avec un nombre de propriétés volumineux !

background multiples

Possibilité d'ajouter des arrière-plans multiples en séparant les valeurs par une virgule. Chaque arrière plan apparaît sur une pile dans l'ordre spécifié : 1er au premier plan, dernier en arrière-plan. Ça ressemble au concept du z-index. Pour spécifier une couleur de fond avec la propriété raccourcie background il faut la déclarer dans la dernière instance de la liste des images d'arrière plan.

h2 {
    background:
        url('pic1.png') no-repeat 0 0,
        #000 url('pic2.png') no-repeat 50% 50%;
}

Il est également possible de passer un dégradé en tant que valeur d'une image d'arrière-plan. La possibilité de superposer des arrière-plans multiples a donné naissance à des expériences comme CSS3 Patterns Gallery.

background-size

Permet de dimensionner les images d'arrière-plan (voir cette démo) ou de leur attribuer deux valeurs spéciales :

  • contain : l'image est mise à l'échelle en préservant le rapport entre la largeur et la hauteur pour être entièrement visible, par conséquent il est possible qu'elle ne remplisse pas la totalité du conteneur.
  • cover : l'image est mise à l'échelle en préservant le rapport entre la largeur et la hauteur de façon à couvrir la totalité du conteneur, par conséquent il est possible qu'une partie de l'image ne soit plus visible.

Notez que background-size ne réglera pas automatiquement tous les problèmes de recadrage quand il s'agit d'aller vraiment dans le détail.

background-clip

N'a de sens qu'avec un arrière-plan qui est plus grand que la boîte de son conteneur et permet de couper les parties de l'arrière-plan qui dépassent :

  • soit du bord de la bordure (comportement par défaut, border-box)
  • soit du bord de l'espacement (padding-box)
  • soit du bord du contenu (content-box)

La nuance avec background-origin n'est pas toujours évidente de prime abord, voir cette démo.

background-origin

Détermine le point d'origine de l'arrière-plan d'une boîte, utile pour faire passer l'arrière-plan sous la bordure ou pour utilisation avec background-position.

  • border-box: le point d'origine de l'arrière-plan est fixé sous le bord de la bordure
  • padding-box: le point d'origine de l'arrière-plan est fixé sous le bord de l'espacement (comportement par défaut)
  • content-box: le point d'origine de l'arrière-plan est fixé sous le bord du contenu

border-radius

Les fameux bords arrondis. Utilisation de background-clip pour fixer une petite hémorragie sous Safari.

border-image

Permet d'utiliser une image et de la découper en 9 régions pour l'utiliser en tant que bordures :

E { border-image: source slice repeat; }

  • border-image-source: url de l'image à utiliser
  • border-image-slice: 4 valeurs à spécifier qui découpent l'image en 9 régions : 4 coins, 4 bordures et un centre
  • border-image-repeat: stretch | repeat | round
    • stretch: étire pour remplir la zone
    • repeat: répète le motif sur la zone
    • round: utilise un nombre entier de répétitions, avec re-dimensionnement du motif si nécessaire

Le découpage en slices fonctionne sur le même principe que celui de la propriété clip de CSS 2.1 (qui fonctionne pour les éléments positionnés en absolus) avec pour seule différence l'origine des zones de rognage. Petit aparté : Clipping Box-Shadow.

border-image à utiliser en tandem avec border-width :

box-shadow

E { box-shadow: inset horizontal vertical blur spread color; } avec la possibilité d'utiliser plusieurs box-shadow.

  • inset: permet de créer l'ombre à l'intérieur plutôt qu'à l'extérieur de la boîte, j'écris toujours inside à la place de inset (╯°□°)╯︵ ┻━┻
  • horizontal: distance horizontale entre la boîte et l'ombre
  • vertical: distance verticale entre la boîte et l'ombre
  • blur: rayon du flou
  • spread: la distance sur laquelle l'ombre se propage

Color and Opacity (Recommendation)

Une spécification qui concerne uniquement deux propriétés : color et opacity.

opacity

E { opacity: number; } /* entre 0.0 et 1.0 */

La valeur de l'opacité est héritée par tous les descendants de l'élément auquel elle est appliquée.

color

Piochez une couleur dans la liste des noms de couleur X11 ou mieux dans la liste des Color equivalents table qui liste les équivalents RGB, HSL et hexadécimaux.

Il est possible d'inclure une couche alpha aux valeurs RGB et HSL :

  • RGBA: E { color: rgba(red, green, blue, alpha); }
  • HSLA: E { color: hsl(hue, saturation, lightness, alpha); }

On note également l'extension de currentColor qui doit bien servir à quelque chose.

Avant Django 1.4, MySQL et les dates en UTC Après Fuseaux horaires et JavaScript

A Tag Kemar Joint