Fatih Hayrioğlu'nun not defteri

CSS'de lightdark() fonksiyonuyla kolayca koyu / açık mod yazımı

fatih.hayrioglu@gmail.com (Fatih Hayrioglu) — Mon, 7 Oct 2024 00:00:00 +0300

Bir önceki yazımda bahsettiğim gibi CSS’in yeni özelliklerinin bazıları çığır açan özellikler, bazıları kulllanıcı deneyimini iyileştirme yönünde özellikler bazıları da lightdark() fonksiyonu gibi yazım kolaylığı sağlayan özellikler.

lightdark() fonksiyonu mevcut uyumlu web yazımındaki büyük sorun olan aşağıdaki kullanımı daha anlaşılır ve düzenli hale getirmeye yarıyor.

:root {
  color-scheme: light dark;

  --dark-color: #292524;
  --light-color: #f5f5f4;

  --text-color: var(--dark-color);
  --bg-color: var(--light-color);
}

@media (prefers-color-scheme: dark) {
  :root {
    --text-color: var(--light-color);
    --bg-color: var(--dark-color);
  }
}

body {
  color: var(--text-color);
  background-color: var(--bg-color);
}

Bu tip koyu/açık tanımlarını ayrı ayrı yapmak yerine

:root {
  color-scheme: light dark;

  --light: #292524;
  --dark: #f5f5f4;
}

body {
  color: light-dark(var(--light), var(--dark));
  background-color: light-dark(var(--dark), var(--light));
}

Böylece daha kısa ve anlaşılır bir kod yapısına kavuşmuş oluyoruz.

Geliştirici araçlarındaki Styles sekmesindeki sağdan ikinci ikon yardımıyla dark / light arasında geçiş yapıp durumu simüle edebiliriz.

Mevcut kodlarımızda kod boyutunu azaltacak bir özellik.

Bu yazıyı yazdığımda tüm tarayıcıların yeni sürümlerinde desteği vardı. Türkiye’de oran %85. Güzel oran.

Kaynaklar

CSS'de lightdark() fonksiyonuyla kolayca koyu / açık mod yazımı was originally published by Fatih Hayrioğlu at Fatih Hayrioğlu'nun not defteri on October 07, 2024.

field-sizing özelliği

fatih.hayrioglu@gmail.com (Fatih Hayrioglu) — Mon, 5 Aug 2024 00:00:00 +0300

CSS’in yeni özellikleri bazen çığır açan nitelikte (anchor positioning, :has() seçicisi, vb.) olurken bazen yazıma yardımcı kurallar (iç içe yazım, @property) oluyor bazen de genel kullanılan kullanıcı deneyimi arttırıcı özellikleri oluyor. field-size özelliği genel kullanıcı deneyimini arttırıcı bir özellik. field-size özelliği genelde javascript ile çözdüğümüz bir ihtiyacı karşılıyor. Artık CSS ile kolayca bu ihtiyacımızı giderebiliyoruz. Genelde textarea alanlarına yazılan uzun içerikler için kullanıcıya sunulan dar alanları büyütmek için kullandığımız kullanıcı metin girdikçe uzayan textarea alanları için tanımlanmış bir özellik.

Bu durum masaüstünde daha az sinir bozucuyken mobilde daha sinir bozucu bir durum oluşturuyor.

Javascript ile yazılmış bir sürü script örneği ve makalesi mevcut bu durumu çözen ancak bir satır CSS kodu ile çözmenin hazzını hiçbiri vermiyor. :)

Ben yukarıda textarea için dediysem de uygulamada input, textarea ve select elemanlarına uygulanabiliyor. Örnekler yardımıyla daha iyi anlaşılacak.

See the Pen field-sizing: content; by Fatih Hayrioğlu (@fatihhayri) on CodePen.

Yukarıdaki örnekte normal durumda textarea içinde içerik girdikçe veya enter’a bastıkça sağda kaydırma çubuğu çıkarken field-size tanımı yapılan textarea‘da içerik girdikçe veya enter’a basıldıkça textarea otomatik olarak artmaktadır.

input içinde bir örnek yapalım.

See the Pen input - field-sizing: content; by Fatih Hayrioğlu (@fatihhayri) on CodePen.

Yukarıdaki örnekte normal input‘ta içeriği uzattığımızda içerik sağa doğru kayarken field-sizing: content; uygulanan örnekte içerik girildikçe input genişliyor.

Bir diğer uygulanan elemanda <select>

See the Pen input - field-sizing: content; by Fatih Hayrioğlu (@fatihhayri) on CodePen.

<select> farklılıkları normalde içeriğe göre genişlik sabit olurken field-sizing: content; tanımlı select’te içeriği uzun olanda genişlik uzuyor kısa olanda kısa kalıyor.

Blink (Chrome, Edge, Opera, Arc) tabanlı tarayıcılarda bu özelliğin desteği var. Firefox desteğinin yakında geleceği haberi geldi. Safari ekibinin de geliştirme aşmasında olduğunu biliyoruz.

Kalın sağlıcakla.

Kaynaklar

field-sizing özelliği was originally published by Fatih Hayrioğlu at Fatih Hayrioğlu'nun not defteri on August 05, 2024.

Tarayıcı geliştirici araçlarında yakınlaştırma ve uzaklaştırma yapmak

fatih.hayrioglu@gmail.com (Fatih Hayrioglu) — Mon, 10 Jun 2024 00:00:00 +0300

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

Tarayıcı geliştirici araçlarında yakınlaştırma ve uzaklaştırma yapmak was originally published by Fatih Hayrioğlu at Fatih Hayrioğlu'nun not defteri on June 10, 2024.

HTML Akordiyon bileşeni

fatih.hayrioglu@gmail.com (Fatih Hayrioglu) — Mon, 13 May 2024 00:00:00 +0300

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.

See the Pen akordiyon - checkbox gibi by Fatih Hayrioğlu (@fatihhayri) on CodePen.

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.

See the Pen akordiyon - radio gibi by Fatih Hayrioğlu (@fatihhayri) on CodePen.

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>

See the Pen akordiyon - radio gibi by Fatih Hayrioğlu (@fatihhayri) on CodePen.

Ö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

HTML Akordiyon bileşeni was originally published by Fatih Hayrioğlu at Fatih Hayrioğlu'nun not defteri on May 13, 2024.

Avatar Popout Efekti

fatih.hayrioglu@gmail.com (Fatih Hayrioglu) — Tue, 6 Feb 2024 00:00:00 +0300

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ı.

See the Pen Fancy hover effect on avatar by Temani Afif (@t_afif) on CodePen.

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

Avatar Popout Efekti was originally published by Fatih Hayrioğlu at Fatih Hayrioğlu'nun not defteri on February 06, 2024.

Kapsayıcı sorguları (container query)

fatih.hayrioglu@gmail.com (Fatih Hayrioglu) — Mon, 29 Jan 2024 00:00:00 +0300

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.

See the Pen container query by Fatih Hayrioğlu (@fatihhayri) on CodePen.

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.

See the Pen Container Query Bookstore by Max Böck (@mxbck) on CodePen.

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.

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

Kapsayıcı sorguları (container query) was originally published by Fatih Hayrioğlu at Fatih Hayrioğlu'nun not defteri on January 29, 2024.

Renk geçişli ve Hareketli kenar çizgileri

fatih.hayrioglu@gmail.com (Fatih Hayrioglu) — Mon, 22 Jan 2024 00:00:00 +0300

İnternette gezerken gördüğüm kodu basit etkisi büyük örnekleri paylaşma yazılarıma devam ediyorum. Herhangi bir elemanın kenar çizgilerini birden fazla renk tanımlamak ve üstüne bunu hareketli yapma örneklerini çok gördüm. Bu yazıda bunu anlatmaya çalışacağım.

Doğrusal renk geçişi örneği

border-image: linear-gradient(to bottom right,#ffb56b,#ac255e) 1;

border-image ve linear-gradient birlikte kullanımı ile çözümü hemen bulduk. Mükemmel. Tabi uygulamada kenar çizgilerini bu kadar büyük kullanmayız muhtemelen. Örneğin daha öne çıkması için kenar çizgi kalınlığını yüksek tuttum.

Konik renk geçişi örneği

conic-gradient ile daha farklı seçenekler görmek mümkün.

Hareketli renk geçişi örneği

İşe hareket katmakta kolay. linear-gradient tanımındaki yön tanımını açılı verip bu açıyı animasyon ile döndürdüğümüzde işte animayonlu kenar çizgisi. Tabi burada dikkat açı tanımının @property tanımını da yapmalıyız.

Köşeleri oval renk geçiş örneği

border-image ile border-radius birlikte çalışmasının sorunları var. Birçok örnek sorunu çözmek için :before ve mask ile sonuca gitmiş. Ancak background‘a renk geçişi ekleyip box-shadow: inset ile içini beyaz (istediğiniz renk) ile dolduruyoruz. Son olarakta kenar çizgilerinin görünmesi için saydam olarak tanımladık.

Kalın sağlıcakla.

Kaynaklar

Renk geçişli ve Hareketli kenar çizgileri was originally published by Fatih Hayrioğlu at Fatih Hayrioğlu'nun not defteri on January 22, 2024.

Switch elementi geliyor

fatih.hayrioglu@gmail.com (Fatih Hayrioglu) — Tue, 16 Jan 2024 00:00:00 +0300

Safari yeni sürümlerinde switch elementini destekleyeceğini açıklayınca nasıl birşey diye bakayım dedim. Son zamanlarda UI elementlerinin HTML’e kazandırılması kervanına Webkit’in de katılması açısında önemli bir durum.

İlk denemem

<input type="checkbox" switch>

Sonuç mükemmel. Bu gelişmeleri görünce “Senelerdir niye uğraştırdınız be insafsızlar diye” içimden geçirmiyor değilim :)

Şimdilik sadece accent-color ile aktif durumun arka plan rengini değiştirebiliyoruz.

input {
  accent-color: var(--primary-color);
}

Şu an Safari’nin gelecek sürümlerinde desteklenecek bu özelliği umarım yakında diğer tarayıcılarda destekler.

Safari henüz ::track ve ::thumb sözde elementlerinin desteği henüz yok açmak için Develop > Feature Flags - ::thumb and ::track pseudo-elements açmak gerekiyor. Muhtemelen daha sonraki sürümlerde gelecektir.

input::thumb {
    background-color: var(--primary-color);
    width: 36px;
    height: 36px;
    margin: 4px 8px;
    transition: all 0.3s;
    border-radius: 50%;
}

input:checked::thumb {
  translate: 40px 0;
  background-color: white;  
}

Geçenlerde accent-colorörneğinde kullandığım gece/gündüz switch’ini biraz daha değiştirip :before ve :after olmadan çözümü:

input:checked::track {
  background-color: #000839;
  border-radius: 20px;
}

input:checked::thumb {
  translate: 40px 0;
  background-color: #000839;
  transform: rotate(110deg);
  box-shadow: inset 0px 8px white;
}

Farklı örnek çalışmaları incelemek için buradaki örneklere bakmanızı öneririm. (not: Tarayıcının zoom değerini arttırınca örneklerin görünümü daha hoş oluyor)

Biliyorum daha çok erken ama araştırmışken paylaşmak istedim. :)

Kalın sağlıcakla.

Kaynaklar

Switch elementi geliyor was originally published by Fatih Hayrioğlu at Fatih Hayrioğlu'nun not defteri on January 16, 2024.

2023 nasıl geçti? 2024'den hedeflerim

fatih.hayrioglu@gmail.com (Fatih Hayrioglu) — Mon, 8 Jan 2024 00:00:00 +0300

2023 senesinde genelde CSS’in yeni çıkan özelliklerini olabildiğince anlatmaya çalıştım.

HTML’in yeni bileşenleri hakkında da yenilikleri paylaşmak gibi bir hedefim vardı ancak bu konuda eksik kaldım.

Popover API

Sadece Popover bileşinini yazmışım. Bu sene daha fazla bileşen eklerim inşallah.

2024 hedeflerim

2024’de daha çok CSS, HTML, PWA ve CSS ile yapılan basit işler hakkında birşeyler yazma planım var.

CSS

Bu sene CSS’in yeni özellikleri hakkındaki yazılara devam etme hedefim var.

Bunların dışında CSS ile yapılan basit işlerle alakalı yazılara da devam etmeyi düşünüyorum.

CSS’de ki gelişmelerinin devam edeceğini düşünüyorum. 2024 interrop’da hangileri dahil edilir bilemiyorum ama aşağıdaki birçok özelliğin sene sonuda kalmadan standartlaşmasını bekliyorum.

Container Query
linear() tanımı
Cascade layer
Yeni renk tanımları lch, oklab, oklch
Logical properties
CSS Scope
Grid masonary
Scroll-timeline
Stil Query
Anchor positioning
View Transitions
@when else
Trigonometrik fonksiyonlar

HTML

HTML bileşenleri konusunda bir atılım bekliyorum. Bu sayede farklı UI kütüphaneleri yerine UI ihtiyacımızı görebilecek standartlar olacak. Burada kritik nokta bence CSS ile yeterli derecede stillendirilebilir bileşenler olursa iş görür yoksa <select> gibi beklenenin altında bir deneyimle kalır.

dialog elementi
progress elementini stillendirelim
Popover API
Akordiyon
Slider
Selectlist
Switch
Drawer
Data table
Tooltip
Date picker
Form Validation
Tabs
Carousel

Çoğu beklenti ama umarım böyle bir liste çıkar sene sonu. :)

PWA

Safari’ye push notification desteği gelmesiyle geçen sene PWA alanında ciddi bir atılım bekliyordum ancak gözle görülür bir sıçrama olmadı. Nasip diyelim. PWA’i birçok konuda avatajlı görmeme rağmen sektör bu konuda benimle aynı düşünmüyor galiba.

Tek kod bloku: Mevcut sitelerde mobil için iki ayrı (iOS, Android) geliştirme ortamı var. Ayrıca hala Türkiye’de responsive olmayan birçok siteden dolayı web ve mobil web var. Bu 4 farklı ortam yerine tek ortamda işlerimizi halledebileceğimiz bir sistem var ve kimse kullanmıyor :)
Tek platform öğrenme ihtiyacı: Mobilde mevcut şartlarda Android için farklı iOS için farklı bir öğrenme eğrisi var. Bunun için React Native ve Flutter gibi çözümler olsa da hala birçok şirket native olanları tercih ediyor. PWA’in tüm bunlardan daha iyi bir çözümü var. Sadece HTML, CSS ve Javascript ile tüm her yerde çalışan siteler / uygulamalar yapma imkanı.
SEO: Mobil uygulamalrın arama motoru konusundaki sıkıntıları malum. PWA arama motorları konusunda olmazsa olmaz.
Güncelleme kolaylığı: Mobil uygulamaların Web marketlerinde güncellemenin zorluğunu bilenler bu konuda PWA’nin ne kadar büyük bir nimet olduğunu anlar.
Erişilebilirlik: Bu konuda mevcut sitelerinde eksikleri olsa da PWA’nın erişilebilirlik çözümlerinin daha çok ve kolay olduğunu kabul etmeliyiz.
Eski araçlarda çalışma: Düşük kalitedeki araçlarda dahi çalışma imkanı sağlamasıyla mobil uygulamalara göre avantajı vardır.
Hız: Web tekonolojileri hız konusunda daha fazla araç sunmaktadır. Hız ölçümü ve geliştirmesi daha kolay. Ön bellek yönetimi ve lazy load yöntemleri daha uzun süre tecrübe edilmiştir. Örneğin Orange Polska S.A.‘nın verilerine göre %30 daha hızlıymış.
Daha güvenli: Web’in süregelen güvenlik araçları nedeniyle native uygulamalara göre avantajlıdır. HTTPS seçeneği ile güvenli siteler/uygulamalar yapma imkanı sağlar.
Daha az maliyetli: Geliştirme ve idame ettirme maliyetleri daha düşüktür.

Eksi olarak yazabileceğimiz iki konu var mobil cihazlarda cihaz özelliklerine erişim sıkıntılı ve animasyon. Animasyon konusunda kesin çözüm geldi diyebilirim. View Transitions API bence mobil uygulamardaki animasyonu aratmayan tecrübe sunuyor. Apple’ıın yani Safari’nin iOS cihazlardaki cihaz özelliklerine erişim konusunda son yıllarda ki atağı da o eksiğinde yakında giderileceği konusunda ümitlendiriyor bizi. Ne diyelim umarım bu sefer “Bu sene PWA’nın yılı” dedirtiriz. :)

Kalın sağlıcakla.

Kaynaklar

2023 nasıl geçti? 2024'den hedeflerim was originally published by Fatih Hayrioğlu at Fatih Hayrioğlu'nun not defteri on January 08, 2024.

NVM kullanarak varsayılan nodejs sürmünü değiştirme

fatih.hayrioglu@gmail.com (Fatih Hayrioglu) — Fri, 29 Dec 2023 00:00:00 +0300

Farklı projelerde çalışırken her projenin node sürüm ihtiyacı farklı ise bunlarla baş etmek için nvm kullanmaya başlamıştım. Ancak bazı durumlarda node sürümünü devamlı değiştirmek sorun oluyor. Varsayılan node sürümünü güncellemek gerektiğinde bu konuda NVM bize kolay bir yöntem sunuyor.

İlk önce mevcut node sürmünü öğrenelim ve sonra sistemde yüklü nodejs sürümlerini nvm ile kontrol edelim.

Mevcut durumda nodejs sürmümüz v12.22.12 olarak görünüyor. Yukarıdaki listede istediğiniz sürüm yok ise nvm ile hemen istediğiniz sürümü yükleyebilirsiniz. nvm install 19.5.0 gibi. Şimdi gelelim varsayılan nodejs sürümünü ayarlamaya

Evet varsayılan sürmümüz artık 19.5.0. node -v ile kontrol edebiliriz. Bazen hemen olmuyor terminali açıp kapamak gerekiyor.

Kalın sağlıcakla.

Kaynaklar

NVM kullanarak varsayılan nodejs sürmünü değiştirme was originally published by Fatih Hayrioğlu at Fatih Hayrioğlu'nun not defteri on December 29, 2023.

CSS ile hareketli renk geçişli arka planı yapmak

fatih.hayrioglu@gmail.com (Fatih Hayrioglu) — Thu, 28 Dec 2023 00:00:00 +0300

Web’de gördüğüm CSS ile yapılmış bazı uygulamarı burada paylaşmak istiyorum. Bunlardan birisi de renk geçişi ile yapılmış hareketli arka plan resimleri. Kodu çok basit ama etkisi çok iyi. Bundan 10 sene önce bu işi yapsak muhtemlen tarayıcılar çok zorlanacağı işleri artık CSS ile çok basit bir şekilde yapabilmek güzel.

Konuyu daha da uzatmadan koda gelelim. CSS ile renk geçişi yapmak çok basit. En basit hali

linear-gradient(top,#fff,#f8b500);

İki renk arasında başlangıç noktasını verdiğimiz bir tanım. Kodu daha da geliştirip açılı ve çok renkli renk geçişleri de yapabiliyoruz.

linear-gradient(-45deg, oklab(0.3 -0.03 -0.04) 0%, oklab(0.54 -0.08 0) 13%, oklab(0.82 -0.13 0.08) 25%, oklab(0.11 -0.13 0) 38%, oklab(0.3 -0.03 -0.04) 50%, oklab(0.54 -0.08 0) 62%, oklab(0.82 -0.13 0.08) 75%, oklab(0.11 -0.13 0) 87%, oklab(0.3 -0.03 -0.04) 100%);

Güzel bir arkaplan geçişi elde ettik. Peki bunu nasıl hareketlendireceğiz?

4 renk seçtiğimiz için arka plan alanını genişletmemiz lazım. background-size: 400% 400%; ile genişlettik. Sıra geldi bu arka plana hareket kazandırmaya. Hareket kazandırmak içinde arka plan konumunu değiştirmemiz yeterli olacak.

@keyframes arkaPlanaHareketKat{
  0%{
    background-position: 0 50%;
  }
  50%{
    background-position: 100% 50%;
  }
  100%{
    background-position: 0 50%;
  }
}

Sonuç aşağıdaki gibi olacaktır.

Farklı alanlarda bu tekniği uygulayabiliriz. Bu örnekte olduğu gibi sayfanın tümünün arka planında kullandığımız gibi bir butonun arka planında da kullanabiliriz.

Kalın sağlıcakla.

Kaynaklar

CSS ile hareketli renk geçişli arka planı yapmak was originally published by Fatih Hayrioğlu at Fatih Hayrioğlu'nun not defteri on December 28, 2023.

CSS ile tip tanımı @property

fatih.hayrioglu@gmail.com (Fatih Hayrioglu) — Mon, 25 Dec 2023 00:00:00 +0300

@property nedir? CSS’in yeni bir özelliği mi? Aslında yeni bir CSS tanımı ve özelliği değil. @property geliştiriciler olarak bizim hiç dahil omadığımız alanlara girmemize izin verilen bir tanım daha doğrusu CSS Houdini‘nin bir parçasıdır.

CSS Houdini, Tarayıcı API’leri koleksiyonu için bir çatı terim olan Houdini, web geliştirme sürecine ve genel olarak CSS standartlarının geliştirilmesine önemli iyileştirmeler getirmeyi amaçlamaktadır. Front-end geliştiricileri, JavaScript kullanarak CSS’i yeni özelliklerle genişletebilecek, CSS oluşturma motoruna bağlanabilecek ve tarayıcıya bir oluşturma işlemi sırasında CSS’i nasıl uygulayacağını söyleyebilecek. Houdini’nin tarayıcı desteği gelişiyor ve bazı API’ler bugün kullanıma hazır.

Kısaca, tarayıcı geliştiricilerin biz web geliştiricilere gelin birazda siz geliştirin diye açtığı kapıdır CSS Houdini. @property’de CSS Houdini’nin bir parçasıdır. Parçanın parçası, evet çok fazla parça oldu :)

@property, biz geliştiricilere CSS değişkenleri (Custom Properties)‘nin tipini, başlangıç değerini ve kalıtsallığını tarayıcıya bildirmemize olanak sağlar.

Genel yapısı:

@property  --anaRenk {
  syntax: '<color>';
  initial-value: blue;
  inherits: false;
}

Söz dizimi(syntax) <length>, <number>, <percentage>, <length-percentage>, <color>, <image>, <url>, <integer>, <angle>, <time>, <resolution>, <transform-function>, <custom-ident>, <transform-list> değerlerinden birini alabiliyor.

Bu tanımı yaptığımızda tarayıcı, CSS değişkenini belirttiğimiz türde kaydederek. Daha sonra geçişlerde ve animasyonlarda kullanıldığında bu özelliğin değerlerini nasıl enterpolasyona tabi tutacağını bilir.

slashdev.io‘nun örneği konuyu anlamak için çok güzel.

Rengi ve boyutu değişen bir kutu animasyonu yapalım. Tabi buradaki --scale: .5; değerinin tipini anlamayan tarayıcı kutu boyutunu değiştirme kısmını uygulamayacak.

@property --scale {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}

tanımıyla tarayıcıya bunun bir sayı olduğunu söylediğimizde animasyon istediğimiz gibi çalışacaktır.

Tarayıcıların geliştirme ortamında yönetimi

Şimdilik sadece Chrome’da tarayıcı geliştirme aracında gösterim var. Safari desteği var ama gösterim yok. Firefox’da yeni ekledi zamanla ekleyeceklerini düşünüyorum.

Üzerine gelince çıkan popup’da gösteriyor ve ayrıca listenin en altında da gösteriyor.

## Tarayıcı desteği

Tarayıcı desteği konusunda gayet iyi yerlerde. Türkiye’de %91’lik bir oranla desteği var.

Kaynaklar

CSS ile tip tanımı @property was originally published by Fatih Hayrioğlu at Fatih Hayrioğlu'nun not defteri on December 25, 2023.

Listenin son elemanını bulmak

fatih.hayrioglu@gmail.com (Fatih Hayrioglu) — Fri, 22 Dec 2023 00:00:00 +0300

Geçen gün baklava select komponentine arama ekleme işini yapıyordu Erbil. Bu geliştirme sırasında şöyle bir şey yaşadık; hidden özniteliği ile gizlediğimiz listenin son elemanından dolayı son elemanın alt çizgisinin gizleme kodu çalışmıyordu.

Olayı şöyle örnekleyebilirim.

İlk listede normal durumda son elemanın altındaki çizgi gözükmüyor. İkinci örnekte sondan bir önceki eleman gizlendiği için yine gözükmüyor ancak son örnekte son elemanı gizlediğimiz için çizgi gözüküyor. :last-of-type seçicisi listenin gizlenmiş ögelerini dikkate almıyor. Çözmek için ürettiğimiz :not([hidden]):last-of-type seçicisi de işlemedi.

Bu konu hakkındaki araştırmalarımız sonucu stackoverflow’daki bu çözüm bize yol gösterdi. :nth-last-child(1 of :not([hidden])) ile sorun çözüldü.

Shadow DOM kaynaklı bir sorun nedeni ile baklavada çözmedi ama CSS ile böyle bir sorun yaşayanlar için not olsun diye buraya ekliyeyim dedim :)

Erbil burdaki sorunu çözen bir yöntem yazmış onu da ekliyeyim de web komponent için çözümü de aktarmış olalım.

 private _handleLastVisibleSearchedOption() {
    const lastVisibleOption = [...this.options].reverse().find(option => !option.hidden);

    if (lastVisibleOption) {
      lastVisibleOption?.shadowRoot?.querySelector("div")?.classList.add("no-border-bottom");
    }

    this.options.map(option => {
      if (!option.hidden && option !== lastVisibleOption) {
        option.shadowRoot?.querySelector("div")?.classList.remove("no-border-bottom");
      }
    });
  }

Kalın sağlıcakla.

Kaynaklar

Listenin son elemanını bulmak was originally published by Fatih Hayrioğlu at Fatih Hayrioğlu'nun not defteri on December 22, 2023.

CSS ile dinamik arka planlarda metin rengini otomatik değiştirtmek

fatih.hayrioglu@gmail.com (Fatih Hayrioglu) — Mon, 18 Dec 2023 00:00:00 +0300

Durumu şöyle açıklayabilirim: Aslında başlıkta açıklamış gibiyim :) Değişen arka planların olduğu bir yapının üzerindeki metinlerin rengini dinamik değiştirmeyi göreceğiz.

Böyle bir ihtiyacımız olmuştu daha önce bunu nasıl yaparız diye düşünüp çözemeyince farklı yollara başvurmuştuk.

Hatırladığım dört örnek var. Kendilerini bulamasam da benzer örnekler üzerinden sorunları ve çözümlerini anlatmaya çalışacağım. Son örnek benim sitemden olduğu için onu önceki ve sonraki hallerini resim olarak ekledim.

Dinamik arka planlı carousel

Çok eskilerde bir iş yapmıştım bir carousel yapıda resim üzerinde yazıların olduğu bir örnek vardı. Tasarımcının yaptığı örnekler mükemmeldi ancak iş kodlamaya dökülüp gerçek veriler girdiğinde hiçte hoş olmayan bir durum ortaya çıktı.

Üzerinden çok süre geçtiği için o carousel’i bulamadım. Onun yerine scroll-snap yazısındaki örneğe bir yazı ekleyip göstereyim dedim. Örnek olsun diye ilk resmi metin rengi ile aynı olacak şekilde ardalanı beyaz bir köpek resmi ekledim. İlk resimde yazını altına beyaz ardalan geldiği için normalde yazı gözükmeyecekti. Biz burada mix-blend-mode: difference; ekleyerek yazının arkada gelen resimden bağımsız görünmesini sağladık.

Koddaki başlık olan h2‘den mix-blend-mode: difference; özelliğini kaldırarak sorunlu halini görebilirsiniz.

Mobilde liste üstü buton

Bir diğer soruna uzun bir ürün listenin olduğu alanın üstüne buton koyduğumuzda yaşadığımız benzer sorun. Buton rengine yakın renkteki listeki resimlerin üzerine geldiğimizde butonun görünürlüğü azalıyordu.

Şöyle bir örnek gördüm codepen.io’da jhey‘in yaptığı çözüm ile bu sorunu da halledebiliyormuşuz. mix-blend-mode: difference; uygulaması ile çözülmüş.

Bastıkça dolan buton

Diğer sorun yaşadığım konu bir butonun mobilde tıklma ile değil de basıldığı sürece içinin dolduğu bir animasyon uyguladığımızda metin rengiyle ilgili yaşadığımız sorun.

Benzer bir örnek buldum codepen.io’da. Çözüm yine mix-blend-mode: difference; ile yapılmış.

Sitemdeki resimli başlıkların resim ile olan uyumu

Sitemdeki yazıların başlıkları altına resim olan bir tema kullanıyorum, burada her zaman resim ve üzerindeki yazıyı düşünerek bir şeyler üretmem gerekiyor. mix-blend-mode: difference; uygulayarak birçok başlık ve resmindeki sorunu çözmüş oluyorum.

Genel itibariyle sorunumu çözdü. Sadece bazı yazı içeren karmaşık arka plan resimlerinin olduğu başlıklar güzel sonuç vermedi. Bundan sonra yazılarıma arka plan resmi hazırlarken yazı olmamasına dikkat etmem yeterli olacak.

Tarayıcı desteği konusunda gayet iyi. Türkiye için %96.

Kalın sağlıcakla.

Kaynaklar

CSS ile dinamik arka planlarda metin rengini otomatik değiştirtmek was originally published by Fatih Hayrioğlu at Fatih Hayrioğlu'nun not defteri on December 18, 2023.

::marker sözde (pseudo) elemanı

fatih.hayrioglu@gmail.com (Fatih Hayrioglu) — Thu, 14 Dec 2023 00:00:00 +0300

W3C’nin son zamanlarda yaptığı güzel ataklar bize doğru yolu bulduklarını gösteriyor. Geriden de gelseler sektörün ihtiyaçlarına kulak vermeleri güzel. ::marker ile bunun ne alakası var derseniz şöyle açıklayayım: Yıllarca list işaretleyici (marker) için çeşitli yöntemler geliştirdik ve kullandık sonra ::marker sözde elementi çıktı ve bu yaptığımız alternatif yöntemlere gerek kalmadı. Standart koyucular yerleşik olarak gelen elemanlara yeterince CSS ile erişim sağlarlarsa hem daha standart hem de daha kolay yönetilebilir bir mecraya kavuşabiliriz. Son yıllardaki atılım bu konuda beklenen çizgiye geldiğini gösteriyor.

Gelelim konumuza HTML’de üç çeşit liste elementi var. Sıralı listeler (<ol>) ve sırasız listeler (<ul>) ve tanımlı listeler(<dl> <dd>) Biz burada işaretçisi olan <ul>ve <ol> elementi inceleyeceğiz.

Bu HTML etiketlerini oluşturduğumuzda bize tarayıcıların standart stilleri ile görünürler. Biz bu görünümleri değiştirmek için şimdiye kadar alternatif yöntemler kullanıyorduk. Şimdi ::marker sözde elementi ile bunu kolaylıkla yapabiliyoruz.

See the Pen Listeler by Fatih Hayrioğlu (@fatihhayri) on CodePen.

Yukarıdaki listede yuvarlak işaretçiyi veya rakamları değiştirmek istesek te W3C’nin bize sunduğu alternatiflerden birini kullanmak durumundaydık. Kendi özel işaretçimizi kullanmak için genelde list-style: none; ile işaretçiyi gizleyip :before ile kendi işaretçimizi ekliyorduk.

Şimdi ::marker sözde elemanı yardımı ile bu işaretçilerin özelliklerine erişip değiştirebiliyoruz.

See the Pen Listeler by Fatih Hayrioğlu (@fatihhayri) on CodePen.

Bunun dışında işaretçilerin yerine resim veya emoji koyabiliyoruz.

See the Pen Listeler by Fatih Hayrioğlu (@fatihhayri) on CodePen.

::marker sözde sınıfına tanımlanabilen özellikler

Şu an uygulanabilen tanımlar aşağıdakilerdir.

font-* özellikleri
white-space
color
direction
content
animation
transition

Şu an background, margin, padding, width, height özelliklerine müdahale edemiyoruz umarım bunlarda eklenir.

Tarayıcıda görünümü

Liste işaretçilerini tarayıcılarda görüntüleyip üzerinde işlem yapabiliyoruz.

Tarayıcı desteği de gayet iyi. Yazıyı yazdığımda %95 desteği var.

Kalın sağlıcakla.

Kaynaklar

https://css-tricks.com/css-counters-custom-list-number-styling/
https://codepen.io/ines/pen/qXrYQO
https://codepen.io/t_afif/pen/GRYZeqr
https://codepen.io/DuskoStamenic/pen/LYeEqbm
https://codepen.io/5t3ph/pen/KKgqeNB
https://webdesign.tutsplus.com/next-level-list-bullets-with-css-marker–cms-37212t
https://youtu.be/2awepiNoaZI?si=LFm0QOT5gap_x3AW
https://www.smashingmagazine.com/2019/07/css-lists-markers-counters/
https://web.dev/articles/css-marker-pseudo-element?hl=tr

::marker sözde (pseudo) elemanı was originally published by Fatih Hayrioğlu at Fatih Hayrioğlu'nun not defteri on December 14, 2023.

CSS ile animasyonlu altı çizili metinler yapmak

fatih.hayrioglu@gmail.com (Fatih Hayrioglu) — Mon, 11 Dec 2023 00:00:00 +0300

Bu sıralar CSS ile yapabileceklerimiz konusunda codepen.io’da çok vakit geçiriyorum. Gördüklerimden güzel olanları burada paylaşmaya çalışıyorum. Bu yazıda animasyonlu altı çizli metinler yapmayı anlatmaya çalışacağım. Benim genelde basit ve kolay çözümler daha çok hoşuma gidiyor. Çok eskilerde bu animasyonu genelde flash sitelerin menülerinde kullanıyorduk.

Bu animasyonu yapmak için farklı yöntemler(underline, background- box-shadow) var ancak elemanın :before sözde elemanı ile yapmak en mantıklısı.

a::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 4px;
  bottom: 2px;
  left: 0;
  background: var(--underline-color);
  transform: scaleX(0);
  transition: transform 0.25s ease-out;
}

transform: scaleX(0); ile çizgiyi gizliyoruz. Aslında animasyonu da bunun üzerinden yapacağız. Animasyonu transition: transform 0.25s ease-out; kodu ile ayarladık.

a:hover::before {
  transform: scaleX(1);
}

Sadece transform: scaleX(1); kodu ile animasyonu tamamladık.

See the Pen animasyonlu altı çizgili metinler by Fatih Hayrioğlu (@fatihhayri) on CodePen.

Animasyonun yönünü değiştirebiliriz.

Soldan sağa animasyon

Burada sadece transform-origin: bottom left; kodu ile bunu değiştirebiliyoruz.

.soldan:before {
  transform-origin: bottom left;
}

Sağdan sola animasyon

Burada sadece transform-origin: bottom right; kodu ile bunu değiştirebiliyoruz.

.sagdan:before {
  transform-origin: bottom right;
}

Çok çeşitli örnekler var. Kaynaklar kısmına göz atmanızı öneririm.

Kalın sağlıcakla.

Kaynaklar

CSS ile animasyonlu altı çizili metinler yapmak was originally published by Fatih Hayrioğlu at Fatih Hayrioğlu'nun not defteri on December 11, 2023.

accent-color tanımı

fatih.hayrioglu@gmail.com (Fatih Hayrioglu) — Mon, 4 Dec 2023 00:00:00 +0300

HTML form elemanları genelde tarayıcıların belirlediği standart stiller ile gelir. Çoğu zaman projelerimizde standart gelen renkleri değiştirmek için farklı yollar izleriz. Son zamanlarda genel olarak appearance: none ile tarayıcı stillerini ve davranışlarını ezip ekstra div veya :before, :after sözde sınıflarını kullanarak stillendiriyoruz. Bu yöntemler ile özelleştirilen form elemanları tarayıcının bize sunduğu özellikleri ezmemiz anlamına geliyor. Özellikle erişilebilirlik konusunda sorunlu hale geliyor.

W3C bu sorunları görüp accent-color tanımı çıkardı. accent-color tanımı basitçe form elemanlarımızın tarayıcı tarafından belirlenmiş rengini değiştirmemizi sağlayan özelliktir. Tüm form elemanlarına uygulanmıyor.

Uygulanan form elemanları

accent-color tanımı belirli form elemanlarında geçerli. Bu elemanlar

<input type="checkbox">
<input type="radio">
<input type="range">
<progress>

Aşağıdaki örnekte de görüleceği gibi bu form elemanlarına sadece accent-color tanımı yaparak rengini değiştirebiliyoruz.

See the Pen Accent-color by Fatih Hayrioğlu (@fatihhayri) on CodePen.

Diğer form elemanları

Şimdilik yukarıdaki form elemanları için çalışan bu kod ileride yenilerinin eklenmesiyle daha etkin kullanılacaktır.

Adam Argyle’ın yazısındaki ek kod da değiştirebileceğimiz alanlar için güzel ipucu kod:

html { 
  --brand: hotpink;
  scrollbar-color: hotpink Canvas;
}

:root { accent-color: var(--brand); }
:focus-visible { outline-color: var(--brand); }
::selection { background-color: var(--brand); }
::marker { color: var(--brand); }

:is(
  ::-webkit-calendar-picker-indicator,
  ::-webkit-clear-button,
  ::-webkit-inner-spin-button, 
  ::-webkit-outer-spin-button
) {
  color: var(--brand);
}

Umarım gelecekte select’in seçili option bg, takvim elemanın vb. renk değişimlerini de sağlarız. Ne kadar form elemanına erişirsek o kadar kolaylaşacak bu iş.

Koyu / Açık mod durumları

Artık birçok sitede açık / koyu mod farkı kullanılmakta. Ayrıca sistemdeki tema seçimine göre prefers-color-scheme ile yazılan CSS kodunu da düşünmek lazım.

Aşağıdaki resimde görüldüğü gibi farklı accent-color seçimine göre tarayıcılar farklı renk seçeneklerine otomatik geçiyorlar. Normalde bizim özelleştirdiğimiz durumlarda bu tip durumları bizim düşünmemiz gerekiyor.

Detay vermek gerekirse aşağıdaki görüntüde renk değişince checkbox’ın işareti rengin kontrastına göre siyah veya beyaz oluyor. Benzer şekilde progress’in çubuğunun rengi beyaz yada siyah oluyor. Radio’nun seçili ard alanı beyaz veya siyah oluyor.

Sonuç

Sonuç olarak tüm projelerimizdeki sorunları çözmese de bazı projelerdeki ihtiyaçlarımızı karşılayacak bir özellik. Belki başka yenilikler ve yeni form elemanlarıyla daha da geliştirildiği takdirde daha çok projede kullanılabilir.

Kalın sağlıcakla.

accent-color tanımı was originally published by Fatih Hayrioğlu at Fatih Hayrioğlu'nun not defteri on December 04, 2023.

CSS ile yükleniyor animasyonu yapmak

fatih.hayrioglu@gmail.com (Fatih Hayrioglu) — Mon, 27 Nov 2023 00:00:00 +0300

CSS ile yapılabileceklerimiz her geçen gün artarken burada sizlere bazılarını sıralamak isterim. Bu yazımdan sizlere CSS ile yapılabilecek yükleniyor animasyonlarını anlatmaya çalışacağım. Burada anlattıklarım “devede kulak” bir çok sitede daha fazlasını bulabilirsiniz. codepen’de bir loading araması ile birçok örneğe erişebilirsiniz. Ayrıca hazır css kodları sunan sitelerden de yararlanabiliriz.

Bunlar benim konuyu araştırırken bulduklarım. Burada anlatmamın sebebi; tasarım olarak gelen yükleniyor animasyonları buradaki örneklerden farklı olabilir biz temel kodları anlarsak birçoğunu CSS kullanarak yapabiliriz.

Peki hazır resim dosyaları veya SVG ile de biz bunları yapabiliriz niye CSS ile yapıyoruz?

CSS ile yapmanın bize esneklik ve kolay değiştirebilme imkanı sağlar. Ben olabildiğince CSS ile çözme taraftarıyım.

Dairesel yükleniyor örneği

See the Pen CSS Spinner by Fatih Hayrioğlu (@fatihhayri) on CodePen.

Burada içi boş bir kutuyu border-radius ile yuvarlayıp kenarlarını saydam verip bir kenarını beyaz yaparak bir şekil elde ederiz. Bunu basit bir animasyonla transform: rotate(360deg) döndürdüğümüzde işlem tamamdır.

Bar yükleniyor örneği

See the Pen CSS Spinner by Fatih Hayrioğlu (@fatihhayri) on CodePen.

Bu tip birden fazla eleman(3 adet bar) çözümlerin için HTML olarak eklemekte bir çözüm. ancak buradaki örnekte background özelliği üç eleman eklenmiş ve bu elemanların boyutlarıyla oynanarak animasyon elde edilmiştir.

Nokta yükleniyor örneği

See the Pen CSS Bar by Fatih Hayrioğlu (@fatihhayri) on CodePen.

Bu örnekte biraz background‘a atanan radial-gradient ve clip-path yardımıyla şekil oluşturulmuş. Animasyonu da clip-path: inset(0 -34% 0 0) değiri değiştirilerek oluşturulmuştur.

İlerleme çubuğu örneği

See the Pen CSS Bar by Fatih Hayrioğlu (@fatihhayri) on CodePen.

Yine bir background ile oluşturulmuş bir ardalan ve iki adet mor renkli çubuk ile şekil oluşturulmuş. Animasyon oluşturulan bu iki elmanın konumu değiştirilerek background-position: 250% 0,-150% 0 yapılmış.

progress elementi ile

See the Pen CSS Bar by Fatih Hayrioğlu (@fatihhayri) on CodePen.

Yukarıdaki örneklerde HTML olarak hep <div class="yukleniyor"></div> diye bir elemanı kullanılarak üretildi. Burada ise <progress /> elemanı kullanılarak oluşturuldu. Çok stiline dokunmamıza izin vermiyor standartlar. Sadece accent-color tanımıyla sağa sola hareket eden kısmın rengini değiştirebiliyoruz. Bu elemanını CSS ile erişimine olanak sağlansa hem mantıksal bir öge olmuş olur hem de işler daha kolay olur. Belki ilerde geliştirirler.

Kalın sağlıcakla.

Kaynaklar

CSS ile yükleniyor animasyonu yapmak was originally published by Fatih Hayrioğlu at Fatih Hayrioğlu'nun not defteri on November 27, 2023.

CSS scroll-snap

fatih.hayrioglu@gmail.com (Fatih Hayrioglu) — Mon, 20 Nov 2023 00:00:00 +0300

Yatay scroll tercih sebepleri genelde kullanıcının yoğun kullandığı alandaki yerin paylaşım sorunlarını aşmaktır. Bu paylaşım sorunu mobil ortamlarda daha fazla ortaya çıkıyor. Birçok e-ticaret ve haber sitesinde yer alan caraousel yapıları bunun en önemli örneğidir. Bu yapılar genel olarak javascript ile çözüle gelmekte idi. Sonra standart koyucular bunun CSS ile de yapılacağı bir özellik grubu açıkladı bu özellik grubunu scroll-snap olarak tanımlıyoruz.

Bir içeriği kaydırırken genelde kaydırılan içeriğin neresine kadar kaydırdığımıza dikkat etmek zorunda kalırız. Çünkü arada atlama olmasını istemeyiz. Günümüzde sonsuz kaydırmalı yapıların çoğalarak kullanıldığı yapılarda bu daha çok önem kazanır. scroll-snap özelliği kaydırmanın belli noktalara mıknatıs gibi yapışmasını sağlıyor. Böylece kullanıcı fazladan dikkat etmek zorunda kalmadan kaydırma yapabiliyor.

scroll-snap özellikleri kaydırma yapılacak içeriği kapsayan elemana tanımlana özellikler ve kaydırılan içeriğe atana özellikler diye ikiye ayırırız.

Kapsayıcı tanımları
- scroll-snap-type
- scroll-padding
Alt eleman tanımları
- scroll-snap-align
- scroll-margin

Kapsayıcı eleman tanımları ile başlayalım;

scroll-snap-type

Kaydırma işlemenin yapılacağı içeriğin kapsayıcısına tanımlanır. Tanımlanan kapsayıcının yatayda mı, dikeyde mi kaydırma yapacağını belirliyoruz bir de kaydırma işleminin tutma işleminin katı mı yoksa yarı katı mı olacağını belirliyoruz.

mandatory: Kaydırma işlemi yaparken kati bir şekilde belirlene noktaları tutmasını istiyorsak.
proximity: Kaydırma işlemi yaparken kullanıcı yarıyı geçen kadar zorlama ama yarıyı geçtikten sonra yapıştır demek için kullanılır.

Bu iki ayrımı örneklerde daha iyi göreceksiniz diyelim ve diğer tanıma geçelim.

mandatory örneği:

See the Pen scroll snap by Fatih Hayrioğlu (@fatihhayri) on CodePen.

proximity örneği:

See the Pen scroll snap by Fatih Hayrioğlu (@fatihhayri) on CodePen.

scroll-padding

Kaydırma işlemi yaparken sayfamızda veya içeriğimizde yapışık alanlar varsa veya tam belirli bir yerden değilde 20px öncesinde dursun dediğimiz durumları sağlar bize.

See the Pen scroll snap by Fatih Hayrioğlu (@fatihhayri) on CodePen.

Gelelim alt eleman tanımlarına;

scroll-snap-align

Kaydırma yapılancak içerikteki ögelerin neresine hizalanacağını belirlememize yarıyor. Üç değer alır.

start: Kaydırma ögenin başlangıcına göre yapılır.
center: Kaydırma ögenin ortasına göre yapılır.
end: Kaydırma ögenin sonuna göre yapılır.

See the Pen scroll-snap-align by Fatih Hayrioğlu (@fatihhayri) on CodePen.

Not: İlk öge hep start ile başlar sonraki ögelerde tanıma göre değişir.

scroll-margin

scroll-padding ile aynı işlevi görür. scroll-padding kapsayıcıya tanımlanırken scroll-margin alt elemana tanımlanır.

See the Pen scroll-margin by Fatih Hayrioğlu (@fatihhayri) on CodePen.

Tarayıcıların geliştirici araçlarındaki görünümü

Chrome’un geliştirici aracında scroll-snap çok iyi düzenleniyor ve görünüyor. Kaydırma yapılacak alan scroll-snap kullandığı gösteriliyor. scroll-snap-align bilgisi padding ve margin bilgisi gösteriliyor. Kaydırma yapılan ögelerin izdüşümleri gösteriliyor. Firefox ve Safari’de gösteriyor ancak Chrome’un gösterimi çok iyi.

Tarayıcı desteği

%95 gibi gayet güzel bir desteği var.

Sonuç

scroll-snap özelliği bizlere bir çok yönüyle kolaylık sağlıyor. Tabi projelerimizdeki tüm kaydırma alanı ihtiyaçlarımızı karşıladığını söyleyemeyiz. Bir careousel yapabiliriz ama bu careousel’e ok eklemek istediğimizde ya statik ekleyeceğiz ya da javascript yardımı almamız gerekir. Benzer şekilde gezinmek için nokta koyduğumuzda da benzer durum geçerli. Şimdilik ihtiyaca göre javascirpt desteği sağlanıp çözüm üretmek mantıklı görünüyor.

Şu örnek scroll-snap + js kullanımı için mükemmel bence.

Bİr diğer konu da yeni gelecek olan kaydırma çubuğuna bağlı animasyon ile birlikte çok güzel uygulamalar ortaya çıkacaktır. Bu konuda şöyle bir makale var.

İki yönlü uygulama olarak bir takvim uygulaması gayet başarılı. Örnek

Tayfun Erbilen’in örneği de gayet güzel.

Tabi pozitif yanlarını yanında negatif yanları da var. Bu işi js ile yapanların çıkardığı bir negatif yanlar yazısı var.

Sonuç olarak tüm ihtiyaçları karşılaması zor bir alan ama en azından büyük çoğunluğun ihtiyacını karşılayacak bir özellik.

Kalın sağlıcakla.

Kaynaklar

https://web.dev/css-scroll-snap/
https://twitter.com/CanIDevTools/status/1580409354209009664 - Chrome dev tools da gösterimi
https://12daysofweb.dev/2022/css-scroll-snap/
https://www.youtube.com/watch?v=pohyK8iz-SQ
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap
https://css-tricks.com/practical-css-scroll-snapping/
https://css-tricks.com/how-i-added-scroll-snapping-to-my-twitter-timeline/
https://ishadeed.com/article/css-scroll-snap/
https://alvarotrigo.com/blog/why-not-to-use-css-scroll-snap/
https://www.filamentgroup.com/lab/introducing-snapper.html
https://blog.logrocket.com/how-to-use-css-scroll-snap/
https://www.youtube.com/watch?v=0Og_kQUsxEw
https://twitter.com/addyosmani/status/1485024476974694400
https://twitter.com/argyleink/status/1456979682344128517
https://codepen.io/argyleink/pen/wvgmMXe
https://codepen.io/mobalti/pen/GRPMpyj
https://x.com/iamakulov/status/1693563645773701422?s=20
https://x.com/mattgperry/status/1546838506789552133?s=20
https://youtu.be/WMRbz_AjDvU?si=JPHuP0Q-GxZ8XKwL - CSS Scroll Snap Kullanımı - PROTOTURK
https://x.com/davidm_ml/status/1635593787371327488?s=20
https://x.com/the_ross_man/status/1691913040168657348?s=20

CSS scroll-snap was originally published by Fatih Hayrioğlu at Fatih Hayrioğlu'nun not defteri on November 20, 2023.

CSS ile buzlu cam efekti yapmak

fatih.hayrioglu@gmail.com (Fatih Hayrioglu) — Mon, 13 Nov 2023 00:00:00 +0300

Buzlu cam efekti yapmak, :user-invalid seçicisi yazısındaki örnekte de kullandığım bir teknikti. CSS’in bizlere kazandırdıklarını göstermek açısından güzel örnek.

Peki buzlu cam desenli ardalanlar nasıl yapılıyor?

Ben bu efekti ilk olarak Kyle Wetton’ın CodePen‘deki örneğinde görmüştüm.

Kod olarak da çok basit bir uygulaması var. Arka tarafında büyük bir resim olan bir kutunu ard alanına backdrop-filter: blur(18px); tanım yaparız. Uyguladığımız yere göre ard alanına beyaz veya siyah bir renk tanımlayıp saydamlığını da 0.3 tanımladıktan sonra son olarak kutuya bir gölge vermekte güzel etki yapıyor. Sonuçta kod:

.glass {
  background-color: rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0px 20px 18px rgba(0, 0, 0, 0.30);
}

See the Pen CSS - Frosted Glass by Fatih Hayrioğlu (@fatihhayri) on CodePen.

Üste yapışık menülerde de güzel efekt veriyor.

See the Pen Grid: grid-auto-flow: dense by Fatih Hayrioğlu (@fatihhayri) on CodePen.

Bunların dışında bir çok örnek var. İncelemek isterseniz codpen linki

Not: filter: blur(10px) ile benzer sonuçlar elde edilebilir.

Tarayıcı Desteği

Türkiye’de şu an %95’lik desteği ile kullanılır durumda.

Kalın sağlıcakla.

Kaynaklar

CSS ile buzlu cam efekti yapmak was originally published by Fatih Hayrioğlu at Fatih Hayrioğlu'nun not defteri on November 13, 2023.