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. →

HTML & CSS

«Test Drive» (IE9 preview) sur Vista

Petite note rapide pour signaler le lancement de Test Drive par Microsoft. Une fois l’archive .msi installée sur votre disque dur (le moteur de rendu d’IE9 s’installe à côté de votre exemplaire d’Internet Explorer), Internet Explorer Platform Preview vous permettra de tester le moteur de rendu de IE9 censé respecter les standards (CSS3, HTML5) au plus près des spécifications du W3C. →

HTML & CSS

Une Feuille de style et des « hacks CSS » pour cibler IE6, IE7 ou IE8

Les hacks CSS sont une utilisation peu conventionnelle des sélecteurs CSS pour s’adresser à un ou plusieurs navigateurs quand on doit servir une propriété ou une valeur CSS spécifique à un ou plusieurs navigateurs. Si IE6 fait la fine bouche devant sa soupe de balises, il peut être intéressant de lui servir le même plat mais dans une assiette différente (la comparaison est bancale). Ces hacks s’utilisent souvent pour cibler des versions spécifiques d’Internet Explorer (généralement IE6 et IE7). Toutefois, il en existe pour Firefox, Opéra, Safari, iPhone, etc. Par ailleurs, je n’utilise pas ces hacks CSS dans ma feuille de style principale, mais uniquement dans une CSS réservée à IE via les commentaires conditionnels. →

Conception de site web

Framework CSS — Sémantique, maquette dynamique et autres notes

Les frameworks CSS ont fait couler beaucoup de pixels : d’un côté, ils proposent une méthode à l’épreuve des balles pour placer les blocs sur sur la page en tenant compte des contraintes cross-browser ; de l’autre, ils ajoutent des classes CSS superflues dans le code HTML pour la présentation des contenus, ce qui n’est pas jugé «sémantique» par les farouches défenseurs d’une séparation entre le fond et la forme. Voilà en gros l’avantage principal et l’inconvénient majeur qu’on peut dégager si on met de côté le faux problème du poids de ces frameworks. Après avoir donné mon point de vue sur cette question de «sémantique» j’expliquerais comment l’ajout de classes liées à la présentation dans le HTML peut s’avérer très pratique à l’heure du web «sur-mesure». →

HTML & CSS

Générateur de coins arrondis avec border-radius

La propriété CSS3 `border-radius` permet de faire des coins arrondis pour rendre nos pages web plus jolies à regarder. Tous les navigateurs ne prennent pas en charge la propriété CSS3 `border-radius` : les agents utilisateurs carburant au moteur de rendu Webkit (Chrome, Safari, iPhone, Android) utilisent `-webkit-border-radius` et ceux qui tournent sur Gecko (Firefox, Camino) utilisent `-moz-border-radius`. Quant à Internet Explorer, on peut garder l’espoir qu’avec IE9 ont verra un peu de lumière au bout du tunnel… →

HTML & CSS

39 frameworks CSS — Mettez une grille dans votre design

Il existe de nombreuses raisons pour ne pas utiliser de frameworks CSS lors de la phase de conception ou d’intégration de votre site web : le poids, l’intrusion des classes CSS dans le code HTML qui devient la règle pour placer le moindre bloc de contenu, le fait que de nombreuses règles ne sont pas utilisées, etc. Ceci dit, j’aime bien tester les frameworks CSS qui tombent à portée de souris, et je n’hésite pas à faire des expériences d’hybridation. Le potentiel didactique de ces projets est très intéressant. Ne vous en privez pas. →

HTML & CSS

CleverCSS — Mettez un Python dans vos CSS

CleverCSS est une manière de produire des CSS inspirée par le langage de programmation Python : les accolades sont remplacées par l’indentation des différentes règles CSS et les déclarations sont introduites par le signe deux-points. Jusque-là, rien de bien fou, mais CleverCSS ne s’arrête pas à l’économie de quelques signes et propose de nombreuses améliorations à CSS : de l’optimisation de la syntaxe à l’utilisation des constantes en passant par le calcul sur les valeurs, y compris les couleurs. →

E-commerce

HTML5 — Une orientation encore trop « littéraire » et pas assez « web »

Dans HTML5, il manque quand même la balise `panier` pour aller avec `article`. Ce début de réflexion que je partageais sur Twitter m’est venu en lisant les ~~tables de la loi~~ spécifications de HTML5, notamment la partie semantics. Là, j’ai eu comme une révélation : Les balises HTML et surtout HTML5 sont orientées vers les contenus littéraires (`dialog`), le monde de la presse (`article`) et les publications à caractère scientifique (`section`). →

HTML & CSS

10 conseils pour améliorer votre feuille de style CSS « print »

Les feuilles de style réservées à l’impression sont souvent oubliées alors qu’elles offrent de grands services pour tous ceux qui impriment les pages web pour les consulter plus tard ou simplement pour avoir une meilleure lisibilité si les pages présentent des fonds torturés. Voici l’essentiel en 10 trucs et astuces pour créer une feuille de style CSS réservée à l’impression. →

HTML & CSS

CSS & Navigateurs — 10 problèmes de compatibilité récurrents

Les problèmes de compatibilité entre les feuilles de style CSS et leurs interprétations parfois fantaisistes d’un navigateur à l’autre font partie du quotidien des intégrateurs web et autres webdesigners. Voici une liste de liens (en anglais) qui vous permettra de reconnaitre et corriger les bugs de rendu qui font tâches dans votre design web : →