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.

1356

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
  • Laravel
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML RESİM EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML ARKAPLANA MÜZİK EKLEME
  • HTML AÇIKLAMA SATIRI
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.