Проверка медиа-запроса CSS

Question

Я пытаюсь проверить мой CSS.Мои основные таблицы стилей возвращаются без ошибок, но у меня есть mobile.css, tablet.css и laptop.css с медиазапросами, и все они возвращают сообщение «только неопознанный носитель», когда я иду на проверку.

Вот мой mobile.css:

@media only screen and (min-width : 320px) and (max-width : 500px)  {
.container {
    width: 100%;
}
header {
    width: 100%;
    height: 100px;
    background-size: 100%;
    background-repeat: no-repeat;
}
.content {
    width: 90%;
}
footer {
    width: 100%;
}
nav {
    display: none;
}
}

Другие файлы / медиа-запросы очень похожи (разные минимальные ширины и т. Д.).

Валидатор говорит:

Извините!Мы обнаружили следующие ошибки (2)

1 только для нераспознанных носителей

20 Экран Parse Error и (min-width: 320px) и (max-width: 500px) {.container {width:100%;} заголовок {ширина: 100%;высота: 100 пикселей;размер фона: 100%;повторение фона: без повтора;} .content {ширина: 90%;} нижний колонтитул {ширина: 100%;} nav {display: none;}}

Answer 1

Как вы сказали в комментариях, вы используете css-validator.org.

Когда я проверяю ваш CSS там (css-validator.org), он говорит, что он проверяется для CSS level 2.1.Медиа-запросы отсутствуют в CSS начиная с версии 3. Поэтому проверка не проходит.

Если вы используете проверку W3 css (jigsaw.w3.org/css-validator), при проверке * 1006 ошибки не отображаются.