? ??? ???? ?? ???? ???????. ???? ?? CSS Custom Highlight API? ???? ? ??? ??? ???? ??? ??? ????.

?? ??, Google ??, Word ?? Dropbox Paper? ?? ??? ?? ?????? ?? ? ?? ??? ???? ??? ?? ??? ???? ????? ???????. Code? ?? ?? ???? ?? ??? ?? ??? ??? ?????.

??? ?? ??? ? ?? ???? ?? ??? ?? ??? ???? ?? ? ? ?? ? ?? ?? ?????. ?? ?????? Ctrl/? f? ???? ???? ???? ?? ? ? ????.

????? ????? ??? ???? ???? ?????. ?? ??? ?? (? : )? ?? ?? ??? ??? ???? ?????. ?? ??? ?? ???? ???? ?????.

??? ?? ?? ???? ????? ??? ????? ? ????? ??? ???? ??? ???? ???? ????? ?? ????? ?? ??? ?? ? ? ????.

??? ??? ??? ????. ??? ?? ??? ???? ????<span></span> ??? ???? ??? ?? CSS? ?????. ???,?? ???? ??? DOM ??? DOM ??? ??? ?? ?? ??? ??? ???? ???? ??? ?????.

? ??? ???? ? ?? ???? ??? ????.

1. ???? ??? ?? ?? ?? ?
2. ??? ??? ?? ???? ????.

?? ? ?? ?? ??? ?? ?? ? ?? ???? CSS ??? ??? API? ???? ??? ?? ?????.

?? 1 : ??? ??? ??

?? ??? ?? ??? ??? ??? ??? ??? ?? ? ? ????. ??? ???? ? ????? ???? ???? ?? ??? ???? ?????. ??? ??? ????? ???? ??? ?? DevTools ???? document.getSelection() ? ??????. ??? ???? ?? ??? ????????.

JavaScript? ?? ????? ???? ??? ??? ? ?? ????. ?? ??? ????.

 // ??, ?? ??? ????.
const ?? = ??? ?? ();

// ?? ? ?? ??? ?????.
Range.setStart (ParentNode, TartoffSet);
Range.Setend (ParentNode, Endoffset);

// ?? ?? ?? ???? ??? ??????.
document.getSelection (). removealLranges ();
document.getSelection (). addRange (??);

??? ??? ???? ??? ?????? ????. CSS?? ??? ???? ::selection ??? ?? ??? ??? ?? ?????? ?????.

 :: ?? {
  ??? : #f06;
  ?? : ??;
}

???? ??? ???? ???? ?? ??? ???? ????.

::selection ?? ?? ??? ?? ?? ?? ??? ????.

• ::target-text ?????? ??? ? ??? (??? ?? ???? ???? ????)? ?????. (MDN)
• ::spelling-error ??? ?? ? ????? ??? ???? ??????. (MDN)
• ::grammar-error ?????? ??? ???? ?? ??? ???? ??????. (MDN)

????, ??? ???? ??? ??? ?? ???, ??? ??? ??? ????? ??? ?? ??? ? ?? ???? ???? ? ??? ? ????. ?????? ?? ?? ? ??? ? ?? ? ????.

??? ??? ??? ??? ????? ????? ?? ???? DOM? ???? ?? ??? ????. ???, ?? ??? ????? ???? ?? ?? ???? HTML ??? ??? ???? ??? ?????.

??? ? ?? ?? ??? ???? ???? ??? ?? ?? ???? ????. ?? ???? ???? ???? ???????. ??? ??? ?? ??? ???? ?????.

?? 2 : ??? ?? ?? ???

??? ??? ?? ?? ??? ???? ?? ?? ? ?? ???? ?? ??? ?????. ? ???? JavaScript? ???? ?????? ???? ??? HTML ??? ???? ?? ?? ?? ???? ?? ???????.

???? ??? ????? ??? ???? ??? ????? ???? ????? ????? ???? ?? ?? ????, ? ?? JavaScript ??? ???? ??????? ?? ?????. ?? ?? DOM ??? ???? ??? ??? ????? ??? ?? ??? ?? ???? ????.

????? Codemirror? Monaco (? ??? ???? JavaScript ??? ??? ?????)?? ?? ?? ??? ????. ??? ?? ?? ???? ????, ??? ?? ??? DOM ??? ?? ??? ?????. ??? ??? ?? ??? ??? DOM? ? ?? ?? ???? ??? ? ?? ?? ?????. ???? ?? ? DOM ?? ??? ???? ?? ???? ????. ??? ????, ??? ??? ??? ??? ?? ?? ??? ?? ??? ? ? ??? ??? ??? ??? ??? ?? ? ??? ????.

????? ???? ?? ????? ??? ?? ? ? ????. ?? ??? ??? ?? ??? ???? ? ??? ? ? ??? (??? ??? ??? ???? ??, ?? ??? ?? ??, ??? ??) ??? ?? ????? ????.

????, ??? ??? ??? ?? ? ????!

CSS ??? ?? ????? API

CSS ??? ?? ????? API? ?? ?????? ??? ??? ??? ???? ?? ??? ??? W3C ?? (?? ?? ?? ??)???. ??? ??? ??? ?? ? ??? ??? ?? ??? ?? ?????. ????? ?? ?????? ??? ???? ?? ? ?? CSS? ???? ???? ??? ??? ??? ?????.

??? ??? ????

? ?? ??? ?? ?? ? ??? ??? ??? JavaScript? ??? ???? ?? ? ??? ????. ??? ?? ??? ??? ?? ????? ??? ????.

 const ?? = ??? ?? ();
Range.setStart (ParentNode, TartoffSet);
Range.Setend (ParentNode, Endoffset);

??? ? ?? ?? ??? ?? ? ?? ??? ????? ??? ??? ?? ?? setStart ? setEnd ???? ??? ????? ?? ??? ??? ????. ??? ??? ?? ???? ??? ?? ?? ?????. ?? ??? ?? ???? ?? ??? ??? ?? ?????.

?? setStart ? setEnd ? ??? ?? ? ?? ??? ???? ??? ??? ???? ?? ??? ??? ????. ?? ??? ??? ?? ????? ?? ??? ?? ??? ??????.

?????? ????

? ?? ??? ?? ???? ?? ? ??? ?? ????? ??? ??? ????. ????? ??? ?? ??? ????? ? ????. ??? ?? ??? ? ??? ??? ???? ????? ????? ??? ??? ?? ??? ? ??? ???? ?? ??? ????????.

 const ????? = ??? ????? (Range1, Range2, ..., Rangen);

??? ?????? ?? ?? ??? ?? ?? ????. ?? ??, ? ???? ?? ??? ??? ?? ?? ?? ??? ???? ???? ?? ? ???? ????? ??? ?? ? ????. ??? ? ? ??? ? ??? ??? ???? ??? ? ????.

????? ??

?? ????? ?? ??? ?????? ????. ??? ?? ?? ????? ?????? ????????. ??? CSS ????? API? ???? ?????. ?????? ????? ??? ???? ??? ?????? ???? ?????? ????? ?? ?????? ?????? ????.

??? ?? ?????? ???? ?????.

 css.highlights.set ( 'My-Custom-Highlight', ?????);

my-custom-highlight ??? ???? highlight ?? ???? ?? ? ????? ?????.

??? ?????

??? ??? ??? ?? ? ?????? ?????? ????. ??? ????? ??? ?? ? ? ??? ??? ???? ??? CSS ::highlight() ?? ??? ????? (???? my-custom-highlight ).

 :: ????? (My-Custom-Highlight) {
  ??? : ???;
  ?? : ?? ?;
}

::selection , css ??? ???? ::highlight() pseudo element? ?? ??? ? ??? ?? ??? ??? ????.

• background-color
• caret-color
• color
• cursor
• fill
• stroke
• stroke-width
• text-decoration (??? ??? ?? 2??? ?? ? ? ??)
• text-shadow

???? ?? ??

????? ?? ??? ???? ?????? ? ?? ??? ????.

?? ?? CSS.highlights.clear() ???? ????? ?????? ??? ??? ???? ??? ? ????. ?? ??? ???? ?? ?? ??? ???? ? ?? ????. ?????? range.setStart ? range.setEnd ??? (?? ?? ?? ???)? ?? ???? ????? ?????? ?? ????.

??? ????? ??? JavaScript ??? ???? ????? highlight.add(newRange) ???? ?? ?????? ? ?? ??? ????? highlight.delete(existingRange) ???? ??? ??? ?? ????.

??, CSS.HighLights ?????? ?? ????? ??? ????? ??? ?? ????. ? API? JavaScript ?? ???? ????? set ? delete ???? ?? ?? ? ?????? ???? ? ? ????.

???? ??

CSS ??? ?? ????? API? ??? ??? ??? ??????? ??? ??? ????????. ??? ??? ? ???? ?? ??? ??? ? ???? ?? ?? ??? ???? ????.

Microsoft Edge ?? ?? Chromium?? CSS Custom Highlight API? ???? ????. ???? ??? ?? ? ??? ?? ??? (About : Flags)? ????? ???? ???? ??? ? ????. Chrome, Edge ? ?? ?? ?? ?????? ??? ?? ?? ?? ??? ??? ??? ?? ?? ?????.

Safari 99? ??? API? ????? ?? ??? (?? → ?? ?? → ????? API) ??? ?? ?? ?? ?? ??? ???? ??? ?????? ?? ????.

Firefox? ??? API? ????? ??? ??? ???? API?? Mozilla? ??? ???? ? ????.

??

Microsoft Edge? ?? ??? CSS Custom Highlight API? ??? ? ??? ??? ??????. ??? ??? ???? ?? ?? ? ??? ?? ???? ?? Chrome ?? Edge Canary? ???? ??? Affice : Flags ????? ???? ??? ??????.

/?? ??? ???

? ??? ??? ?? ????? API? ???? ??? ??? ?? ???? ?? ? ??? ???? ???? ??? ??? ?? ?????.

???????? JavaScript ??? ???? ?? ??? ?? (Treewalker ??)? ???? ???? ?? ???? ???? ???? ??? ?? ? ??? ??? ??? ??? ?????. ?? ??? ??? ???? ?? ??? ???? ??? ?? ????? API? ???? ?? ??????.

??

????? ??? ?????? ???? ?? ?? API? ??? ??? ??? ????? ??? ??? ??? ????!

?? CSS ??? ?? ????? API? ???? ?? ??? ???? (? : ???? ??? ??? ?? ??? ?? ????? ?????? ?) ??? DOM ??? ???? ??? ??? ???? ??? ?? ?????.

? ??? ?? ???? ??? ??? ??? ?? ??? ???? ? ? ??? ????.

? ??? ::highlight() CSS ??? ??? ??? ?? ??? ??????. ??? ??? ??? ???? ?? ??? ??? ??? DOM ??? ???? ? ?? ??? ???????.

??? ?? ?? ????. Fernando Fiori? API? ??? ?? ???? ?? ?? ?? ??? ??????. ? ????? CSS ??? ?? ????? API? ??? DOM ?? ??????? ?? 5 ? ????.

Chromium? Safari? ?? ??? ??? ???? ?? ?? ???? ??? ??? ?? ? ????? ????. ????? Custom Highlight API? ????? ???? ??? ?? ??? ?? ????? ??? ? ????!

? ??? CSS ??? ?? ????? API : ? ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!