Il existe de très nombreuses ressources pour apprendre les langages du web HTML & CSS. Bien sûr, les spécifications du W3C en la matière sont un passage indispensable, mais il ne faut pas oublier qu’il existe des tutoriels plus… didactiques. Ceux que je vous présente vous prendront par la main pour que le plongeon dans le grand bain de l’intégration web ne se transforme pas en «plat» douloureux. →
A l’heure où l’on parle beaucoup de Responsive Webdesign via notamment les propriétés CSS3 Media Queries, il est important de s’interroger sur la manière dont les différents périphériques mobiles se comportent au moment de télécharger les images. Disons que vous affichez une image en tant “normal” et que vous décidez de lui appliquer display: none si max-width: 600px. L’idéal serait que le périphérique ciblé ne demande pas l’image afin d’épargner la bande passante. →
Dans ce petit journal du web vous trouverez des liens bien frais pour 1) faire ce que vous voulez avec Bootstrap, 2) avoir un aperçu du rendu de votre site dans différents formats mobiles, 3) copier-coller quelques règles CSS pour obtenir des triangles orientés dans les quatre directions sans image, 4) suivre un tutoriel pour intégrer un prototype de page directement dans le navigateur avec le framework CSS Zurb Fondation. →
Une pratique courante pour déterminer les tailles de caractère consiste à utiliser une valeur de 62.5% sur le body pour obtenir une taille de base de 10px et d’utiliser un coefficient multiplicateurs en em pour simplifier les calculs à venir. Dans ce contexte, 1.2em est égale à 12px et 2.4em à 24px, etc. Selon l’article Font sizing with rem could be avoided, c’est une fausse bonne idée : des calculs fastidieux nous sont épargnés, certes, mais nous devrons spécifier les nouvelles tailles à chaque fois. On ne peut raisonnablement pas utiliser une taille par défaut de 10px pour le texte si on veut être lu. →
Il n’existe pas de méthode universelle pour faire un site web. Tout au plus peut-on dégager de la pratique quelques principes de conception pour organiser le code HTML et CSS d’un projet à l’autre. Dans cette optique, Jonathan Snook (@snookca) nous fait profiter de son expérience avec SMACSS. Vous l’aurez compris, SMACSS fait la part belle aux règles CSS que l’auteur a divisé en quatre parties : base, maquette (structure), module et état. Cet article est un bref aperçu de la première partie du livre pour vous donner l’eau à la bouche. →
Dans la catégorie des frameworks HTML permettant de faciliter la mise en place d’un projet web, Bootstrap, from Twitter s’est rapidement fait une place de choix à côté de HTML5 Boilerplate et de Zurb Fondation. (Je ne parle pas de Blueprint, 960.gs ou de 940.css version fixe ou fluide qui sont plutôt des frameworks CSS pour aligner des blocs sur une grille de mise en page.) Mais au fait, c’est quoi un framework HTML ? Un tel outil devrait inclure une structure de fichiers normalisée, quelques trucs pour mettre les navigateurs au garde-à-vous et des fichiers HTML servant de fondations pour des projets différents. →
La grille de mise en page 940.css — issue de la technique Calculer une grille de mise en page « typo » avec le nombre d’Or — existe désormais en version fluide avec des valeurs exprimées en pourcentage à la place des pixels. J’ai choisi des pourcentages permettant d’utiliser la grille de 940.css «version fixe» lorsque le .container est réglé sur 940px. Ceci permet de caler les blocs sur la grille fixe placée en background et de remettre une valeur en pourcentage sur le container lorsque la mise en page est terminée. →
940.css est un système de grille de mise en page CSS qui résulte de la fusion des frameworks 960 Grid System, Blueprint CSS et The Simpler Grid dont il reprend les meilleures idées. Il est composé de 24 colonnes de 20 pixels séparées par une gouttière de 20 pixels (adaptation de la technique évoquée dans l’article Calculer une grille de mise en page « typo » avec le nombre d’Or). Soit un interlignage de 20 pixels pour une taille de caractère de 13 pixels en utilisant : font-size: 13px; line-height: 1.539. →
CSS3 Generator est un éditeur de CSS3 créé par Pascal von Seth. Cet outil en ligne permet d’éditer une dizaine de propriétés : background, border, border-radius, gradient, box-shadow, transform, opacity, font et text-shadow. Chaque propriété est modifiable grâce à des sélecteurs de couleur, des champs de saisie ou des curseurs dynamiques selon la nature de la propriété CSS. →
Dans l’article Nouvelle méthode de remplacement d’image en CSS, je vous faisais part d’une nouvelle méthode de remplacement de texte par l’image en CSS proposée par Scott Kellum qui utilise la propriété text-indent avec un décalage en pourcentage. Cette méthode n’étant pas dénuée d’effets de bord (voir dans la suite de l’article), une nouvelle technique a fait son apparition lors de la mise à jour de HTML5 Boilerplate. Je vous propose une traduction de l’article Another CSS image replacement technique écrit par Nicolas Gallagher qui détaille une technique avec font-size : →
