HTML & CSS

8 techniques CSS pour remplacer du texte HTML par une image

Il est courant d’afficher le logo d’un site web sous la forme d’une image au lieu de mettre le nom du site au format texte HTML. Les préoccupations grandissantes des webmasters concernant l’optimisation SEO ont popularisées les titres HTML composés de mots-clés optimisés puis masqués au profit d’un logo sous forme d’image. Pour y parvenir, les intégrateurs HTML & CSS ont plusieurs cordes à leur arc. Malheureusement certaines solutions présentent des défauts, notamment en ce qui concerne l’accessibilité des contenus cachés, qui peuvent rester inaccessibles pour certains (agents) utilisateurs. Sans parler du risque (faible dans ce cas) de passer aux yeux de Google pour un vilain petit cachottier. Voici donc un florilège de techniques CSS pour cacher ce texte que l’on ne saurait voir, mais qui a son importance. →

HTML & CSS

IE6 — 3 fonctions Javascript pour lutter contre le bug des classes multiples

Parmi les nombreux bugs qui affectent Internet Explorer 6, le bug des classes multiples apparait lorsqu’on utilise au moins deux classes CSS simultanément. Par exemple `.classe1.classe2` pour adresser des propriétés CSS aux éléments possédant à la fois `.classe1` et `.classe2`, ce qui est très pratique. Malheureusement, IE6 ne tient compte que de la dernière classe, soit `.classe2`, en l’occurrence. Une pratique répandue consiste simplement à se passer des classes multiples, ce que je fais depuis des années. →

HTML & CSS

Le petit journal du Web — Janvier 2011 (Typographie, CSS, Photoshop et développement web)

Après quelques journaux permanent (HTML5, typographie et CSS3) et des revues de presse multi-thématiques, voici une nouvelle série de liens triés sur le volet qui vous permettra d’occuper le Weekend qui arrive à grand renfort de typographie et d’intégration HTML & CSS. Ces ressources vous donneront également l’occasion de dégainer Photoshop et de sortir votre éditeur HTML préféré. Enjoy! →

Le petit journal du web

Le petit journal du Web — 31 décembre 2010

A l’occasion du 31 décembre, voici quelques éléments statistiques concernant la fréquentation de ce blog. Depuis le 26 juillet 2006, css 4 design compte plus d’un million de visites pour un peu plus de 715 000 visiteurs uniques et a atteint une vitesse de croisière d’un peu plus de 1 000 visites par jour depuis quelques mois. D’après Alexa.com, ce blogzine fait partie du top 100 000 des sites mondiaux et du top 5 000 pour la France. Les visiteurs sont plutôt des hommes sans enfant, âgés de 18 à 34 ans, avec un niveau d’étude plutôt élevé qui se connectent plutôt depuis l’école et le lieu de travail. →

Le petit journal du web

Le petit journal du Web — Décembre 2010

Comme à son habitude, le petit journal du Web fait le point sur les sites et les services (re)découverts pendant les 30 derniers jours. Pour décembre, ce petit journal vous propose : à la Une, un site consacré à l’accessibilité Web  ; dans la rubrique Graphisme et Ergonomie, un bookmarklet pour afficher les Wireframes ; dans la catégorie CSS, CSS3 et HTML5, une piqûre de rappel sur l’organisation des feuilles de styles CSS ; et nous terminons avec un rappel des éléments à prendre en compte lors de la migration d’un blog WordPress et une mine de ressources pour les chefs de projet Web ! →

HTML & CSS

Quelques notes sur la balise h1 avec HTML5

La réponse courte à la question « Combien de balises `h1` dans une page Web HTML5 ? » est : « Autant que nécessaire ! » En gros, chaque fois que vous avez une nouvelle section, vous  pouvez mettre un `h1`. D’une manière générale, `h1` accompagnera `article`, `aside`, `nav` ou `section` avec brio ! (cf. Sectioning content). Allons voir ce que nous disent les spécifications HTM5 sur l’emploi des balises de titre `h1` — `h6`, notamment les exemples concernant les niveaux de titre. Ils sont assez parlant bien que parfois déroutant lorsqu’on a l’habitude du balisage utilisé jusqu’à présent. Les éléments `h1` — `h6` représentent les niveaux d’en-têtes de leurs sections respectives. Quant à l’élément `hgroup`, il regroupe un ensemble d’en-têtes composé d’au moins deux niveaux de titre, comme un titre et son sous-titre ou un titre et le slogan associé (un bon candidat pour Logo et Motto, faute de mieux). →

Tools

CSS Text Wrapper — Habiller vos textes avec des formes non rectangulaires

Fini les textes rectangulaires ! CSS Text Wrapper habille votre textes HTML avec n’importe quelle forme : courbe, zig-zag ou ce que vous voulez. Suivez les instructions et copiez-collez le code généré. Parmi les options possibles, on trouve la largeur et la hauteur de la zone de texte, l’interlignage, la taille de la police de caractère, et la zone de saisie de votre texte au format HTML. →