?? ? ???? ??? ??? ? ?? ?? ?? ?, ?? ??? ?? ? Safari ??? ????? ?? ? ???? ??? ?? ?? ???? ???? : ????? : ??. ?? ??? ???? ???? ?? ? ? ?? ????? ? ??.

?? ????? ????? ? ? ???? : Focus-Visible

CSS : Focus-Visible ?? ??? ?? : ??? ?????? ??? ?? ?? ???? ??? ??? ???? ??? ? ?? ?. Chrome? ?? ???? ??????. ?? : ??? ???? ??? ???? ???? ?? ????, ? ???? ?? ???? ??? ????? ?? ? ?? ?? ?? ? ?? ???? ????.

?? ? ? : ???? : ??? ?????, ??? ???? ??????. ??? ??? ???? ???? ?????? ??? ?? ?????? ??? ?? ??? ?????? ???? ? ? ??????. ??? ? ??? : ??? ?? ???, ? ?? ?????? ???? ?? "??? ????? ?? ?? ?? ? ????".

 ?? {
  ?? : ??;
}

?? : ??? ??? {
  ?? : ??;
  ?? : #ffdd00; /* ? */
}

??? ???? ?? ?? : Focus-Visible Today ?? ?? ???? ???? ?? ??? ??? ?? ?? ??? ?? ???? ???? ????. ?? : Not (: Focus-Visible) ??. ??? ?? ???? ??? ? ??? ???? ?? ?????? ? ?????.

• ?? ?? ?? ???? : ???? ????? ?? ? ?? ???? ?????. ?? ??? ? ?? ??? ??? ??? ????? (??? ??? ? ??? ?? ???? ??).
• ??? ?? ?????? Focus-Visible?? ? ?? ??? ??? ??? ?? ?? ??? ?? ? ??? ???? ? ????. ?? ??, ?? ??? ?? ? ??? ???? ??? ?? ???? ?????. ??-???? ??????.

 ?? : ?? {
  ?? : ??;
  ?? : #ffdd00; /* ? */
}

?? : ?? : ?? (: Focus-Visible) {
  ?? : ??; / * ?? ?? */
}

BBC??? ???? ?? ??? ??????

BBC? Reith (BBC? ??? John Reith ?? ??? ?? ???)?? ?? ? ??? ?? ??? ??????. ??? ??? ?? ??? ???? ?? ??? ???? ? ?? ?? ??? ??? ??? ?? ????. ??? ?? ?? ??? ?? (??? ? ?? ??)? ?? ??? ??? ?? ????????.

?? [BBC]? Helvetica ?? Arial? ?????????. ??? ?? Gill Sans? ?? ??? ????????. ? ??? 100 ? ?? ?? ? ???? ?? ?????? ???? ?? ??? ????? ? ???? ????.

?? : Wakamai Fondue? Reith Sans ? Reith Serif? ????? BBC ? ???? Firefox? DOM Inspector?? Fonts Pane? "?? ??? ???"???? Woff2 ??? URL? ??? ??? ? ? ????.

????? : Safari??? ??? ??? ??? ? ? ????

CSS ????? : ??? ?? 2018 ??? ?????? ???????.? ?? ???“??? ???? ???”???? ????? ?????. ??? ?? ?? ???? Semantic Document ??? ????? ???/??? ??? ? ?? ?? ??? "??"?? ? ??? ??? Flex ? ??? ????? ?? ?????.

????,? ??? ?? ????? ??? ???? ??? ???? ?? ??? ????. ?? ??, ????? :

??? ??? ???? ?? ??? ? ?? ??? ??? ???? ?????. ? ?? ?? ??? Firefox ? Chrome (?? ??)?? ???????.

Chrome ? Firefox?? ??? ??? ????? "?? ?????"? "??, 2 ??"? ???? ??? ?????. ??????

?
• ??? ??? ??? ???? ?? ??? ??? ??? ???????. Apple? Safari ??? ??? ??? ??? ??? ??? ?? ?? ??? ? ???? ?? ???? ????? Safari??? ???? ??? ? ? ??? ??????.

  ?? ?? ? ???? ??? ??? ? ????? ??????

  ??? ???? ??? ?? ?? ???? ??? ?? ????. ?? ????? ???? ?? ??? ? ??? ???? ?? ???? ??? ? ??? ? ????. ??? ?? ? ??? (Wikipedia ? Gov.uk ??)? ?? ??? ?? ?? ?? ?? ? ?? ? ??? ? ???? ?? ???? ?????.

  ?? ???? ?? ???? ?? ?? ? Pseudo Element? ?? ???? ??? ? ????. ???? ?? ?? ? ???? ?? ??? ???? ?? ??? ????? ?? ??????. ??? Firefox? ???? ????? ????? : 0.54 ~ :: ?? ???? ?????. ? ?? ???? ??? ?? ?? ? ???? Firefox?? ??? ???? ?? ? ????.

   .Search-Field :: ?? ?? ? {
    ?? : #727272;
    ???? : 1; / * Firefox */
  }

  ??? ??? Dom? ??? ??? ???? ??? ? ? ????

  Shadow Dom? ?? ?? ? ??? ??? ??????. ?? ???? ??? ??? Shadow Tree ??? ??? ???? ??? ? ??? ???????. ? ??? ????? Shadow Dom ??? ?? (????? ? ?? ??? ?? ??)? ???? ??? ??? (????? DOM? ????)? ??? ?? ?? ? Shadow Dom?? ???????.

  ? ??? JavaScript??? ?? ? ? ????. ??? ????? ??? ?? ??? ?? ?? ??? ???? ?? ?? Shadow Dom?? ??? ?? ??? ???? ? ??? ?? JavaScript? ?? ????.

   customElements.define (
    "? ??",
    ???? htmlelement {{
      ??? () {
        ???();
  
        // dom?? <template>? ?????
        ??? = document.getElementById ( "my-template");
  
        // ??? ?? ??? ??…
        let content = template.content.clonenode (true);
  
        //…
        this.attachshadow ({?? : "Open"}). AppendChild (???);
      }
    }
  );</template>

  ??? ???? ?? Codepen? Miriam Suzanne? ??? ??????. ??? ???? HTML ??

  JavaScript? ? ?? ??? ?????? ??? ??? ??? ???? ?? ??? ?? ? ????. ?? ? ?, Chrome? Google? ??? Shadow Dom ??? ?? ? ??? ??????????. ?????? ??? ???? ?? ? ???? ?? Shadow Dom? ??? ? ????.

? ??? ??? ?? : ?? : ??? ???, BBC '? ??? ??, ??? ??? ?, A11Y ? ?? ?? ?? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!