Yerleşik Boyutlarla Hesapla

calc-size(); auto, min-content ve fit-content gibi içsel boyutlandırma anahtar kelimeleri üzerinde matematiksel işlemler gerçekleştirmek için kullanılan bir CSS işlevidir. ZORUNLU: calc-size() öğesini yalnızca bir hesaplama veya kısıtlama ile içsel boyutu değiştirmeniz gerektiğinde kullanın.Anahtar kelimeye dayalı basit animasyonlar (ör. 0 - auto) için interpolate-size: allow-keywords kullanmanız gerekir.

Uygulama Adımları

1. İçsel temeli belirleyin: Hesaplamanızın temelini hangi içsel anahtar kelimenin (auto, min-content vb.) oluşturması gerektiğini belirleyin.
2. Sınırları tanımlama: İçsel boyutta tasarım sınırlarını uygulamak için ikinci bağımsız değişkende clamp(), min() veya max() gibi CSS matematik işlevlerini kullanın.
3. ZORUNLU: Yedek sağlayın: Düzenin desteklenmeyen tarayıcılarda çalışmaya devam etmesi için her zaman calc-size() kullanan özellikten hemen önce standart bir boyutlandırma anahtar kelimesi veya uzunluğu belirtin.
4. Mantıksal Özellikleri Uygula: Hesaplamaların belgenin yazma moduna uygun olmasını sağlamak için varsayılan olarak inline-size veya block-size gibi mantıksal özellikleri kullanın.
5. İsteğe bağlı: Progresif geliştirme: Karmaşık düzen mantığını veya animasyonları bir @supports (inline-size: calc-size(auto, size + 0px)) bloğuna sarmalayarak ileri seviye özellikleri yalnızca uyumlu tarayıcılara sunun.

Temel Söz Dizimi

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

Geçerli Temel Bağımsız Değişkenler (<calc-size-basis>)

İlk bağımsız değişken, hesaplama için "taban" boyutu tanımlar.

Standart Anahtar Kelimeler:

• auto: Öğenin varsayılan boyutu.
• min-content: Öğenin taşmadan alabileceği en küçük boyut.
• max-content: Öğenin tüm içeriği tek bir satıra sığdırmak için kapladığı boyut.
• fit-content: clamp(min-content, auto, max-content) ile eşdeğerdir.
• content: Yalnızca calc-size(), flex-basis özelliği içinde kullanıldığında geçerlidir.

Özel Bağımsız Değişkenler:

• any: Belirli iç tür bilinmediğinde veya hesaplamalar iç içe yerleştirildiğinde kullanılan genel bir temel.
• İç içe yerleştirilmiş calc-size(): Çok adımlı veya koşullu hesaplamalara olanak tanır.
• <calc-sum>: Belirli bir uzunluk, yüzde veya matematiksel ifade (ör. 100px veya 20%). Temel olarak sabit bir değer kullanıldığında size anahtar kelimesi hâlâ kullanılabilir (ancak yalnızca ikinci bağımsız değişkende) ve bu temelin çözümlenen değerini temsil eder.

ZORUNLU: size anahtar kelimesi, ilk bağımsız değişkenin (<calc-size-basis>) kendisinde geçerli değildir. Yalnızca ikinci bağımsız değişkenden (<calc-sum>) temele geri başvurmak için kullanılan yerel bir değişkendir.

Geçerli Hesaplama Bağımsız Değişkenleri (<calc-sum>)

İkinci bağımsız değişken, matematiksel ifadedir.

• Genellikle tabanın değerini belirtmek için size anahtar kelimesini kullanır.
• size anahtar kelimesi teknik olarak isteğe bağlı olsa da bu kelimenin kullanılmaması, hesaplamanın temeli tamamen yok sayarak sabit bir değerle sonuçlanacağı anlamına gelir.
• Standart matematik operatörlerini (+, -, *, /) içerebilir.
• clamp(), min(), max() ve round() gibi CSS matematik işlevlerini içerebilir.
• ZORUNLU: calc-size(), her hesaplamada yalnızca tek bir iç boyut değerine (temel) izin verir. Aynı calc-size() çağrısında içsel boyutlandırma anahtar kelimelerini karıştıramazsınız.

Kullanım Alanları

Yerleşik boyutlara ve boyutlardan animasyon oluşturma

Varsayılan olarak tarayıcılar, bir uzunluk (ör. 0px) ile içsel bir anahtar kelime (ör. auto) arasında interpolasyon yapamaz. Anahtar kelimeyi calc-size() içine sarmak, interpolasyon yapılabilir bir değer haline getirir.

Animasyonlar için Doğru Aracı Seçme

• ZORUNLU: interpolate-size: allow-keywords kullanın: Herhangi bir matematiksel değişiklik olmadan, iç boyutlara veya iç boyutlardan basit animasyonlar için (ör. height: 0 - height: auto). Bu, basit anahtar kelime interpolasyonu için gerekli yaklaşımdır ve ideal olarak :root aracılığıyla genel olarak uygulanmalıdır.

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

• calc-size() kullanın: YALNIZCA bir geçiş sırasında içsel boyut üzerinde matematiksel hesaplamalar yapmanız gerektiğinde (ör. dolgu ekleme veya boyutu sabitleme).

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

ZORUNLU: İki içsel boyutlandırma anahtar kelimesi arasında doğrudan interpolasyon mümkün değildir. Geçişin bir ucu uzunluk veya yüzde olmalıdır.

Kullanıcıların Hareket Tercihlerine Saygı Gösterme

Büyük düzen alanlarının boyutunu değiştiren animasyonlar, özellikle vestibüler bozuklukları olan kullanıcılar için rahatsız edici olabilir. ZORUNLU: Temel olmayan animasyonları basitleştirmek veya en aza indirmek için prefers-reduced-motion medya sorgusunu kullanarak kullanıcıların hareket tercihlerine her zaman uyun. Yaygın stratejiler arasında hareketi tamamen devre dışı bırakma, süreyi azaltma veya düzen kaymalarını hafif opaklık geçişleriyle değiştirme yer alır.

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

Yerleşik Boyutlara Kısıtlama Uygulama

Bir öğenin iç boyutunun tasarım sınırları içinde kalmasını sağlamak için calc-size() özelliğini min(), max(), clamp() veya round() gibi herhangi bir CSS matematik işleviyle kullanabilirsiniz.

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

Önemli Noktalar

• Yüzdeyle ilgili sorunlar: <calc-sum> içindeki yüzdeler, size anahtar kelimesine göre değil, kapsayıcının boyutuna göre çözümlenir. Örneğin, calc-size(auto, size + 10%), üst öğenin genişliğinin% 10'unu öğenin auto genişliğine ekler. Bu da beklenmedik sonuçlara veya taşmalara neden olabilir.
• Hesaplama şartı: ZORUNLU: Basit animasyonlar için calc-size() yerine interpolate-size: allow-keywords kullanın (ör. 0 yerine auto). calc-size() yalnızca düzen, içsel tabanda dinamik matematiksel ayarlamalar gerektirdiğinde kullanılmalıdır.
• Performans Notu: inline-size veya block-size gibi kutu modeli özelliklerine animasyon eklemek, düzenin yeniden hesaplanmasını tetikler. Bu da maliyetli olabilir. calc-size() animasyonlarını, öncelikle düzen açısından kritik olan ve düzen dışı alternatiflerin yetersiz kaldığı öğeler için kullanın.

Yedek stratejiler

calc-size() ve interpolate-size, progresif geliştirmelerdir. Bu özellikleri desteklemeyen tarayıcılarda özellikler yoksayılır ve düzen çalışmaya devam eder ancak içsel anahtar kelimelere yönelik animasyonlar geçiş yapmak yerine atlar. Yedek olarak her zaman standart bir anahtar kelime veya uzunluk sağlayın.

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

Animasyon ve Geçiş Yedekleri

calc-size() veya interpolate-size desteği olmayan tarayıcılarda, içsel boyutlandırma anahtar kelimelerini içeren geçişler enterpolasyon yapamaz.

• Kontrollü Azalma: Varsayılan yedek, durumlar arasında "anlık geçiş"tir (ör. 0 ile auto arasında). Düzen işlevsel kaldığı için bu genellikle kabul edilebilir.
• Gelişmiş Deneyim: Yalnızca sorunsuz iç animasyonlar mümkün olduğunda anlamlı olan karmaşık düzen mantığını veya ek stilleri uygulamak için @supports kullanın.
• JS tabanlı ölçümlerden kaçının: Öğeleri ölçmek ve boyutlarını manuel olarak canlandırmak için JavaScript kullanabilirsiniz ancak bu genellikle gereksizdir ve düzen karmaşasına yol açabilir. Modern web uygulamaları için önerilen yedek, yerel "anında atlama" özelliğini kullanmaktır.

Animasyonlarda yedek deneyim, nihai boyuta anında geçiş şeklinde olur. CSS veya JavaScript'te desteği algılamak için:

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