Alsacréations vient de lancer une série de quiz pour tester ses connaissances en XHTML, CSS, JS et PHP. Comme j’ai beaucoup d'autres choses urgentes (et moins amusantes) à faire je vais bien sûr m’empresser de répondre à toutes ces questions...

Voici un outil pratique pour tester le rendu d’un texte avec différentes configurations, afin de choisir au mieux ce qu’il conviendra de mettre dans sa feuille de style : http://typetester.maratz.com/. On peut cliquer sur "Get CSS" pour avoir le code tout cuit à mettre dans son fichier css. Le problème, c’est qu’on ne peut tester qu’avec les fontes installées sur son système ce qui limite un peu le choix.

Pour compléter, le site présente aussi un tableau comparatif des polices les plus fréquemment utilisées sur le web : http://webdesign.maratz.com/lab/fonts_table/ à ouvrir dans différents navigateurs pour voir les différences qu’il peut y avoir. Là aussi, les images de ladite page affichée par différents navigateurs auraient été bienvenues.

Heureusement que www.codestyle.org y a pensé ! Dans l’article Combined font survey results, il fait le point sur la question. On peut, en un coup d’œil, voir quelles sont les polices les plus répandues, quel que soit le système utilisé.

Et comme c’est toujours utile de les avoir sous la main, voilà la liste des caractères de la norme ISO 10646-1.

Dans son article Typographie web : gérer la taille du texte avec les « em », Alsacréation explique comment utiliser cette unité, qui est la seule permettant un redimensionnement du texte, quel que soit le navigateur.

Cela paraît compliqué de prime abord mais il suffit simplement de connaître les règles.

Lire la suite

Firebug n'est pas vraiment une nouvelle extension, mais la nouvelle version (1.0 beta à télécharger sur getfirebug.com*) est complètement différente de la précédente (à ce qu'on dit, car bien que l'ayant installée, je ne l'utilisais pas vraiment). Les principales fonctionnalités sont présentées sur le blog d'aozeo.com et rien que ça, ça donne envie de l'essayer tout de suite !

Avec la barre d'outil Web Developer, c'est vraiment l'outil indispensable pour mettre au point ses pages web. Peut-être même le meilleur outil ? La pratique le dira...

* le site explique aussi comment installer cet outil dans I.E., Opera et Safari

Trouvé sur le blog Skill Exchange (dont je trouve le design très réussi, soit dit en passant*) : un vers le site css.maxdesign.com.au qui, en plus de proposer de nombreuses façons d'afficher des listes, présente des tutoriels** sur les sélecteurs et les éléments flottants en CSS.

* je me suis prise en flagrant délit de rafraîchir plusieurs fois la page rien que pour voir changer la photo de l'entête...

** le pluriel de tutoriel est tutoriels, et pas tutoriaux. La confusion vient de la similitude avec le mot anglais tutorial (à éviter en français, bien sûr).

Il existe une méthode simple pour faire un lien sur une image avec un effet de rollover, comme ceci : contact Il suffit d'une image et de quelques lignes de CSS mais la solution la plus couramment employée n'est pas sans poser quelques problèmes d'accessibilité.

Lire la suite

À apprendre par l’exemple en recopiant ce qui se fait ailleurs, on prend parfois de mauvaises habitudes, et s’il en est une assez répandue, c’est celle qui consiste à utiliser des tables pour faire des formulaires. Il existe pourtant un moyen bien plus élégant de faire des formulaires en utilisant les balises <fieldset>, <legend> et <label>, ce qui a l’avantage de produire un résultat bien meilleur du point de vue sémantique, qui plus est.

Lire la suite

Ce tutoriel de nubiumgraphik.com explique comment afficher une bulle d'aide à la manière web 2.0

Ce tutoriel de babylon-design.com explique comment simuler des tableaux en CSS en utilisant table-caption, table-column, table-column-group, table-header-group, table-footer-group, table-row-group mais particulierement table, table-cell et table-row.