Alsacreations.com - Actualités - Archives (décembre 2012)

Les dernières actualités d'Alsacreations.com

Le modèle tabulaire en CSS

Le: 30 12 2012 à 12:45 Auteur: Raphael

Le modèle de construction tabulaire (HTML et CSS) compte sans aucun doute parmi les plus fascinants qui soient, après avoir été d'abord adulé puis banni vigoureusement par les intégrateurs de tous poils.

En 1998, les spécifications CSS2 étendent les historiques valeurs de la propriété display et proposent depuis belle lurette des possibilités de rendus et positionnements “tabulaires” sans pour autant interférer dans la sémantique et le bon usage des éléments HTML.

Passons immédiatement à table et découvrons en détail le monde mal connu du Modèle Tabulaire en CSS…

Note : Cet article est publié conjointement sur OpenWeb.eu.org et sur Alsacreations.com. En outre, certaines parties de cet article sont extraites du livre “CSS avancées, vers HTML5 et CSS3”, avec l’aimable autorisation de l’auteur :)

Compatibilité

Commençons par une excellente nouvelle : le modèle de rendu tabulaire en CSS est finalisé depuis suffisamment longtemps pour être compatible avec tous les navigateurs actuels et leurs générations précédentes. Il faut remonter aux antiques versions d’Internet Explorer 7 et précédentes pour trouver des navigateurs qui ne supportent pas ce schéma de positionnement.

tableau

Tableau des compatibilités

Navigateurs	Versions	Détails
	Internet Explorer 8+	Les propriétés `table-layout` et `border-collapse` sont reconnues depuis IE5
	Firefox Firefox Mobile	Toutes versions
	Chrome Chrome Mobile	Toutes versions
	Opera Opera Mobile	Toutes versions
	Safari Safari Mobile	Toutes versions
	Android Browser	Toutes versions

Display

Depuis les spécifications CSS2, pas moins de 10 valeurs dédiées aux rendus tabulaires ont été ajoutées à la propriété display.

Vous connaissiez sans nul doute déjà les valeurs block, inline, none et inline-block, en voici de nouvelles dans notre arsenal à présent bien complet :

table: Spécifie un comportement de table de type bloc pour un élément C’est le rendu par défaut des éléments <table> HTML
inline-table: Spécifie un comportement de table de type en-ligne pour un élément.
table-row: Spécifie que l'élément s’affiche comme une rangée de cellules. C’est le rendu par défaut des éléments <tr> HTML
table-row-group: Spécifie qu'un élément regroupe une ou plusieurs rangées. C’est le rendu par défaut des éléments <tbody> HTML
table-header-group: S’affiche comme table-row-group, mais ce groupe de rangées est toujours affiché avant toutes les autres rangées et groupes de rangées. C’est le rendu par défaut des éléments <thead> HTML
table-footer-group: S’affiche comme table-row-group, mais ce groupe de rangées est toujours affiché après toutes les autres rangées et groupes de rangées. C’est le rendu par défaut des éléments <tfoot> HTML
table-column: Spécifie qu'un élément représente une colonne de cellules. C’est le rendu par défaut des éléments <col> HTML
table-column-group: Spécifie qu'un élément regroupe une ou plusieurs colonnes. C’est le rendu par défaut des éléments <colgroup> HTML
table-cell: Spécifie qu'un élément doit s’afficher tel une cellule de table. C’est le rendu par défaut des éléments <th> et <td> HTML
table-caption: Spécifie le rendu d’une légende d'une table. C’est le rendu par défaut des éléments <caption> HTML

Pratique de CSS3 & 2.1

Le: 27 12 2012 à 14:31 Auteur: Raphael

Amoureuse des CSS depuis belle lurette et partageant ses connaissances sur le site "CSS débutant" depuis 2001, Pascale Lambert-Charreteur publie aujourd'hui un ouvrage d'initiation à CSS au format numérique (ePub ou PDF).

Ce livre d'un peu moins de 150 pages, dédié à CSS toutes versions confondues (des anciens temps de CSS1 jusqu'à CSS3 et au-delà), est véritablement destiné aux néophytes et intégrateurs amateurs de tous poils désireux de se familiariser avec les subtilités de bases trop souvent méconnues.

L'ouvrage marque une synthèse globale de l'état de l'art actuel de CSS, en balayant les bonnes pratiques, les conventions de nommage, les règles de priorités, les différents schémas de positionnement, les effets de décoration, mais aussi des fonctionnalités plus avancées telles les media queries, les transformations et les animations.

Vous imaginez bien qu'en 150 pages, les différents domaines ne peuvent être traités de manière exhaustive ! Mais ce n'est pas là l'objectif de ce recueil, qu' il faut plutôt considérer comme une sorte de livre initiatique, bourré de petites astuces concrètes et menant vers des pistes plus complètes. Pour les lecteurs moins novices, il servira d'excellent mémento détaillé pour les trous de mémoire.

Sommaire

Bonnes pratiques de base (doctype, accessibilité, sémantique)
Principes et règles générales (vocabulaire, cascade, héritage, optimisations, reset, préfixes propriétaires)
Les sélecteurs (descendance, adjacence, attributs, pseudo-classes, pseudo-éléments)
Le positionnement (le flux, les flottants, absolute, fixed, relative, tableaux, inline-block, flexible layout, grid layout, multicolonnes)
La décoration (bordures, ombrages, transparences, arrière-plans, dégradés, polices de caractères)
Décorations avancées (media queries, transformations, transitions, animations)
Ressources (outils, extensions pour navigateurs)