Yükleniyor...

CSS Kullanıcı Arayüzü

Optional Advanced az önce bir fotoğrafa şablon koydu. Bu oturum başka bir alet çantası: kullanıcı arayüzü. İmleci, caret’i ve yerel widget kromunu değiştirirsiniz. Kahraman görsele delik açmazsınız, yazıyı gazete sütunlarına da bölmezsiniz.

Doğrudan yanıt

CSS kullanıcı arayüzü özellikleri etkileşime işaret eder. cursor fare şeklini seçer (pointer, wait, help, not-allowed…). resize bir köşeyi sürükletir — genelde textarea üzerinde. outline ve outline-offset yer kaplamayan bir odak halkası çizer (kutu modelindeki outline’ı biliyorsunuz; burada klavye alışkanlığıdır). user-select yanlışlıkla seçimi kısıtlar. caret-color yanıp sönen çubuğu boyar. appearance (ve -webkit-appearance) yerel deriyi soyup denetimi yeniden stillendirmenizi sağlar. Odağı görünür tutun. Tüm sayfayı seçilemez afişe çevirmeyin.

Bu neden maske veya sütun değil

Maske bir kutunun hangi piksellerinin görüneceğine karar verir. Çoklu sütun bir metin akışını parçalar. UI özellikleri ikisini de yapmaz. Genişlik ve yükseklik resize devreye girene dek aynı kalır. Filtreler ve mask-image hâlâ sanattır. Soru şudur: «Tıklanabilir görünüyor mu? Yazabilir miyim? Kutuyu büyütebilir miyim? Klavye kullanıcısı neredeyim görüyor mu?»

cursor — doğruyu söyleyin

cursor bir sözdür. pointer «buna tıklanır» demektir. Gerçek düğme ve bağlantılara koyun. Hiçbir iş yapmayan başlığa el koymayın.

Cursor map for honest controls

css 
a.nav-link,
button.save {
cursor: pointer;
}

button[disabled] {
cursor: not-allowed;
}

.help-hint {
cursor: help;
}

.busy-panel {
cursor: wait;
}

default oktur. text seçilebilir metindeki I çubuğudur. grab / grabbing sürükleme tutacaklarına uyar. Özel url(...) imleçleri küçük tutun ve her zaman yedek anahtar kelime yazın. Yalan söyleyen imleç hiç olmamasından kötüdür: slogan tıklanır, hiçbir şey olmaz.

resize — kutuyu büyütün, düzeni değil

resize taşması olan kutularda çalışır. Günlük kullanım not alanı:

Resize a textarea

css 
textarea.notes {
min-height: 6rem;
min-width: 16rem;
max-width: 100%;
resize: vertical;
overflow: auto;
}

Değerler: none, both, horizontal, vertical. visible dışında overflow ekleyin yoksa tutacak görünmeyebilir. Her karta resize: both serpmeyin. min-height / max-width alanı çökmekten veya patlamaktan korur.

Odak halkası olarak outline

Kutu modelinde outline kenarın dışında durur ve yer kaplamaz. UI çantasında aynı halkayı klavye odağı için tutarsınız — çoğu zaman :focus-visible ile, fare her tıklamada kutu çizmesin:

Focus outline with offset

css 
button.save:focus-visible {
outline: 3px solid #2563eb;
outline-offset: 3px;
}

button.save:focus:not(:focus-visible) {
outline: none;
}

Her denetimin eşit görünür bir yedeği yoksa küresel *:focus { outline: none; } göndermeyin. outline-offset halkayı komşuları büyütmeden kenardan uzaklaştırır. Bu border değildir (boyutu değiştirir) ve düğme etiketinde maske solması da değildir.

user-select — yanlışlıkla seçimi azaltın

Seçim bir özelliktir. Yalnızca çift tıklamanın mavi boyamaması gereken yerde kısın — araç çubuğu etiketi, sürükleme yongası — yazıda değil.

Limit selection on chrome, not prose

css 
.toolbar-label {
user-select: none;
}

article.body {
user-select: text;
}

none vurgulamayı kapatır. text okunaklı varsayılandır. all bir tıklamada tüm öğeyi seçer. Eski WebKit’te önekler (-webkit-user-select) hâlâ çıkar. Yasal metin, fiyat veya hata iletisinde kopyalamayı kapatmayın.

caret-color — yazma çubuğunu boyayın

Caret alandaki yanıp sönen çubuktur. Markaya uydurun ama gizlemeyin:

Caret color in a field

css 
input.email,
textarea.notes {
caret-color: #0f766e;
color: #0f172a;
}

caret-color: auto metin rengini izler. caret-color: transparent «temiz görünüm» için tuzaktır. Bu tüm sayfanın color’ı değildir, glifte mask-image de değildir.

appearance — yerel widget’ı yeniden giydirin

Tarayıcılar onay kutusu ve arama alanını yerel krom ile boyar. appearance: none (gerekirse -webkit-appearance: none) o deriyi soyar:

Reset appearance then restyle

css 
input.search {
appearance: none;
-webkit-appearance: none;
border: 1px solid #94a3b8;
border-radius: 0.5rem;
padding: 0.5rem 0.75rem;
}

input[type="checkbox"].tick {
appearance: none;
-webkit-appearance: none;
width: 1.15rem;
height: 1.15rem;
border: 2px solid #334155;
border-radius: 0.25rem;
}

none’dan sonra siz kenar, işaretli durum ve odak halkası borçlusunuz. Görünmez onay kutusu özel denetim değildir. Destek türe göre değişir; gerçek widget’ı deneyin. appearance maskeyi onarmaz, sütunları da değiştirmez.

UI, maske, sütun ve kutu outline’ı

📊 UI vs mask vs columns vs outline

Tool Job Poor fit
cursor / resize / caret-color / appearance Interaction chrome on controls Stenciling a photo; newspaper columns
user-select Limit highlight on chrome, not articles Hiding copy people must paste
outline + :focus-visible Keyboard focus ring (no layout space) Replacing border math; fading labels with a mask
mask-image Soft holes on one element’s pixels Pointer shape; growing a textarea
Multi-column (column-*) Fragment flowing text Cursors, carets, native widget skin

Optional Advanced sütunu nesir, maskeyi görsel için kullandı. Kullanıcı arayüzü denetim katmanıdır. Ayar formuna column-count veya gönder düğmesine mask-image formu «daha UI» yapmaz.

Neyi silmeyin

Tüm yerel ipuçlarını kaldırmayın. Kaydırma çubukları, caret ve odak halkaları ihtiyaç içindir. Denetim disabled ise gerçek disabled özniteliğiyle cursor: not-allowed, etiketi gizleyen maskeden daha sakindir.

UI polish is not a mask or columns

css 
.ok-ui {
cursor: pointer;
outline-offset: 2px;
}

.not-a-stencil {
/* don't: mask-image on the submit label to “soften” the click */
}

.not-a-newspaper {
/* don't: column-count on a login form to look advanced */
}

Sorun fotoğraf kenarıysa maskeye dönün. Uzun yazıysa sütunlara veya sıradan blok akışına. «Tıklanabilir hissetmiyor» ise süs filtresinden değil cursor ve gerçek denetimden başlayın.

Kendiniz deneyin

  1. Gerçek <button> üzerine cursor: pointer, [disabled] üzerine not-allowed.
  2. textarea’ya resize: vertical, min-height, overflow: auto verin.
  3. :focus-visible outline + outline-offset — Tab ile gidin.
  4. user-select: none yalnız araç çubuğu yongasında; yazı seçilebilir kalsın.
  5. Input’ta caret-color boyayın. Alanı maskelemeyin, column-count koymayın.

Sık hatalar

  • Bağlantı veya düğme olmayan metinde cursor: pointer
  • Düzen kartları ve gezinti çubuğunda resize: both
  • :focus-visible yedeği olmadan küresel outline: none
  • Tüm sayfa, fiyat veya hatalarda user-select: none
  • «Temiz görünüm» için caret-color: transparent
  • appearance: none sonra kenar, işaret stili, odak halkası yok
  • Maske veya çoklu sütunu arayüz cilası sanmak

Özet

  • Kullanıcı arayüzü CSS etkileşime işaret eder: imleç, resize, caret, yerel krom
  • cursor doğru söylemeli; resize alanındır, sayfa kabuğunun değil
  • Görünür odak halkası tutun; user-select ve caret-color hafif dokunuş
  • appearance: none yalnızca widget’ı baştan stillendirirken
  • Ne maske şablonu ne gazete sütunu
  • Optional Advanced sonra: 3D dönüşümler (transforms-3d)

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
7
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 75 / 76
Css Ders