Bu yazımızda Css’te user select özelliği nedir?, nasıl kullanabiliriz? onu öğreneceğiz. User select özelliği ile text seçimini engelleyebiliyoruz. Dört farklı değer alabilir. Bunlar;
► auto : Varsayılan değerdir. Tarayıcı izin verirse metinler seçilebilir.
► none : Metin seçimini engeller.
► text : Metinler kullanıcılar tarafından seçilebilir.
► all : Çift tıklama yerine tek tıklama ile metin seçimi yapılabilir.
Örneğin 2 adet div etiketi oluşturalım.
Birinci div’de user select özelliğini kullanmadığımız için içindeki yazılar seçilebilir durumda.
İkinci div’de ise user-select : none; özelliği ile yazı seçimini engelleyelim.
Kodlarımız şu şekilde;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<style> div { width: 200px; padding: 10px; border: 1px solid; } #box2 { -webkit-user-select: none; /* Safari 3.1+ */ -moz-user-select: none; /* Firefox 2+ */ -ms-user-select: none; /* IE 10+ */ user-select: none; } </style> <div id="box1">Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.Tincidunt integer eu augue augue nunc elit dolor.</div> <hr /> <h2>user-select: none;</h2> <div id="box2">Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.Tincidunt integer eu augue augue nunc elit dolor.</div> |
TARAYICI DESTEĞİ
| Özellik | Chrome | IE | Firefox | Safari | Opera |
| user-select |
54.0 6.0 -webkit- |
10.0 -ms- | 2.0 -moz- | 3.1 -webkit- |
41.0 15.0 -webkit- |
Bu tabloda tarayıcıların user-select özelliğini hangi versiyon ile birlikte sorunsuz desteklemeye başladığını görebilirsiniz.
Tarayıcı uyumluluğu ile ilgili daha kapsamlı ve güncel bilgi almak isterseniz caniuse sitesini ziyaret edebilirsiniz.
Umarım sizin için faydalı bir yazı olmuştur.
Yeni bir yazımda görüşmek üzere.
