- Konu sahibi
- #1
CSS’te
Bir kullanıcı düğmeye bastığında tarayıcı ilgili öğeye
Bu üç durum birbirinin yerine geçmez. Özellikle
Aşağıdaki dosyayı
Bağlantılarda da aynı kullanım geçerlidir:
Dokunmatik cihazlarda basılı durumun ne kadar süre ve hangi biçimde görüneceği tarayıcıya ve işletim sistemine bağlı olabilir. Bu yüzden önemli durum bilgisini yalnızca
Hayır.
Dokunmatik tarayıcılar basma, dokunma ve bağlantı etkinleştirme durumlarını farklı yorumlayabilir. Tasarımın kritik bilgisini yalnızca bu geçici stile dayandırmayın ve sonucu gerçek hedef cihazlarda kontrol edin.
:active, kullanıcının bir bağlantı veya düğme gibi etkileşimli bir öğeyi etkinleştirdiği, yani genellikle fare düğmesine basıp henüz bırakmadığı kısa süre boyunca uygulanan sözde sınıftır. Bu durum, öğeye tıklanıp tıklanmadığını kalıcı olarak göstermez; yalnızca etkinleştirme eyleminin gerçekleştiği anı biçimlendirir.:active nasıl çalışır?
Bir kullanıcı düğmeye bastığında tarayıcı ilgili öğeye
:active durumunu verir. Kullanıcı basmayı bıraktığında veya etkileşim iptal olduğunda bu durum sona erer. Bu nedenle :active, düğmenin basılı hissini vermek, bağlantının tıklanma anını belirginleştirmek veya kısa süreli görsel geri bildirim sağlamak için kullanılır.:active durumunu :hover ve :focus ile karıştırmamak gerekir:| Sözde sınıf | Ne zaman uygulanır? | Yaygın kullanım |
|---|---|---|
:hover | İşaretçi öğenin üzerindeyken | Üzerine gelme efekti |
:focus | Öğe klavye veya başka bir giriş yöntemiyle odaklandığında | Klavye erişilebilirliği ve odak göstergesi |
:active | Öğe etkinleştirilirken, genellikle basılı tutulduğu anda | Basılma veya tıklama geri bildirimi |
Bu üç durum birbirinin yerine geçmez. Özellikle
:active kullanırken :focus stilini kaldırmak doğru değildir; klavye ile gezinen kullanıcıların hangi öğede olduğunu görebilmesi gerekir.Çalışan en küçük örnek
Aşağıdaki dosyayı
active-ornek.html adıyla kaydedip tarayıcıda açın. Düğmeye basılı tuttuğunuzda rengi koyulaşır ve hafifçe aşağı hareket eder:
Kod:
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<title>:active örneği</title>
<style>
.button {
padding: 10px 16px;
border: 0;
border-radius: 4px;
background: #1769aa;
color: white;
cursor: pointer;
}
.button:hover {
background: #12558a;
}
.button:active {
background: #0d3f66;
transform: translateY(2px);
}
.button:focus-visible {
outline: 2px solid #111;
outline-offset: 2px;
}
</style>
</head>
<body>
<button class="button" type="button">Kaydet</button>
</body>
</html>Uygulama ve kontrol adımları
- Etki vermek istediğiniz bağlantı veya düğmeye bir sınıf ekleyin; örnekte bu sınıf
buttondeğeridir. - Normal görünümü sınıf seçicisiyle tanımlayın ve yalnızca basılma anındaki değişiklikleri
.button:activeiçinde yazın. - Dosyayı tarayıcıda açıp düğmeye basılı tutun. Beklenen sonuç, bırakmadan önce koyu arka plan ve 2 piksel aşağı hareket görülmesidir.
- Basılı tutarken hiçbir değişiklik görünmüyorsa seçicinin HTML sınıfıyla eşleştiğini ve
:activekuralının başka bir CSS kuralı tarafından ezilmediğini denetleyin. Düğmeye yalnızca hızlıca tıklamak, geçici durumu fark etmeyi zorlaştırabilir. - Klavye kullanıcıları için
:focus-visibleveya uygun bir:focusstili bırakın.:activetek başına kalıcı odak göstergesi değildir.
Bağlantılarda da aynı kullanım geçerlidir:
a:active veya belirli bir sınıfla .link:active yazılabilir. Ancak :active bir işlem tamamlandı bilgisini saklamaz. Kullanıcı tıklamayı bıraktıktan sonra kalıcı bir “kaydedildi” veya “seçildi” görünümü gerekiyorsa bu durum JavaScript ya da sunucu tarafından üretilen ayrı bir sınıf/özellik ile yönetilmelidir.Dokunmatik cihazlarda basılı durumun ne kadar süre ve hangi biçimde görüneceği tarayıcıya ve işletim sistemine bağlı olabilir. Bu yüzden önemli durum bilgisini yalnızca
:active rengine veya hareketine bağlamayın; asıl geri bildirimi metin, durum alanı ya da kalıcı bir sınıfla sağlayın.Kaynaklar
Sık sorulan sorular
:active ile bir düğmeyi kalıcı olarak seçili gösterebilir miyim?
Hayır.
:active geçici bir etkileşim durumudur. Kalıcı görünüm için HTML’de bir sınıf, aria-pressed gibi uygun bir durum niteliği veya uygulamanın yönettiği başka bir durum kullanılmalıdır.:active neden mobil cihazda masaüstündeki gibi görünmüyor?
Dokunmatik tarayıcılar basma, dokunma ve bağlantı etkinleştirme durumlarını farklı yorumlayabilir. Tasarımın kritik bilgisini yalnızca bu geçici stile dayandırmayın ve sonucu gerçek hedef cihazlarda kontrol edin.
