- CSS Custom Highlight API võimaldab arendajatel teatud tekstisegmente stiliseerida ilma DOM-struktuuri muutmata.
- Objektide Range ja Highlight kombineerimisel HighlightRegistryga saab programmiliselt rakendada kohandatud visuaalseid markereid.
- Pseudoelement ::highlight() pakub spetsiaalset CSS-liidest registreeritud esiletõstude iseseisvaks stiliseerimiseks.
- See lähenemisviis optimeerib jõudlust, vähendades DOM-i kaalu ja vältides paigutuse nihkeid, mis on seotud ümbriselementide lisamisega.
Kas olete kunagi tundnud frustratsiooni, kui proovite lehel konkreetseid sõnu esile tõsta ja avastate, et peate kõik miljoni sõna sisse pakkima? <span> or <mark> sildid? See on jõudluse seisukohalt täielik õudusunenägu ja võib ausalt öeldes teie CSS-paigutuse sassi ajada. Noh, just seal see ongi... CSS-i kohandatud esiletõstmise API tuleb mängu, toimides mängumuutjana kõigile, kes peavad teksti dünaamiliselt esile tõstma ilma HTML-i tegelikku struktuuri puudutamata.
Põhimõtteliselt laiendab see API asju, mida me juba teame, näiteks ::selection or ::spelling-error, aga see annab meile kuningriigi võtmed. Selle asemel, et loota brauserile, mis esile tõstetakse, nüüd saate määratleda suvalisi tekstivahemikke ja kujundage neid vastavalt oma soovile. See on palju puhtam viis selliste asjade haldamiseks nagu otsingutulemused, ühine redigeerimine või süntaksi esiletõstmine ilma DOM-ile tarbetut kaalu lisamata.
Miks märgielemendist eemalduda?
Pikka aega oli <mark> oli teksti rõhutamiseks parim valik silt. Kuigi see sobib suurepäraselt põhilise semantika jaoks, on sellel ka mõned üsna tüütud piirangud. Esiteks, DOM-i sõlmede lisamine võib käivitada kulukaid paigutuse ümberarvutusi, mis võib muuta teie saidi aeglaseks, eriti animatsioonide ajal. Kuid tõeline peavalu algab siis, kui peate esile tõstma teksti, mis hõlmab mitut HTML-elementiKuna te ei saa lihtsalt silti lahti jätta ja seda teise elemendi sees sulgeda ilma sobimatut HTML-i loomata, olete sunnitud esiletõstmise mitmeks väikeseks tükiks jagama, mis on lihtsalt kohmakas.
API põhikontseptsioonid
Selle toimima saamiseks peate harjuma mõne konkreetse objektiga. Esiteks on olemas Vahemiku objekt, mis on põhimõtteliselt dokumendis osuti, mis ütleb „alusta siit ja lõpeta seal”. Siis on meil Tõsta objekt esile, mis koondab ühe või mitu neist vahemikest kokku, et neid saaks käsitleda ühe stiilirühmana. Kõiki neid haldab HighlightRegister (ligipääs läbi CSS.highlights), mis toimib nagu kaart, kuhu registreerite oma esiletõstetud sündmused unikaalse nime all.
Samm-sammult rakendamine
Kohandatud esiletõstmise ekraanile saamine on lihtne neljaastmeline tants. Esiteks, sina loo oma Range'i objektid JavaScriptis. Seda saab teha tekstisõlme tuvastades ja selliseid meetodeid kasutades nagu setStart ja setEnd et täpselt kindlaks määrata, milliseid märke sihtida soovite. Kui teil on vaja katta terve element, setStartBefore ja setEndAfter on su parimad sõbrad.
Kui vahemik on paika pandud, on teine samm loo uus Highlight objektLahe funktsioon on see, et üks esiletõstmine saab sisaldada mitut vahemikku. See sobib ideaalselt lehelt otsimise funktsiooni jaoks, kus soovite, et iga sõna esinemisjuht oleks sama värvi. Pärast seda saate registreeri esiletõst kasutamine CSS.highlights.set('my-name', highlight)See annab teie esiletõstmisele kohandatud identifikaatori, mida CSS-mootor näeb.
Viimane lihv on stiili pealekandmine. Sa kasutad ::highlight(my-name) pseudoelement oma CSS-failis. Kuna see pole standardne element, on teil vaid mõned omadused, kuid saate neid hõlpsalt muuta. taustavärv või tekstikaunistus et need vahemikud esile tõstetaks. Näiteks võiksite otsingutulemuste jaoks kasutada erkkollast tausta või kustutatud teksti jaoks läbikriipsutust koostööredaktoris.
Täiustatud kasutus- ja jõudlusfunktsioonid
Üks muljetavaldavamaid kasutusjuhtumeid on koodi süntaksi esiletõstmine . Traditsiooniliselt süstisid teegid, näiteks Prism.js, tokenite värvimiseks tuhandeid span'e, mis võis DOM-i uskumatult raskeks muuta. Kohandatud esiletõstmise API abil saate koodi JavaScriptis tokeniseerida ja stiile rakendada ilma lehele ühtegi elementi lisamata . See hoiab DOM-i lihtsana ja hoiab ära brauseri takerdumise massiivsete dokumentide hulka.
Kui teil on vaja esiletõstetud elemente lennult muuta, ei pea te otsast peale alustama. Kuna esiletõstmise objekt on lingitud vahemikuga (Range), lihtsalt levila piiride värskendamine värskendab automaatselt ekraanil olevat visuaalset esiletõstmist. Kui soovite sellest lahti saada, saate konkreetse vahemiku eemaldada, kasutades nuppu delete meetod objektil Highlight või kustuta kogu registreering kasutamine CSS.highlights.delete.
Ligipääsetavus ja brauseri tugi
Oluline on meeles pidada, et need esiletõstmised on puhtalt visuaalsed ja ei anna loomupärast semantilist tähendust ekraanilugejatele. Kui lood midagi, mille puhul ligipääsetavus on esmatähtis, peaksid kasutama type Esiletõstmise liidese atribuut, mis määrab, kas esiletõstmine on õigekirja- või grammatikaviga, kuigi selle tugi on erinev. Kahtluse korral täiendades oma esiletõstetud elemente ARIA siltidega või semantiline HTML on õige tee.
Ühilduvuse osas on see API hiljuti tohutu tõuke saanud. See toimib juba kindlalt Chrome'is, Edge'is ja Safaris ning Firefox on liitunud seltskonnaga (alates umbes versioonist 140), mis tähendab, et see on nüüd enamiku tootmiskeskkondade jaoks sobiv. Vanemate brauserite krahhide vältimiseks on enne koodi käivitamist tark kontrollida, kas CSS-objektis on olemas „esiletõstmised” .
See API muudab põhjalikult teksti manipuleerimise viisi, lahutades visuaalse esituse HTML-struktuurist. Kasutades vahemiku ja esiletõstmise objekte, saavad arendajad rakendada keerukaid funktsioone, nagu reaalajas otsing ja süntaksi värvimine, hoides samal ajal DOM-i kerge ja jõudluse kiire, möödudes tõhusalt ümbriselementide traditsioonilistest piirangutest.
