Geleneksel olarak duyarlı web geliştirme, viewport-tabanlı medya sorgularına ve margin-left veya padding-top gibi fiziksel CSS özelliklerine dayanır. Etkili olsa da, bu yaklaşım tasarımlar soldan sağa (LTR) ve sağdan sola (RTL) diller arasında değiştiğinde veya bileşenlerin tüm tarayıcı penceresi yerine hemen kendilerini saran konteynere uyum sağlaması gerektiğinde genellikle işe yaramaz. Bugün, bu sorunları çözen iki güçlü standardı keşfedeceğiz: CSS Mantıksal Özellikleri ve Konteyner Sorguları.
Mantıksal Özellikleri Benimsemek
CSS Mantıksal Özellikleri, fiziksel yönleri belgenin yazım moduna ve metin yönüne dayalı anlamsal anlamlarla değiştirir. "Sol" belirtmek yerine "başlangıç" belirtirsiniz. Bu, metin yönü LTR'den RTL'ye değiştiğinde stillerinizin otomatik olarak uyum sağlamasını sağlar ve karmaşık medya sorgularına veya manuel geçersiz kılmalarına olan ihtiyacı ortadan kaldırır.
Avatarı sol üst köşeye yerleştirmek istediğiniz standart bir kart düzenini ele alalım. Fiziksel CSS'de position: absolute; top: 0; left: 0 kullanırdınız. Mantıksal CSS'de bu top: 0; inset-inline-start: 0 haline gelir. start değeri LTR bağlamlarda "sol", RTL bağlamlarda ise "sağ" olarak çözümlenir. Bu ince kayma, küresel uygulamalar için bakım maliyetlerini önemli ölçüde azaltır.
/* Fiziksel vs Mantıksal Özellikler */
/* Eski yöntem */
.card {
margin-right: 1rem;
padding-left: 1rem;
border-right: 1px solid #ccc;
}
/* Yeni yöntem */
.card {
margin-inline-end: 1rem;
padding-inline-start: 1rem;
border-inline-end: 1px solid #ccc;
}margin-block, padding-inline ve width yerine inline-size gibi özellikler kullanarak, kodunuzu daha erişilebilir ve kültürel olarak nötr hale getirirsiniz.
Konteyner Sorgularının Gücü
Medya sorguları viewport'a yanıt verirken, Konteyner Sorguları (CQ'lar) öğelerin ebeveyn konteynerlerinin boyutuna yanıt vermesini sağlar. Bu, bileşen tabanlı mimari için bir paradigmadır. Daha önce, bir kartın bir kenar çubuğu ile ana içerik alanı içindeki düzenini değiştirmek istediğinizde, ID seçicileri veya yardımcı sınıf (utility) sınıfları kullanmanız gerekirdi. CQ'lar ile bileşen kendi davranışını belirler.
Konteyner Sorgularını kullanmak için, önce container-type kullanarak ebeveyn öğede bir bağlamlandırma (containment) bağlamı oluşturmanız gerekir. Ardından, o konteynerin boyutlarına göre stiller tanımlamak için @container kuralını kullanırsınız.
/* Konteyner bağlamını oluşturun */
.sidebar {
container-type: inline-size;
container-name: sidebar;
}
/* Konteyneri sorgulayın */
@container sidebar (min-width: 400px) {
.card {
flex-direction: row;
}
}
@container sidebar (max-width: 399px) {
.card {
flex-direction: column;
}
}Bu yaklaşım gerçek kapsüllemeye olanak tanır. Bir düğme bileşeni, dar bir gezinme çekmecesinde yerleştirildiğinde daha geniş hale gelebilir ve sadece simge moduna geçebilir; bu durumda ebeveynin düğmenin dahili stilleri hakkında hiçbir şey bilmesine gerek yoktur.
Mantıksal Özellikleri ve Konteyner Sorgularını Birleştirme
Mantıksal özellikleri konteyner sorgularıyla birleştirdiğinizde, sağlam ve çerçeveden bağımsız bileşenler oluşturursunuz. Mantıksal özellikler, bileşenin metin yönüne saygı duymasını sağlarken, konteyner sorguları uzamsal kısıtlamalara saygı duymasını sağlar. Bu kombinasyon, bileşenlerin çeşitli arayüzler arasında paylaşıldığı tasarım sistemleri için idealdir.
Örneğin, bir arama çubuğu bileşeni, dilinden bağımsız olarak simge ve giriş alanını doğru şekilde hizalamak için mantıksal özellikler kullanabilir; konteyner sorguları ise başlık, kenar çubuğu veya tam sayfa modal içinde render edildiğinde genişliğini ve arama simgesi görünürlüğünü ayarlayabilir.
Sonuç
Modern CSS, daha anlamsal ve sağlam bir modele doğru ilerliyor. Mantıksal özellikleri ustalıkla kullanarak tasarımlarınızın kapsayıcı ve farklı dillere uyarlanabilir olduğundan emin olursunuz. Konteyner sorgularını benimseyerek, viewport'a güvenmeden bileşen davranışı üzerinde ince kontrol kazanırsınız. Birlikte bu özellikler, yeni bir düzeyde profesyonel, sürdürülebilir ve gerçekten duyarlı frontend geliştirme sağlar. Farkı yaşamak için bir sonraki projenizde left/right yerine start/end ve @media yerine @container kullanmaya başlayın.