Keterampilan menyorot teks dan objek lainnya dibentuk di antara pengguna komputer bertahun-tahun yang lalu. Kami menyoroti konten halaman web karena berbagai alasan. Mungkin Anda perlu menyalin teks dan mengutipnya di suatu tempat, mungkin - itu hanya lebih mudah bagi seseorang untuk membaca teks, menyoroti fragmennya. Namun, pada perangkat seluler, menyoroti sesuatu yang lebih sulit. Sebagai contoh, itu mengganggu saya. Saya tidak suka menyorot isi halaman web di ponsel. Operasi ini tampaknya entah bagaimana "salah." Dalam artikel ini saya akan berbicara tentang semua yang perlu Anda ketahui tentang pemilihan gaya dengan CSS. Secara khusus, kita akan berbicara tentang elemen pseudo dan properti
::selectionuser-select. Artikel ini bertujuan untuk menunjukkan kepada semua orang yang ingin CSS bekerja dengan pilihan, dan untuk membicarakan kapan dan bagaimana menggunakan berbagai metode untuk bekerja dengan pilihan.Dasar
Di MDN, Anda dapat mempelajari bahwa elemen pseudo ::selectionmemungkinkan Anda menerapkan gaya ke bagian-bagian dokumen yang telah dipilih oleh pengguna (misalnya, menggunakan mouse).Untuk menggunakannya ::selectioncukup menggunakan konstruksi berikut:p::selection {
color: #fff;
background-color: #000;
}
Teks yang dipilih.Berikut adalah contoh yang dapat Anda coba.Properti yang didukung :: selection
Perlu dicatat bahwa elemen pseudo ::selectionhanya mendukung properti color, backgrounddan text-shadow.Kustomisasi efek pilihan Anda sendiri
Bagaimana jika kita perlu membuat seleksi terlihat istimewa? Misalnya, sehingga seleksi akan memiliki ketinggian tertentu atau latar belakang yang menarik? Lihatlah gambar berikut.Contoh seleksi khusus seleksiini dimungkinkan, walaupun akan membutuhkan usaha. Berikut cara pemilihan yang ditunjukkan di atas:- Elemen pseudo ditambahkan, dengan teks yang sama yang kita pilih. Kemudian elemen pseudo diatur ke properti
height: 50%dan warna latar belakang putih. - Elemen pseudo terletak di atas teks sumber.
Jika sekarang Anda memilih teks, maka elemen pseudo akan tumpang tindih 50% dari teks secara vertikal. Ini memungkinkan kita untuk mensimulasikan efek yang kita butuhkan.p {
position: relative;
color: #fff;
}
p:after {
content: attr(data-content);
position: absolute;
color: #000;
top: 0;
left: 0;
width: 100%;
height: 50%;
background-color: #fff;
}
p::selection {
background: rgba(76, 125, 225, 0.18);
}
Saya belajar tentang teknik ini di sini .Pilihan lain untuk pilihan ini disajikan di bawah ini. Di sini, alih-alih seleksi yang solid, saya mengimplementasikan seleksi sebagai gradien CSS. Intinya di sini adalah menggunakan gradien putih dengan tinggi 50% dan untuk mengisi elemen sekali dengan gambar latar belakang dengan menggunakan nilai no-repeatsaat mengatur properti background.h1:after {
content: attr(data-content);
position: absolute;
color: #000;
top: 0;
left: 0;
width: 100%;
background: linear-gradient(#fff, #fff) top/100% 50% no-repeat;
}
Gambar berikut menggambarkan teknik ini.Menerapkan Gradient HighlightingMudah-mudahan saya bisa menjelaskan ide ini dengan jelas. Berikut ini contoh kerjanya.Pilihan Animasi
Bekerja pada contoh sebelumnya, saya mengajukan pertanyaan berikut: "Apakah realistis untuk menghidupkan seleksi?" Misalnya, dalam proses memilih teks, ketinggian seleksi adalah 50%. Dan ketika pointer mouse dipindahkan ke samping, ketinggian seleksi meningkat menjadi 80%. Bagaimana cara melakukannya? Tapi seperti ini:p {
transition: background 0.3s ease-out;
}
p:hover:after {
background-size: 100% 80%;
}
Teks dalam proses pemilihanTeks setelah pemilihan selesaiBerikut ini adalah video yang menunjukkan pemilihan animasi.Teks multiline
Teknik penyesuaian pemilihan di atas, sayangnya, tidak cocok untuk teks multi-baris. Namun demikian, untuk mengimplementasikan sesuatu yang mirip dengan teks tersebut, Anda harus menggunakan kemampuan JavaScript dan memasukkan setiap kata ke dalam elemen inline (huruf kecil), misalnya, dalam <span>. Setelah setiap kata muncul di elemennya sendiri <span>, elemen pseudo harus ditambahkan ke masing-masing elemen ini. Dan setelah itu, efek yang dijelaskan di atas dapat diterapkan ke teks multiline.Berikut ini adalah skrip untuk menempatkan setiap kata dalam <span>wadah:let paragraph = document.querySelector(".text");
const words = paragraph.textContent.split(" ");
paragraph.innerHTML = "";
words.forEach(function (word) {
let wordItem = document.createElement("span");
wordItem.setAttribute("data-word", word);
wordItem.innerHTML = word + " ";
paragraph.appendChild(wordItem);
});
Setelah itu, elemen <span>harus bergaya. Kemudian untuk masing-masing Anda perlu menambahkan elemen pseudo:span {
position: relative;
font-size: 1.25rem;
line-height: 1.4;
}
span::after {
content: attr(data-word);
position: absolute;
left: 0;
right: 0;
top: -0.28em;
height: 75%;
padding-top: 0.14em;
background: #fff;
pointer-events: none;
}
span::selection {
background: rgba(#4C7DE1, 0.18);
}
Jika Anda melihat desain ini dalam praktiknya, ternyata itu berfungsi, tetapi tidak seperti yang Anda harapkan. Contoh penyorotan teks multi-baris ditunjukkan di bawah ini. Anda mungkin memperhatikan bahwa seleksi tampak tidak merata.Seleksi yang tidak homogenSaya akan mengatakan bahwa pemilihan multi-line seperti itu tidak terlalu baik, dan bahwa itu tidak boleh digunakan pada skala global. Mungkin itu harus digunakan hanya, katakanlah, untuk mengatur pemilihan paragraf tertentu.Di sini, dengan pilihan seperti itu, Anda dapat bereksperimen.Penggunaan kreatif :: pemilihan dan bayangan teks
Karena salah satu properti yang didukung oleh elemen pseudo ::selectionadalah text-shadowkita dapat mencoba mencapai beberapa efek menarik menggunakan beberapa bayangan teks. Kami sedang mengeksplorasi kemungkinan bahwa ide ini terbuka di hadapan kami.▍ Sorot dengan bayangan panjang
Teks yang dipilih membuat bayangan panjang.Inilah cara menerapkan efek ini:p::selection {
color: #444444;
background: #ffffff;
text-shadow: 1px 0px 1px #cccccc, 0px 1px 1px #eeeeee, 2px 1px 1px #cccccc, 1px 2px 1px #eeeeee, 3px 2px 1px #cccccc, 2px 3px 1px #eeeeee, 4px 3px 1px #cccccc, 3px 4px 1px #eeeeee, 5px 4px 1px #cccccc, 4px 5px 1px #eeeeee, 6px 5px 1px #cccccc, 5px 6px 1px #eeeeee, 7px 6px 1px #cccccc;
}
▍ Efek teks garis besar
Teks yang dipilih menjadi konturGagasan ini saya temukan diartikel ini . Kita berbicara tentang fakta bahwa menggunakan propertitext-shadowAnda dapat mensimulasikan efek teks garis besar.p::selection {
color: #fff;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
▍ Efek kabur
Teks yang dipilih terlihat buram .Efekmenarik lain yang dapat diterapkan pada teks yang dipilih adalah mengaburkan teks. Intinya adalah menggunakan properti saat mengatur warna tekscolor: transparent. Bayangan yang diatur dengan bantuantext-shadowtidak akan hilang di mana pun, yang akan memberikan efek yang diinginkan.p::selection {
color: transparent;
text-shadow: 0 0 3px #fff;
}
Saya yakin Anda sendiri dapat memberikan lebih banyak contoh text-shadowpilihan gaya. Properti ini memberi kami kemungkinan tak terbatas.▍ Teks dan kinerja bayangan
Tidak disarankan untuk menggunakan gaya yang terlalu rumit saat menyesuaikan text-shadow. Faktanya adalah bahwa antusiasme yang berlebihan untuk properti ini menyebabkan masalah kinerja. Berikut adalah video yang menunjukkan salah satu contoh masalah tersebut.Menggunakan gaya yang sangat canggih untuk menyesuaikan pilihan teksEfek neon yang disajikan di sini sangat kompleks. Harap dicatat bahwa ketika teks ini dipilih, ada penundaan yang nyata antara saat teks dipilih dan saat stylization diterapkan. Selain itu, perhatikan fakta bahwa apa yang seharusnya tidak muncul di atas dan kiri. Karena itu, saya meminta Anda untuk menggunakannya dengantext-shadowhati-hati.Apakah elemen bentuk menonjol?
Jawaban singkat untuk pertanyaan dalam judul bagian ini akan berbunyi "ya." Menurut saya ini salah: Anda memilih halaman, tetapi ternyata konten di dalam kolom input juga disorot. Ini tampilannya.Konten di dalam bidang input disorot.Di sini, teks di dalam tombol juga dapat dipilih. Di bagian yang dikhususkan untukuser-select, kami akan berbicara tentang apakah mengizinkan pengguna untuk menyoroti bentuk elemen atau tidak.Berikut ini sebuah contoh.Investigasi properti yang dipilih pengguna
Properti user-selectmemungkinkan kami mengatur kemampuan untuk memilih teks tertentu oleh pengguna. Properti ini mungkin berguna untuk menonaktifkan kemampuan untuk memilih teks, yang mungkin berguna untuk membatasi kemampuan pengguna untuk memilih bahan yang terletak bersebelahan. Berikut ini adalah standar yang menjelaskan user-select.Properti ini dapat mengambil nilai berikut: none, auto, text, contain, all.Kasus penggunaan yang dipilih pengguna
▍Teks dan ikon
Jika elemen memiliki teks dan ikon - dalam bentuk simbol atau ikon yang diambil dari beberapa font, maka ikon ini akan disorot ketika teks dipilih. Perhatikan contoh yang ditunjukkan pada gambar berikut.Tombol dengan teks dan ikonBerikut adalah kode untuk tombol ini:<button>Our Services<span aria-hidden="true">▼</span></button>
Ketika Anda memilih item ini, sepertinya yang ditunjukkan di bawah ini.Tombol khususIni sama sekali tidak perlu. Harap perhatikan bahwa markup menggunakan atributaria-hiddenyang menyembunyikan ikon dari pembaca layar. Untuk mengatasi masalah menyoroti apa yang tidak perlu Anda sorot, kita dapat menggunakan gaya berikut:button span[aria-hidden="true"] {
user-select: none;
}
Ini memungkinkan Anda untuk melarang pemilihan ikon. Dan, pada saat yang sama, kami mengikat larangan pemilihan ke atribut aria-hidden. Akibatnya, segala sesuatu yang seharusnya tidak menonjol, kemungkinan besar, tidak akan terlihat oleh pembaca layar.▍ Bendera
Perilaku flag ini mengganggu saya ketika, dengan mengatur atau menghapus centang pada flag, saya tidak sengaja memilih teks deskripsinya. Ini tampilannya.Teks uraian flag dipilih secara acak. Anda dapatmenyelesaikan masalah ini dengan menata elemen<label>sebagai berikut:label {
user-select: none;
}
▍ Sorot semua teks
Nilai allyang dapat diambil properti user-selectmemungkinkan Anda untuk mencapai efek yang menarik. Jika elemen induk memiliki properti ini dengan nilai seperti itu, maka semua teks yang terkandung dalam elemen tersebut dapat dipilih dengan satu klik. Ini berguna untuk bekerja dengan konten teks, yang harus disorot secara keseluruhan. Misalnya, untuk menyoroti fragmen kode yang tersedia di halaman:.embed-code {
user-select: all;
}
Sebuah fragmen teks yang dirancang dengan gaya seperti itu dapat dipilih dengan satu klik di atasnya.Aplikasi web
Aplikasi web harus dirasakan oleh pengguna sebagai aplikasi nyata. Apakah mungkin untuk memilih teks tombol di aplikasi reguler? Tidak Anda tidak bisa. Adalah penting bahwa aplikasi web mencerminkan fitur-fitur umum dari aplikasi reguler, bahkan jika mereka dirancang menggunakan HTML dan CSS.Perhatikan beberapa contoh dari kehidupan.LKurang
Di Slack, Anda dapat menyorot label dan bidang input. Namun, teks tombol tidak disorot.Keterangan tombol tidak disorot.Berikut adalah contoh lain.Tanda tangan di bilah judul jendela modal disorot. Tanggal obrolan tidak dapat disorot.Tanggal tidak dapat dialokasikanSecara umum - rasanya aneh bagi saya bahwa dalam aplikasi Anda dapat memilih beberapa teks yang, tampaknya, seharusnya tidak mendukung pemilihan. Ada beberapa tempat di antarmuka Slack tempat ia digunakanuser-select: none, tetapi ada lebih sedikit tempat seperti yang Anda harapkan. Misalnya, bagi saya, sebagai pengguna, tidak ada untungnya menyoroti judul jendela modal.OtionNotion
Pendekatan pemilihan elemen yang diterapkan di Notion, saya suka lebih. Aplikasi web ini lebih seperti aplikasi nyata, bukan situs web, bagian mana saja yang dapat disorot.Apa yang seharusnya tidak menonjol tidak menonjol.Tidaksatu pun fragmen teks disorot dari gambar ini. Ini persis apa yang dapat Anda harapkan dari suatu aplikasi.Jangan gunakan menonaktifkan seleksi global
Tidak disarankan untuk menonaktifkan seleksi secara global. Saat Anda menggunakan pilihan menonaktifkan, cobalah untuk menonaktifkannya hanya untuk elemen yang tidak masuk akal. Untuk melakukan ini, Anda bisa membuat kelas pembantu. Sebagai contoh - ini:.disable-selection {
-webkit-user-select:text;
-moz-user-select:text;
-ms-user-select:text;
user-select:text;
}
Pola yang buruk
Ada satu pola UX yang sangat tidak saya sukai. Ini terdiri dari menampilkan peringatan ketika mencoba menyorot teks. Ini mengganggu dan membuat pengguna merasa seolah-olah mereka mencoba mengendalikan interaksinya dengan situs. Contoh dari pola ini ditunjukkan di bawah ini.Nonaktifkan penyorotan dengan tampilan pemberitahuanTolong jangan lakukan ini.Sorot pada perangkat seluler
Ada properti -webkit-touch-calloutuntuk iOS Safari yang harus mematikan tampilan tooltip standar yang ditampilkan ketika teks dipilih. Saya mencoba menggunakan properti ini, tetapi tidak berhasil.p {
-webkit-touch-callout: none;
}
Gaya ::selectionjuga tidak berfungsi.Dan properti itu user-select: noneberfungsi seperti yang diharapkan.Saya mencoba menemukan contoh nyata yang menggambarkan masalah ini. Saya menyalin sepotong teks dari Wikipedia. Pada saat yang sama, teks yang sama sekali tidak perlu bagi saya disalin (listen). Ini menyebalkan.Bersama dengan teks yang bermanfaat, itu disalin dan (dengarkan)Daripada mengizinkan pengguna untuk menyalin "mendengarkan" ini, akan lebih baik untuk menambahkan gaya ke elemen iniuser-select: none. Akibatnya, saat menyalin teks yang mengandung elemen ini, itu tidak akan disalin.Ringkasan
Di sini kami melihat metode untuk menyesuaikan sorotan elemen halaman web menggunakan CSS. Anda mungkin tertarik melihat materi ini .Pembaca yang budiman! Bagaimana Anda mengatur pemilihan teks di proyek Anda?