:: válogatás - CSS-trükkök

A kurzor segítségével válassza ki ezt a mondatot. Figyelje meg, hogy a szöveg kiválasztásakor egy háttérszín kitölti-e a helyet? Stílus segítségével megváltoztathatja a kijelölt szöveg háttérszínét és színét ::selection. Ennek az álelemnek a stílusa kiválóan alkalmas a felhasználó által kiválasztott szöveg és a webhely színsémájának összehangolására.

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

Vegye figyelembe, hogy ennek a pszeudo elemnek a szintaxisában a kettős kettőspont szükséges, annak ellenére, hogy más pszeudo elemek egyetlen kettőspontot fogadnak el.

Ahogy fentebb láthattuk, stílusozhat ::selectionegyes elemeket. A teljes oldalt úgy is stílusozhatja, hogy a csupasz álelemet eldobja a stíluslapból.

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

Csak három tulajdonság ::selectionműködik:

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

Lásd Chris Coyier (@chriscoyier) Pen :: válogatási tesztjeit a CodePen-en.

Ha ::selectionolyan tulajdonsággal próbál meg stílusozni , amely nem szerepel a listán, akkor ezt a tulajdonságot figyelmen kívül hagyja. Lehet, hogy trükkös látni backgroundebben a listában, mert a tulajdonság csak színt jelenít meg, ha rajta használják, ::selectionés nem fog háttérképet vagy színátmenetet megjeleníteni.

Ne próbáld ki ezt sem:

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

Amikor a böngészők megtalálják a kiválasztott rész egy részét, amelyet nem értenek, akkor az egészet eldobják, így ez folyamatosan kudarcot vall.

Az egyik leghasznosabb felhasználási ::selectionmód a kikapcsolása a text-shadowkiválasztás során. Egy text-shadowütközhet a kijelölés háttérszínével, és megnehezíti a szöveg olvashatóságát. Állítsa be text-shadow: none;, hogy a szöveg egyértelmű és könnyen olvasható legyen a kiválasztás során.

Lásd: Chris Coyier (@chriscoyier) Pen :: selection text-shadow a CodePen-en.

Fancy :: válogatás

Sass-szal vagy bármely más előprocesszorral párosítva igazán klassz effekteket készíthet ::selection. Válassza ki a szöveget az alábbi demóban:

Előfordulhat, hogy egyes böngészőkben a hatás nem olyan sima. Adjuk át a bemutatót: olyan dolgok, amelyek lehetségesek, de valószínűleg csak szórakozásból.

Egy másik buta, de szórakoztató kis trükk a kép feltárása a kiválasztott szövegen keresztül.

Böngésző támogatás

Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.