İçsel Tasarım: İçerik Odaklı Boyutlandırma

Jen Simmons tarafından ortaya atılan içsel tasarım, açık piksel boyutları dayatmak yerine içeriğin kendi boyutunu belirlemesine izin vermek anlamına gelir. CSS, düzenleri kesme noktalarına dayalı geçersiz kılmalar olmadan doğal olarak duyarlı hâle getiren içsel boyutlandırma anahtar sözcükleri sağlar.

min-content: içeriği taşma olmadan sığdıran en küçük boyuttur (metin için her sözcük sınırında satır kaydırır). max-content: içeriği satır kaydırmadan tek satırda görüntülemek için gereken boyuttur. Her ikisi de gerçek içerik boyutlarını yansıtır.

fit-content, min(max-content, max(min-content, available)) ifadesine denktir. Kullanılabilir alana kadar içerikle birlikte büyür, ardından satır kaydırır. Metni kadar geniş olması, ancak kapsayıcısından daha geniş olmaması gereken düğmeler ve etiketler için idealdir.

Izgara şablonu sütunlarında kullanılan minmax(min, max), bir izin en küçük ve en büyük boyutunu belirler. minmax(200px, 1fr), en az 200px genişliğinde olabilen ancak büyüyebilen bir sütun oluşturur. Bu ifade auto-fill ile birleştirildiğinde içsel olarak duyarlı ızgaralar oluşturur.

Her ikisi de satırı mümkün olduğunca çok işle doldurur. auto-fill boş izleri korur (sütun sayısını muhafaza eder). auto-fit boş izleri daraltır; böylece dolu izler alanı dolduracak şekilde genişler. Kullanılabilir genişliği dolduracak şekilde genişlemesi gereken, içerik odaklı düzenler için auto-fit kullanın.

clamp(min, preferred, max), bir değeri sınırlar arasında tutar. font-size: clamp(1rem, 2.5vw, 1.5rem), görüntü alanının genişliğine göre 1rem ile 1.5rem arasında ölçeklenir ve medya sorguları olmadan akışkan tipografi sağlar.

grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)), çok dar görüntü alanlarında tek sütunlu olan ve alan elverdiğinde otomatik olarak sütun ekleyen duyarlı bir ızgara oluşturur. Medya sorgusu yoktur, JavaScript yoktur.

aspect-ratio: 16/9, genişliği değişirken bir öğenin oranlarını korumasını sağlar. width: 100% ile birleştirildiğinde video kapsayıcısı üst öğesini doldurur ve JavaScript ya da yüzde tabanlı dolgu hileleri olmadan her zaman 16:9 oranını korur.

İçsel tasarım, hem yatay hem de dikey yazma kiplerinde çalışan düzenler için CSS mantıksal özellikleriyle (inline-size, block-size, margin-inline) birlikte kullanılır. İçsel boyutlandırma, yazma yönüne otomatik olarak uyum sağlar.

Sabit: width: 300px — içerikten bağımsız olarak her zaman 300px. İçsel: width: fit-content — kısıtlamalara kadar içerik kadar geniş. Sabit düzenlerin uyarlanması için kesme noktaları gerekir; içsel düzenler içeriklerine ve bağlamlarına göre kendilerini uyarlar.

İçsel tasarım, içeriğin boyutunun doğal olarak değiştiği durumlarda en güçlü hâlindedir. İçeriğin bilindiği ve tek biçimli olduğu durumlarda içsel boyutlandırmayı zorunlu kılmak, yarar sağlamadan karmaşıklık ekler. Sabit kullanıcı arayüzü öğeleri (gezinme, araç çubuğu) için açık boyutlar; içerik alanları için içsel boyutlandırma kullanın.

Izgara şablonu sütunlarında auto-fit, auto-fill'den farklı olarak ne yapar?

İçsel tasarım; CSS boyutlandırma anahtar sözcüklerini (min-content, max-content, fit-content), auto-fit ile minmax() işlevini, akışkan ölçeklendirme için clamp() işlevini ve içerik boyutları tarafından yönlendirilen düzenler oluşturmak için aspect-ratio özelliğini kullanır. Sonuç, daha az CSS ve daha az medya sorgusuyla doğal olarak duyarlı düzenlerdir.