- CSS pielāgotās izcelšanas API ļauj izstrādātājiem veidot noteiktus teksta segmentus, nemainot DOM struktūru.
- Apvienojot Range un Highlight objektus ar HighlightRegistry, pielāgotus vizuālos marķierus var lietot programmatiski.
- Pseidoelements ::highlight() nodrošina īpašu CSS saskarni reģistrēto izcēlumu neatkarīgai stilizēšanai.
- Šī pieeja optimizē veiktspēju, samazinot DOM svaru un novērš izkārtojuma maiņas, kas saistītas ar apvalka elementu ievietošanu.
Vai esat kādreiz izjutuši neapmierinātību, mēģinot izcelt konkrētus vārdus lapā un saprotot, ka viss ir jāietin miljons vārdu? <span> or <mark> tagi? Tas ir pilnīgs murgs veiktspējai un patiesībā var sabojāt jūsu CSS izkārtojumu. Nu, tieši tur ir CSS pielāgotā izcelšanas API sāk darboties, darbojoties kā spēles noteikumu mainītājs ikvienam, kam ir dinamiski jānorāda uz tekstu, nepieskaroties faktiskajai HTML struktūrai.
Būtībā šis API paplašina lietas, ko mēs jau zinām, piemēram ::selection or ::spelling-error, bet tas dod mums atslēgas uz valstību. Tā vietā, lai paļautos uz pārlūkprogrammu, kas tiks izcelts, tagad varat definēt patvaļīgus teksta diapazonus un veidojiet tos pēc saviem ieskatiem. Tas ir daudz tīrāks veids, kā apstrādāt tādas lietas kā meklēšanas rezultātus, kopīgu rediģēšanu vai sintakses izcelšanu, nepievienojot nevajadzīgu svaru DOM.
Kāpēc atteikties no preču zīmes elementa?
Ilgu laiku <mark> bija labākais veids, kā izcelt tekstu. Lai gan tas ir lieliski piemērots pamata semantikai, tam ir daži diezgan kaitinoši ierobežojumi. Pirmkārt, Mezglu ievietošana DOM var izraisīt dārgus izkārtojuma pārrēķinus, kas var padarīt jūsu vietni lēnāku, it īpaši animāciju laikā. Taču īstās galvassāpes sākas, kad ir jāizceļ teksts, kas aptver vairākus HTML elementusTā kā nevar vienkārši atstāt tagu atvērtu un aizvērt to citā elementā, neradot nederīgu HTML, izcēlums ir jāsadala vairākās mazās daļās, kas ir vienkārši neveikli.
API pamatjēdzieni
Lai tas darbotos, jums ir jāapgūst daži konkrēti objekti. Pirmkārt, ir Diapazona objekts, kas būtībā ir rādītājs, kas dokumentā norāda “sākt šeit un beigt tur”. Tad mums ir Iezīmēt objektu, kas apvieno vienu vai vairākus no šiem diapazoniem, lai tos varētu uzskatīt par vienu stilistisku grupu. Visus tos pārvalda Izcelt reģistru (piekļuve, izmantojot CSS.highlights), kas darbojas kā karte, kurā reģistrējat savus svarīgākos momentus ar unikālu nosaukumu.
Soli pa solim ieviešana
Pielāgota iezīmējuma iegūšana ekrānā ir vienkārša četru soļu deja. Vispirms jūs Izveidojiet savus diapazona objektus JavaScript valodā. To var izdarīt, identificējot teksta mezglu un izmantojot tādas metodes kā setStart un setEnd lai precīzi noteiktu, kuras rakstzīmes vēlaties atlasīt. Ja jums ir jāaptver viss elements, setStartBefore un setEndAfter ir tavi labākie draugi.
Kad diapazons ir iestatīts, otrais solis ir izveidot jaunu Highlight objektuLieliska funkcija ir tā, ka viens izcēlums var saturēt vairākus diapazonus. Tas ir ideāli piemērots funkcijai “atrast lapā”, kur vēlaties, lai katram vārda gadījumam būtu viena un tā pati krāsa. Pēc tam jūs reģistrēt iezīmēto elementu izmantojot CSS.highlights.set('my-name', highlight)Tas piešķir jūsu izcēlumam pielāgotu identifikatoru, ko CSS dzinējs var redzēt.
Pēdējais pieskāriens ir stila uzklāšana. Jūs izmantojat ::highlight(my-name) pseidoelements savā CSS failā. Tā kā šis nav standarta elements, jums ir ierobežotas dažas īpašības, taču jūs varat viegli mainīt fona krāsa vai teksta dekorācija lai šie diapazoni izceltos. Piemēram, varat izmantot spilgti dzeltenu fonu meklēšanas rezultātiem vai pārsvītrojumu dzēstam tekstam sadarbības redaktorā.
Paplašinātas lietošanas un veiktspējas priekšrocības
Viens no iespaidīgākajiem lietošanas gadījumiem ir koda sintakses izcelšana . Tradicionāli tādas bibliotēkas kā Prism.js injicēja tūkstošiem posmu, lai iekrāsotu marķierus, kas var padarīt DOM neticami smagnēju. Izmantojot pielāgotās izcelšanas API, varat tokenizēt kodu JavaScript valodā un lietot stilus, nepievienojot lapai nevienu elementu . Tas nodrošina DOM optimizāciju un neļauj pārlūkprogrammai aizrīties ar lieliem dokumentiem.
Ja nepieciešams mainīt iezīmētos elementus acumirklī, nav jāsāk viss no jauna. Tā kā iezīmēšanas objekts ir saistīts ar diapazonu, vienkārši atjauninot diapazona robežas automātiski atjauninās vizuālo izcelumu ekrānā. Ja vēlaties no tā atbrīvoties, varat noņemt noteiktu diapazonu, izmantojot delete metode uz Highlight objekta vai noslaucīt visu reģistrāciju izmantojot CSS.highlights.delete.
Pieejamība un pārlūkprogrammas atbalsts
Ir svarīgi atcerēties, ka šie izcēlumi ir tikai vizuāli un nesniedz iekšēju semantisko nozīmi ekrāna lasītājiem. Ja veidojat kaut ko tādu, kur pieejamība ir galvenā prioritāte, jums vajadzētu izmantot type atribūts Highlight saskarnē, lai norādītu, vai izcelšana ir pareizrakstības vai gramatikas kļūda, lai gan atbalsts šim nolūkam atšķiras. Ja rodas šaubas, papildinot savus svarīgākos aspektus ar ARIA etiķetēm jeb semantiskā HTML ir pareizais ceļš.
Runājot par saderību, šī API nesen ir piedzīvojusi ievērojamu progresu. Tā jau ir stabili darbojusies pārlūkprogrammās Chrome, Edge un Safari, un Firefox ir pievienojies šai grupai (sākot ar aptuveni 140. versiju), kas nozīmē, ka tagad tā ir piemērota lielākajai daļai ražošanas vides. Lai izvairītos no avārijām vecākās pārlūkprogrammās, pirms koda palaišanas ir ieteicams pārbaudīt, vai CSS objektā ir “izceltie elementi” .
Šis API fundamentāli maina teksta manipulācijas veidu, atdalot vizuālo attēlojumu no HTML struktūras. Izmantojot Range un Highlight objektus, izstrādātāji var ieviest sarežģītas funkcijas, piemēram, meklēšanu reāllaikā un sintaktisko krāsošanu, vienlaikus saglabājot vieglu DOM un ātru veiktspēju, efektīvi apejot tradicionālos apvalka elementu ierobežojumus.
