CSS Custom Sorotan API: Penampilan Pertama

Gaya teks web sentiasa menjadi tumpuan pemaju. Apa yang diharapkan ialah kemunculan CSS Custom Highlight API, yang akan merevolusikan gaya skop teks web.

Sebagai contoh, perisian penyuntingan teks seperti Google Docs, Word, atau Dropbox Paper mengesan ejaan dan kesilapan tatabahasa dan memaparkan garis bergelombang di bawah untuk meminta pengguna. Editor kod seperti kod VS juga menggunakan kaedah yang sama untuk kesilapan kod.

Satu lagi kes penggunaan biasa untuk penonjolan teks ialah fungsi carian dan penonjolan . Sekarang, anda boleh cuba menekan Ctrl/⌘ F dalam penyemak imbas anda dan masukkan beberapa teks dalam artikel ini.

Pelayar biasanya mengendalikan gaya ini secara automatik. Kawasan yang boleh diedit (mis. ) secara automatik akan memaparkan garis gelombang yang salah eja secara automatik. Perintah Cari secara automatik akan menyerlahkan teks yang dijumpai.

Tetapi bagaimana jika kita mahu melakukan gaya ini sendiri? Bagaimana untuk melaksanakannya di laman web telah lama menjadi masalah biasa, dan ia boleh membuang banyak masa untuk ramai orang.

Ini bukan teka -teki yang mudah. Kami tidak hanya menggunakan kelas<span></span> Tag bungkus teks dan gunakan beberapa CSS. Malah, ini memerlukan keupayaan untuk menyerlahkan pelbagai julat teks dengan betul di mana -mana pokok Dom yang kompleks dan mungkin merentasi sempadan elemen DOM.

Terdapat dua cara biasa untuk menyelesaikan masalah ini:

1. Rangkaian teks bergaya Pseudo-elements, dan
2. Buat sistem penonjolan teks anda sendiri.

Mari kita semak semula kedua -dua pendekatan dan kemudian lihat bagaimana API Custom Custom yang akan datang mengubah semua ini.

Kaedah 1: Julat teks bergaya

Pelbagai teks yang paling terkenal boleh dipilih pengguna. Apabila anda menggunakan menunjuk ke peranti untuk memilih teks di laman web, objek pemilihan dibuat secara automatik. Malah, sekarang cuba pilih teks di halaman ini dan kemudian jalankan document.getSelection() dalam konsol DevTools. Anda harus melihat maklumat lokasi untuk teks yang dipilih.

Ternyata anda juga boleh membuat pilihan teks secara pemrograman melalui JavaScript. Berikut adalah contoh:

 // Pertama, buat objek pelbagai.
const julat = julat baru ();

// dan tetapkan kedudukan permulaan dan akhir.
range.setStart (ParentNode, startOffset);
range.SetEnd (ParentNode, EndOffset);

// Kemudian, tetapkan pemilihan semasa ke julat ini.
document.getSelection (). RemoveAllRanges ();
document.getSelection (). AddRange (julat);

Sekeping teka -teki terakhir adalah untuk gaya julat ini. CSS mempunyai elemen pseudo yang dipanggil ::selection yang melakukan ini, dan ia disokong dalam semua pelayar.

 :: pemilihan {
  latar belakang warna: #F06;
  Warna: Putih;
}

Berikut adalah contoh menggunakan teknik ini untuk menyerlahkan semua perkataan dalam halaman seterusnya:

Sebagai tambahan kepada ::selection Pseudo-Element, terdapat banyak elemen pseudo lain:

• ::target-text Pilih teks yang telah ditatal ke dalam penyemak imbas (penyemak imbas yang menyokong menatal ke fungsi teks). (MDN)
• ::spelling-error Teks Pilih yang ditandai dengan penyemak imbas seperti yang mengandungi kesilapan. (MDN)
• ::grammar-error Teks Pilih yang ditandai oleh penyemak imbas sebagai mengandungi ralat sintaks. (MDN)

Malangnya, sokongan penyemak imbas di sini tidak begitu baik, dan walaupun skop ini sendiri berguna, mereka tidak boleh digunakan untuk gaya coretan teks tersuai - hanya coretan teks yang telah ditetapkan dari penyemak imbas.

Oleh itu, pemilihan teks pengguna adalah baik kerana ia agak mudah dilaksanakan dan tidak mengubah DOM halaman. Malah, objek pelbagai pada dasarnya adalah koordinat perenggan di halaman, bukannya elemen HTML yang perlu dicipta untuk wujud.

Walau bagaimanapun, satu kelemahan utama ialah mewujudkan pemilihan menetapkan semula apa sahaja yang telah dipilih oleh pengguna secara manual. Cuba pilih teks dalam demo di atas untuk menguji ini. Anda akan melihat bahawa apabila kod bergerak pemilihan ke lokasi lain, ia hilang.

Kaedah 2: Sistem Sorotan Custom

Jika anda tidak menggunakan objek pemilihan untuk memenuhi keperluan anda, penyelesaian kedua adalah hampir satu -satunya pilihan. Penyelesaian ini berkisar melakukan segala -galanya sendiri, menggunakan JavaScript untuk memasukkan unsur -unsur HTML baru di mana anda mahu kemuncaknya muncul.

Malangnya, ini bermakna lebih banyak kod JavaScript perlu ditulis dan dikekalkan, belum lagi ia memaksa pelayar untuk mencipta susun atur halaman apabila perubahan sorotan dibuat. Di samping itu, terdapat beberapa kes kelebihan yang kompleks, seperti ketika anda ingin menyerlahkan serpihan teks yang merangkumi pelbagai elemen DOM.

Menariknya, Codemirror dan Monaco (Perpustakaan Editor Teks JavaScript yang menyokong kod vs) mempunyai logik menonjol sendiri. Mereka menggunakan pendekatan yang sedikit berbeza, di mana penonjolan terkandung di bahagian berasingan pokok Dom. Barisan teks dan perenggan yang diserlahkan diberikan di dua lokasi yang berbeza di DOM dan kemudian diposisikan antara satu sama lain. Jika anda menyemak Subtree DOM yang mengandungi teks, ia tidak diserlahkan. Dengan cara ini, penonjolan boleh diberikan semula tanpa menjejaskan baris teks dan tidak ada unsur-unsur baru yang perlu diperkenalkan ke dalam baris teks.

Secara keseluruhannya, rasanya seperti ciri penonjolan yang disokong penyemak imbas hilang. Sesetengah ciri dapat membantu menyelesaikan semua kekurangan ini (tidak mengganggu pemilihan teks pengguna, sokongan untuk pelbagai pilihan, kod mudah) dan lebih cepat daripada penyelesaian tersuai.

Nasib baik, itulah yang akan kita bincangkan di sini!

API Sorotan Custom CSS

API Custom Sorotan CSS adalah spesifikasi W3C baru (kini dalam keadaan draf kerja) yang membolehkan julat teks sewenang -wenangnya digayakan dari JavaScript! Kaedah di sini sangat mirip dengan teknik pemilihan teks pengguna yang kami semak sebelumnya. Ia menyediakan pemaju dengan cara untuk membuat skop sewenang -wenang (dari JavaScript) dan kemudian gaya mereka menggunakan CSS.

Buat julat teks

Langkah pertama adalah untuk membuat julat teks untuk menyerlahkan, yang boleh dilakukan menggunakan julat dalam JavaScript. Jadi, seperti yang kita lakukan semasa menetapkan pemilihan semasa:

 const julat = julat baru ();
range.setStart (ParentNode, startOffset);
range.SetEnd (ParentNode, EndOffset);

Perlu diingat bahawa jika nod diluluskan sebagai parameter pertama adalah nod teks atau bukan nod teks, kaedah setStart dan setEnd berfungsi secara berbeza. Untuk nod teks, offset sepadan dengan bilangan aksara dalam nod. Untuk nod lain, offset sepadan dengan bilangan kanak -kanak dalam nod induk.

Ia juga perlu diperhatikan bahawa setStart dan setEnd bukanlah satu -satunya cara untuk menerangkan kedudukan permulaan dan akhir julat. Semak kaedah lain yang terdapat di kelas julat untuk melihat pilihan lain.

Buat kemuncak

Langkah kedua melibatkan mewujudkan objek sorotan untuk skop yang dibuat pada langkah sebelumnya. Objek sorotan boleh menerima satu atau lebih julat. Oleh itu, jika anda ingin menyerlahkan banyak coretan teks dengan cara yang sama, anda mungkin perlu membuat objek sorotan dan memulakannya dengan semua julat yang sepadan dengan coretan teks tersebut.

 sorotan const = sorotan baru (Range1, Range2, ..., Rangen);

Tetapi anda juga boleh membuat banyak objek menyoroti yang anda mahukan. Sebagai contoh, jika anda membina editor teks kolaboratif di mana setiap pengguna mendapat warna teks yang berbeza, anda boleh membuat objek sorotan bagi setiap pengguna. Setiap objek kemudian boleh digayakan secara berbeza, seperti yang akan kita lihat seterusnya.

Daftar sorotan

Sekarang, objek sorotan itu sendiri tidak melakukan apa -apa. Mereka pertama perlu didaftarkan dalam apa yang disebut pendaftaran. Ini dilakukan menggunakan API Sorotan CSS. Pendaftaran adalah seperti peta di mana anda boleh mendaftarkan sorotan baru dengan menentukan nama untuk kemuncak, serta memadam sorotan (atau bahkan membersihkan seluruh pendaftaran).

Inilah cara mendaftarkan satu kemuncak.

 Css.highlights.set ('My-Custom-Highlight', sorot);

Di mana my-custom-highlight adalah nama yang anda pilih dan highlight adalah objek sorotan yang dibuat pada langkah sebelumnya.

Gaya menonjol

Langkah terakhir adalah untuk benar -benar gaya sorotan berdaftar. Ini dilakukan dengan CSS baru ::highlight() pseudo-elemen, menggunakan nama yang anda pilih semasa mendaftarkan objek sorotan ( my-custom-highlight dalam contoh kami).

 :: Sorotan (My-Custom-Highlight) {
  latar belakang warna: kuning;
  Warna: Hitam;
}

Perlu diingat bahawa sama seperti ::selection , hanya sebahagian daripada atribut CSS yang boleh digunakan dengan ::highlight() pseudo-elemen:

• background-color
• caret-color
• color
• cursor
• fill
• stroke
• stroke-width
• text-decoration (ini hanya boleh disokong dalam versi 2 spesifikasi)
• text-shadow

Kemas kini menonjol

Terdapat beberapa cara untuk mengemas kini teks yang diserlahkan pada halaman.

Sebagai contoh, anda boleh menggunakan CSS.highlights.clear() untuk membersihkan sepenuhnya pendaftaran sorot dan bermula dari awal. Sebagai alternatif, anda juga boleh mengemas kini skop asas tanpa mencipta sebarang objek. Untuk melakukan ini, sekali lagi gunakan range.setStart dan range.setEnd Kaedah (atau mana -mana kaedah julat lain) dan pelayar akan mengecat semula kemuncaknya.

Walau bagaimanapun, objek Sorotan berfungsi sama dengan set JavaScript, yang bermaksud anda juga boleh menambah objek julat baru ke kemuncak yang sedia ada menggunakan highlight.add(newRange) , atau memadam julat menggunakan highlight.delete(existingRange) .

Ketiga, anda juga boleh menambah atau memadam objek sorotan khusus ke CSS.Highlights Registry. Oleh kerana API ini berfungsi serupa dengan Peta JavaScript, anda boleh menggunakan set dan delete untuk mengemas kini sorotan yang didaftarkan sekarang.

Sokongan penyemak imbas

Spesifikasi API Custom Custom CSS agak baru dan pelaksanaannya dalam penyemak imbas masih tidak lengkap. Oleh itu, ini akan menjadi tambahan yang sangat berguna kepada platform web, ia tidak sesuai untuk persekitaran pengeluaran lagi.

Pasukan Microsoft Edge sedang melaksanakan API Sorotan Custom CSS di Chromium. Malah, ciri ini kini boleh didapati dalam versi Canary dengan membolehkan bendera ciri platform web eksperimen (di bawah kira -kira: bendera). Tidak ada rancangan yang jelas apabila ciri ini akan dikeluarkan dalam penyemak imbas Chrome, Edge dan lain-lain, tetapi sudah sangat dekat.

Safari 99 juga menyokong API ini, tetapi selepas bendera eksperimen (membangunkan → Ciri -ciri Eksperimen → Sorotan API), dan antara muka sedikit berbeza kerana ia menggunakan objek staticrange dan bukannya objek pelbagai.

Firefox tidak menyokong API ini lagi, tetapi anda boleh membaca kedudukan Mozilla pada API ini untuk maklumat lanjut.

Demo

Bercakap tentang Microsoft Edge, mereka telah menubuhkan demo di mana anda boleh mencuba API Custom Sorotan CSS. Tetapi sebelum mencuba demo, pastikan anda menggunakan Canary Chrome atau Edge dengan bendera ciri platform web eksperimen yang didayakan di halaman: bendera.

/butang Lihat demo

Demonstrasi ini menggunakan API Highlight Custom untuk menyerlahkan julat teks di halaman berdasarkan apa yang anda masukkan di medan carian di bahagian atas halaman.

Sebaik sahaja halaman dimuatkan, kod JavaScript mengambil semua nod teks dalam halaman (menggunakan Treewalker) dan apabila pengguna menaip sesuatu dalam medan carian, kod itu melepasi nod ini sehingga perlawanan dijumpai. Kemudian gunakan perlawanan ini untuk membuat objek pelbagai dan menyerlahkannya menggunakan API sorotan tersuai.

Meringkaskan

Oleh itu, adakah API menonjol yang disediakan oleh pelayar baru ini benar -benar berbaloi? Pasti berbaloi!

Pertama, walaupun CSS Custom Highlight API kelihatan agak rumit pada mulanya (mis., Anda perlu membuat skop, kemudian menyerlahkannya, dan kemudian mendaftarkannya, dan akhirnya gaya mereka), ia masih lebih mudah daripada membuat unsur -unsur DOM baru dan memasukkannya ke tempat yang betul.

Lebih penting lagi, enjin penyemak imbas boleh gaya julat ini sangat cepat.

Alasannya hanya membolehkan sebahagian daripada atribut CSS digunakan dengan ::highlight() pseudo-elemen adalah bahawa bahagian atribut ini hanya mengandungi sifat-sifat yang penyemak imbas boleh memohon dengan sangat berkesan tanpa mencipta susun atur halaman. Enjin perlu melakukan lebih banyak kerja dengan memasukkan elemen DOM baru di sekitar halaman untuk menyerlahkan julat teks.

Tetapi jangan percaya saya. Fernando Fiori terlibat dalam pembangunan API dan dia mencipta demonstrasi perbandingan prestasi yang bagus ini. Di komputer saya, prestasi API Custom Custom CSS adalah purata 5 kali lebih cepat daripada penonjolan berasaskan DOM.

Oleh kerana Chromium dan Safari sudah menyediakan sokongan eksperimen, kami semakin dekat dengan apa yang boleh digunakan dalam persekitaran pengeluaran. Saya tidak sabar untuk melihat penyemak imbas secara konsisten menyokong API sorotan tersuai dan melihat ciri -ciri yang akan dibuka!

Atas ialah kandungan terperinci CSS Custom Sorotan API: Penampilan Pertama. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!