Önceleri sadece javascript ile yapılabilen bir özellikten ve bu özelliği sadece CSS ile nasıl uygulayabileceğimizden bahsedeceğim. Bildiğimiz gibi internet siteleri HTML formatına dönüştürülerek tarayıcılar üzerinde görüntülenirler ve internet sitelerindeki yazılar da mouse imleci ile üzerlerine gelindiklerinde seçilebilir duruma gelirler. Mouse imleci ok yerine I harfine dönüşür ve istnilen yazıları bu şekilde önce seçilir, sonra da duruma göre kopyalanırlar.
Yazılarının kopyalanmasını engellemek amacıyla internet sitelerinin sahipleri javascript ile yazıların seçilmesine, kopyalanmasına ve sitede sağ tıklanmasına engel olmaya çalışmışlardır. Ancak javascript ve jquery gibi tarayıcı taraflı kodlama dilleri iptal edilebildikleri için bu engelleme işlemi her zaman başarısızlıkla sonuçlanmıştır. Bugün CSS'te yer aldığını gördüğüm ve birçok güncel tarayıcı tarafından da desteklenen user-select özelliğini kullanarak seçilemez HTML yazıları nasıl hazırlanır bunun uygulamasını paylaşacağım. Tüm tarayıcılarda çalışabilmesi için CSS kodları biraz daha uzun olabilir elbette.
bkz: internet sitesine sağ tıklama ve kopyalama yasağı koymak
Aşağıda HTML ve CSS olarak paylaşacağım kodları birlikte çalıştırdığınızda üst kısımdaki yazının seçilebilir, alt kısımdaki yazının ise tarayıcı tarafından seçilemez olduğunu görebilirsiniz.
HTML:
<p>Bu yazıyı seçebilirsiniz.</p>
<p class="secilemez"> Buy yazıyı seçemezsiniz.</p>
CSS:
.secilemez {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
Not: Yok mudur bu yazıları kopyalamanın bir hal çaresi derseniz maalesef yine var, tarayıcıda geliştirme araçları açılarak ilgili css kuralları iptal edilebilir.