::selection seçicisi, kullanıcının bir metin seçtiğinde seçilen metnin biçimlendirmesini belirlemek için kullanılır. Ancak bazı tarayıcılarda bu seçici kullanıldığında sadece bazı özellikler desteklenmektedir. Örneğin, arka plan rengi ve yazı rengi değiştirme işlemi Firefox’da desteklenirken, Safari’de desteklenmemektedir.
Zor seçim seçicileri, ::selection seçicisinden farklı olarak, kullanıcının fare imlecini belirli bir bölgeye getirdiğinde veya metni seçtiğinde biçimlendirme işlemlerini gerçekleştirir. Bu yöntem, bazı tarayıcılarda ::selection seçicisine göre daha iyi desteklenir.
Aşağıdaki örnekte, ::selection seçicisinde yapılan işlemi zor seçim seçicileri kullanarak gerçekleştireceğiz.
HTML kodumuz şu şekilde olabilir:
<!DOCTYPE html>
<html>
<head>
<title>Zor Seçim Seçici Kullanımı</title>
<style>
.highlight {
background-color: #007bff; /* mavi arka plan */
color: #fff; /* beyaz yazı rengi */
}
body {
font-size: 24px; /* sayfa yazı tipi boyutu */
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
// Zor seçim seçicisi için olay dinleyicisi ekleme
document.addEventListener("mousemove", function(event) {
if (event.target.tagName == "P") {
event.target.classList.add("highlight");
}
});
});
</script>
</head>
<body>
<h1>Zor Seçim Seçici Kullanımı</h1>
<p>Bu örnekte, zor seçim seçicisi kullanılarak seçilen metnin arka plan rengi ve yazı rengi değiştirilmiştir.</p>
<p>Bu, özellikle kullanıcıların metin seçtiği bir web uygulamasında, kullanıcı deneyimini artırmak için kullanışlı bir yöntem olabilir.</p>
</body>
</html>
Yukarıdaki örnekte, highlight sınıfını kullanarak, ::selection seçicisinde yapılan işlemi gerçekleştiriyoruz. Bununla birlikte, bu sınıfı uygulamak için, mousemove olayını dinleyen bir JavaScript fonksiyonu kullanıyoruz. Bu fonksiyon, kullanıcının fare imlecini bir p etiketi üzerine getirdiğinde veya bir p etiketindeki metni seçtiğinde çalışır. Bu durumda, seçilen metnin arka plan rengi ve yazı rengi, highlight sınıfı tarafından belirlenir.
Bu uygulamada herhangi bir sorun yaşarsanız aşağıya yorum olarak bırakabilirsiniz. Bunun yanı sıra web sitemizdeki diğer hazır Html programlama örneklerine ulaşmak için bu linke tıklayabilirsiniz.