Responsive tasarım kavramı 2010'da Ethan Marcotte tarafından ortaya atıldığında, elimizdeki tek araç @media query'lerdi. Bugün ise CSS, bileşen bazlı responsive tasarımı mümkün kılan güçlü araçlarla donatılmış durumda. Container Queries, Fluid Typography ve Subgrid ile artık ekran boyutuna değil, bileşenin bulunduğu alana göre tasarım yapıyoruz.
Container Queries: Bileşen Bazlı Responsive
Geleneksel media query'ler viewport genişliğine tepki verir. Ancak aynı bileşen farklı sayfalarda farklı genişliklerdeki alanlara yerleştirilebilir. Container Queries ile bileşen, kendi parent container'ının boyutuna göre stil değiştirir.
/* Container Query Kullanımı */
.card-wrapper {
container-type: inline-size;
container-name: card;
}
@container card (min-width: 400px) {
.card {
display: grid;
grid-template-columns: 200px 1fr;
gap: 1.5rem;
}
}
@container card (max-width: 399px) {
.card {
display: flex;
flex-direction: column;
}
}Bu yaklaşım özellikle tasarım sistemleri ve bileşen kütüphaneleri için devrim niteliğindedir. Bir kart bileşeni, sidebar'a yerleştirildiğinde dikey, ana içerik alanına yerleştirildiğinde yatay düzene otomatik geçebilir.
Fluid Typography: Kırılma Noktası Olmadan
Kırılma noktalarında ani boyut değişimleri yerine, CSS clamp() fonksiyonu ile yazı boyutunun viewport genişliğine göre sürekli ve akıcı şekilde ölçeklenmesini sağlayabiliriz.
/* Fluid Typography */
h1 {
/* Minimum 2rem, maksimum 4.5rem,
arada viewport genişliğine göre akıcı geçiş */
font-size: clamp(2rem, 5vw + 0.5rem, 4.5rem);
line-height: 1.1;
}
p {
font-size: clamp(0.875rem, 1.5vw + 0.25rem, 1.125rem);
line-height: 1.7;
}"Premium bir arayüzün sırrı, kullanıcının ekran boyutunu değiştirdiğinde hiçbir 'kırılma' hissetmemesidir — her şey akışkan olmalıdır."
CSS Subgrid: Grid İçinde Grid
Subgrid, iç içe yerleştirilmiş grid bileşenlerinin üst grid'in satır ve sütun çizgilerine hizalanmasını sağlar. Bu özellikle kart listelerinde başlık, açıklama ve buton yüksekliklerinin mükemmel hizalanması için kritik önem taşır.
Sonuç
Modern CSS, responsive tasarımı viewport'a bağımlılıktan kurtardı. Container Queries ile bileşen bazlı düşünüyor, Fluid Typography ile kırılma noktalarını ortadan kaldırıyor, Subgrid ile piksel mükemmelliğinde hizalama sağlıyoruz. Webify olarak tüm projelerimizde bu modern yaklaşımları benimsiyoruz.