CSS dünyası her geçen gün daha da zenginleşiyor. Özellikle son dönemde gelen yenilikler, geliştiricilere daha önce hayal bile edilemeyen esneklikler sunuyor. What’s !important serisinin 15. sayısında, boundary-aware CSS, zaman tabanlı web tasarımı, full-bleed düzeltmesi ve daha birçok konu ele alınıyor. Bu makalede, bu yenilikleri derinlemesine inceleyeceğiz.
Preethi Sam, boundary-aware CSS kavramını view() fonksiyonu ile ustalıkla açıklıyor. View() sayesinde, bir öğenin görünür alan sınırlarına duyarlı hale gelmesi mümkün oluyor. Örneğin, bir öğenin ekranın kenarına gelince davranışını değiştirmesi veya belirli bir alanın dışına çıktığında farklı stiller alması gibi etkileyici efektler yaratılabiliyor. Bu teknik, özellikle karmaşık düzenlerde ve interaktif bileşenlerde büyük kolaylık sağlıyor.
Erişilebilirlik konusu da bu sayıda önemli bir yer tutuyor. Dan Holloran, grid lanes (eskiden masonry layout olarak bilinen) düzeni hakkında yazarken, Manuel Matuzović bu düzenin erişilebilir olmadığını vurguluyor. Ardından Matuzović, reading-flow özelliğini kullanarak grid lanes'ı erişilebilir hale getirmeyi öneriyor. Bu yaklaşım henüz test edilmemiş olsa da, doğru yönde bir adım olduğu düşünülüyor.
Sophie Koonin, Temporal API ve color-mix() fonksiyonunu kullanarak web sitelerinin günün saatine göre değişmesini sağlayan zaman tabanlı tasarımlar sunuyor. macOS'in dinamik duvar kağıtlarına benzer şekilde, web siteleri de kullanıcının saat dilimine göre renk, tema veya içerik değiştirebiliyor. Bu, kullanıcı deneyimini kişiselleştirmek için heyecan verici bir yöntem.
Full-bleed CSS sorunu, David Bushell tarafından modern bir çözüme kavuşturuluyor. Bir öğenin, iç içe olduğu başka bir öğeye rağmen yatay olarak tam ekran genişliğinde görünmesi (taşma olmadan) artık container query units sayesinde mümkün. Ayrıca Temani Afif, CSS-Tricks'te border-shape özelliğini kullanan başka bir breakout tekniği paylaştı. Bu, eski sorunların modern CSS ile nasıl çözülebildiğinin güzel bir örneği.
Teknik Analiz
CSS'de geçmişe dönüp değiştirmek isteyeceğiniz şeyler mi var? CSS Working Group, CSS'de değiştirmek istedikleri bazı şeyleri listeliyor. Bu listeden ilham alan Declan Chidlow, FixCSS adlı bir araç oluşturdu. FixCSS sayesinde border-radius yerine corner-radius kullanmak gibi değişiklikler yapılabiliyor. Bu, CSS'in evriminde küçük ama anlamlı bir adım.
Jake Archibald, özelleştirilebilir
Kaynak: css-tricks.com
