- I-CSS Custom Highlight API ivumela abathuthukisi ukuthi bahlele izingxenye ezithile zombhalo ngaphandle kokushintsha isakhiwo se-DOM.
- Ngokuhlanganisa izinto ze-Range kanye ne-Highlight ne-HighlightRegistry, izimpawu ezibonakalayo ezenziwe ngokwezifiso zingasetshenziswa ngokuhlelekile.
- I-::highlight() i-pseudo-element inikeza isikhombimsebenzisi se-CSS esizinikele sokuhlobisa ama-highlight abhalisiwe ngokuzimela.
- Le ndlela ithuthukisa ukusebenza ngokunciphisa isisindo se-DOM futhi igwema ukushintsha kwesakhiwo okuhlobene nokufaka izakhi ze-wrapper.
Wake wazizwa ukhungathekile ngokuzama ukugqamisa amagama athile ekhasini bese uqaphela ukuthi kufanele uhlanganise yonke into ngesigidi <span> or <mark> Amathegi? Kuyiphupho elibi kakhulu lokusebenza futhi kungaphazamisa ngempela ukwakheka kwe-CSS yakho. Kulungile, yilapho I-CSS Custom Highlight API kuyasetshenziswa, kusebenza njengoshintsho olukhulu kunoma ubani odinga ukukhomba umbhalo ngendlela eguquguqukayo ngaphandle kokuthinta isakhiwo sangempela se-HTML.
Empeleni, le API iyanda ezintweni esizazi kakade, njengokuthi ::selection or ::spelling-error, kodwa kusinika izihluthulelo zombuso. Esikhundleni sokuthembela kusiphequluli ukuze sinqume ukuthi yini egqanyiswayo, manje usungakwazi ukuchaza ububanzi bombhalo obungahleliwe futhi uzifake ngendlela oyithandayo. Kuyindlela ehlanzekile kakhulu yokusingatha izinto ezifana nemiphumela yokusesha, ukuhlela ngokubambisana, noma ukugqamisa i-syntax ngaphandle kokwengeza isisindo esingadingekile ku-DOM.
Kungani usuka endaweni yophawu?
Isikhathi eside, <mark> Ithegi yayiyindlela engcono kakhulu yokugcizelela umbhalo. Nakuba ilungele ukuhumusha amagama ayisisekelo, inemikhawulo ethile ecasulayo. Okokuqala, ukufaka ama-node ku-DOM kungabangela ukubalwa kabusha kwesakhiwo okubizayo, okungenza isayithi lakho lizizwe lihamba kancane, ikakhulukazi ngesikhathi sokugqwayiza. Kodwa ikhanda elibuhlungu liqala lapho udinga ukugqamisa umbhalo othi ihlanganisa izinto eziningi ze-HTMLNjengoba ungeke nje ushiye ithegi ivuliwe bese uyivala ngaphakathi kwesinye isici ngaphandle kokudala i-HTML engavumelekile, uphoqelekile ukuhlukanisa i-glance yakho ibe yizicucu eziningana ezincane, okuyinto exakile nje.
Imiqondo eyinhloko ye-API
Ukuze lokhu kusebenze, udinga ukukhululeka ngezinto ezimbalwa ezithile. Okokuqala, kukhona Into yobubanzi, okuyisikhombisi-ndlela esithi “qala lapha bese uphela lapho” ngaphakathi kwedokhumenti. Bese siba ne- Into egqamisayo, okuhlanganisa eyodwa noma ngaphezulu yalezi zinhlobo ndawonye ukuze ziphathwe njengeqembu elilodwa lesitayela. Konke lokhu kulawulwa yi I-HighlightRegistry (kufinyelelwe nge- CSS.highlights), esebenza njengemephu lapho ubhalisa khona izinto zakho ezivelele ngaphansi kwegama eliyingqayizivele.
Ukuqaliswa kwesinyathelo ngesinyathelo
Ukuthola ukugqama ngokwezifiso esikrinini kuwumdanso olula onezinyathelo ezine. Okokuqala, wena dala izinto zakho ze-Range ku-JavaScript. Ungakwenza lokhu ngokuhlonza i-node yombhalo bese usebenzisa izindlela ezifana setStart futhi setEnd ukukhomba ngqo ukuthi yiziphi izinhlamvu ofuna ukuziqondisa. Uma udinga ukumboza isici sonke, setStartBefore futhi setEndAfter bangabangane bakho abakhulu.
Uma ububanzi sebusethiwe, isinyathelo sesibili ukuthi qalisa into entsha ye-Highlight. Isici esihle lapha ukuthi i-Highlight eyodwa ingabamba amabanga amaningi. Lokhu kulungele isici "sokuthola ekhasini" lapho ufuna khona ukuthi zonke izibonelo zegama zabelane ngombala ofanayo. Ngemuva kwalokho, wena bhalisa okuvelele usebenzisa CSS.highlights.set('my-name', highlight)Lokhu kunikeza okugqamile kwakho isihlonzi esenziwe ngokwezifiso esingabonwa yinjini ye-CSS.
Ukuthinta kokugcina ukusebenzisa isitayela. Usebenzisa ::highlight(my-name) i-pseudo-element kufayela lakho le-CSS. Njengoba lokhu kungeyona into ejwayelekile, ukhawulelwe kuzakhiwo ezimbalwa, kodwa ungashintsha kalula umbala wangemuva noma umhlobiso wombhalo ukwenza lawo mabanga avele. Isibonelo, ungasebenzisa ingemuva eliphuzi elikhanyayo emiphumeleni yokusesha noma umugqa oqondile wombhalo osusiwe kumhleli wokubambisana.
Izinzuzo zokusebenzisa okuthuthukisiwe kanye nokusebenza kahle
Esinye sezimo zokusetshenziswa ezihlaba umxhwele kakhulu ukugqamisa i-syntax kwe-code . Ngokwesiko, imitapo yolwazi efana ne-Prism.js ingafaka izinkulungwane zama-span ukuze ifake imibala kumathokheni, okungenza i-DOM ibe nzima kakhulu. Ngokusebenzisa i-Custom Highlight API, ungenza ikhodi ibe yi-token ku-JavaScript futhi usebenzise izitayela ngaphandle kokwengeza into eyodwa ekhasini . Lokhu kugcina i-DOM ithambile futhi kuvimbela isiphequluli ukuthi singaminyani amadokhumenti amakhulu.
Uma udinga ukushintsha okugqanyisiwe ngokushesha, akudingeki uqale phansi. Ngoba into ethi Highlight ixhunywe ku-Range, ukuvuselela nje imingcele ye-Range izobuyekeza ngokuzenzakalelayo ukugqama okubonakalayo esikrinini. Uma ufuna ukukususa, ungasusa ububanzi obuthile usebenzisa delete indlela entweni ethi Highlight noma sula konke ukubhalisa usebenzisa CSS.highlights.delete.
Ukufinyelela kanye nokusekelwa kwesiphequluli
Kubalulekile ukukhumbula ukuthi lezi zinto ezivelele zibonakala kuphela futhi awunikezi incazelo yencazelo engokwemvelo ukuze uhlole abafundi. Uma wakha okuthile lapho ukufinyeleleka kuyinto eza kuqala, kufanele usebenzise type isici sesixhumi esibonakalayo se-Highlight ukuze sicacise ukuthi i-highlight iyiphutha lesipelingi noma lohlelo lolimi, yize ukusekelwa kwalokhu kuyahlukahluka. Uma ungabaza, ukugcwalisa okuvelele kwakho ngamalebula e-ARIA noma i-HTML yesimantiki yindlela okufanele uhambe ngayo.
Ngokuphathelene nokuhambisana, le API ibone ukuthuthuka okukhulu muva nje. Isivele iqinile ku-Chrome, Edge, kanye ne-Safari, futhi i-Firefox ijoyine iqembu (kusukela cishe kunguqulo 140), okusho ukuthi manje isiyasebenza ezindaweni eziningi zokukhiqiza. Ukuze ugweme ukuphahlazeka ezipheqululini ezindala, kuyisinyathelo esihlakaniphile ukuhlola ukuthi 'izinto ezivelele' zikhona yini ku-CSS object ngaphambi kokusebenzisa ikhodi yakho.
Le API ishintsha kakhulu indlela esisingatha ngayo ukuguquguquka kombhalo ngokuhlukanisa isethulo esibonakalayo kusuka kusakhiwo se-HTML. Ngokusebenzisa izinto ze-Range kanye ne-Highlight, abathuthukisi bangafaka izici eziyinkimbinkimbi njengokusesha kwesikhathi sangempela kanye nombala we-syntax ngenkathi begcina i-DOM ilula kanye nokusebenza okusheshayo, bedlula ngempumelelo imikhawulo yendabuko yezinto ezigoqekayo.
