tarihinde Fatih Hayrioğlu

Uzun içerikli yapıları daha az yer kaplayacak şekilde ve daha işlevsel kullanmak için genelde akordiyon yapılarını kullanırız. Uzun süredir kullanıla gelen bu bileşenlerin genelde işlevselliğini javascript ile yapıyoruz. HTML ve CSS ile yapılan akordiyonlar için son günlerde gelen name attribute ile işlevsellik yönünden eksik kalan kısım tamamlandı.

name attribute tam olarak ne sağlıyor?

<details> ve <summary> kullanımı ile oluşturduğumuz akordiyonlar başlığa tıkladığımızda açılan detay içeriği gösteriliyor. Biz daha çok başlığa tıklandığında açılıyor ve aynı zamanda açık olan başka içerik kapanıyor.

Örneklerde daha iyi anlarız.

Örnekleri trendyol’da geliştirdiğimiz baklava tasarım sisteminde uyguladığımız tasarımları kullandım. Bu arada görmeyenler için baklava github linkini de buraya ekliyeyim. https://github.com/Trendyol/baklava/

Bir diğer not da baklava design system açık kaynak bir proje katılıp katkı verebileceğiniz güzel bir proje olduğunu düşünüyorum. Katkılarınızı bekleriz.

Mevcut akordiyon (checkbox gibi)

Mevcut durumda kullanılan ve tarayıcı desteği gayet iyi olan tip bu.

Yukarıdaki örnekte sadece HTML ve CSS kullandık. Kendi stillerimizi uyguladık sadece.

name ile oluşturulan akordiyon (radio gibi)

Chrome 120 ve Safari 17.2 ile birlikte gelen name özniteliği desteği ile artık tıklanan ögenin dışındakileri kapatan akordiyonları da yapabileceğiz.

Eğer Chrome ve Safari’nin developer sürümlerini yüklemediyseniz yukarıdaki kod sizde bir öncekiyle aynı gözükecektir.

Açık gelen akordiyon

Başlangıç durumunda bir akordiyon elemanının açık gelmesini istiyorsanız. Açık gelmesini istediğiniz akordiyon elemanında open öz niteliğini eklemeniz yeterli. Örnek: <details open>

Örnekte görüldüğü gibi ikinci öge açık olarak belirtildiği için açık gelmiştir.

Sonuç

W3C’nin tarayıcıların bünyesindeki bileşenleri arttırma ve geliştirme çabalarını takdir ile karşılıyorum. Her projede ayrı ayrı kod yazmaktan ve uğraşmaktan kurtarıyor, erişebilirlik sorunlarını çözüyor. Standart bir tasarım desteği sunuyor. Umarım bir çok UI kütüphanesindeki bileşenler bu şekilde eklenir.

Kalın sağlıcakla.

Kaynaklar

Mevcut UI kütüphanelerinde akordiyon

tarihinde Fatih Hayrioğlu

CSS ile yapılanlar serisinde bu yazımda sizlere bir köşeli veya yuvarlak alan içindeki resmin üzerine gelince köşeli ve yuvarlak alanın dışına taşacak uygulamayı anlatmaya çalışacağım.

Köşeli alanlarda popout efekti

Bir kapsayıcı .kapsayici içinde yer alan resmi position: absolute; ve bottom: 0; ile kapsayıcının altına hizalıyoruz. Normal durumda biraz resmi küçültüyoruz. Farenin üzerine geldiğinde resmi büyüttüğümüzde transform: scale(1.4); istediğimiz sonuç ortaya çıktı.

Oval alanlarda popout efekti

Oval alanlarda popout efekti yapmak için köşeliye göre bir fazla kapsayıcı .resim-kabi daha eklememiz gerekiyor. Ovallik kazandırmak için .kapsayici ve .resim-kabi elemanlarına border-radius tanımladık. Bu örnekte farklı olarak resim ve kapsayıcısını da büyüttük. Ayrıca resme gölge de ekledik.

Tek elemanla çözüm

Oval örneğin sadece bir adet HTML elemanı (<img>) ile yapan örnekler de var. https://css-tricks.com/a-fancy-hover-effect-for-your-avatar/ Temani Afif’in yazısı gayet başarılı.

Az eleman kullanması güzel bir avantaj olsa da kodu karışıklığı beni biraz düşündürdü. Siz projenize göre bri tanesini seçip ilerleyebilirsiniz.

Kalın sağlıcakla.

Kaynaklar

tarihinde Fatih Hayrioğlu

CSS’e gelen yeni özelliklerden birini daha inceleyip sizelere yazmanın sevinci içerisindeyim. Dilimize kapsayıcı sorguları olarak çevirmeye çalışacağım.

Bu özelliği duyunca daha önce zingat’ta Murat Çorlu ile harita sayfasını kodlarken sağda harita solda haritadaki ilanların listelendiği ilan kartlarının olduğu bir yapıdaki tasarımı HTML’e dökmeye çalıştığımız zaman aklıma geldi. (Yazının ana resmindekine benzer bir sayfa yapısı) Biz burada sağdaki harita ve yanındaki alanları dinamik olarak değiştirmek istedik. Yeterli alan varsa solda listelenen alanda 3 kolonlu bir yapı, daha az yer olduğunda 2 kolonlu yapı, daha da az yer olduğunda tek kolonlu bir yapı olsun ve en sonunda sadece haritanın kalacağı bir yapı düşündük.

Bunu medya sorguları ile çözmek mümkün olmadı. Daha sonra bunu yapmak için bir JavaScript çözümü bulsak ta en son sabit bir genişlik ve 2 kolonlu kalsın deyip bırakmıştık. Kapsayıcı sorguların (container queries) çıkacağını ilk duyduğumda bu proje ve orada medya sorgularıyla uğraştığımız zaman aklıma geldi. Bu kadar girizgahtan sonra kapsayıcı sorgularının nasıl çalıştığına değinelim.

Kapsayıcı sorguları nasıl kullanılır?

Kapsayıcı sorgularının genel teorisine ait tanımlara göz atalım.

container-type

En yakın ebeveynine container-type tanım yaparak başlıyoruz. Bu tanım ile bu eleman bir kapsayıcı eleman olduğu belirtiliyor. Başlangıç değeri normal‘dir. Aslında tüm elemanlar birer stil kapsayıcısı (Bir yazıda da bu konuya gireriz) olduğu için normal değeri alır. container-type tanımı iki adet daha değer alır.

  • inline-size: Metin akış ekseni olarakta tanımlayacağımız satıriçi(inline) eksen tanımıdır. Genelde bu değer kullanılıyor.
  • size: Her iki eksende de kapsayıcının sorgulanabileceğini gösterir. Hem satıriçi hem de blok ekseninde sorgulama yapılmasını sağlar.
main {
	container-type: inline-size;
}

Bu tanımı yaptıktan sonra bu kapsayıcı içindeki elemanlara artık belli genişliğe göre sorgulayıp ona göre kod yazabiliyoruz. Örneğin main içindeki .card-container elemanına 1200px genişliğe göre tanım yapalım:

@container (min-width: 1200px) {
  .card-container {
    grid-template-columns: 1fr 1fr;
  }
}

container-name

Sayfa içinde birden fazla kapsayıcı tanımı yapıldığında karışmaması için isimlendirme seçeneği de var. İsimlendirme işini container-name tanımı ile yapıyoruz. Bu tanım tarayıcıların işini kolaylaştırmak için tanımlanmıştır. Tarayıcı hangi elemana kapsayıcı sorgusu uygulanacağını bilirse işi daha kolay oluyor. Yukarıdaki kodu buna göre güncellersek:

main {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 1200px) {
  .card-container {
    grid-template-columns: 1fr 1fr;
  }
}

container kısayolu

Bu iki tanımı birleştiren bir kısayol da vardır. container tanımı bu iki tanımı birleştiren bir kısayoldur.

main {
  container: card / inline-size;
}

Sıralama önemli önce isim sonra tip.

Kapsayıcı Sorgu birimleri

Kapsayıcı sorguların terorisine ait son bilgi de kapsayıcı sorgu birimleri

Kapsayıcı sogrularını kendine ait birimleri vardır. Bu birimler görüş alanı birimlerine viewport (vw, vh, vmin, vd.) benzerdir. Tabi burada bakış alanına değil de kapsayıcıya göre işlem yapılır.

  • 1cqw - Sorgusu yapılan kapsayıcı genişliğinin 1% ‘ine karşılık gelir.
  • 1cqh - Sorgusu yapılan kapsayıcı yüksekliğinin 1% ‘ine karşılık gelir.
  • 1cqi - Sorgusu yapılan kapsayıcı satıriçi ekseninin 1% ‘ine karşılık gelir.
  • 1cqb - Sorgusu yapılan kapsayıcı blok ekseninin 1% ‘ine karşılık gelir.
  • 1cqmin - cqi ve cqb‘nin en düşük değeri
  • 1cqmax - cqi ve cqb‘nin en büyük değeri

Kapsayıcı sorgu örnekleri

Peki zingat’taki ihtiyacımızı bu öğrendiklerimize göre yapmaya çalışalım.

Yukarıdaki codepen örneğinde zoom seviyesi ile oynayarak ta etkiyi görebiliriz.

Mobile öncelik verdiğimiz için diğer şartlar için kod yazdık.

.card-container {
  grid-template-columns: 1fr;
}

@container card (min-width: 1200px) {
  .card-container {
    grid-template-columns: 1fr 1fr;
  }
}

@container card (min-width: 1700px) {
  .card-container {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

Mükemmel. Mükemmel. Mükemmel.

Bileşen yapısına geçiş

Kapsayıcı sorguları genelde yukarıdaki yapıda kullanmak için düşünülüyor ancak youtube’da Maarten Van Hoof yaklaşımını görene kadar.

Web dünyasında son zamanların popüler kullanımı olan bileşen yapılarını birçoğumuz kullanıyoruz. Kapsayıcı sorgularıyla bu konunun ne alakası var derseniz. Farklı ekipler için geliştirdiğimiz bir bileşeni düşünelim. Örneklere kart yapısından başladığımız için yine bir kart bileşeni kodluyoruz. Bu bileşeni sayfa içinde, sağ kolonda ve detay durumlarının olduğunu düşünelim. Büyük projelerde bu tip işler büyük sorun oluyor. Kapsayıcı sorguları bu sorunu da çözüyor.

Max Böck’ün codepen.io örneği bu konuyu ve tanımları anlamak için mükemmel bence. 3 kolonlu bir yapı var. Solda öne çıkan kitap, ortada en çok satan kitaplar listesi ve sağda da alışveriş sepeti var. Bu ögeleri tutup taşıyabiliyoruz.

Yukarıdaki kart bileşeni 3 yerde kullanılıyor. Herbiri için ayrı ayrı tanım yapıp kodlamak yerine kapsayıcı sorguları ile çözebilmek bileşen yapılı sistemlerde mükemmel bir şey.

Geliştirici araçlarındaki görünüm

Chrome ve Firefox’da aşağıdaki gibi bir etiketleme var. Safari’de göremedim.

dev tools container query

Tarayıcı desteği

Popüler ve çok kullanılan tarayıcıların desteği var. Bu yazıyı yazdığımda Türkiye’deki destek oranı %94.7 olarak görünüyordu.

Kalın sağlıcakla.

Kaynaklar