Проверка CSS: "Ошибка синтаксического анализа [пустая строка]"

ProgramBox

Проверка CSS: «Ошибка синтаксического анализа [пустая строка]»

Post author:admin
Запись опубликована:8 мая, 2023
Post category:Вопросы по программированию

#css #validation #string

#css #проверка #строка

Вопрос:

Я пытался проверить свой CSS, и следующие строки постоянно возвращают ошибку Parse Error [empty string]

 .content { width:80%; text-align:center; margin-left:auto; margin-right:auto; 
max-width:400px; border-width:4px; border-style:solid; border-color:#339900; 
padding:5px; margin-top:10px; margin-bottom:10px; border-radius:20px; 
background-color:#ccffcc; }
#side_link { position:fixed; bottom:5px; right:-4px; 
background-image:url('img/FruitfulLogo.png'); height:29px; width:22px; 
border-style:solid; border-width:2px; border-bottom-left-radius:5px; 
border-top-left-radius:5px; border-color:#F90; background-color:#FF9; }
#side_link:hover { background-image:url('img/FruitfulLogo_over.png'); }

Я упускаю что-то действительно очевидное или действительно неясное?

1. Какой валидатор вы используете? jigsaw.w3.org/css-validator кажется, что все в порядке, кроме вашего радиуса границы…

2. @kjl: Скорее всего, W3C Jigsaw (официальный), поскольку он выдает те же ошибки для меня. И вы получаете эти ошибки, потому что вы проверяете CSS2.1, а не CSS3.

3. @BoltClock — Ах, я вижу это, забыл изменить css на версию 3

4. Использовал набор jigsaw validator для проверки CSS уровня 3, и я постоянно получаю эти ошибки! Я почти одержимо очистил CSS и в моем фактическом документе! Вы получаете те же ошибки при проверке в CSS3 или это просто сбой? @kjl что-то не так с радиусом моей границы?

5. Я согласен с комментарием об ошибке валидатора. Удалите элементы с радиусом границы в .content и #side_link, и все пройдет нормально. Насколько я могу видеть, они верны.

Ответ №1:

По-видимому, радиус границы, выдающий ошибку синтаксического анализа [пустая строка], является ошибкой в W3C CSS validator.

Смотрите http://www.w3.org/Bugs/Public/show_bug.cgi?id=11975 .

Ответ №2:

Вы используете элементы css3, пока это всего лишь черновик. Средства проверки w3 еще не оборудованы для работы с большим количеством новых свойств и атрибутов, и в некоторых случаях они будут выдавать ошибки в совершенно корректном css. Это одна из них.

Просто дайте им год — или больше — на исправление. До тех пор, используйте свое собственное суждение, css относительно прост в синтаксическом отношении.

1. Я думаю, что border-radius больше не находится в черновике, поэтому все браузеры поддерживают его без префиксов поставщика.

2. @x64igor Мне не удалось найти «официальную» версию модуля border, поэтому я предполагаю, что он все еще находится в состоянии черновика w3.org/TR/2002/WD-css3-border-20021107/#the-border-radius несмотря на это, средство проверки имеет странное поведение и в отношении других свойств, таких как свойство short hand font , которое также не проверяется при использовании размера шрифта / высоты строки short.

Ответ №3:

Как также прокомментировал @BoltClock, похоже, это ошибка валидатора.

Удалите элементы с радиусом границы в .content и #side_link, и все пройдет нормально. Насколько я могу видеть, они верны.

Ответ №4:

 .content {
    margin:10px auto;
    padding:5px;
    border:4px solid #390;
    border-radius:20px;
    width:80%;
    max-width:400px;
    background-color:#cfc;  
    text-align:center;
}

#side_link {
    position:fixed;
    bottom:5px;
    right:-4px;
    width:22px;
    height:29px;
    border:2px solid #F90;
    border-radius:5px 0 5px 0;
    background-color:#FF9;
    background-image:url('img/FruitfulLogo.png');
}

#side_link:hover {
    background-image:url('img/FruitfulLogo_over.png');
}

Я собираюсь согласиться с тем, что валидатор сходит с ума, потому что, когда я ввожу выше, он показывает ошибки. Но тогда вы должны отметить, что под ошибками он выводит все вышеперечисленное и говорит «все это допустимо».

Ответ №5:

Я пропустил это через валидатор W3C, и вот что я получил в ответ.

3: .content — Property border-radius не существует на уровне CSS 2.1, но существует в: 20px 20px

7: #side_link — Свойство border-bottom-left-radius не существует на уровне CSS 2.1, но существует в: 5px 5px

8: #side_link — Свойство border-top-left-radius не существует на уровне CSS 2.1, но существует в: 5px 5px

При проверке версии CSS3 это те же номера строк.

1. Потому что вы проверяете CSS2.1, а не CSS3.

2. При проверке версии CSS3 это те же цифры.

3. Тогда у меня та же проблема. Что-то не так с моим CSS или это проблема валидатора, как вы думаете?

4. Я не думаю, что это CSS, я думаю, что это средство проверки. Поскольку правило на самом деле не генерирует ошибку, похоже, что средство проверки не видит ничего между { и }