Center du texte verticalement de façon simplissime

Les nouvelles unités de Viewport (vw, vh, vmin, vmax), plutôt "assez bien" supportées offrent la possibilité de centrer verticalement les éléments très facilement sans avoir besoin de connaître la hauteur du parent ou à le transformer en cellule de tableau… simplement en appliquant des règles sur l’élément concerné.

Un exemple simple : je souhaite centrer une ligne de texte en plein milieu de ma fenêtre…. une petite déclaration suffit :

.element { line-height: 100vh; }

Voir la démo

(Bon, pour des cas plus complexes, le code risque de s’allonger un peu ;))

Déplacer les éléments avec CSS Regions

Ma série “comment déplacer visuellement les éléments sans toucher au HTML” compte déjà trois tests :

  1. en CSS2 (avec display: table)
  2. en CSS3 (avec Flexbox)
  3. en JavaScript (avec relocate.js)

À présent que Google a annoncé qu’il laisserait sans doute (temporairement ?) tomber CSS Regions dans son moteur Blink, j’avais envie… de tester CSS Regions :)

Voici donc une 4è manière de réordonner ses blocs à l’écran. CSS Regions est bien plus complet et malléable que les autres techniques : chaque élément de la page (indépendamment de son emplacement dans le DOM) peut être déplacé n’importe où ailleurs.

Le principe général est de stocker ce que l’on veut dans un “panier” que l’on nomme (propriété flow-into), puis de récupérer le contenu de panier n’importe où ailleurs, à l’aide de la propriété flow-from.

Attention, cela ne fonctionne que sur Chrome, en activant un flag, et peut-être plus pour très longtemps malheureusement…

Voir la démo

(tests) Charger les bonnes images en responsive

Suite à un billet récent évoquant mes réflexions au sujet des images responsive, je me suis amusé à produire quelques pages de tests et de chargement conditionnel d’images selon différents cas de figure :

  • chargement selon largeur d’écran
  • chargement selon densité de pixel (Retina)
  • chargement selon connectivité internet

Le principe général était de suivre ces quelques critères :

  • éviter JavaScript si possible
  • conserver dans le HTML un véritable élément <img>
  • conserver les attributs alt et src
  • être le plus compatible possible
  • être le plus léger possible

Les résultats des tests se trouvent ci-dessous :

Démo 1 : largeur d’écran

Démo 2 : densité de pixels

Démo 3 : connectivité

Démo 4 : connectivité + (largeur ou densité)

image

image

image

Des grilles justifiées automatiquement

Suite à la lecture de certaines ressources récentes (dont celle-ci), je me suis amusé à tester la faisabilité de grilles dont les “colonnes” s’adapteraient automatiquement en se répartissant de manière justifiée, et ce quel que soit le nombre d’éléments.

La technique est basée sur display: inline-block et un text-align: justify sur le parent.

Le principal problème réside dans le fameux whitespace inhérent au positionnement en inline-block, mais après quelques bidouilles le résultat semble plutôt réussi (et même compatible avec de très vieux navigateurs tels que IE7).

J’ai même envie de l’ajouter à KNACSS :)

Voir la démonstration sur CodePen

image

Mydevice.io, 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 : http://mydevice.io

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