Archives des tags : Commentaires conditionnels

Pas encore de description pour le tag Commentaires conditionnels. Suggérez à l'administrateur du site de d'y remédier.
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

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

HTML & CSS

Contribution au guide stylistique pour HTML et CSS

Florent Verschelde lance le projet de rédiger un guide stylistique (charte rédactionnelle ou conventions de codage) pour les langages HTML et surtout CSS sous l’égide d’Alsacreations. Une description de ce projet est disponible dans ce document. Voici ma modeste contribution à cette première étape du projet qui consiste en deux séries de questions pour sonder les professionnels du web sur leurs habitudes de travail en matière de mise en forme du code. →

HTML & CSS

IE6 — Gérer la transparence du format PNG 24 bits

Le format PNG autorise jusqu’à 256 niveaux de transparence qui ne sont pas pris en charge par Internet Explorer 6. La dégradation grâcieuse n’étant pas toujours possible, je me suis rafraichis la mémoire sur les différentes manières d’utiliser le filtre *AlphaImageLoader*. J’ai fini par tomber sur une solution globale pour gérer cette transparence même en présence d’un *background-repeat* ou d’un *background-position* ! (Cet article est en quelque sorte la suite de Opacité CSS et effet de trame avec GIF/PNG transparent.) →

HTML & CSS

Un seul fichier CSS pour cibler IE6 et IE7 avec les commentaires conditionnels

Les hacks CSS, c’est pas bien ; les commentaires conditionnels, c’est mieux. Pour autant, je ne vois pas d’inconvénient à utiliser quelques hacks à l’intérieur d’une feuille de style réservée à Internet Explorer à l’aide des commentaires conditionnels. En effet, pourquoi ajouter une requête inutile en ciblant chaque version de IE quand on peut régler le problème une fois pour toute ? →

HTML & CSS

Pour rétablir le flux après un float, vous êtes plutôt HR, BR ou DIV ?

Dans le prolongement du billet précédent concernant une mise en pages CSS avec la propriété float, je me suis intéressé aux différentes manières de styler la balise hr pour rétablir le flux après en avoir sorti des éléments en les faisant flotter à gauche ou à droite. J’utilise généralement hr avec le traditionnel clear: both et visibility: hidden et je jongle ensuite avec les marges ou la hauteur pour espacer les éléments. Or, depuis que j’utilise le reset.css d’Eric Meyer, j’ai tendance à supprimer les marges de tout ce qui bouge, mais cette chère règle horizontale reste récalcitrante à la remise à zéro cross browser… →

Web 2.0

Twitter : Signal social, microblogging et moblogging

Ce que je fais sur Twitter ? Dans la série je suis un garçon influençable, en voici la preuve : comme tout le monde, j’ai entendu parler de Twitter qui permet de laisser des traces de ce qu’on est en train de faire. Ce site se situe à à mi-chemin entre le microblogging , le moblogging et le signal social. Votre status est visible par tous sur la page d’accueil de Twitter pour participer au Zeitgeist ; par vos amis pour garder le contact ; ou bien encore sous la forme d’un widget à placer sur un blog pour permettre à vos lecteurs de suivre votre vie quotidienne… ou pas. C’est vous qui écrivez, c’est vous qui choisissez ! →

Ergonomie & Accessibilité

L’expérience utilisateur et l’ergonomie des sites web

Ruiner l'expérience utitilisateur ? Quelle idée ^^ Pour faire bonne impression sur les visiteurs, il suffit d’anticiper leurs besoins. Dans ce domaine, ce sont souvent les détails qui comptent le plus. Améliorer l’expérience utilisateur et adapter les fonctionnalités d’un site web en fonction des attentes de chacun permet de satisfaire : ceux qui veulent consulter un site web ergonomique offrant un contenu facilement accessible ; ceux qui veulent un design attractif ; et enfin, ceux qui veulent le grand jeu avec Ajax à tous les étages. Ce billet est ma traduction du dernier article d’Aaron Gustafson Ruining the user experience paru sur A List Apart le 27 mars dernier. →

HTML & CSS

Exercice de style CSS et HTML : table vs div

sivom-nautiqueL’utilisation des CSS à la place des tableaux pour concevoir une page web fait sa place dans la boite à outils du webdesigner. Or, s’il est relativement aisé de concevoir un site «full CSS» from scratch, c’est parfois un peu plus tricky de partir d’un site existant et d’en débarrasser la table. Après la lecture de ce billet, vous saurez comment j’ai divisé par deux le poids d’une page, rendu au code HTML son teint de rose, et facilité la digestion des navigateurs… tout en conservant 99% du look d’origine… →