Вложение правил @media в CSS

css css3 media-queries

37284 просмотра

1 ответ

Поддержка, кажется, отличается в разных браузерах ..

Проверьте ссылку

Firefox: черный с белым текстом.

Opera, Chrome, IE9: синий с черным текстом.

Что правильно и как бы я сделал это последовательным?

Код

@media screen and (min-width: 480px) {

    body{
        background-color:#6aa6cc;
        color:#000;    
    }

    @media screen and (min-width: 768px) {

        body{
            background-color:#000;
            color:#fff;    
        }
    }
}

Довольно интересно, что кажется, что вложенные медиазапросы в условных @importвыражениях действительно работают.

например:

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Media test</title>
    <link rel="stylesheet" type="text/css" href="importer.css" />
</head>
<body>
    <h1>Why is this not consistent.</h1>
</body>
</html>

importer.css

@import url(media.css) screen and (min-width: 480px);

media.css

body {
    background-color: #6aa6cc;
    color: #000;
}

@media screen and (min-width:768px) {
    body {
        background-color: #000;
        color: #fff;
    }
}
Автор: James South Источник Размещён: 12.11.2019 09:44

Ответы (1)


95 плюса

Решение

Для тех, кто просто ищет ответ на вопрос «Какие браузеры поддерживают вложение @mediaправил?», Краткий ответ таков: все современные браузеры, включая Firefox, Safari, Chrome (и его производные) и Microsoft Edge, теперь поддерживают вложение @mediaправил. как описано в Условии CSS 3 . Код в вопросе с вложенными @mediaправилами at-теперь должен работать правильно везде, кроме Internet Explorer (который больше не обновляется новыми функциями , то есть ни одна версия IE никогда не будет поддерживать эту функцию).

Эта функция не существовала в CSS2.1 , так как в то время существовали только типы мультимедиа, которые можно было просто сгруппировать через запятую, что объясняет, почему поддержка этого была очень плохой в то время, когда этот вопрос был впервые задан.

Далее следует анализ исходного вопроса с учетом этих исторических ограничений.


Существует некоторая путаница в терминологии, которая требует прояснения, чтобы мы могли понять, что именно происходит.

Код, который у вас есть, ссылается на @mediaправила, а не на медиа-запросы - сам медиа-запрос является компонентом, который следует за @mediaтокеном, тогда как правило - это весь блок кода, состоящий из @mediaмедиа-запроса и правил, вложенных в его набор. фигурных скобок.

Это может вызвать путаницу среди многих, когда речь идет об использовании медиазапросов в CSS, а также в вашем конкретном случае, когда @mediaправило в импортированной таблице стилей работает правильно, даже если @importоно сопровождается другим медиазапросом. Обратите внимание, что медиа-запросы могут встречаться как в правилах, так @mediaи в @importправилах. Это одно и то же, но они используются для ограниченного применения правил стиля по-разному.

Теперь актуальная проблема заключается в том, что вложенные @mediaправила недопустимы в CSS2.1, потому что вам не разрешено встраивать любые at-правила в @mediaправила. Однако в CSS3 все выглядит иначе. А именно, модуль условных правил очень четко заявляет, что @mediaправила могут быть вложенными, даже предоставляя пример:

Например, с этим набором вложенных правил:

@media print { // rule (1)
  #navigation { display: none }
  @media (max-width: 12cm) { // rule (2)
    .note { float: none }
  }
}

условие правила, помеченного (1), верно для печатных носителей, а условие правила, помеченного (2), истинно, когда ширина области отображения (которая для печатных носителей является полем страницы) меньше или равна 12см. Таким образом, правило «#navigation {display: none}» применяется всякий раз, когда эта таблица стилей применяется к печатным носителям, а правило «.note {float: none}» применяется только тогда, когда таблица стилей применяется к печатным носителям и ширине. часть страницы меньше или равна 12 сантиметрам.

Кроме того, похоже, что Firefox следует этой спецификации и соответствующим образом обрабатывает правила, в то время как другие браузеры по-прежнему относятся к этому CSS2.1.

Однако грамматика в модуле «Синтаксис» еще не была обновлена, чтобы отразить это; он по-прежнему запрещает вложение правил в @mediaправилах, как в CSS2.1. Эта спецификация намечена для переписывания в любом случае, так что я думаю, это не имеет значения.

По сути, CSS3 позволяет это (в ожидании перезаписи модуля синтаксиса), но не CSS2.1 (потому что он не определяет медиазапросы и не допускает вложенные @mediaблоки правил). И хотя по крайней мере один браузер начал поддерживать новую спецификацию, я бы не стал называть другие браузеры ошибочными; вместо этого я скажу, что они просто еще не догнали, поскольку они действительно соответствуют более старой, более стабильной спецификации.

Наконец, причина, по которой вы @importработаете, заключается в том, что @importон может работать условно с помощью медиа-запроса. Однако это не имеет отношения к @mediaправилу в вашей импортированной таблице стилей. На самом деле это две разные вещи, и они рассматриваются как таковые во всех браузерах.

Чтобы заставить ваш код работать согласованно во всех браузерах, вы можете либо использовать свое @importутверждение, либо, поскольку оба правила используют min-width, просто удалить вложение ваших @mediaправил:

@media screen and (min-width: 480px) {
    body {
        background-color: #6aa6cc;
        color: #000;
    }
}

@media screen and (min-width: 768px) {
    body {
        background-color: #000;
        color: #fff;
    }
}
Автор: BoltClock Размещён: 31.07.2012 07:04
Вопросы из категории :
32x32