Topics

Om marges aan te passenclamp()Tegenwoordig worden vaak implementaties gebruikt waarbij de waarde kan variëren tussen een minimum- en maximumwaarde.

Het is erg handig voor de responsiviteit,ToegankelijkheidszoomMet dat in gedachten is er wel een addertje onder het gras.

Veelvoorkomende voorbeelden van clamp()

Bijvoorbeeld de margesclamp()Als je het wilt aanpassen, kun je het het beste zo schrijven:

: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)
  );
}

Ik zal hier niet in details treden, maar

• Op smartphones--spacing-lg-minMaat
• Op pc--spacing-lg-maxMaat
• Gedurende deze tijd is het variabel en breidt het zich geleidelijk uit.

Het is dus een heel eenvoudig patroon om te gebruiken.

Wat zijn de valkuilen van toegankelijkheid?

Het probleem is,WCAG 2.0 Succescriterium 1.4.4 "Tekstgrootte wijzigen"Het is tijd om te proberen te reageren.

Deze standaard werd oorspronkelijk opgesteld voordat smartphones gemeengoed werden, met de bedoeling om afbeeldingen zelfs bij een vergroting tot 200% op een pc te kunnen bekijken. Voor smartphonebrowsers gelden echter dezelfde voorwaarden.

Dit fenomeen doet zich vooral voor als u op een smartphone inzoomt tot 200%.

1. Door de tekst te vergroten (zoomen),remEenheidsgebaseerdUitbreiden naar de margesUiteindelijk gebeurt het toch.
2. Hiermee kunt u eenOverdreven brede margesHet wordt zoiets.
3. Als gevolg hiervan,Het weergavegebied voor de inhoud is extreem smal.Dit kan leiden tot een vervormde lay-out en ervoor zorgen dat de pagina moeilijk leesbaar is.

*Maar in werkelijkheid, zelfs als je kijkt naar buitenlandse overheidswebsites waar WCAG-naleving verplicht is, lijkt het erop dat ze niet veel doen. Dit komt waarschijnlijk door problemen met kosteneffectiviteit en doordat er op smartphones sowieso al weinig behoefte lijkt te zijn aan 200% vergroting. Op praktijkniveau kan dus worden gesteld dat "het geen groot probleem zal zijn als we het niet doen."

Hoe kan dit probleem worden opgelost?

Beïnvloed door tekstvergrotingremIn plaats van,vwGebruik viewport-gebaseerde eenheden zoalsMaak de marges niet groter dan nodig, zelfs niet bij inzoomenHet is belangrijk om dat te doen.

MaarvwAls u alleen opgeeftclamp()Hierbij wordt geen gebruik gemaakt van het voordeel dat men de minimale en maximale waarden kan bepalen.

Dat is waarmin()Het is een functie!

min()gebruikt de "kleinste waarde" uit de doorgegeven waarden. Gebruik deze eigenschap om de toegepaste waarde te wisselen tussen de normale en de uitgebreide modus.

Dit is hoe je het schrijft.

--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)
  )
);

Wanneer dit wordt weergegeven op 375 CSS px, is de eerste waarde van min--spacing-lg-minDe waarde van 24px wordt omgezet naar vw, wat resulteert in 6,4vw.

clamp()De minimale waarde is 1,5rem = 24px, maar bij een vergroting van 200% wordt dit 48px. In dat geval is de 6,4vw aan de linkerkant kleiner en wordt deze toegepast.

Met andere woorden,

• Normaal gesproken (aangegeven met 100%):
  • clamp()De waarde vanvwDeze zal kleiner zijn dan de referentiewaarde.
  • min()Omdat de kleinere wordt gebruikt,clamp()is effectief en de weergave verandert afhankelijk van de schermbreedte.
• Ingezoomd (200%):
  • clamp()Binneninremwordt groter met uitbreiding,vwDe referentiewaarde is kleiner.
  • vwDe standaardwaarde wordt toegepast en de marges worden vastgelegd als percentage van de schermbreedte, waardoor overmatige vergroting wordt voorkomen.

Nu, "Responsief gemak"En"Toegankelijkheidsoverwegingen"Je kunt beide bereiken!

*Overigens is het bij het bekijken op een pc vaak beter om de afbeelding te vergroten, inclusief de marges, om de balans van het ontwerp te behouden.--clamp-viewport-minDeze standaard geldt alleen voor smartphones.

Vergelijk het werkelijke gedrag

De bovenkant is alleen een klem, de onderkant is min+klem.

Als je op je smartphone inzoomt tot 200%, zie je het verschil duidelijk.

* U kunt de pagina vergroten door op het pictogram links in de adresbalk te klikken in iOS Safari, en door op het pictogram rechtsboven te klikken in Android Chrome.

samenvatting

• clamp() is handig voor responsieve marge-aanpassingen
• Als u de afbeelding echter vergroot, kan deze tot aan de randen worden uitgebreid, wat tot lay-outproblemen kan leiden.
• Gecombineerd met min(),Variabel bij normale toestand, gecontroleerd bij vergrotingDit zorgt voor een evenwichtig antwoord.

Als u zich bewust bent van WCAG-naleving, is het geruststellend om dergelijke implementaties te implementeren. Implementaties die "rekening houden met 200% vergroting op smartphones" zijn nog steeds zeldzaam, maar ze verminderen de toegankelijkheidsrisico's zonder de normale leesbaarheid in gevaar te brengen.

Als u overigens andere fijnere aanpassingen wilt maken dan alleen de marges, kunt u ook media query's opgeven voor smallere breekpunten.

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

Als u bijvoorbeeld een 375px breed scherm vergroot naar 200%, berekent de browser de viewportbreedte als 'de helft van die grootte (ongeveer 188px)', zodat aan deze smalle voorwaarde kan worden voldaan.

*De waarde van 239 px is slechts een voorbeeld. Kies een waarde die ruimte laat voor toekomstige schermvergroting, maar pas deze ook aan zodat de normale weergave niet wordt beïnvloed.

Door "clamp() + min()" te combineren met "narrow breakpoint media queries" ontstaat er een flexibelere en betrouwbaardere ondersteuning voor toegankelijkheid!