Как отключить ChromeVox UI при печати? - PullRequest
Новая
       83

Как отключить ChromeVox UI при печати?

0 голосов
/ 19 марта 2019

Расширение ChromeVox для браузера Google Chrome помещает оранжевый контур вокруг содержимого при выборе на экране.

Этот оранжевый контур также печатается при печати веб-страницы. Посмотрите, как кнопка ниже выделена оранжевым контуром, а затем также отображается при предварительном просмотре.

Как отключить это оранжевое кольцо фокусировки при печати?

ChromeVox orange focus ring in print dialog

1 Ответ

0 голосов
/ 21 марта 2019

Решено с помощью print css media-query!

ChromeVox внедряет разметку и стили в body страницы, которая выглядит следующим образом: 

<div aria-hidden="true" class="cvox_indicator_container  ...more classes...">
...more html markup...
</div>

Поэтому я обновил свойглобальная таблица стилей CSS, включающая следующее: 

@media print {
  .cvox_indicator_container {
    display: none;
  }
}

, которая прекрасно работала.

Тогда я подумал, что хочу убедиться, что это никогда не изменится, даже если ChromeVox изменил свой CSS, чтобы иметь большийспецифичность.

Затем я обновил CSS: 

@media print {
  html body div.cvox_indicator_container {
    display: none !important;
  }
}

Примечание: Это может быть излишним, но, безусловно, имеет больше специфичности.

В идеале команда ChomeVox добавит что-то вроде этого решения в свой код.Я пытался найти их репозиторий с открытым исходным кодом… подошел близко, но не смог.Halp

...