css user-select, kullanıcı tarafından metnin seçilebilme durumunu belirlemek için kullanılır. Web sitelerinden bilgilerin rahatlıkla kopyalanmasını engellemek için kullanılabiliriz.
Aldığı parametreler:
auto : Otomatik değer alır.
none : Metin seçilemez.
text : Metin seçme özelliği aktif olur.
all : Bütün metin tek seferde seçme özelliği aktif olur.
inherit : Bir üstteki elementten miras alır.
initial : Varsayılan değere çevirir.
Örnek :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div {
width: 250px;
height: 60px;
border: 1px solid rgb(196, 196, 196);
}
.one { user-select: auto; }
.two { user-select:none }
.three { user-select:text; }
.four { user-select:all; }
</style>
<body>
<div class="one">
Tasarım ve Yazılım
</div>
<div class="two">
Tasarım ve Yazılım
</div>
<div class="three">
Tasarım ve Yazılım
</div>
<div class="four">
Tasarım ve Yazılım
</div>
</body>
</html>Örnek kodları html uzantısı ile kaydedip denediğinizde auto ve text değerinde istediğimiz alanı seçebildiğimizi, all değerinde tıkladığımızda tüm metni seçtiğinizi ve none değerinde ise yazının seçilemediğini göreceksiniz.
Başka bir yazımızda görüşmek üzere…
