tarihinde Fatih Hayrioğlu

Yaşlandıkça böyle ihtiyaçlar doğuyor galiba. Belki ihtiyacı olan olur diye buraya not edeyim. Chrome Dev Tools gibi araçlarda başlangıçtaki görünüm küçük kalabiliyor. Benim için küçük mesela :)

Yazı boyutlarını büyütmek için Cmd + + and Cmd + - (Windows’ta Cmd yerine Ctrl kullanın). Ancak bu kısayol İngilizce klavye için Türkçe klavyelerde bunu yapmak için

Büyütmek için: cmd + . veya cmd + shift + p ile açılan menüye zoom inyazarakta oluyor. Küçültmek için: cmd + - Başlangıç değerine dönmek için: cmd + 0

Safari

Büyütmek için: Kısayol bulamadım ancak Geliştirme aracının sağ üst köşesindeki ayarlar ikonuna tıklayıp gelen General sekmesinde en altta zoom seviyesini belirleyebiliyoruz. Küçültmek için: cmd + - Başlangıç değerine dönmek için: cmd + 0

Firefox

Büyütmek için: Adres barına about:config yazıp, arada gelen riskleri kabul ediyorum evet deyip sonra gelen arama kısmında devtools.toolbox.zoomValue yazıp gelen değeri 1.5 (kendi tercihinize göre değiştirin) yaparak hallettim. Küçültmek için: cmd + - Başlangıç değerine dönmek için: cmd + 0

Bir diğer seçenekte İngilizce klavyeye geçip standart kısayolları da kullanabilirsiniz.

Kaynaklar

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