CSS :checked Tekniğiyle Sekme Bileşeni ve JS Karşılaştırması
CSS :checked tekniğini kullanarak bir sekme arayüzü uygulayın ve bunu JavaScript yaklaşımıyla karşılaştırın.
CSS :checked Tekniğiyle Sekme Bileşeni ve JS Karşılaştırması, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.
Sekme Bileşeni Gereksinimleri
Bir sekme bileşeninde şunlar bulunmalıdır: etkin sekmenin görsel göstergesi, seçim sırasında gösterilen veya gizlenen ilişkili panel, sekmeler arasında klavye gezinmesi ve erişilebilir ARIA öznitelikleri. Bunlar, :checked yöntemi kullanılarak yalnızca CSS ile veya daha iyi erişilebilirlik için JavaScript ile gerçekleştirilebilir.
:checked Yöntemi
Gizli radyo girdileri durum görevi görür: her sekme bir radyo girdisine bağlı bir <label> öğesidir. Bir radyo işaretlendiğinde CSS kardeş birleştiricileri karşılık gelen paneli gösterir ve etkin sekme etiketini biçimlendirir. Hiç JavaScript gerekmez.
<div class="tabs">
<input type="radio" name="tabs" id="tab-1" checked hidden />
<label for="tab-1">Tab One</label>
<div id="panel-1">Panel one content</div>
</div>
:checked CSS Mimarisi
Radyo girdilerini, ardından tüm etiketleri (sekmeleri), sonra da tüm panelleri aynı kapsayıcıya yerleştirin. İşaretlenmiş bir radyoyu karşılık gelen paneline bağlamak için genel kardeş birleştiricisini (~) kullanın. Paneller varsayılan olarak display: none olur; eşleşen panel display: block değerini alır.
:checked Yaklaşımının Sınırlamaları
:checked yöntemi ARIA özniteliklerini (aria-selected, aria-controls) güncelleyemez, sekmeler arasında ok tuşlarıyla gezinmeyi etkinleştiremez ve DOM sıralaması kısıtlamaları (girdilerin panellerden önce gelmesi) görsel tasarım gereksinimleriyle çakışabilir. Bu eksikler gerçek erişilebilirliği sınırlar.
JavaScript Sekme Bileşeni
Bir JS sekme bileşeni, sekme düğmelerindeki tıklama olaylarını dinler, etkin sekmede aria-selected değerini ayarlar, panellerde aria-hidden değerini günceller ve odağı yönetir. Bu yaklaşım, ARIA Yazım Uygulamaları doğrultusunda tam ARIA uyumluluğu ve klavye etkileşimi desenleri sağlar.
Sekmeler için ARIA Rolleri
Kapsayıcıda role="tablist", her sekme düğmesinde role="tab" ile birlikte aria-selected ve aria-controls, her panelde ise role="tabpanel" ile birlikte aria-labelledby kullanın. Ekran okuyucular sekme sayısını, konumunu ve seçili durumunu duyurur.
Klavye Etkileşimi Deseni
Sekmeler için ARIA Yazım Uygulamaları şöyledir: Sekme tuşu sekme listesine girer ve etkin sekmeye odaklanır. Sol/Sağ ok tuşları sekmeler arasında hareket eder. Home/End ilk veya son sekmeye gider. Her ok tuşu hareketi, odaklanılan sekmeyi etkinleştirir (otomatik etkinleştirme deseni).
Etkin Durum için CSS
[aria-selected="true"] seçicisini kullanarak etkin sekmeyi alt kenarlık veya arka plan değişikliğiyle biçimlendirin; bu, hem JS hem de :checked yaklaşımlarıyla çalışır. Böylece CSS, ARIA durum özniteliğiyle eşzamanlı kalır ve iki ayrı durum yönetimi gerekmez.
<div role="tablist">
<button role="tab" aria-selected="true">Overview</button>
<button role="tab" aria-selected="false">Details</button>
</div>
Hareketli Gösterge
Hareketli bir sekme göstergesi sekmeler arasında kayar: mutlak konumlandırılmış bir gösterge öğesi konumlandırın, etkin sekmenin boyutlarıyla eşleşmesi için sol konumunu ve genişliğini ayarlamak üzere JavaScript kullanın ve transition: left 200ms ease, width 200ms ease ile canlandırın.
Duyarlı Sekme Taşması
Küçük ekranlarda sekmeler kapsayıcılarından taştığında yatay kaydırma (overflow-x: auto; scrollbar-width: none) kullanın veya mobilde sekmeleri bir seçim açılır listesine daraltın. Seçim yaklaşımı, yerel seçim öğesini sekme panelinin görünürlüğüyle eşitlemek için JS gerektirir.
Yalnızca CSS ve JS: Her Biri Ne Zaman Kullanılmalı
Basit, kritik olmayan ve erişilebilirliğin öncelikli bir kısıt olmadığı kullanıcı arayüzlerinde :checked hilesini kullanın. Klavye kullanıcılarına veya ekran okuyucu kullanıcılarına hizmet veren ya da denetimlerde veya yasal gereksinimler nedeniyle ARIA uyumluluğu gerektiren üretim arayüzlerinde JavaScript sekmelerini kullanın.
Bilgi Kontrolü
Sekmeler için CSS :checked hilesinin temel erişilebilirlik sınırlaması nedir?
Özet
:checked hilesi, radyo girişleri ve kardeş birleştiricileri kullanarak yalnızca CSS ile sekme değiştirmeyi sağlar; ancak ARIA ve klavye erişilebilirliğinden yoksundur. ARIA rolleri (tablist, tab, tabpanel), aria-selected yönetimi ve Ok tuşu işleme özelliklerine sahip JavaScript sekmeleri, üretim bileşenleri için gereken eksiksiz ve erişilebilir deneyimi sunar.
Sıkça Sorulan Sorular
“CSS :checked Tekniğiyle Sekme Bileşeni ve JS Karşılaştırması” dersi ücretsiz mi?
Evet — “CSS :checked Tekniğiyle Sekme Bileşeni ve JS Karşılaştırması” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.
“CSS :checked Tekniğiyle Sekme Bileşeni ve JS Karşılaştırması” dersinde ne öğreneceğim?
CSS :checked tekniğini kullanarak bir sekme arayüzü uygulayın ve bunu JavaScript yaklaşımıyla karşılaştırın. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
CSS Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.
“CSS :checked Tekniğiyle Sekme Bileşeni ve JS Karşılaştırması” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- CSS Özel Özellikleriyle Kart Bileşeni
- Modal ve İletişim Kutusu Stillendirme
- Açılır Menü ve Popover Kalıpları
- CSS :checked Tekniğiyle Sekme Bileşeni ve JS Karşılaştırması