Switch elementi geliyor

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

• https://x.com/stefanjudis/status/1746236013607833657?s=20
• https://github.com/whatwg/html/issues/4180
• https://x.com/yisibl/status/1737739579418141116?s=20
• https://x.com/wesbos/status/1737916464571560445?s=20
• https://codepen.io/fatihhayri/pen/BabpzWr
• https://codepen.io/fatihhayri/pen/KKEagvV
• https://codepen.io/fatihhayri/pen/gOEgwzJ