Berekenen met intrinsieke grootten

calc-size() is een CSS-functie om wiskundige bewerkingen uit te voeren op intrinsieke zoekwoorden voor grootte, zoals auto, min-content en fit-content. VERPLICHT: Gebruik calc-size() alleen als je een intrinsieke grootte moet aanpassen met een berekening of beperking. Voor eenvoudige animaties op basis van zoekwoorden (bijvoorbeeld 0 tot auto) moet je interpolate-size: allow-keywords gebruiken.

Stapsgewijze implementatie

1. De intrinsieke basis bepalen: Bepaal welk intrinsiek zoekwoord (auto, min-content, enzovoort) de basis van je berekening moet vormen.
2. Beperkingen definiëren: Gebruik CSS-wiskundefuncties zoals clamp(), min() of max() in het tweede argument om ontwerpbeperkingen af te dwingen voor de intrinsieke grootte.
3. VERPLICHT: Geef een reserveoptie op: Geef altijd een standaard zoekwoord of lengte voor de grootte op vlak voor de property die calc-size() gebruikt, zodat de vormgeving functioneel blijft in niet-ondersteunde browsers.
4. Logische eigenschappen toepassen: Gebruik standaard logische eigenschappen zoals inline-size of block-size om te zorgen dat de berekeningen de schrijfmodus van het document respecteren.
5. Optioneel: Progressive Enhancement: Verpak complexe opmaaklogica of animaties in een @supports (inline-size: calc-size(auto, size + 0px))-blok om geavanceerde functies alleen aan geschikte browsers te leveren.

Basissyntaxis

/* calc-size(<calc-size-basis>, <calc-sum>) — mathematical operations on intrinsic sizing keywords */
.element {
  /* MANDATORY: Always provide a fallback for browsers that do not support calc-size() */
  inline-size: min-content;
  
  /* DO: Use calc-size to modify an intrinsic basis with a calculation or function */
  inline-size: calc-size(min-content, size + 2rem);
}

Geldige basisargumenten (<calc-size-basis>)

Het eerste argument definieert de basisgrootte voor de berekening.

Standaard zoekwoorden:

• auto: De standaardgrootte voor het element.
• min-content: De kleinste grootte die het element kan hebben zonder overloop.
• max-content: De grootte die het element nodig heeft om alle content op één regel te laten passen.
• fit-content: Gelijk aan clamp(min-content, auto, max-content).
• content: Alleen geldig als calc-size() wordt gebruikt in de property flex-basis.

Speciale argumenten:

• any: Een algemene basis die wordt gebruikt als het specifieke intrinsieke type onbekend is of bij geneste berekeningen.
• Genest calc-size(): Maakt berekeningen met meerdere stappen of voorwaardelijke berekeningen mogelijk.
• <calc-sum>: Een specifieke lengte, percentage of wiskundige expressie (bijv. 100px of 20%). Als een vaste waarde als basis wordt gebruikt, is het zoekwoord size nog steeds beschikbaar (maar alleen binnen het tweede argument) en vertegenwoordigt het de opgeloste waarde van die basis.

VERPLICHT: Het zoekwoord size is niet geldig binnen het eerste argument (<calc-size-basis>) zelf. Het is een lokale variabele die alleen bestaat om terug te verwijzen naar de basis vanuit het tweede argument (<calc-sum>).

Geldige berekeningsargumenten (<calc-sum>)

Het tweede argument is de wiskundige expressie.

• Meestal wordt het zoekwoord size gebruikt om naar de waarde van de basis te verwijzen.
• Hoewel het zoekwoord size technisch optioneel is, betekent weglating ervan dat de berekening wordt omgezet in een vaste waarde, waarbij de basis volledig wordt genegeerd.
• De formule kan standaard wiskundige operatoren bevatten (+, -, *, /).
• De waarde kan wiskundige CSS-functies bevatten, zoals clamp(), min(), max() en round().
• VERPLICHT: calc-size() staat maar één intrinsieke grootte (de basis) toe in elke berekening. U kunt geen zoekwoorden voor intrinsieke grootte combineren in dezelfde calc-size()-aanroep.

Toepassingen

Animaties naar en van intrinsieke grootten

Browsers kunnen standaard niet interpoleren tussen een lengte (bijv. 0px) en een intrinsiek zoekwoord (bijv. auto). Als je het zoekwoord in calc-size() plaatst, wordt het een interpolatiewaarde.

De juiste tool voor animaties kiezen

• VERPLICHT: Gebruik interpolate-size: allow-keywords: Voor eenvoudige animaties naar of van intrinsieke formaten (bijv. height: 0 naar height: auto) zonder wiskundige aanpassingen. Dit is de vereiste aanpak voor eenvoudige zoekwoordinterpolatie en moet idealiter wereldwijd worden toegepast via :root.

  :root {
    /* Best practice: Enable keyword interpolation globally */
    interpolate-size: allow-keywords;
  }
  
  .item {
    height: 0;
    transition: height 0.3s ease;
  }
  
  .item.open {
    /* Simple interpolation from 0 to auto now works without calc-size() */
    height: auto;
  }
  

• Gebruik calc-size(): ALLEEN als je wiskundige berekeningen moet uitvoeren op een intrinsieke grootte tijdens een overgang (bijvoorbeeld door opvulling toe te voegen of de grootte te beperken).

.accordion-content {
  display: block;
  overflow: hidden;
  /* MANDATORY: Fallback value for closed state */
  block-size: 0;
  transition: block-size 0.3s ease-out;
}

.accordion-content.open {
  /* MANDATORY: Fallback value for open state */
  block-size: auto;

  /* 
    DO: Use calc-size(auto, ...) to enable animation from 0 to the element's 
    intrinsic size while doing a calculation (in this case, adding a space of 2rem).
  */
  block-size: calc-size(auto, size + 2rem);
}

VERPLICHT: Interpolatie tussen 2 intrinsieke zoekwoorden voor grootte is niet rechtstreeks mogelijk. Eén uiteinde van de overgang moet een lengte of een percentage zijn.

Respecting User Motion Preferences

Animaties die de grootte van grote vormgevingsgebieden wijzigen, kunnen vooral storend zijn voor gebruikers met vestibulaire stoornissen. VERPLICHT: Respecteer altijd de bewegingsvoorkeuren van gebruikers door de mediaquery prefers-reduced-motion te gebruiken om niet-essentiële animaties te vereenvoudigen of te minimaliseren. Veelvoorkomende strategieën zijn beweging helemaal uitzetten, de duur verkorten of indelingsverschuivingen vervangen door subtiele dekkingsovergangen.

.accordion-content {
  opacity: 0;
  transition: block-size 0.3s ease, opacity 0.3s ease;
}

.accordion-content.open {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .accordion-content {
    /* 
       EXAMPLE: Replacing disruptive layout animations with a subtle fade-in.
       Setting the block-size instantly and transitioning opacity 
       provides a clear state change without large-scale motion.
    */
    transition: opacity 1.5s ease;
  }

  .accordion-content.open {
    /* Jump the size instantly */
    block-size: auto;
  }
}

Beperkingen toepassen op intrinsieke formaten

Je kunt calc-size() gebruiken met elke wiskundige CSS-functie, zoals min(), max(), clamp() of round(), om te zorgen dat de intrinsieke grootte van een element binnen de ontwerpgrenzen blijft.

.dynamic-container {
  /* MANDATORY: Always provide a fallback for browsers that do not support calc-size() */
  inline-size: fit-content;

  /* 
    DO: Establish a dynamic size based on content, while:
    1. Enforcing boundaries using CSS math functions (min, clamp, etc.)
    2. Modifying the intrinsic size with fixed or relative offsets
  */
  inline-size: calc-size(fit-content, min(size + var(--extra-space), var(--max-allowed)));
}

Belangrijke overwegingen

• Valkuilen met percentages: Percentages in de <calc-sum> worden berekend op basis van de grootte van de container, niet op basis van het zoekwoord size. calc-size(auto, size + 10%) voegt bijvoorbeeld 10% van de breedte van het bovenliggende element toe aan de breedte van auto, wat kan leiden tot onverwachte resultaten of overloop.
• Vereiste voor berekeningen: VERPLICHT: Gebruik interpolate-size: allow-keywords in plaats van calc-size() voor eenvoudige animaties (bijv. 0 tot auto). Gebruik calc-size() alleen als de indeling dynamische wiskundige aanpassingen aan de intrinsieke basis vereist.
• Prestatieopmerking: Als je boxmodel-property's zoals inline-size of block-size animeert, worden de herberekeningen van de vormgeving geactiveerd. Dit kan veel resources kosten. Gebruik calc-size()-animaties voornamelijk voor elementen die essentieel zijn voor de indeling en waarvoor alternatieven die niet van invloed zijn op de indeling niet voldoende zijn.

Reservestrategieën

calc-size() en interpolate-size zijn progressive enhancements. In browsers die deze eigenschappen niet ondersteunen, worden ze genegeerd en blijft de vormgeving functioneel, hoewel animaties naar intrinsieke zoekwoorden springen in plaats van overgaan. Geef altijd een standaard zoekwoord of lengte op als reserveoptie.

.element {
  /* Fallback for browsers that don't support calc-size() */
  inline-size: fit-content; 
  /* Modern browsers will override the fallback */
  inline-size: calc-size(fit-content, size + 2rem);
}

Alternatieven voor animaties en overgangen

In browsers zonder ondersteuning voor calc-size() of interpolate-size kunnen overgangen met intrinsieke zoekwoorden voor grootte niet worden geïnterpoleerd.

• Graceful degradation: De standaard fallback is een 'instant jump' tussen statussen (bijvoorbeeld van 0 naar auto). Dit is vaak acceptabel omdat de indeling functioneel blijft.
• Verbeterde functionaliteit: Gebruik @supports om complexe vormgevingslogica of extra opmaak toe te passen die alleen zinvol is als soepele intrinsieke animaties mogelijk zijn.
• Vermijd op JS gebaseerde metingen: Je kunt JavaScript gebruiken om elementen te meten en de afmetingen handmatig te animeren, maar dit is vaak onnodig en kan leiden tot layout thrashing. Vertrouwen op de systeemeigen 'instant jump' is de aanbevolen fallback voor moderne web-apps.

Voor animaties is de reservefunctionaliteit een onmiddellijke sprong naar het uiteindelijke formaat. Zo herken je ondersteuning in CSS of JavaScript:

/* CSS Feature Detection */
@supports (inline-size: calc-size(auto, size + 0px)) {
  .element {
    /* Apply advanced logic only when supported */
  }
}

/* JavaScript Feature Detection */
if (CSS.supports('inline-size', 'calc-size(auto, size + 0px)')) {
  // Apply advanced sizing or animations
}