Contenu
Catégories
Astuces CSS
Tutoriels webdesign
Après A comme Allons-y et B comme Bêtise, Je continue à égrener l’alphabet qui me sert de fil conducteur pour la création d’un thème de type magazine, selon la formule consacrée. C comme Cahier des charges parce que si lors de la première étape, j’ai noté quelques idées pour savoir dans quelle direction aller, il est temps de fixer le cap avec la liste des fonctionnalités dont j’ai besoin. Cette phase, indispensable lorsqu’on doit développer les fonctionnalités d’un site from scratch, peut sembler un peu formelle pour un blog, où sauf exception, tout est déjà codé dans le moteur du blog ; il reste néanmoins à déterminer celles que l’on va intégrer, de quelle manière et avec quelles options. Lire l’article
Articles classés dans Développement web » XHTML & CSS »
.ma-classe-css vs div.ma-classe-css 18 avril 2008 Blockquotes, XHTML & CSS 21 avis
En général, j’utilise la notation .ma-classe-css pour nommer les classes réutilisables par n’importe quel élément HTML. Cette notation est en fait un raccourci pour *.ma-classe-css où * est utilisé comme joker universel (les tirets ne sont là que pour le référencement).
Me souvenant que le reset * { margin: 0; padding: 0; } n’était pas optimum en terme de performances, je me suis dit que l’utilisation de div.ma-classe-css (en préfixant le nom de la classe avec la balise HTML à laquelle elle s’applique) permettrait certainement au navigateur de parcourir le DOM plus rapidement en raison du nombre réduit d’éléments sur lesquels boucler.
Un seul fichier CSS pour cibler IE6 et IE7 avec les commentaires conditionnels 17 avril 2008 Développement web, XHTML & CSS 4 avis
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 ? Lire l’article
Rétablir le flux après des éléments flottants en CSS sans balise HTML supplémentaire 26 février 2008 Développement web, XHTML & CSS 18 avis
Il y a quelques temps, je m’étais interrogé sur les différentes manières de rétablir le flux après un float. A l’époque, mon vocabulaire en la matière était rustique mais solide : je contentais souvent d’un coup de clear: both appliqué soit à une balise div, hr ou br. Comme j’en ai appris un peu plus sur le clearing suite aux commentaires qui ont suivi, j’assure le service après-vente, ce qui fait de moi une espèce de Darty Monsieur Plus du CSS… ^_^ Lire l’article
1000 ressources pour le développement web et WordPress : la grosse grosse liste 8 février 2008 Développement web, Firefox, Google & Référencement, Javascript & PHP, WordPress, XHTML & CSS 68 avis
Vous voulez un bon éditeur de page HTML et CSS et avoir sous le coude le maximum de ressources à portée de souris ? Cet article est fait pour vous si cherchez le bon plugin jQuery pour votre projet ou si vous êtes friand de liens pointant vers des ressources indispensables pour la création de sites web. Si en plus vous utilisez WordPress, c’est votre dossier Plugins qui va être content ! Le titre est trompeur : il n’y a pas 1000 ressources, mais bien plus à découvrir… Attention, cette liste est vivante et grandit avec vos suggestions ! Lire l’article
Design CSS liquide (ou fluide) encadré d’images répétées… sans table 31 janvier 2008 Développement web, XHTML & CSS 16 avis
Il y a deux choses que l’on passe généralement sous silence lorsqu’on fait la promotion des CSS pour la mise en page d’un site web : 1) la conception d’un design fluide contenant des visuels aux quatres angles et sur les 4 côtés, et 2) l’équilibrage des colonnes sur le pied de page quelque soit leurs contenus. Et oui, dès que l’on sort des designs avec une largeur fixe, c’est le “brodel” ! Alors que c’est si facile avec les tableaux… Alors, j’ai pensé au jeune Padawan qui désire échanger son design Old School contre une mise en page CSS plus sexy : je présenterais deux exemples de design liquide ou fluide tableless. Lire l’article
Quelques notes sur la bibliothèque Javascript IE7 de Dean Edwards 28 janvier 2008 Développement web, Javascript & PHP, Navigateurs, XHTML & CSS 18 avis
Le quotidien de l’intégrateur HTML est parfois ponctué de vide existentiel lorsqu’il s’agit de livrer des pages web compatibles avec la majorité des navigateurs dont la liste se divise grosso modo en deux groupes : ceux qui intègrent au mieux les standards recommandés par le W3C en matière de rendu CSS (Firefox, Safari, Opera et Konqueror, etc.) et les autres, principalement les versions 5 et 6 d’Internet Explorer. Lire l’article
Styles CSS par défaut : après Reset Reloaded, Eric Meyer fait encore risette avec Resetting Again 23 janvier 2008 Développement web, Navigateurs, XHTML & CSS 3 avis
Pour notre plus grand plaisir, Eric Meyer - le gourou des CSS - a mis à jour son célèbre Reset CSS. Après Reset Reloaded, voici donc Resetting Again ! Le plus gros changement est la suppression de l’héritage (inherit) des propriétés font-weight, font-style et font-family : la mauvaise prise en charge de la valeur inherit par Internet Explorer ne permet pas un reset satisfaisant dans tous les navigateurs. Lire l’article
Navigateurs, DOCTYPE et Standards : mais que fait le Capitaine “Quirk” ! 22 janvier 2008 Développement web, Navigateurs, XHTML & CSS 2 avis
A List Apart nous gâte : pas moins de deux articles polémiques publiés le même jour sur la question délicate de la compatibilité des navigateurs avec les recommandations du W3C pour aborder le futur du développemenet web sereinement… ou pas ! Lire l’article
Je teste mon navigateur sous Acid2, c’est grave, docteur ? 24 décembre 2007 Développement web, Navigateurs, Traductions, XHTML & CSS 3 avis
C’est une bonne nouvelle pour tous les webdesigners et autres intégrateurs HTML et CSS : la prochaine mouture d’Internet Explorer (IE8) devrait passer le test Acid2. Enfin, c’est ce qu’on peut lire un peu partout (disons que c’est notre Laure Manaudou à nous, les webeux). Mais qu’est-ce donc que ce test ? Ne risque-t-on pas d’abimer notre navigateur à le passer ainsi à l’Acid ? Pour le savoir, je me suis lancé dans une petite “craduction” de la première partie de l’article Acid2: The Guided Tour paru sur The Web Standards Project qui se bat depuis longtemps pour l’adoption des standards du web par tous pour permettre l’accès du web pour tous. Lire l’article
Optimiser et styler les catégories WordPress avec les CSS 15 octobre 2007 Outils de blog, WordPress, XHTML & CSS 5 avis
Suite à la migration de mon blog, j’en ai profité pour réorganiser les catégories en utilisant les sous-catégories qui me semblent un excellent moyen pour structurer l’information sur un blog. Curieusement, j’ai remarqué que les catégories sont souvent traitées par-dessus la jambe : soit il s’agit d’une longue liste tellement exhaustive qu’on ne sait plus de quoi parle le blog, soit les catégories sont placées à un endroit peu visible. Le pire étant évidemment le cumul des deux, ce qui n’est pas si rare… Lire l’article
table vs div : dis papa, racontes-moi encore les tableaux… 10 octobre 2007 XHTML & CSS 9 avis
La mise en page des sites web avec les tableaux n’a pas que des inconvénients : elle permet d’aller vite et d’obtenir une structure à l’épreuve des balles. La mise en page en div (5 légumes par jour, on vous dit…) n’a pas que des défauts : grâce aux CSS, il sera possible de moduler l’agencement des différentes parties de votre design. Bien sûr, tout n’est pas toujours aussi simple : les éléments constitutifs d’un tableau sont également stylables via les CSS, tandis qu’une structure en div mal conçue au départ ne sera pas vraiment modulable. Lire l’article
Frameworks CSS + Reset CSS : design from scratch 1 octobre 2007 Traductions, XHTML & CSS 11 avis
Je n’ai pas résisté à l’envie de vous proposer ma traduction de l’article CSS Frameworks + CSS Reset: Design From Scratch paru dernièrement sur Smashing Magazine. Les frameworks CSS sont des environnements de développement composés généralement de plusieurs fichiers CSS gérant chacun une partie spécifique du design web (typographie, grille de mise en en page, formulaires, etc…). Ces frameworks sont souvent accompagnés d’un Reset CSS, pour s’affranchir des différences de rendu entre les navigateurs. L’article fait ainsi le point sur la notion de framework CSS, ses avantages et ses inconvénients, décrit les frameworks les plus populaires et termine par une série de liens commentés à propos des Reset CSS et des styles de base. En attendant d’éventuels retours sur la traduction, ce billet est en version bêta. Lire l’article
[résolu] Les folles journées de l’intégrateur HTML et ses petits tracas… 16 septembre 2007 XHTML & CSS 13 avis
Le quotidien de l’intégrateur HTML est parfois assombri par la survenance de bugs plus ou moins gênants. Ces derniers jours, je me suis débattu avec un décalage de couleur entre une image au format png et un fond spécifié en hexadécimal. Et comme si ça ne suffisait pas, Internet Explorer et Firefox n’ont pas aimés que je débute l’intitulé d’un identifiant avec un underscore ! Pfff… Pour finir si l’utilisation de overflow: hidden pour clearer les float est une bonne idée, cette propriété peut avoir des effets de bord indésirables. Enfin, voyons ça de plus près : Lire l’article
HTML Validator pour traquer les erreurs javascript ? 1 septembre 2007 XHTML & CSS 8 avis
Depuis peu, l’affichage et le masquage de certaines rubriques de ma blogroll était en grève sans raison apparente : aucune modification des scripts jQuery en question. Tout en continuant malgré tout de chercher du côté de Javascript, je me suis rappelé une discussion avec Goulven ou Sébastien concernant l’intérêt de valider son code HTML pour traquer les erreurs. J’ai lancé HTML Validator sans conviction… Lire l’article
S’il ne devait rester qu’un tutoriel pour faire un menu CSS avec onglets… 17 août 2007 Développement web, XHTML & CSS 8 avis
Vous pensiez avoir fait le tour des tutoriels pour réaliser des menus avec onglets en CSS ? Moi aussi, mais c’était sans compter les facéties googliennes : je cherchais tranquillement des ressources sur le poids des sélecteurs css pour ajouter une information ou deux à mon billet sur les Reset CSS quand un résultat au titre alléchant a retenu mon attention : Lire l’article
5 Reset CSS à la loupe pour une remise à zéro des valeurs par défaut des navigateurs 14 août 2007 XHTML & CSS 14 avis
Vous n’utilisez pas de styles CSS pour votre page web ? Ce n’est pas grave : les navigateurs le font pour vous. Ils utilisent chacun leur feuille de style par défaut pour obtenir un rendu visuel minimal. C’est pourquoi les tableaux possèdent des bordures, et les paragraphes des espaces avant et après. Le problème ? Si des balises comme strong ou em sont traitées de la même manière par les agents utilisateurs, l’immense majorité présente des différences plus ou moins importantes. Ce fameux manque de “consistance” décrié par les webdesigners anglo-saxons concerne principalement les propriétés margin et padding. Avec une pensée particulière pour le retrait des listes ol et ul : si IE applique bien le margin-left: 40px préconisé, Firefox utilise quant à lui un équivalent du padding-left: 40px pour le même rendu. Dans ces conditions, il est tentant de vouloir mettre tous ces agents utilisateurs au garde-à-vous… Lire l’article
Pour rétablir le flux après un float, vous êtes plutôt HR, BR ou DIV ? 22 juin 2007 XHTML & CSS 15 avis
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… Lire l’article
Quelques notes autour du design fluide avec 3 colonnes du collectif Alsacréations 17 juin 2007 XHTML & CSS 6 avis
Florent Verschelde du collectif Alsacréations nous propose deux méthodes pour réaliser un design fluide avec trois colonnes en utilisant le positionnement flottant. Je me suis surtout intéressé à la première méthode, la deuxième faisant appel à la notion de contexte de formatage dont j’ai encore du mal à saisir toutes les subtilités. Lire l’article
Quelques notes sur Sandbox, un thème WordPress pour intégrateurs html CHIC qui aiment les microformats 5 juin 2007 XHTML & CSS 4 avis
Lors d’un précédent billet concernant la sortie de WordPress 2.2, j’avais évoqué la version 0.6.1 du thème Sandbox. Je profite du passage en version 0.9 pour passer la deuxième couche car Sandbox est intéressant à plus d’un titre. Cest le thème idéal pour les intégrateurs html qui trouveront une palanquée (et le mot est faible) de classes prêtes à styler avec un regard tourné vers l’avenir du web sémantique grâce aux microformats hAtom et hCard à l’horizon. Lire l’article
Organiser ses feuilles de style CSS 24 mai 2007 XHTML & CSS 18 avis
J’ai regardé l’organisation des CSS dans de nombreux CMS, de Dotclear à WordPress en passant par des plate-formes de e-commerce. Il n’y a pas deux feuilles de style qui partagent la même organisation, exceptée la remise à zéro du padding et du margin via le sélecteur universel ou seulement pour les éléments html et body, ou encore le choix de la police de caractère (famille, taille, interlignage et couleur du texte) pour le seul élément body. Certaines commencent par la structure pour finir avec les éléments html quand d’autres mettent les déclarations dans l’ordre alphabétique… Lire l’article
Petit bilan statistique du CSS Naked Day 6 avril 2007 XHTML & CSS 6 avis
1646. C’est le nombre total de sites inscrits sur la page CSS Naked Day. Je suis en 997ème position et Google.com en 210ème. Ils ont vraiment beaucoup d’humour chez Google 
Autant dire que je vais m’entrainer durement et améliorer mon score l’année prochaine. Si vous avez peur d’oublier la date, le concepteur du strip a prévu la fonction PHP is_naked_day() pour désactiver vos CSS en temps et en heure. Ce qui peut être utile pour d’autres occasions. Ceci dit, venons-en au fait : la mise à nu d’un blog en terme d’habillage graphique impacte-t-elle le nombre de visiteurs, de pages vues ou encore le temps passé sur un blog ?
Templates et boutique en ligne osCSS 10 janvier 2007 XHTML & CSS, e-commerce 2 avis
Après avoir abandonné l’idée d’adapter une charte graphique un peu funky dans osCommerce, j’ai regardé de plus près le projet osCSS. C’est une version CSS ready du projet osCommerce. La particularité d’osCSS est de fournir du code valide au regard des standards du W3C, qu’il s’agisse d’XHTML 1.0 ou 1.1. Les templates sont construits sur des fichiers CSS facilement personnalisables et interchangeables.
Smashing Magazine : des CSS plein les yeux 23 décembre 2006 Blockquotes, Design & Graphisme, Développement web, XHTML & CSS 13 avis
C’est Noël ! Et pour fêter ce moment dans la joie et la bonne humeur, je partage avec vous un site idéal à consulter entre les huîtres et la bûche pour en apprendre encore plus sur le XHTML et les CSS. Et aussi pour avoir sous les yeux des dizaines de design web qui, si vous n’y prenez garde, risquent de booster votre imagination. A consommer sans modération.
Découvert grâce à l’excellent blog de neo-ma, Smashing Magazine mérite de figurer dans votre liste de liens ou dans votre blogmarks préféré.
Vous découvrirez la crème de la crème en matière de liens vers des galeries de sites sur les CSS tous plus intéressants les uns que les autres, suivie par une liste de 50 designs web classés par ambiance : vibrant designs, dark designs et light designs.
Des sets d’icônes à télécharger librement de même que des liens vers des polices de caractère de qualité à télécharger, une galerie de formulaires CSS…
Tous ceci n’est bien évidemment que la partie visible de l’iceberg tant le site est riche de liens et d’exemples.
Joyeuses fêtes à toutes et à tous
Exercice de style CSS et HTML : table vs div 26 octobre 2006 XHTML & CSS 7 avis
L’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…
Quelques notes sur XHTML et CSS, au fil de l’eau… 12 octobre 2006 XHTML & CSS 8 avis
Le quotidien de l’intégrateur XHTML et CSS est parfois ponctué de vide téléologique concernant les bonnes balises à utiliser en fonction du type de contenu. J’ai longtemps cherché à produire un document-type pouvant servir, au prix de modifications mineures, à n’importe quelle commande. Hélas ! Chaque projet demande des réponses graphiques et structurelles ajustées. Néanmoins, je ne résiste pas au plaisir de partager avec vous, à l’occasion du 100ème jour depuis la mise en ligne de css4design, une sorte de medley mashup de quelques thèmes liés à l’intégration web. Restez vigilant : malgré toute l’attention apportée à la rédaction de ce billet, il reste encore des traces d’humour sous le tapis de souris 
Vos positions s’affaissent ? Mettez le bottom à zéro… 15 septembre 2006 XHTML & CSS 3 avis
Je livre ma copie en réponse à un défi de Cap° concernant la mise en place d’une liste dans laquelle l’ajout d’un ou plusieurs éléments ferait remonter le texte au lieu de le faire descendre. Tout ça dans le but de garantir à notre liste une base fixe. Rien de bien fou, mais un défi est un défi :p
CSS 3 column layout - the holy grail!? 19 août 2006 Blockquotes, Développement web, XHTML & CSS Comments Off
En sortant surfer ce matin, j’ai trouvé cet article sur l’utilisation - ou non - des hacks css pour vos design web. Mais aussi, et plus malheureusement, sur le retour aux TABLE pour la mise en forme des pages. Tant pis, c’aurait pu être un très bon article. Ca reste néanmoins un point de vue intéressant, qui rejoint d’une certaine manière, l’excellent W3C go home ! d’Arno.
Background CSS avec motifs double-fond… 29 juillet 2006 XHTML & CSS 5 avis
… et effet d’opacité multiple sur le texte et les images
La création de motifs répétés est un plaisir de chaque instant dont je ne me lasse pas. Quelle joie de remplir un grand espace avec une image de quelques pixels… Oui, mais c’est parfois un peu… trop répétitif, tout ça. Et si nous faisions en sorte d’avoir un motif un peu plus riche pour le haut de la page, tandis qu’un autre remplirait le reste de la fenêtre en étant raccord avec le premier ?
Opacité CSS et effet de trame avec GIF/PNG transparent 26 juillet 2006 XHTML & CSS 5 avis
Pour obtenir un effet d’opacité sur un élément, il existe le format d’image PNG 24 bits qui accepte jusqu’à 256 niveaux de transparence. Malheureusement Internet Explorer 6 ne prend pas en charge cette intéressante caractéristique…
Commentaires conditionnels d’IE vs hacks CSS ? 18 juillet 2006 XHTML & CSS 7 avis
Les différences de rendu entre les différents navigateurs sont le lot quotidien de l’intégrateur CSS : un léger décalage par çi, une largeur différente par là… La tentation est grande d’envoyer paître le dernier de la classe, au grand dam de la voix de la sagesse (souvent commerciale qui vous prie de ne pas négliger 85% de ses clients potentiels… Lire l’article
got2be : gotapi ça décoiffe ! 12 juillet 2006 Blockquotes, Développement web, Javascript & PHP, XHTML & CSS 2 avis
Vous connaissiez peut-être les sites htmlhelp.com, w3school.com ou encore php.net… Que ce soit le cas ou non, vous serez ravi d’apprendre que l’ensemble des références qu’ils contiennent en matière de code html, de javascript, de css, de php, et de presque tout ce qui peut nous intéresser en matière de développement web est disponible sur… tatatin…
gotAPI.com a eu la bonne idée de regrouper l’ensemble des principales ressources web dans une interface Ajax qui rend le tout très réactif. Un outil de recherche (également en Ajax) permet d’affiner ses recherches très rapidement à la manière d’un Google Suggest. A noter que la recherche ne va pas chercher les réponses dans toutes les ressources, mais seulement dans la rubrique en cours. Mais c’est vraiment peu de chose tant l’ensemble est excellent et pratique. Surtout quand on avait l’habitude de consulter tous les sites, chacun bien au chaud dans son onglet Firefox
Un très bon candidat pour être en page d’accueil de tous : du débutant qui ne sait pas, à l’expérimenté qui ne sait plus
Outre l’utilisation de cet outil, je vous propose de suivre GouBlog qui nous fait partager son expérience, ses découvertes et certaines de ses réflexions sur le Web design.
D’autres billets à propos de xhtml et css sont disponibles sur css4design.
Design de formulaire HTML avec CSS 12 juillet 2006 XHTML & CSS 9 avis
Depuis longtemps, l’intégrateur web pressé d’aller manger, dresse la table pour mettre en forme ses formulaires. Et vas-y que je te mets du texte dans un td, un champ texte dans l’autre, et ce, jusqu’à la nausée. Lire l’article
CSS et portes coulissantes pour un effet de zoom :hover 4 juillet 2006 XHTML & CSS 7 avis
Réaliser un effet de zoom sur une image nécessite généralement deux versions d’un même visuel : la première à 100%, et la deuxième à taille réduite. Les événements onmouseover et onmouseout pilotent traditionnellement le changement de source de l’image pour gérer la permutation.
Design de formulaire : faites moche, c’est mieux ! 30 juin 2006 Blockquotes, Développement web, XHTML & CSS Comments Off
Un point de vue intéressant au sujet du design des formulaires que je soumets à votre sagacité. Que ceci ne vous empêche pas de n’en faire qu’à votre tête et de continuer de styler vos formulaires pour le plaisir des yeux. Mais au moins vous serez prévenu : on ne joue pas impunément avec l’expérience utilisateur
En-tête, 2 colonnes, 1 pied de page (fixe ou liquide) 27 juin 2006 Développement web, XHTML & CSS Un avis
Ce soir, dans le menu design css, un exemple de mise en pages classique. Je voulais qu’en supprimant deux lignes dans la feuille de style, nous passions de deux à une colonne. Et celà sans que rien d’autre ne change.
Trucs et astuces CSS 21 juin 2006 XHTML & CSS 5 avis
Cette page regroupe quelques trucs & astuces CSS que j’ajoute au fur et à mesure. Cette page est donc mise à jour assez régulièrement : bookmarkez, blogmarker, favorisez, bref faites tourner… Si vous cherchez plutôt des exemples de design CSS plus complet, les billets présents dans cette page consacrée au design web avec CSS devrait vous intéresser
Si vous avez vous aussi quelques astuces CSS à partager, n’hésitez pas à le faire dans les commentaires.
- La feuille blanche
- Raccourci pratique pour les bordures CSS
- Transparence
- Commentaires conditionnels d’IE vs hacks CSS
- Barre de défilement et décalage d’une page centrée
- Centrer un bloc horizontalement et verticalement dans la fenêtre du navigateur
- Centrer un bloc horizontalement dans la fenêtre du navigateur
- Modifier les caractéristiques des liens avec LoVe HAte
Design CSS : fixe, élastique ou liquide ? 13 juin 2006 XHTML & CSS 4 avis
Difficile, en effet, de choisir la bonne formule pour ses mises en pages CSS. Surtout si l’on se préocuppe des standards web et des bonnes manières pour un web qui prenne du sens et perde du poids ! bon, ne nous emballons pas et entrons dans le vif du sujet en précisant rapidement de quoi il s’agit :
Commentaires récents