Медиафункция CSS `scan`

Медиафункция scan CSS медиа используется для применения стилей CSS в зависимости от процесса сканирования устройства вывода.

Синтаксис

Медиафункция scan задаётся одним из следующих ключевых слов:

interlace

Устройство вывода использует чересстрочную развёртку, при которой видеокадры поочерёдно отображают только чётные или только нечётные строки экрана.

progressive

Устройство вывода отображает содержимое на экране без специальной обработки.

Описание

В большинстве современных экранов (и во всех компьютерных экранах) используется прогрессивная развёртка: каждый кадр отображается целиком без специальной обработки.

Чересстрочная развёртка использовалась в ЭЛТ-мониторах и некоторых плазменных телевизорах, чтобы создавать впечатление более высокой частоты кадров (FPS) при меньшей пропускной способности. При чересстрочной развёртке видеокадры поочерёдно отображают чётные и нечётные строки экрана: для каждого кадра загружается и отображается только половина экрана. Это использует способность человеческого зрения сглаживать изображение, благодаря чему мозг воспринимает трансляцию с более высокой частотой кадров при вдвое меньших затратах пропускной способности.

При работе с чересстрочными экранами избегайте очень быстрого перемещения объектов по экрану и следите, чтобы ширина анимированных деталей превышала 1 пиксель, — это уменьшит мерцание.

Примеры

HTML

<p>This is a test.</p>

CSS

p {
  padding: 10px;
  border: solid;
}

@media screen and (scan: interlace) {
  p {
    background: #f4ae8a;
  }
}
@media screen and (scan: progressive) {
  p {
    text-decoration: underline;
  }
}
@media not screen and (scan: progressive) {
  p {
    border-style: dashed;
  }
}
@media not screen and (scan: interlace) {
  p {
    color: purple;
  }
}

Результат

Спецификации

Совместимость с браузерами

См. также

• Правило @media, используемое для указания выражения сканирования.
• Использование медиазапросов, чтобы понять, когда и как их применять.