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, */
  }


Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır. Lütfen Yukarıda ki mesajları okuyun tekrar aynı soruları sormayın.

6379

KATEGORÄ°
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MÄ°THRÄ°L FRAMEWORK
  • Laravel
  • Git
  • React
POPÃœLER MAKALE
  • 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
ETÄ°KET
WEBCEBİR © 2013 Tüm hakları saklıdır.