Vainqueur du concours CSSR !

Vous n'étiez pas sans savoir qu'Alsacréations avait organisé LE concours de l'été 2007 : le Cascading Summer Style Refresh !

Rien qu'au nom ça donnait déjà envie ! Et comme beaucoup d'autres, je n'ai pas pu m'y résoudre, j'y participais !

Après 15 jours de votes et de critiques constructives, le dénouement prenait place aujourd'hui et chose aussi improbable qu'inespérée au 6 Juin dernier (date de ma pré-inscription) j'ai gagné !! L'euphorie était de mise !

Ouverture du blog !

C'est à nous de se présenter ! Nous sommes deux intégristes Html, l'un professionnel, l'autre amateur, tous deux suivant avec un grand intérêt l'arrivée du CSS3.

Gotocss3 ?! Kézako ?

Contrairement aux apparences, ce site n'a pas vocation d'être dédié à la documentation ou à l'actualité du CSS3. En fait c'est un carnet de note, plus utile pour nous que pour vous : une sorte de feuille de route pour le développement d'un script d'interprétation du CSS3 : CSS3 Layout. Le but de ce script étant de permettre l'utilisation du CSS3 sur des navigateurs qui ne le supporteront jamais mais qui seront toujours présent : Des navigateurs fantômes tel Internet Explorer 6, qui n'en doutons pas survivra à tous nos navigateurs actuels et futurs...

Les Colonnes

Qui n'a jamais eu à expliquer à un de ses clients que le média web avait ses limites comparé au média paginé ? On est encore trop souvent contraint d'effectuer des pirouettes en Javascript ou avec des Hack Css pour imiter des schémas de mise en page (pourtant simple) du support papier.

Actuellement, on a pour habitude que le contenu texte d'un élément le remplisse de gauche à droite puis de haut en bas, l'utilisateur ne pouvant intervenir que sur les marges interieures (padding) pour placer son texte. Mais avec l'importance qu'a pris internet sur les autres supports de communication, il était évident qu'on en viendrait à avoir de nouvelles ouvertures pour mettre en page les contenus de nos sites. Ainsi avec l'arrivée du CSS3, une barrière de plus s'effondre : celle de la mise en page en colonne grâce au module multi-column.

Le modèle colonne

Ce modèle s'inscrit donc en dessous du modèle box couramment employé en CSS. Un élément utilisant ce modèle voit donc son contenu divisé en n nombre de colonne d'égale largeur. On retrouve comme possibilité de style, le nombre de colonnes column-count, leur largeur column-width, leur espacement entre elles column-gap ainsi que le style de leur séparation grâce à column-rule.

A noter que les colonnes représentent un tout donc il n'est pas possible de les styler différemment et qu'elles n'ont aucune notion de margin, padding, etc. Voyons donc voir en détail leurs propriétés.

Edito

Bienvenue dans le monde merveilleux du CSS3.

Pour vous faire patienter jusqu'à sa sortie vous trouverez au fil des pages des articles sur sa documentation du W3C, un récapitulatif des nouvelles propriétés et un script pour les émuler en attendant.

A Propos