Kaydol

Merhaba Sevgili Floodlar.com Kullanıcısı, Web sitemizde geçirdiğiniz zaman ve bu büyüleyici flood evrenine katılımınız için teşekkür ederiz. Floodların geniş dünyasıyla dolu deneyiminizi daha fazla keşfetmek için, web sitemizi sınırsız olarak kullanabilmeniz adına giriş yapmanız gerekmektedir.

Oturum aç

Merhaba Floodlar.com Kullanıcısı, İlk üç sayfayı tamamladınız, tebrikler! Ancak, floodların devamını görmek ve daha fazla interaktif deneyim yaşamak için giriş yapmanız gerekiyor. Hesabınız yoksa, hızlıca oluşturabilirsiniz. Sınırsız floodlar ve etkileşimler sizleri bekliyor. Giriş yapmayı unutmayın!

Şifremi hatırlamıyorum

Şifreniz mi unuttunuz? Endişelenmeyin! Lütfen kayıtlı e-posta adresinizi giriniz. Size bir bağlantı göndereceğiz ve bu link üzerinden yeni bir şifre oluşturabileceksiniz.

Fil Necati Masonlar Locası Subreddit Adı Nedir? Cevap: ( N31 )

Üzgünüz, flood girme izniniz yok, Flood girmek için giriş yapmalısınız.

Lütfen bu Floodun neden bildirilmesi gerektiğini düşündüğünüzü kısaca açıklayın.

Lütfen bu cevabın neden bildirilmesi gerektiğini kısaca açıklayın.

Lütfen bu kullanıcının neden rapor edilmesi gerektiğini düşündüğünüzü kısaca açıklayın.

Mobil Uygulamada Açın

Güncel Floodlar En sonuncu Nesne

Tema değiştirme bileşeni oluşturma

Tema değiştirme bileşeni oluşturma

Bu gönderide, koyu ve açık tema değiştirme bileşeni oluşturmanın bir yolu hakkındaki düşüncemi paylaşmak istiyorum. Demoyu deneyin.

Demo Kolay görünürlük için düğme boyutu artırıldı

Videoyu tercih ederseniz, işte bu gönderinin bir YouTube versiyonu:

genel bakış #

Bir web sitesi, tamamen sistem tercihine bağlı kalmak yerine renk düzenini kontrol etmek için ayarlar sağlayabilir. Bu, kullanıcıların sistem tercihleri ​​dışında bir modda göz atabilecekleri anlamına gelir. Örneğin, bir kullanıcının sistemi açık temadadır, ancak kullanıcı web sitesinin koyu temada görüntülenmesini tercih eder.

Bu özelliği oluştururken birkaç web mühendisliği hususu vardır. Örneğin, sayfa renklerinin yanıp sönmesini önlemek için tarayıcının tercihten mümkün olan en kısa sürede haberdar edilmesi gerekir ve kontrolün önce sistemle eşitlenmesi, ardından istemci tarafında saklanan istisnalara izin vermesi gerekir.

Diyagram, temayı ayarlamanın 4 yolu olduğunu genel olarak göstermek için JavaScript sayfa yükleme ve belge etkileşimi olaylarının bir önizlemesini gösterir.

işaretleme #

A &LTbutton> Tarayıcı tarafından sağlanan etkileşim olaylarından ve tıklama etkinlikleri ve odaklanabilirlik gibi özelliklerden faydalanacağınız için geçiş için kullanılmalıdır.

Düğme #

Düğme, CSS’den kullanmak için bir sınıfa ve JavaScript’ten kullanmak için bir kimliğe ihtiyaç duyar. Ek olarak, düğme içeriği metin yerine bir simge olduğundan, başlık düğmenin amacı hakkında bilgi sağlamak için öznitelik. Son olarak, bir ekleyin [aria-label] simgenin durumunu basılı tutmak için ekran okuyucular temanın durumunu görme engelli kişilerle paylaşabilir.

button 
class="theme-toggle"
id="theme-toggle"
title="Toggles light & dark"
aria-label="auto"
>


&LT/button>

aria-label Ve aria-live kibar #

olarak değişen ekran okuyuculara belirtmek için aria-label duyurulmalı, ekle aria-live="polite" düğmesine basın.

button 
class="theme-toggle"
id="theme-toggle"
title="Toggles light & dark"
aria-label="auto"

>


&LT/button>

Bu biçimlendirme eklemesi, ekran okuyucularına, aria-live="assertive", kullanıcıya neyin değiştiğini söyleyin. Bu buton olması durumunda, ne olduğuna bağlı olarak “aydınlık” veya “karanlık” olarak duyurulur. aria-label olmuş.

Ölçeklenebilir vektör grafiği (SVG) simgesi #

SVG minimum işaretlemeyle yüksek kaliteli, ölçeklenebilir şekiller oluşturmanın bir yolunu sunar. Düğmeyle etkileşim, vektörler için yeni görsel durumları tetikleyerek SVG’yi simgeler için mükemmel hale getirebilir.

Aşağıdaki SVG işaretlemesi, &LTbutton>:

svg class="sun-and-moon" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24">

&LT/svg>

aria-hidden SVG öğesine eklendi, böylece ekran okuyucuları sunum olarak işaretlendiğinden onu yok saymayı bilsin. Bu, bir düğmenin içindeki simge gibi görsel süslemeler için harikadır. gerekli ek olarak viewBox öznitelik, görüntülerin satır içi boyutlara sahip olması gerektiğine benzer nedenlerle yükseklik ve genişlik ekleyin.

Güneş #

Güneş grafiği, SVG’nin uygun şekilde şekillendirdiği bir daire ve çizgilerden oluşur. bu &LTcircle> ayarlanarak ortalanır cx Ve cy özellikleri, görüntü alanı boyutunun (24) yarısı olan 12’ye ve ardından bir yarıçap (r) ile ilgili 6 boyutu ayarlar.

svg class="sun-and-moon" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24">

&LT/svg>

Ek olarak, mask özelliği bir SVG öğesinin kimliğidaha sonra oluşturacağınız ve son olarak sayfanın metin rengiyle eşleşen bir dolgu rengi verilir. currentColor.

güneş ışınları #

Ardından, güneş ışını çizgileri, bir grup öğesinin içine, dairenin hemen altına eklenir. &LTg> grup.

svg class="sun-and-moon" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24">
circle class="sun" cx="12" cy="12" r="6" mask="url(#moon-mask)" fill="currentColor" />










&LT/svg>

Bu kez değeri yerine doldurmak yapı currentColorher satırın felç ayarlandı. Çizgiler artı daire şekilleri, kirişlerle güzel bir güneş oluşturur.

İlgili Mesajlar

Yorum eklemek için giriş yapmalısınız.