Kullanıcı seçimi - CSS Hileleri

CSS'deki user-selectözellik, bir öğedeki metnin seçilmesine nasıl izin verileceğini kontrol eder. Örneğin, metni seçilemez hale getirmek için kullanılabilir.

.row-of-icons ( -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ user-select: none; /* Likely future */ )

Bu, kullanıcılar için daha kolay / daha temiz bir kopyala-yapıştır deneyimi sağlamak istediğiniz durumlarda kullanışlıdır (onlara yanlışlıkla metin seçmesine izin vermeyin, simgeler veya resimler gibi işe yaramaz şeyleri seçmelerini istemeyin). Ancak biraz hatalı. Firefox, bu seçici ile eşleşen herhangi bir metnin kopyalanamayacağı gerçeğini zorlar. WebKit, çevresindeki öğeleri seçmeniz durumunda metnin kopyalanmasına yine de izin verir.

Bunu, bir öğenin tamamının seçim almasını sağlamak için de kullanabilirsiniz:

.force-select ( -webkit-user-select: all; /* Chrome 49+ */ -moz-user-select: all; /* Firefox 43+ */ -ms-user-select: all; /* No support yet */ user-select: all; /* Likely future */ )

İşte bunlardan bazı demolar:

CodePen'de Chris Coyier (@chriscoyier) tarafından hazırlanan Pen kullanıcı seçimi demosuna bakın.

Uzun bir süredir bu özellik için bir özellik yoktu, ancak şimdi CSS Temel Kullanıcı Arayüzü Modülü Seviye 4 kapsamında ele alınmıştır.

Varsayılan değer, autoseçimin beklediğiniz gibi normal şekilde gerçekleşmesini sağlayan değerdir . "Normalde" biraz karmaşıktır. Burada spesifikasyondan alıntı yapmaya değer:

Sözde elemanlardan :: önce ve :: sonra hesaplanan değer none

Öğe düzenlenebilir bir öğe ise, hesaplanan değercontain

Aksi takdirde, bu öğenin üst öğesinde kullanıcı allseçiminin hesaplanan değeri ise, hesaplanan değerall

Aksi takdirde, bu öğenin üst öğesinde kullanıcı noneseçiminin hesaplanan değeri ise, hesaplanan değernone

Aksi takdirde, hesaplanan değer text

Başka bir deyişle, akıllı bir şekilde kademeli olarak duyusal bir duruma döner ve sıfırlanır. Görünüşe göre bu özellik sözde öğeleri seçilebilir hale getirmek için kullanılabilir, ancak henüz son kelime yok.

Eski / Tescilli

Firefox -moz-none, alt öğelerin kademeyi geçersiz kılıp tekrar seçilebilir hale gelebilmesi -moz-user-select: text;dışında hiçbiri gibi olmayan Firefox 21'den itibaren hiçbiri böyle davranmaz -moz-none.

Internet Explorer element, öğenin içindeki metni seçebileceğiniz ancak seçimin o öğenin sınırlarında duracağı şimdiye kadar özel bir değeri de destekler .

Daha fazla bilgi

MDN Belgeleri
Kullanıcı Seçimli birlikte çalışabilirlik

Tarayıcı Desteği

Bu özellikle -*-user-select: none;

Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.