Archives des tags : Focus

Pas encore de description pour le tag Focus. Suggérez à l'administrateur du site de d'y remédier.
Intégration web

Notes de lecture — Livre CSS avancées, vers HTML5 et CSS3

Je viens de terminer le dernier livre de Raphaël Goetter intitulé CSS avancées. Vers HTML5 et CSS3 paru aux Editions Eyrolles mi-mars 2011 et préfacé par Daniel Glazman. Ce livre n’est pas une simple mise à jour de CSS2, pratique du design web paru en 2005 ; il s’agit d’une refonte totale avec une orientation «utilisateurs avancés». L’auteur commence par un état des lieux sur les standards du web et leur prise en charge par les principaux navigateurs : Internet Explorer (IE6, IE7, IE8, IE9), Firefox, Chrome, Safari et Opera. Le livre est ensuite divisé en trois parties : 1) tirer le meilleur de CSS, 2) HTML5 et CSS3 : l’innovation en marche, et 3) CSS et applications spécifiques. →

Helper CSS

Menus déroulants et autres fantaisies avec :hover :focus :active :target pour IE6

Menu déroulant Suckerfish — réécriture du très populaire Suckerfish Dropdown pour implémenter des menus déroulants sur plusieurs niveaux. Ce script de 12 lignes crée une classe sfHover sur un élément li pour émuler la pseudo-classe :hover pour Internet Explorer qui ne l’applique que sur les ancres a, notamment. Ce script est léger, accessible, basé sur les feuilles de styles et non-intrusif (à part dans la feuille de style puisqu’il faut doubler le sélecteur li:hover avec la classeli.sfHover). →

HTML & CSS

5 Reset CSS à la loupe pour une remise à zéro des valeurs par défaut des navigateurs

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 padding-left: 40px pour le même rendu. Dans ces conditions, il est tentant de vouloir mettre tous ces agents utilisateurs au garde-à-vous… →

Ergonomie & Accessibilité

Votre blog sur un téléphone portable, really ready ?

Votre blog sur un téléphone portable, really ready ? Des fois c’est facile, des fois… pas facile. Pourtant, un site web ou un blog devraient être accessibles depuis n’importe quel périphérique, y compris un téléphone portable. Après la lecture du billet de Nico, j’ai testé mon blog sur le site .mobi qui a évalué ma page d’accueil sur une échelle de 1 à 5 en fonction de sa lisibilité sur un petit écran, de sa taille et de l’estimation de sa vitesse (ou coût) de chargement. Le tout en une trentaine de tests. Strict is the way… →