Remplacement d’image en CSS pur

Le principe est celui-ci :

  • pas de JavaScript
  • Le logo est une image de contenu, donc véhiculé à l’aide de <img>, d’un attribut alt, d’une largeur (300px) et d’une hauteur (82px)
  • L’image est transparente (un gif transparent est généré en DATA URI pour éviter une requête inutile)
  • Sur écran de moins de 640px, une image de fond de largeur 300px occupe l’espace
  • Sur écran de plus de 640px, une image de fond de largeur 600px occupe l’espace
  • Un hack permet de faire fonctionner cette astuce sur IE6-IE8

Voir la démonstration

image

Mobitest.me, pour connaître ses informations sur mobiles et tablettes

Voici deux outils très simples pour visualiser les informations importantes lors de vos tests sur terminaux mobiles (smartphones ou tablettes).

Ces deux pages vous renvoient les informations suivantes :

  • Orientation
  • Largeur CSS (width)
  • Largeur du terminal (device-width)
  • pixel-ratio
  • Dimensions du terminal (calculé en JS)
  • Largeur de la fenêtre (viewport)

La seule différence entre les deux pages de tests est que la première est fondée sur un calcul de meta viewport avec width=device-width, et la seconde est basée sur un viewport de initial-scale=1.0

L’un des intérêts de ces outils de tests est de constater les différences qui apparaissent lorsque les terminaux sont en orientation paysage, car Apple (iPhone, iPad) réagit différemment des autres.

Testez vos valeurs sur mobiles

(l’adresse courte est http://mobitest.me)

image

Titre et barre décorative

Cette expérimentation fut l’objet d’un défi “T’es pas cap !” dont voici les contraintes :

  • le code HTML du corps de page se limite à un élément de titre h1
  • le texte du titre est centré horizontalement dans son parent (body)
  • une barre horizontale décorative s’affiche à gauche et à droite du texte du titre, occupant toute la largeur de body (largeur infinie)
  • cette barre de 1px est centrée verticalement par rapport au titre
  • l’arrière-plan de la page ou du titre doit pouvoir changer (en clair, on n’applique pas la couleur de fond de body sur h1)
  • la taille du titre doit pouvoir changer
  • la solution doit fonctionner sur le plus grand nombre de navigateurs possible
  • pas d’image, pas de requête

Voir la démonstration