CSS ile Metin Seçimini Devre Dışı Bırakma
Metinler herhangi bir web sitesinin veya web sayfasının en temel unsurudur, web sitelerinin temelini oluştururlar, çünkü bir şey yazmazsanız hiçbir şey anlatamazsınız. Bu nedenle, metinlerle uğraşmanın web sitelerinin veya web sayfalarının geliştirilmesi sırasında çok sık yapılan bir uygulama olduğu bilinmelidir. Web sayfalarımızı veya web sitelerimizi duyarlı ve kullanıcı etkileşimli hale getirmeye yardımcı olan stilin yanı sıra düzenleme metinleri ile ilgili çok sayıda özellik vardır.
CSS'nin kullanıcı select(seçme) özelliği, bir sayfanın tamamında veya yalnızca hedeflemek istediğiniz belirli öğelerde seçimi devre dışı bırakmak için kullanılabilir. Bu gerçekten harika çünkü yalnızca belirli öğelere uygulayabilmeniz, yalnızca bir metin satırı için veya belki de belirli bir öğe kümesi için gerçekten devre dışı bırakmanız gerekiyorsa, tüm sayfa için seçimi devre dışı bırakmaktan çok daha fazla özgürlük verir.
User-select
özelliğinin tüm tarayıcılarda evrensel olarak desteklenmediğine dikkat etmek önemlidir, bu nedenle uygularken farklı tarayıcı ön-ekleri kullanmayı unutmamanız gerekir, aksi takdirde çalışmayabilir.
Aşağıda, tüm sayfada kullanıcı seçimini devre dışı bırakmak için özelliği nasıl kullanacağınıza ilişkin bir örnek verilmiştir. CSS özelliğini kullanarak metin seçimi vurgulamasını devre dışı bırakmak için user-select
kullanılır ve değerini none olarak ayarlayın.
body, html{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
Yalnızca tek bir öğede kullanıcı seçimini devre dışı bırakmak için select-user
özelliği kullanmak istiyorsanız, bunun nasıl yapılacağını tahmin edebilirsiniz, ancak yine de size göstereceğiz. Bu örneğin amaçları doğrultusunda, tüm <p>
öğeleri için seçimi devre dışı bırakmak istediğinizi varsayalım. Kodlar şöyle görünecektir.
p{
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, */
}
- HTML
- CSS
- PHP
- JQUERY
- PHOTOSHOP
- JavaScript
- Web Dünyası
- Linux
- MÄ°THRÄ°L FRAMEWORK
- Laravel
- Git
- React
- HTML LİNK(Bağlantı)EKLEME - LİNK VERME
- HTML YAZI VE RESÄ°M ORTALAMA
- HTML RESME LÄ°NK VERME
- HTML FORM OLUÅžTURMA
- CSS YATAY MENÜ YAPIMI
- HTML RESÄ°M EKLEME
- CSS (BOYUT) GENÄ°ÅžLÄ°K VE YÃœKSEKLÄ°K (Width-Height)
- HTML DÄ°V ve SPAN NEDÄ°R?
- HTML ARKAPLANA MÃœZÄ°K EKLEME
- KALÄ°TE KAYBETMEDEN RESÄ°MLERÄ° BÃœYÃœTME