CSS kullanarak, kullanıcıların bir öğe içindeki metni seçmesini engellemek mümkündür. user-select: none. Şimdi, bunu yapmanın neden “tartışmalı” olarak kabul edilebileceği anlaşılabilir. Demek istediğim, meli standart kullanıcı davranışlarını devre dışı mı bırakıyoruz? Genel olarak, hayır, bunu yapmamalıyız. Ancak metin seçimini devre dışı bırakmanın bazı meşru (nadir de olsa) kullanım durumları var mı? Bence de.

Bu yazıda bu kullanım örneklerini inceleyeceğiz ve nasıl kullanabileceğimize bir göz atacağız. user-select: none kullanıcı deneyimlerini iyileştirmek (engellememek) için. Ayrıca hiçbir şeye değmez user-select özelliğin başka değerleri de var none tamamen devre dışı bırakmak yerine metin seçiminin davranışını değiştirmek için kullanılabilecek ve hatta başka bir değer zorlar metin seçimi, bu yüzden bunlara da bir göz atacağız.

Mümkün user-select değerlerimiz

Farklı yollardan geçerek işleri başlatalım user-select değerler ve ne yaptıkları.

Uygulanması user-select: none; bir öğeye, metin içeriğinin ve iç içe metin içeriğinin işlevsel olarak seçilemeyeceği veya görsel olarak seçilemeyeceği anlamına gelir (örn. ::selection çalışmayacak). Seçilemeyen içerik içeren bir seçim yapacak olsaydınız, seçilemeyen içerik seçimden çıkarılır, dolayısıyla oldukça iyi bir şekilde uygulanır. Ve destek harika.

Olumsuz olarak, user-select: text içeriği seçilebilir hale getirir. Üzerine yazmak için bu değeri kullanırsınız user-select: none.

user-select: contain ilginç biridir. Bunu uygulamak, eğer bir seçim eleman içinde başlıyorsa, o zaman onun içinde bitmesi ve onu içermesi gerektiği anlamına gelir. Seçim başladığında bu garip bir şekilde geçerli değil önce Bununla birlikte, bu nedenle muhtemelen şu anda hiçbir tarayıcı onu desteklememektedir. (Internet Explorer ve Microsoft Edge'in önceki sürümleri daha önce bunu user-select: element.)

İle user-select: all, öğenin içeriğinin bir kısmının seçilmesi, tümünün otomatik olarak seçilmesiyle sonuçlanır. Ya hep ya hiç, ki bu çok tavizsizdir, ancak kullanıcıların panolarına içerik kopyalama olasılığının daha yüksek olduğu durumlarda yararlıdır (örneğin, bağlantıları paylaşma ve gömme, kod parçacıkları, vb.). İçeriğin otomatik olarak seçilmesi için kullanıcıların çift tıklamak yerine yalnızca bir kez tıklamaları gerekir.

Yine de dikkatli olun, çünkü bu her zaman düşündüğünüz özellik değildir. Kullanıcılar yalnızca seçmek isterse ne olur? Bölüm (örneğin, bir Google Fonts snippet'inin yalnızca font adı kısmı veya bir kod snippet'inin bir kısmı)? Hala idare etmek daha iyi ”panoya kopyala” JavaScript'i birçok senaryoda kullanmak.

Daha iyi bir uygulama user-select: all alıntıların tamamen ve doğru bir şekilde kopyalanmasını sağlamaktır.

davranışı user-select: auto (başlangıç ​​değeri user-select) öğeye ve nasıl kullanıldığına bağlıdır. Bununla ilgili daha fazla bilgiyi şurada bulabilirsiniz: bizim almanağımız.

Şimdi şu kullanım durumlarını keşfetmeye dönelim: user-select: none...

Seçimden metin olmayanları çıkarma

Bir web sayfasından içerik kopyalarken, muhtemelen bir makaleden veya başka bir tür uzun biçimli içeriktendir, değil mi? Muhtemelen seçiminizin resimleri, emojiyi (bazen metin olarak kopyalanabilen, örneğin “:thinkingface:”) ve bir çerçeve içine sarılmış bulmayı umduğunuz diğer şeyleri içermesini istemezsiniz.

öğe (örneğin, yazı içi harekete geçirici mesajlar, reklamlar veya ana içeriğin parçası olmayan başka bir şey).

Bir şeyin seçimlere dahil edilmesini önlemek için, bir HTML öğesine sarıldığından emin olun ve ardından uygulayın user-select: none ona:

lorem 🤔 ipsum

Bunun gibi senaryolarda seçimi devre dışı bırakmıyoruz, bunun yerine optimize BT. Seçmenin mutlaka kopyalamak anlamına gelmediğini de belirtmekte fayda var - birçok okuyucu (kendim dahil) nerede olduklarını hatırlayabilmeleri için (bir yer imi gibi) okurken içeriği seçmeyi sever, tamamen devre dışı bırakmak yerine optimize etmek için başka bir neden.

Yanlışlıkla seçimi önleme

Tamam user-select: none düğmelere benzeyen bağlantılara (örn. Click Me!).

Bir metnin metin içeriğini seçmek mümkün değildir. or çünkü, peki, neden yapasın? Ancak bu davranış, geleneksel olarak seçilebilmesi gereken bir paragrafın parçasını oluşturdukları için bağlantılara uygulanmaz.

Yeterince adil.

bunu tartışabiliriz bağlantıları düğmeler gibi göstermek bir anti-kalıptır, fakat herneyse. İnterneti kesmiyor, değil mi? Bu gemi yine de denize açıldı, bu nedenle, düğmelere benzeyecek şekilde tasarlanmış bağlantılar kullanıyorsanız, yalnızca tutarlılık için değil, aynı zamanda kullanıcıların etkileşimi tetiklemek yerine yanlışlıkla içeriği seçmesini önlemek için düğmelerin davranışını taklit etmelidirler.

Dizüstü bilgisayarımı yatakta kabul ettiğimden daha fazla kullandığım için kesinlikle yanlışlıkla bir şeyler seçmeye meyilliyim. Ayrıca, kontrol ve koordinasyonu etkileyebilecek, amaçlanan bir tıklamayı istenmeyen bir sürükleme/seçime dönüştürebilecek çeşitli tıbbi durumlar vardır, bu nedenle erişilebilirlik sorunlarıyla ilgilenilebilir. user-select çok.

Sürüklemeyi (kasıtlı olarak) gerektiren etkileşimler de elbette mevcuttur (örneğin tarayıcı oyunlarında), ancak bunlar nadirdir. Yine de, sadece gösteriyor ki user-select aslında epeyce kullanım durumu var.

Ödeme duvarlı içerik hırsızlığından kaçınma

Ödeme duvarlı içerik çok nefret alır, ancak içeriğinizi korumanız gerektiğini düşünüyorsanız, bu sizin içeriğinizdir - hiç kimse, bunun için ödeme yapması gerektiğine inanmadığı için onu çalma hakkına sahip değildir.

Bu yoldan gitmek istiyorsanız, kullanıcıların ödeme duvarlarını atlamasını (veya benzer şekilde, başkalarının yayınlanmış çalışmaları gibi telif hakkıyla korunan içeriği kopyalamasını) zorlaştırmanın birçok yolu vardır.

İçeriği CSS ile bulanıklaştırma:

article { filter: blur(); }

DevTools için klavye kısayollarını devre dışı bırakma:

document.addEventListener("keydown", function (e) {
  if (e.keyCode == 123) e.preventDefault();
  else if ((e.ctrlKey || e.metaKey) && e.altKey && e.keyCode == 73) e.preventDefault();
  else if ((e.ctrlKey || e.metaKey) && e.altKey && e.keyCode == 74) e.preventDefault();
  else if ((e.ctrlKey || e.metaKey) && e.altKey && e.keyCode == 85) e.preventDefault();
});

Bağlam menüsünün kendisini devre dışı bırakarak bağlam menüsü aracılığıyla DevTools'a erişimi devre dışı bırakma:

document.addEventListener("contextmenu", e => e.preventDefault())

Ve elbette, kaynakta okumalarına izin verilmeyen kullanıcıların içeriği kopyalamasını önlemek için, user-select: none:

Başka kullanım durumları var mı?

Metin seçimini önlemek için düşünebildiğim üç kullanım durumu bunlar. Aklımdan birkaç kişi daha geçti, ama hepsi bir esneme gibi görünüyordu. Ama ya sen? Herhangi bir şeyde metin seçimini devre dışı bırakmak zorunda kaldınız mı? Bilmek isterdim!