CSS kapsayıcı sorgularının gücünden yararlanma: Netflix ekibinden alınan dersler

Jeremy Weeks
Jeremy Weeks
Stefan Heymanns
Stefan Heymanns

Kapsayıcı sorguları, geliştiricilerin duyarlı tasarıma yaklaşımında devrim yarattı. Netflix ekibi, geliştirme sürecini kolaylaştırma, esnekliği artırma ve performansı iyileştirme konusunda bu sorguların ne kadar etkili olabileceğini birinci elden deneyimledi. Bu gönderide, kapsayıcı sorgularını kullanmanın temel avantajları açıklanmakta ve bu avantajlar eski yöntemlerle (özellikle de sayfa düzeni kontrolü için JavaScript'e dayanan yöntemlerle) karşılaştırılmaktadır. Her bir noktayı açıklamak için kod örnekleri içerir. Bu örnekler, kapsayıcı sorgularının geliştirici olarak hayatınızı nasıl çok daha kolay hale getirebileceğini gösterir.

1. Basitleştirilmiş bileşen tasarımı, "aşağıdan yukarıya" ve "yukarıdan aşağıya" yaklaşımları

Netflix ekibinin yaşadığı en önemli değişimlerden biri, "üstten aşağı" tasarım yaklaşımından "aşağıdan yukarıya" yaklaşıma geçişti. Kapsayıcı sorgularından önce, üst kapsayıcıların alt kapsayıcılarının düzen gereksinimlerini tam olarak bilmesi gerekiyordu. Kapsayıcı sorgularında bu mantık tersine çevrilir. Böylece, alt bileşenlerin kendi kapsayıcılarının boyutuna göre düzenlerini kontrol etmesine olanak tanınmış olur. Bu, üst öğenin rolünü basitleştirir ve koddaki düzen mantığının miktarını azaltır.

Örnek: Kapsayıcı sorguları ile medya sorguları ve JavaScript karşılaştırması

Önce (JavaScript gerekli):

/* Layout with media queries */
.card {
    width: 100%;
}

@media (min-width: 600px) {
    .card {
        width: 50%;
    }
}

@media (min-width: 900px) {
    .card {
        width: 33.33%;
    }
}
// JavaScript to detect parent container size
const container = document.querySelector('.container');
const card = document.querySelector('.card');

function adjustLayout() {
    if (window.innerWidth >= 900) {
        card.style.width = '33.33%';
    } else if (window.innerWidth >= 600) {
        card.style.width = '50%';
    } else {
        card.style.width = '100%';
    }
}

window.addEventListener('resize', adjustLayout);
adjustLayout();

Sonra:

/* Container Query */
.container {
    container-type: inline-size;
}

.card {
    width: 100%;
}

@container (min-width: 600px) {
    .card {
        width: 50%;
    }
}

@container (min-width: 900px) {
    .card {
        width: 33.33%;
    }
}

Bu örnekte, üst kapsayıcının artık alt düzeni yönetmesinin gerekmediği gösterilmektedir. @container kuralı, .card öğesinin doğrudan kapsayıcısının boyutuna tepki vermesini sağlar. Bu sayede düzen mantığı basitleştirilir ve JavaScript'e olan ihtiyaç tamamen ortadan kaldırılır.

2. Karmaşık medya sorguları olmadan duyarlı olma

Netflix ekibi, kapsayıcı sorgularının özellikle mobil öncelikli tasarım için duyarlılığı nasıl basitleştirdiğini keşfetti. Karmaşık medya sorguları yazmak yerine, kapsayıcılarının boyutuna göre ayarlanan ve çeşitli ekran boyutları ile cihazlarda dinamik düzenlere olanak tanıyan yeniden kullanılabilir bileşenler oluşturabilirsiniz. Bu, özellikle mobil trafiğin hakim olduğu Netflix gibi uygulamalar için yararlıdır.

Örnek: Kapsayıcı sorgularıyla bileşen duyarlılığı

Önce:

/* Desktop versus Mobile
this only works if.sidebar is directly contained by a viewport-width element */
.sidebar {
    width: 300px;
}

@media (max-width: 768px) {
    .sidebar {
        width: 100%;
    }
}

Sonra:

/* Responsive sidebar based on container,
.sidebar can be placed in any element of any width */
.container {
    container-type: inline-size;
}

.sidebar {
    width: 100%;
}

@container (min-width: 768px) {
    .sidebar {
        width: 300px;
    }
}

.sidebar artık görüntü alanına dayalı medya sorgularına bağlı olmak yerine kapsayıcı boyutuna yanıt veriyor. Böylece, görüntü alanının veya üst kapsayıcının boyutunu bilmek zorunda kalmadan dinamik düzenlere daha doğal bir şekilde uyum sağlayabiliyor.

3. Düzen yönetimi için JavaScript'e olan bağımlılık azaltıldı

Netflix de dahil olmak üzere birçok ekip, kapsayıcı sorgularından önce dinamik düzenler için JavaScript'e güvenmek zorundaydı. JavaScript, pencere boyutunu sorgularken düzen değişikliklerini tetikler. Bu da hem karmaşıklığı hem de hata olasılığını artırır. Kapsayıcı sorguları, CSS'nin kapsayıcı boyutuna göre düzen duyarlılığını yönetmesine olanak tanıyarak bu ihtiyacı ortadan kaldırır.

Örnek: JavaScript tabanlı düzen mantığını kaldırma

Önce:

const cardContainer = document.querySelector('.card-container');
const cards = cardContainer.children;

function adjustLayout() {
    if (cardContainer.offsetWidth > 900) {
        cards.forEach(card => card.style.width = '33.33%');
    } else if (cardContainer.offsetWidth > 600) {
        cards.forEach(card => card.style.width = '50%');
    } else {
        cards.forEach(card => card.style.width = '100%');
    }
}

window.addEventListener('resize', adjustLayout);
adjustLayout();

Sonra:

.card-container {
    container-type: inline-size;
}

.card {
    width: 100%;
}

@container (min-width: 600px) {
    .card {
        width: 50%;
    }
}

@container (min-width: 900px) {
    .card {
        width: 33.33%;
    }
}

Bu yaklaşım, yalnızca gereken JavaScript miktarını azaltmakla kalmaz, aynı zamanda çalışma zamanındaki hesaplamaları önleyerek performansı da artırır.

4. Daha az kod, daha az hata

Netflix ekibi, kapsayıcı sorgularının kullanılmasının daha az kod satırı ve düzenle ilgili daha az hatayla sonuçlandığını tespit etti. Geliştiriciler, düzen mantığını JavaScript'ten CSS'ye taşıyarak ve karmaşık medya sorgularına olan ihtiyacı ortadan kaldırarak daha sürdürülebilir kodlar yazabilir.

Örnek: Düzenleme kodunu azaltma

Netflix ekibi, kapsayıcı sorgularını kullanmaya başladıktan sonra CSS kodunda önemli bir düşüş (belirli bileşenler için% 30'a varan) fark etti. Ekip aynı zamanda, alt bileşenleri kontrol eden mantığı kaldırarak birçok karmaşık ve bazen çakışmaya yatkın medya sorgusunu basitleştirdi ve daha yüksek düzeyde bir sorumluluk ayrımı elde etti. Bu azalma, yalnızca geliştirme sürecini hızlandırmakla kalmaz, aynı zamanda olası hata noktalarını en aza indirerek daha az hataya yol açar.

Önce:

/* Before with complex media queries */
.card {
    width: 100%;
}

@media (min-width: 600px) {
    .card {
        width: 50%;
    }
}

@media (min-width: 900px) {
    .card {
        width: 33.33%;
    }
}

Sonra

.container {
    container-type: inline-size;
}

.card {
    width: 100%;
}

@container (min-width: 600px) {
    .card {
        width: 50%;
    }
}

@container (min-width: 900px) {
    .card {
        width: 33.33%;
    }
}

5. Geliştirici deneyimi iyileştirildi

bq. "Bu, hayatımı yüz kat daha kolaylaştırdı"

Container sorgularının en az takdir edilen avantajlarından biri, geliştirici deneyimini iyileştirmesidir. CSS'yi daha sezgisel ve bileşen odaklı bir şekilde çalıştırarak geliştiriciler, olası her düzen senaryosundaki davranışları hakkında endişelenmeden yeniden kullanılabilir, esnek bileşenler oluşturmaya odaklanabilir.

Netflix ekibinden bir üyenin dediği gibi, "CSS'nin başlangıçtan beri böyle çalışması gerekiyordu."

6. Çoklu dolgu yedeği

Kapsayıcı sorguları artık tüm büyük tarayıcılarda olsa da hâlâ kullanılan tarayıcıların eski sürümleriyle ilgili endişeler var. Yedek çözüm çok önemlidir. Netflix ekibi, web topluluğu katkıda bulunanları tarafından oluşturulan bu JavaScript polyfill'ini kullanır. Özellik algılama ile uygulama basittir:

if (! CSS.supports("container-type:size")) {
  /*use polyfill from
  https://www.npmjs.com/package/container-query-polyfill */
 }

Sonuç

Kapsayıcı sorguları, CSS'de ileriye doğru atılan büyük bir adımdır. Geliştiricilerin, sitenin farklı bölümlerinde yeniden kullanılabilecek esnek ve duyarlı bileşenler oluşturmasını kolaylaştırır. Bu yöntemler, sayfa düzeni için JavaScript'e olan bağımlılığı azaltarak, karmaşık medya sorgularını ortadan kaldırarak ve geliştirme sürecini hızlandırarak hem performans hem de sürdürülebilirlik açısından önemli avantajlar sunar. Şu anda kullanım alanlarının çoğu Netflix'in Tudum sayfalarında yer alıyor. Netflix'in diğer bölümlerinde kapsayıcı sorguları kullanma planları da mevcut. Netflix ekibi, kapsayıcı sorgularını geliştirici araç kutusunda birinci sınıf bir araç olarak değerlendiriyor. Bu sorguların kullanımı, sağladıkları esnekliği ve gücü daha fazla geliştiricinin benimsemesiyle artmaya devam edecek. Kapsayıcı sorguları, mevcut bileşenleri yenilemeye veya tamamen yeni bileşenler tasarlamaya yönelik olarak duyarlı tasarım için daha basit ve daha net bir yol sunar.

Henüz denemediyseniz kapsayıcı sorgularını deneyin. Bu, iş akışınızı beklemediğiniz şekillerde basitleştirecektir.