:: seçim - CSS Hileleri | CSS Almanak 2024

İmlecinizi kullanarak bu cümleyi seçin. Metni seçerken arka plan renginin alanı nasıl doldurduğuna dikkat edin. Seçili metnin arka plan rengini ve rengini stil vererek değiştirebilirsiniz ::selection. Bu sözde öğenin biçimlendirilmesi, kullanıcı tarafından seçilen metni sitenizin renk düzeniyle eşleştirmek için harikadır.

p::-moz-selection ( color: red) p::selection ( color: red; )

Diğer sözde öğelerin tek bir iki nokta üst üste kabul etmesine rağmen, bu sözde öğenin söz diziminde çift iki nokta üst üste işaretinin gerekli olduğuna dikkat edin.

Yukarıda görüldüğü gibi, ::selectiontek tek öğeler üzerinde stil oluşturabilirsiniz. Ayrıca, stil sayfanızdaki çıplak sözde öğeyi bırakarak tüm sayfayı biçimlendirebilirsiniz.

::-moz-selection ( background: yellow; ) ::selection ( background: yellow; )

Çalışacak yalnızca üç özellik vardır ::selection:

color
background( background-color, background-image)
text-shadow

CodePen'de Chris Coyier (@chriscoyier) tarafından yapılan Pen :: seçim testlerine bakın.

Listede ::selectionolmayan bir özellikle stil vermeye çalışırsanız , bu özellik yok sayılır. Bu backgroundlisteyi görmek zor olabilir çünkü özellik yalnızca üzerinde kullanıldığında bir renk ::selectionoluşturur ve bir arka plan görüntüsü veya gradyan oluşturmaz.

Ayrıca şunu da denemeyin:

p::-moz-selection, p::selection ( color: red; )

Tarayıcılar bir seçimin anlamadıkları bir kısmını bulduklarında, her şeyi bırakırlar, bu yüzden bu her zaman başarısız olur.

En yararlı kullanımlardan biri, seçim sırasında ::selectiona'yı kapatmaktır text-shadow. A text-shadow, seçimin arka plan rengiyle çakışabilir ve metnin okunmasını zorlaştırabilir. text-shadow: none;Seçim sırasında metni net ve kolay okunur hale getirmek için ayarlayın .

CodePen'de Chris Coyier (@chriscoyier) tarafından hazırlanan Pen :: seçim metin gölgesine bakın.

Fantezi :: seçim

Sass veya başka herhangi bir önişlemci ile eşleştirildiğinde, gerçekten harika efektler yapabilirsiniz ::selection. Aşağıdaki demodaki metni seçin:

Bazı tarayıcılarda etkinin çok düzgün olmadığını fark edebilirsiniz. Bu gösteriyi şu şekilde dosyalayalım: mümkün olan şeyler, ancak muhtemelen sadece eğlence için.

Bir başka aptal ama eğlenceli küçük numara, bir görüntüyü seçilen metin aracılığıyla ortaya çıkarmaktır.

Tarayıcı Desteği

Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.