HTML & CSS

Générateurs de CSS3 pour tous les navigateurs (ou presque)

Même si tous les navigateurs ne prennent pas en charge les spécifications CSS3, il est intéressant de se pencher dessus, d’autant plus de que nombreux générateurs en ligne sont là pour adoucir la courbe d’apprentissage. Au menu : des générateurs de propriétés CSS3 comme border-radius, gradient, box-shadow, text-shadow, RGBa, @font-face, Multiple Columns, etc. ; des effets de texte  et une palanquée de ressources complémentaires. →

Mesure d'audience

«Link Luv» pour les 12 premiers référents sur 6 218 sources

Selon Google Analytics ce blog a reçu 153 851 visites (sur un total de 733 136) en provenance de 6 218 sources depuis le 26 juillet 2006. Mille Mercis aux 12 premiers référents hors agrégateurs et moteurs de recherche qui ont contribué au succès de css 4 design :

  1. webdesign.2803.com — 3 786 visites
  2. forum.alsacreations.com — 3 700 visites
  3. fran6art.com — 2 951 visites
  4. css.mammouthland.net — 2 939 visites
  5. css.developpez.com — 1 802 visites
  6. peutetreunereponse.net — 1 781 visites
  7. ajblog.fr — 1 569 visites
  8. wordpress-fr.net — 1 477 visites
  9. excargot.net — 1 248 visites
  10. bvwg.actulab.net — 1 133 visites
  11. pnxdesign.com — 1 104 visites
  12. smashingmagazine.com — 1 002 visites
Intégration web

HTML5 — Repenser le découpage des pages web et des contenus

Derrière les nouvelles balises proposées par HTML5 se cache un nouveau modèle de structuration. Jusqu’à présent, on rencontre souvent la structure suivante : un niveau de titre `h1` pour le nom du site et ça continue avec `h2` pour le titre des articles ; reste `h3` — `h6` pour structurer la prose, ce qui est suffisant ou pas. HTML5 introduit la notion de Sectioning Content (cf. le concept d’outline) de manière explicite avec les balises `section`, `nav`, `article` et `aside` ou de manière implicite a chaque utilisation d’un niveau de titre `h1`. →

Intégration web

html5media — Les balises HTML5 audio et video sans contrainte

Les balises HTML5 `video` et `audio` permettent d’incorporer du son ou de la vidéo dans une page web aussi simplement que s’il s’agissait d’une image. Mais comme le roi et la reine ne le veulent pas tous les navigateurs ne prennent pas en charge ces charmantes nouveautés, html5media a eu la bonne idée de rendre possible l’utilisation des balises `audio` et `video` sans se soucier de la compatibilité : le script se charge de fournir un player Flash (flowplayer) pour les navigateurs à la traine ! →

Intégration web

Ajouter une classe CSS dans BODY ou HTML pour Internet Explorer (IE6 — IE9)

Toujours dans ma recherche de solution pour servir des déclarations CSS uniquement à Internet Explorer, je suis tombé sur une technique que j’appellerais «classification» sélective du `body` (ou de la balise `html`) en  fonction du navigateur. Une fois encore, les commentaires conditionnels serviront à détecter Internet Explorer pour ajouter une classe à la balise `html` pour éviter de créer une feuille de style dédiée à IE. →

HTML & CSS

HTML5 — Et si on évitait la balise «section» dans une balise «article» ?

Ce billet fait partie d’une série de notes rapides prises lors de ma lecture des spécifications HTML5. Aujourd’hui, c’est le commentaire de Romy qui me donne l’occasion de rebondir sur le découpage d’une page web avec HTML5 et plus particulièrement la balise `section`. Dans ce billet, je m’éloigne un peu du commentaire de Romy et je voudrais souligner qu’elle a parfaitement raison quand elle dit que le rôle des balises `header` et `footer` est clair mais que leur traduction en En-tête et Pied de page prête à confusion ; il faudrait peut-être introduire la notion de meta information. →

HTML & CSS

HTML5 — Pourquoi «header» et «footer» ne créent pas de «sections»

Les nouvelles balises introduites par HTML5 ne sont pas très évidentes à utiliser. Plus que jamais, le contenu est roi et tout dépend de lui. Les notions de Sectioning Content implicites ou explicites risquent de se transformer en poil à gratter pour les intégrateurs web. Pour commencer, notre balise `div` préférée devra laisser du terrain à la balise `section` quand on pourra justifier d’un `h1` à l’intérieur. →

HTML & CSS

HTML5 — Pas de balise aside dans un hgroup ?

Après Une orientation encore trop « littéraire » et pas assez « web » je m’interroge aujourd’hui sur un autre aspect des spécifications HTML5 :  cette tendance à dire aux éditeurs de contenus comment il doivent écrire ou mettre en forme leurs documents. Aujourd’hui, j’ai eu la surprise de voir une page rejetée par le validateur au motif qu’un Element aside not allowed as child of element hgroup in this context. Autrement dit, un élément aside n’est pas autorisé à être enfant d’un élément hgroup. C’est agaçant parce que je trouvais que mon marquage en avait sous la santiag : →

HTML & CSS

Des bulles de dialogue en CSS3 sans image

Les bulles de dialogue sont un symbole largement répandu sur le web, popularisé par le web 2.0 et le User Generated Content : principalement les commentaires sur les blogs (et encore, car la tendance est à la baisse… La faute à Twitter). Le tutoriel proposé par Nicolas Gallagher présente plusieurs modèles de bulles de dialogue créées en CSS 2.1 (propriétés `:before` et `:after`) progressivement améliorées avec CSS 3 : dégradés, coins arrondis, etc. Et oui, pas d’image ni de Javascript pour un effet littéralement bluffant. →