Oblicz z użyciem pierwotnych rozmiarów

calc-size() to funkcja CSS do wykonywania operacji matematycznych na słowach kluczowych dotyczących rozmiaru wewnętrznego, takich jak auto, min-content i fit-content. OBOWIĄZKOWO: używaj calc-size() tylko wtedy, gdy musisz zmodyfikować rozmiar wewnętrzny za pomocą obliczeń lub ograniczeń.W przypadku prostych animacji opartych na słowach kluczowych (np. 0 do auto) musisz używać interpolate-size: allow-keywords.

Etapy wdrażania

1. Określ podstawę wewnętrzną: określ, które słowo kluczowe (auto, min-content itp.) powinno stanowić podstawę obliczeń.
2. Zdefiniuj ograniczenia: użyj funkcji matematycznych CSS, takich jak clamp(), min() lub max(), w drugim argumencie, aby wymusić ograniczenia projektowe dotyczące rozmiaru wewnętrznego.
3. OBOWIĄZKOWE: podaj wartość zastępczą: zawsze deklaruj standardowe słowo kluczowe lub długość rozmiaru bezpośrednio przed właściwością za pomocą calc-size(), aby układ działał w nieobsługiwanych przeglądarkach.
4. Stosuj właściwości logiczne: domyślnie używaj właściwości logicznych, takich jak inline-size lub block-size, aby obliczenia uwzględniały tryb pisania dokumentu.
5. Opcjonalnie: progresywne ulepszanie – umieść złożoną logikę układu lub animacje w bloku @supports (inline-size: calc-size(auto, size + 0px)), aby udostępniać funkcje zaawansowane tylko przeglądarkom, które je obsługują.

Podstawowa składnia

/* 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);
}

Prawidłowe argumenty podstawowe (<calc-size-basis>)

Pierwszy argument określa „podstawowy” rozmiar do obliczeń.

Standardowe słowa kluczowe:

• auto: domyślny rozmiar elementu.
• min-content: najmniejszy rozmiar, jaki może mieć element bez przepełnienia.
• max-content: rozmiar elementu, który pozwala zmieścić całą treść w jednym wierszu.
• fit-content: odpowiednik clamp(min-content, auto, max-content).
• content: prawidłowa tylko wtedy, gdy właściwość calc-size() jest używana w ramach właściwości flex-basis.

Argumenty specjalne:

• any: ogólna podstawa używana, gdy konkretny typ wewnętrzny jest nieznany lub gdy obliczenia są zagnieżdżone.
• Zagnieżdżone calc-size(): umożliwia obliczenia wieloetapowe lub warunkowe.
• <calc-sum>: określona długość, wartość procentowa lub wyrażenie matematyczne (np. 100px lub 20%). Gdy jako podstawy używa się stałej wartości, słowo kluczowe size jest nadal dostępne (ale tylko w drugim argumencie) i reprezentuje rozwiązaną wartość tej podstawy.

MANDATORY: słowo kluczowe size jest nieprawidłowe w pierwszym argumencie (<calc-size-basis>). Jest to zmienna lokalna, która istnieje tylko po to, aby odwoływać się do podstawy w drugim argumencie (<calc-sum>).

Prawidłowe argumenty obliczeń (<calc-sum>)

Drugi argument to wyrażenie matematyczne.

• Zwykle używa słowa kluczowego size, aby odwołać się do wartości podstawy.
• Chociaż słowo kluczowe size jest opcjonalne, jego pominięcie oznacza, że obliczenia będą miały stałą wartość, a podstawa zostanie całkowicie zignorowana.
• Może zawierać standardowe operatory matematyczne (+, -, *, /).
• Może zawierać funkcje matematyczne CSS, takie jak clamp(), min(), max() i round().
• OBOWIĄZKOWO: calc-size() zezwala na jedną wartość rozmiaru wewnętrznego (podstawę) w każdym obliczeniu. Nie możesz mieszać słów kluczowych dotyczących rozmiaru wewnętrznego w tym samym wywołaniu calc-size().

Przypadki użycia

Animowanie do i z rozmiarów wewnętrznych

Domyślnie przeglądarki nie mogą interpolować między długością (np. 0px) a wewnętrznym słowem kluczowym (np. auto). Umieszczenie słowa kluczowego w calc-size() sprawia, że staje się ono wartością interpolowaną.

Wybór odpowiedniego narzędzia do animacji

• OBOWIĄZKOWO: używaj interpolate-size: allow-keywords: w przypadku prostych animacji do lub z rozmiarów wewnętrznych (np. height: 0 do height: auto) bez żadnych modyfikacji matematycznych. Jest to wymagane podejście w przypadku prostej interpolacji słów kluczowych i najlepiej stosować je globalnie za pomocą :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;
  }
  

• Używaj calc-size(): TYLKO wtedy, gdy musisz wykonać obliczenia matematyczne na rozmiarze wewnętrznym podczas przejścia (np. dodawanie dopełnienia lub ograniczanie rozmiaru).

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

MANDATORY: Interpolation between two intrinsic sizing keywords is not possible directly. Jedna strona przejścia musi być długością lub wartością procentową.

Szanowanie preferencji użytkownika dotyczących ruchu

Animacje, które zmieniają rozmiar dużych obszarów układu, mogą być szczególnie uciążliwe dla użytkowników z zaburzeniami przedsionkowymi. OBOWIĄZKOWO: zawsze bierz pod uwagę preferencje użytkownika dotyczące ruchu, używając zapytania o media prefers-reduced-motion, aby uprościć lub zminimalizować nieistotne animacje. Typowe strategie obejmują całkowite wyłączenie ruchu, skrócenie czasu trwania lub zastąpienie przesunięć układu subtelnymi przejściami przezroczystości.

.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;
  }
}

Stosowanie ograniczeń do rozmiarów wewnętrznych

Możesz używać calc-size() z dowolną funkcją matematyczną CSS, np. min(), max(), clamp() lub round(), aby mieć pewność, że rozmiar wewnętrzny elementu nie przekroczy granic projektu.

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

Kluczowe kwestie

• Pułapki związane z wartościami procentowymi: wartości procentowe w funkcji <calc-sum> są obliczane na podstawie rozmiaru kontenera, a nie słowa kluczowego size. Na przykład calc-size(auto, size + 10%) dodaje 10% szerokości elementu nadrzędnego do szerokości auto elementu, co może prowadzić do nieoczekiwanych wyników lub przepełnienia.
• Wymagania dotyczące obliczeń: OBOWIĄZKOWE: w przypadku prostych animacji (np. 0 do auto) używaj interpolate-size: allow-keywords zamiast calc-size(). calc-size() należy używać tylko wtedy, gdy układ wymaga dynamicznych korekt matematycznych podstawy wewnętrznej.
• Uwaga dotycząca wydajności: animowanie właściwości modelu pudełkowego, takich jak inline-size lub block-size, powoduje ponowne obliczanie układu, co może być kosztowne. Animacji calc-size() używaj głównie w przypadku elementów o kluczowym znaczeniu dla układu, gdy alternatywne rozwiązania nie są wystarczające.

Strategie zastępcze

calc-size() i interpolate-size to progresywne ulepszenia. W przeglądarkach, które ich nie obsługują, właściwości zostaną zignorowane, a układ pozostanie funkcjonalny, chociaż animacje do słów kluczowych będą przeskakiwać, a nie przechodzić. Zawsze podawaj standardowe słowo kluczowe lub długość jako kreację zastępczą.

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

Animacje i przejścia zastępcze

W przeglądarkach, które nie obsługują calc-size() ani interpolate-size, przejścia obejmujące słowa kluczowe dotyczące rozmiaru wewnętrznego nie będą interpolowane.

• Łagodna degradacja: domyślna opcja zastępcza to „natychmiastowy przeskok” między stanami (np. z 0 do auto). Często jest to akceptowalne, ponieważ układ pozostaje funkcjonalny.
• Lepsze wrażenia: użyj @supports, aby zastosować złożoną logikę układu lub dodatkowe style, które mają sens tylko wtedy, gdy możliwe są płynne animacje wewnętrzne.
• Unikaj pomiarów opartych na JS: chociaż możesz używać JavaScriptu do mierzenia elementów i ręcznego animowania ich wymiarów, często jest to niepotrzebne i może prowadzić do problemów z układem. W przypadku nowoczesnych aplikacji internetowych zalecanym rozwiązaniem zastępczym jest poleganie na natywnym „natychmiastowym przeskoku”.

W przypadku animacji kreacja zastępcza będzie od razu wyświetlana w rozmiarze końcowym. Aby wykryć obsługę w CSS lub 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
}