CSS, Tasarım Sistemi, UX ve Erişilebilirlik

HTML elemanlarının görünümünü, boyutunu, konumunu ve animasyonunu belirleyen stil dili.

Hangi HTML elemanlarına stil uygulanacağını seçen ifade.

Belirli class adına sahip elemanları seçer.

Belirli id değerine sahip tekil elemanı seçer.

Belirli HTML tag türündeki elemanları seçer.

Belirli attribute veya attribute değerine göre eleman seçer.

Hover, focus veya nth-child gibi geçici durumlara göre stil uygular.

Bir elemanın before, after veya first-letter gibi sanal parçasını stiller.

Birden fazla CSS kuralından hangisinin uygulanacağını belirleyen öncelik sistemi.

Selector'ların çakışmasında hangi kuralın daha güçlü olduğunu belirleyen puanlama.

Bazı CSS özelliklerinin üst elemandan alt elemanlara aktarılması.

Bir elemanın content, padding, border ve margin katmanlarından oluşan ölçü modeli.

Elemanın gerçek içerik alanı.

İçerik ile border arasındaki iç boşluk.

Elemanın padding dışındaki kenar çizgisi.

Elemanın diğer elemanlarla arasındaki dış boşluk.

Elemanın genişlik ve yüksekliğini belirleyen özellikler.

Elemanın küçülebileceği veya büyüyebileceği sınırlar.

Elemanın block, inline, flex, grid veya none gibi yerleşim davranışı.

Genellikle yeni satırdan başlayan ve mevcut genişliği kullanan eleman.

Metin akışı içinde yalnızca içeriği kadar alan kaplayan eleman.

Satır içinde duran ancak boyut ve boşluk verilebilen eleman.

Tek boyutlu satır veya sütun yerleşimleri için esnek düzen sistemi.

Çocuklarını flex kurallarına göre yerleştiren kapsayıcı.

Bir flex container'ın doğrudan çocuğu.

Ana eksende elemanların hizasını ve dağılımını belirler.

Çapraz eksende elemanların hizasını belirler.

Grid veya flex elemanları arasındaki boşluğu belirler.

Satır ve sütunlardan oluşan iki boyutlu yerleşim sistemi.

Grid içindeki sütunların sayısını ve genişliğini tanımlar.

Grid hücrelerini isimlendirerek bölgesel sayfa yerleşimi kurar.

Elemanın normal akış, relative, absolute, fixed veya sticky konumlandırmasını belirler.

Elemanı normal konumuna göre hareket ettirir ve absolute çocuklara referans olur.

Elemanı en yakın konumlandırılmış ataya göre normal akıştan çıkarır.

Elemanı viewport'a sabitler.

Elemanı belirli kaydırma noktasından sonra kapsayıcı içinde sabitler.

Üst üste gelen elemanların katman sırasını belirler.

Taşan içeriğin gizlenmesi, kaydırılması veya görünmesi davranışı.

Arayüzün farklı ekran boyutlarına uyum sağlayacak şekilde tasarlanması.

Stilin önce küçük ekranlar için yazılıp daha büyük ekranlarda genişletilmesi.

Ekran genişliğine göre tasarımın değiştiği eşik.

Ekran veya cihaz özelliklerine göre CSS kuralı uygulayan yapı.

İçeriği maksimum genişlik ve yatay boşluklarla sınırlayan ana düzen elemanı.

Boyutların sabit piksel yerine mevcut alana göre esnediği düzen.

Kök font boyutuna bağlı göreceli CSS birimi.

Elemanın veya ebeveynin font boyutuna bağlı göreceli birim.

Viewport genişliği veya yüksekliğinin yüzdesine bağlı ölçü birimi.

Yazı tipi, boyut, satır yüksekliği ve metin hiyerarşisi sistemi.

Metinde kullanılacak yazı tipi ailesi.

Yazının incelik veya kalınlık derecesi.

Metin satırları arasındaki dikey mesafe.

Harfler arasındaki yatay boşluk.

Arayüzde tutarlı kullanılan ana, yardımcı ve durum renkleri.

Metin ile arka plan gibi öğelerin görsel ayrım seviyesi.

Renk, boşluk ve ölçü gibi değerleri tekrar kullanılabilir özel değişkende tutar.

Renk, tipografi, radius ve spacing gibi tasarım kararlarının isimlendirilmiş değeri.

Kurallar, bileşenler ve token'larla tutarlı ürün arayüzü oluşturma sistemi.

Tekrar kullanılabilir buton, form, modal ve kart bileşenleri koleksiyonu.

Tek bir küçük stil amacı taşıyan yardımcı CSS sınıfı.

Hazır grid, utility veya bileşenler sağlayan stil çatısı.

Grid ve hazır UI bileşenleri sunan yaygın CSS/JS framework'ü.

Utility-first yaklaşımıyla düşük seviyeli sınıflar sunan CSS framework'ü.

Bir elemanın özelliklerini zaman içinde değiştirerek hareket oluşturma.

Bir CSS özelliği değiştiğinde geçişin yumuşak gerçekleşmesini sağlar.

Elemanı taşıma, ölçekleme, döndürme veya eğme işlemi.

CSS animasyonunun zaman içindeki aşamalarını tanımlar.

İçerik yüklenirken sayfa yapısını geçici gri bloklarla gösterir.

Bir işlemin sürdüğünü gösteren dönen yükleme göstergesi.

Listede veri olmadığında kullanıcıya durum ve sonraki adımı açıklayan ekran.

Bir işlem başarısız olduğunda açık hata ve çözüm seçeneği gösteren durum.

İşlemin başarıyla tamamlandığını kullanıcıya bildiren durum.

İmleç öğe üzerindeyken oluşan görsel durum.

Klavye veya programatik odak alan öğenin görünür durumu.

Tıklanan veya seçili öğenin anlık durumu.

Kullanılamayan kontrolün görsel ve davranış durumu.

Kullanıcının ürünle etkileşimindeki kolaylık, verimlilik ve genel deneyim.

Kullanıcının gördüğü ve etkileşim kurduğu görsel arayüz.

İçeriği ve işlevleri anlaşılır hiyerarşide düzenleme disiplini.

Kullanıcının bir hedefe ulaşırken izlediği ekran ve işlem adımları.

Ekranın içerik ve yerleşimini düşük detayla gösteren taslak.

Ekranın görsel olarak detaylandırılmış statik tasarımı.

Ekranlar arası etkileşimi taklit eden test edilebilir tasarım modeli.

Kullanıcıyı satın al, kaydol veya teklif al gibi hedef eyleme yönlendiren öğe.

Bir öğenin nasıl kullanılacağını görünümüyle sezdirme özelliği.

Kullanıcı eyleminin algılandığını ve sonucunu gösteren sistem tepkisi.

Benzer işlevlerin ürün boyunca benzer görünmesi ve davranması.

Kullanıcının bir ekranı anlamak için harcadığı zihinsel çaba.

Karmaşık seçenekleri yalnızca gerektiğinde kademeli olarak gösterme yaklaşımı.

Riskli işlem öncesi kullanıcıdan açık onay isteyen pencere.

Kullanıcının son işlemi geri alabilmesini sağlayan özellik.

Ürünün engelli kullanıcılar dâhil mümkün olan en geniş kitle tarafından kullanılabilmesi.

Web erişilebilirliği için uluslararası ilke ve başarı kriterleri.

HTML'in ifade edemediği erişilebilirlik anlamlarını ekleyen attribute sistemi.

Görünür etiketi olmayan kontrol için ekran okuyucu adı sağlar.

Arayüzün fare olmadan klavyeyle kullanılabilmesi.

Tab tuşuyla odaklanılan elemanların sırası.

Ekrandaki metin ve kontrolleri sesli veya Braille olarak aktaran yardımcı teknoloji.

Header, nav, main ve footer gibi ekran okuyucu bölgeleri.

Klavye kullanıcısının tekrar eden menüyü atlayıp ana içeriğe geçmesini sağlar.

Bir kontrolün yardımcı teknolojiler tarafından duyurulan adı.

Renkleri ayırt etme farklılıklarını dikkate alan tasarım gereksinimi.

Dokunmatik cihazlarda rahat basılabilecek minimum etkileşim alanı.

Ekran ve çözünürlüğe göre uygun boyutta görsel sunma yaklaşımı.

Bir görsel veya kutunun genişlik-yükseklik oranı.

Görselin kutuya kırpılarak veya sığdırılarak yerleşmesini belirler.