La dernière session à laquelle j’ai assistée à Make Web Not War s’intitulait “Cascading” into CSS3: Exploring the features of CSS3 and the use of jQuery as a substitute.
Nathaniel Bagnell (@nathaniel401) nous a démontré quelques nouvelles fonctionnalités de CSS3 et comment contourner, grâce à JQuery, l’incompatibilité de celles-ci avec certains fureteurs.
Bien que le CSS3 soit encore en phase d’approbation, plusieurs développeurs ont déjà commence à utiliser certains modules et fonctionnalités qu’ils attendaient avec impatience depuis des années. Par contre, il reste important d’offrir une solution de rechange pour les fureteurs qui ne supportent pas encore cette technologie.
Voici un résumé des faits et fonctionnalités qui ont été traités durant la présentation:
CSS3 comprend approximativement 41 modules qui doivent passer par plusieurs stades d’évaluation avant d’atteindre le statut de Recommendation (REC) et d’être officiellement publiés. Cette procédure permet aux développeurs des différents fureteurs de les intégrer à leur rythme et de s’assurer de la bonne implémentation de cette technologie.
Les modules sont organisés de façon logique et efficace en regroupant, par exemple, tous les éléments reliés au Background se retrouvent dans un seul module.
Chrome est présentement le fureteur qui supporte le plus de modules CSS3. Il est suivi de près par Safari, Firefox, Opera et finalement IE.
Certains développeurs choisissent d’utiliser JQuery pour recréer certaines fonctionnalités qui ne sont pas supportées encore par les fureteurs. (ex.: ombres, coins ronds, etc…)
Autres fonctionnalités intéressantes:
- Coin arrondis contrôlables pour les boîtes: border-radius: 20px;
- Ombres sous les boîtes: box-shadow: 5px (horizontal) 5px (vertical) 10px (flou) #000 (couleur);
On peut aussi superposer plusieurs ombres en ajoutant une virgule et en répétant les même paramètres. - Ombre sous le texte: text-shadow: 3px 3px 6px #fff;
- Utilisation de polices personnalisées grâce à @font-face
- Fonds multiples: background: top, right, bottom, left; couleurs unies ou images!
- Séparation du texte en colonne: column-count:2; column-gap:15px;
- Le nouvel HTML 5
- Retour sur la session sur HTML5 pour MWNW
- Retour sur le keynote de Joel Perras pour MWNW
- Les règles à suivre en matière de marketing pour les courriels
- Google s’associe à Twitter pour la Recherche en Temps Réel
