Topics

Pour ajuster les margesclamp()De nos jours, on utilise couramment des implémentations qui permettent à la valeur de varier entre une valeur minimale et une valeur maximale.

C'est très utile pour la réactivité,Zoom d'accessibilitéCela dit, il y a un petit hic.

Exemples courants de clamp()

Par exemple, les margesclamp()Si vous souhaitez le modifier, vous l'écririez probablement comme ceci :

:root {
  --clamp-base: 16;
  --clamp-viewport-min: 375;
  --clamp-viewport-max: 1440;

  --spacing-lg-min: 24;
  --spacing-lg-max: 48;

  --spacing-lg-slope: calc(
    (var(--spacing-lg-max) - var(--spacing-lg-min)) / (var(--clamp-viewport-max) - var(--clamp-viewport-min))
  );
  --spacing-lg-intersection: calc(
    (var(--spacing-lg-max) - var(--clamp-viewport-max) * var(--spacing-lg-slope)) / var(--clamp-base)
  );
  --spacing-lg: clamp(
    calc(var(--spacing-lg-min) / var(--clamp-base) * 1rem),
    calc(var(--spacing-lg-intersection) * 1rem + 100 * var(--spacing-lg-slope) * 1vw),
    calc(var(--spacing-lg-max) / var(--clamp-base) * 1rem)
  );
}

Je n'entrerai pas dans les détails ici, mais

• Sur les smartphones--spacing-lg-minTaille
• Sur PC--spacing-lg-maxTaille
• Pendant cette période, il se dilate et se contracte de manière régulière et variable.

C'est donc un modèle très facile à utiliser.

Quels sont les pièges de l'accessibilité ?

Le problème est que,Critère de succès 1.4.4 des WCAG 2.0 « Redimensionner le texte »Il est temps d'essayer de répondre.

Cette norme a été initialement établie avant que les smartphones ne se généralisent, dans le but de permettre l'affichage d'images même agrandies jusqu'à 200 % sur un PC, mais les mêmes conditions s'appliquent aux navigateurs pour smartphones.

En fait, ce phénomène a tendance à se produire lorsqu'on effectue un zoom à 200 % sur un smartphone.

1. En agrandissant (zoomer) le texte,remBasé sur les unitésS'étendre aux margesCela finit par arriver.
2. Cela vous permet de créer unMarges excessivement largesCela devient ainsi.
3. Par conséquent,La zone d'affichage du contenu est extrêmement étroite.Cela peut entraîner une mise en page déformée et rendre la page difficile à lire.

Cependant, en réalité, même sur les sites web gouvernementaux étrangers où la conformité aux WCAG est obligatoire, force est de constater que peu d'efforts sont déployés. Cela s'explique probablement par des raisons de rentabilité et par le fait qu'un grossissement de 200 % sur les smartphones semble peu pertinent. De ce fait, sur le terrain, on peut considérer que « ce ne sera pas un problème majeur si nous ne le faisons pas ».

Comment résoudre ce problème ?

Affecté par l'agrandissement du texteremPlutôt,vwUtilisez des unités basées sur la fenêtre d'affichage telles queNe créez pas de marges plus grandes que nécessaire, même en zoomant.Il est important de le faire.

maisvwSi vous spécifiez uniquementclamp()Cela ne tire pas parti de l'avantage de pouvoir contrôler les valeurs minimales et maximales.

C'est là quemin()C'est une fonction !

min()Utilisera la plus petite valeur parmi celles transmises. Utilisez cette caractéristique pour basculer entre les modes normal et étendu.

Voici comment l'écrire.

--spacing-lg: min(
  calc(var(--spacing-lg-min) / var(--clamp-viewport-min) * 100vw),
  clamp(
    calc(var(--spacing-lg-min) / var(--clamp-base) * 1rem),
    calc(var(--spacing-lg-intersection) * 1rem + 100 * var(--spacing-lg-slope) * 1vw),
    calc(var(--spacing-lg-max) / var(--clamp-base) * 1rem)
  )
);

Lorsque ceci est affiché à 375 px CSS, la première valeur de min est--spacing-lg-minLa valeur de 24px est convertie en vw, ce qui donne 6,4vw.

clamp()La valeur minimale est de 1,5 rem = 24 px, mais lorsqu'elle est agrandie de 200 %, elle devient 48 px ; la valeur de 6,4 vw à gauche est donc plus petite et sera appliquée.

Autrement dit,

• Normalement (indiqué par 100 %) :
  • clamp()La valeur devwElle sera inférieure à la valeur de référence.
  • min()Comme c'est le plus petit qui est utilisé,clamp()est efficace et l'affichage changera en fonction de la largeur de l'écran.
• Zoom avant (200 %) :
  • clamp()Dansremdevient plus grand avec l'expansion,vwLa valeur de référence est inférieure.
  • vwLa valeur standard est appliquée et les marges sont fixées en pourcentage de la largeur de l'écran, empêchant ainsi un agrandissement excessif.

Maintenant, "Commodité réactive"et"Considérations d'accessibilité« Vous pouvez réussir les deux ! »

*D’ailleurs, lors de la visualisation sur un PC, il est souvent préférable d’agrandir l’image en incluant les marges afin de préserver l’équilibre de la composition.--clamp-viewport-minCette norme s'applique uniquement aux smartphones.

Comparer le comportement réel

La partie supérieure est uniquement à pince, la partie inférieure est minimale + pince.

Si vous zoomez à 200 % sur votre smartphone, vous pourrez clairement voir la différence.

* Vous pouvez agrandir la page en cliquant sur l'icône située à gauche de la barre d'adresse sur Safari (iOS) et sur l'icône située en haut à droite sur Chrome (Android).

résumé

• La fonction clamp() est utile pour les ajustements de marge réactifs.
• Cependant, si vous agrandissez l'image, elle risque de déborder sur les marges, ce qui peut entraîner des problèmes de mise en page.
• Combiné avec min(),Variable en état normal, contrôlée en cas d'augmentation de volumeCela permet une réponse équilibrée.

Si vous êtes soucieux de la conformité aux WCAG, il est rassurant d'intégrer de telles implémentations. Les implémentations qui « prennent en compte le grossissement à 200 % sur les smartphones » sont encore rares, mais elles réduisent les risques d'accessibilité sans compromettre la lisibilité normale.

D'ailleurs, si vous souhaitez effectuer des ajustements plus précis que les marges, vous pouvez également spécifier des requêtes média pour des points de rupture plus étroits.

@media (max-width: 239px) {
  /* 拡大時に適用したいCSS */
}

Par exemple, si vous agrandissez un écran de 375 px de large à 200 %, le navigateur calculera la largeur de la fenêtre d'affichage comme étant « la moitié de cette taille (environ 188 px) » afin de correspondre à cette condition étroite.

La valeur de 239 px n'est qu'un exemple. Choisissez une valeur qui permette un agrandissement futur de l'écran, tout en veillant à ce qu'elle n'affecte pas l'affichage normal.

Combiner "clamp() + min()" avec "narrow breakpoint media queries" permet une prise en charge de l'accessibilité plus flexible et fiable !