Cyril – Mes astuces

Faire du HTML et du CSS est assez rébarbatif : toujours les mêmes balises, recopier les balises de fin, écrire des attributs class ou id… bref, un peu tout le temps la même chose en plusieurs exemplaires. C’est là que ZenCoding intervient !

Zen Coding, c’est quoi ?

Zend Coding est un plugin d’aide à la saisie pour votre HTML et votre CSS.

Concrètement, ça accélère la saisie, confère l’exemple ci-dessous !

Voici ce que l’on souhaite écrire comme code :

Et voici comment on va taper ça sur notre clavier :

div#content>ul.list>li*3 <Commande magique qui dépend de l'éditeur>

Fonctionnement

D’une manière plus générale, Zen Coding va interprété ce que vous venez d’écrire pour le transformer en code.

Dans notre exemple, nous avons utiliser une notation très proche du CSS pour écrire de l’HTML sans effort !

Mais ça marche aussi avec le CSS, notamment pour les attributs un peu long à écrire (ou à faire auto-compléter par l’éditeur), voire pour les valeurs. Il est en effet plus rapide de taper d:n<TAB> que display: none; avec la majorité des outils d’autocomplete.

Compatibilité

Le plugin est compatible avec énormément d’IDE, tels que Eclipse ou Vim (pour mon utilisation personnelle).

Plus d’informations sur le site de Zen Coding (hosté sur google code).

Aujourd’hui, je voudrais parler de la propriété CSS :nth-child. C’est une pseudo-classe introduite dans CSS 3, et qui permet de sélectionner des noeuds en fonction du numéro de leur position en tant qu’enfant. C’est très pratique pour colorier les lignes d’un tableau par exemple.

Cette pseudo-classe permet de sélectionner des éléments à partir du k^ème fils tous les p fils : selector:nth-child(pn+k). Les enfants dont la position est égale à une valeur définie par cette suite géométrique est sélectionné.

1. Karmelitt Tripel
2. Kastel Brune
3. Delirium Nocturnum
4. Gulden Draak
5. Chimay 500
6. Malheur
7. St-Bernardus 8
8. Rochefort 10

Rien ne se met à jour ? Vérifiez que votre navigateur est compatible.

Explication

L’idée est de partir du noeud k, puis itérer de faire prendre à n les valeurs entre 0 et le nombre total d’enfants.

• n : tous les enfants du premier au n^ème
• 2n : tous les deux enfants à partir du 0^ème, c’est à dire à partir du 2^ème : 2, 4, 6… Ce sont les nombres pairs.
• 2n+1 : tous les deux enfants à partir du 1^er : 1, 3, 5… Ce sont les nombres impairs
• n+2 : tous les enfants à partir du 2^ème, ou encore tous sauf le premier
• 3n+2 : tous les trois enfants à partir du ^2ème : 2, 5, 8…
• -n+2 : en descendant, tous les enfants à partir du 2^ème : 2, 1 et c’est tout. Ce sont les deux premiers enfants.

Hélas, comme toutes les propriétés CSS3 existantes, cette propriété n’est compatible qu’à partir de IE9+ (et bien sûr Firefox 3+, Chrome, Safari 4+… mais ça va sans dire !).

• La référence de :nth-child sur w3.org
• Compatibilité de la pseudo classe

L’abus d’alcool est dangereux pour la santé. A consommer avec modération.

Le CSS évolue. Une des principales innovations dans ce standard est l’ajout des animations. En voici un aperçu.

Démo : opacité et rotation

Un peu de code

Principe de fonctionnement

Le principe des animations est simple :

1. Vous ajouter des styles à vos objets : style normal, et style modifié sur un évènement, par exemple avec :hover. Par exemple, on définit opacity: 0.5; dans le cas normal et opacity: 1; dans le :hover.
2. On rajoute un style normal qui s’intitule -webkit-transition et dans lequel on va programmer la transition : type de propriété à animer, courbe de vitesse. Par exemple, si on veut animer l’opacité avec une vitesse rapide, en rendant l’arrêt plus fluide : -webkit-transition: -webkit-transform 1000ms ease-out 40ms ;

Source de l’exemple

Compatibilité

Le grand problème des évolutions de langage, c’est qu’il faut attendre l’évolution des navigateurs. Parmi les navigateurs compatibles disponibles à ce jour, nous avons Firefox 4, Chrome et Safari.

Cependant, le manque de compatibilité, dans certains cas (opacité par exemple), ne rendra pas votre site incompatible, mais seulement moins fini.

Pour aller plus loin : la référence du w3 sur les transitions CSS3.