W3C validation CSS со шрифтом иконок AWESOME?

Question

[xmoonlight]

Коллеги, приветствую.
Что скажете по использованию Font Awesome (иконочный шрифт) с прохождением валидации по W3C, кто сталкивался и как бороться с ошибками?

Валидатор: https://jigsaw.w3.org/css-validator/
Шрифт: fortawesome.github.io/Font-Awesome

Всем заранее, Спасибо.

Comments

[xmoonlight]

Александр А: разные.... пройдитесь валидатором по сайту с Font Awesome и увидите.

[xmoonlight]

Александр А: Альтернативы есть? (задача - пройти в DMOZ)

[xmoonlight]

Александр А: так было всегда

[xmoonlight]

Александр А: это рекомендации вебмастеров по всему миру для того, чтобы с большей вероятностью попадать в каталоги. (явно - это может быть и не прописано, однако проверяют)

[xmoonlight]

Александр А: мда.... mail.ru )

Answer 1

[Maksim Zverev]

После обсуждения в комментариях, немного изменил ответ.
Есть 2 пути:
1. Отказаться от шрифта совсем.
2. На странице проекта https://github.com/FortAwesome/Font-Awesome
поправить либо less либо sass исходники и собрать css самостоятельно без хаков.
Исходники там не сильно большие и не должно занять много времени.

Comments

[xmoonlight]

Спасибо, идите дальше играть в песочницу.

[Maksim Zverev]

xmoonlight: обычно сайты делаются не для прохождения валидаторов, сайты делаются для того, что бы различным пользователям с различных браузеров было на сайтах удобно сделать то, ради чего они туда пришли. Если вы хотите пройти валидацию, выпилите лишний код, который мешает, львиная доля это хаки для IE.

[xmoonlight]

Ответ не на вопрос! Мне нужна валидация без ошибок, а не "выпилить" обратную совместимость со старыми версиями браузеров.
Если нет у Вас личного опыта - ЛУЧШЕ НЕ ПИШИТЕ!

[Maksim Zverev]

xmoonlight: есть свойство: opacity: 0.2; оно валидное, в том же правиле filter: alpha(opacity=20); - это для IE 5-7 и на нем валидатор споткнется, не убрав его из css вы не пройдете валиадацию.

[xmoonlight]

Maksim Zverev: ок.
Мне нужно попасть в DMOZ-каталог и там, помимо прочего, нужна правильная валидация разметки. Что делать?
Не юзать Font-Awesome или как лучше поступить?

[Maksim Zverev]

xmoonlight: хорошо, извиняюсь за начальный тон ответа. Самый простой способ - отказаться от этого шрифта, более сложные, скачать исходник sass с их странички на гитхабе и там для чистки стилей потребуется значительно меньше действий, чем вручную в итоговом файле css.

[xmoonlight]

Пока я сделал так:
if(stripos($_SERVER['REMOTE_HOST'],'.w3.org')===false) {
//грузим шрифт в header'e
}
Может есть какой-то РЕАЛЬНЫЙ ВАЛИДАТОР (который все верно парсит и проверяет)?

[Maksim Zverev]

xmoonlight: Этот валидатор парсит все верно, он тупо следует стандартам, чего не скажешь о браузерах. Некоторые браузеры, особенно этим отличался IE, весьма странно интерпретировали стандарты w3c, что и породило необходимость писать хаки. Я немного скорректировал ответ, гляньте исходники в less или sass, там в теории ничего такого сложного. Убрав вендорные префиксы, попробуйте собрать из этих стилей готовый css и запихать его в валидатор.

[xmoonlight]

Maksim Zverev: А альтернативы валидатору W3C для сравнения, не подскажете?

[Maksim Zverev]

xmoonlight: они все базируются на w3c API :) www.css-validator.org есть правда обособленная утилита csslint.net в ней настраивается о чем предупреждать.

[xmoonlight]

Maksim Zverev: Спасибо! Подожду немнога... еще может кто что подскажет и отмечу как решение.

[Олег Матрозов]

> Мне нужно попасть в DMOZ-каталог и там, помимо прочего, нужна правильная
Я подозреваю, что они всё же имели в виду валидацию html, а не css. Так что может проблемы и вообще нет?

[xmoonlight]

Олег Матрозов: Вам нужно защититься от приступника. У Вас вилы и пистолет с патронами. Ваш выбор?!)

Answer 2

[Олег Матрозов]

Судя по результатам валидации на ворнинги можно вообще не смотреть (там одни ошибки из-за того, что валидатор не знает проприетарных свойст типа -webkit). Из ошибок, много опять же однотипных, что валидатор не знает свойства pointerEvents, не понимает синтаксиса filter и т.д. Одна ошибка точно есть - это кривой маргин (c \9) смахивает на опечатку в less/sass которая разнеслась по разным местам. Т.е., в общем то, если исправить \9, то особого криминала там нет.

Comments

[Олег Матрозов]

Опять же, там ошибки в большинстве своём в site.css, что само по себе не является стилем шрифта встраиваемым на ваш сайт. Что же касается самого font-awesome.css то там одни ошибки работы парсера, а не кривого css.

[xmoonlight]

Ворнинги - пропустим. Там все понятно.
про \9 - НИЗКИЙ ПОКЛОН!
А про остальное?...
Есть шансы с минимальными усилиями все привести к отсутствию ошибок?

[xmoonlight]

Олег Матрозов: проверяется домен, а он генерит ошибки в w3c из css font awesome.....

[Олег Матрозов]

xmoonlight: Смысл править ошибки, которые являются ошибками не css, а парсера? Кто виноват в том, что парсер w3c не разбирает свойства filter, которое вполне себе корректное. Я взял для рассмотрения порядка 15 ошибок разных, что вывалил парсер w3c и не нашел никакого криминала в местах, что он указал. Так что тут даже и править ничего не надо (ну кроме вышеописанного \9 в site.css)

[zenwarr]

свойства с \9 - это хак для ие 6-9

[Олег Матрозов]

zenwarr: А можно поподробнее? Не слышал про такой хак. Видимо мало под IE оптимизирую )

[Олег Матрозов]

Да и, с точки зрения красоты кода правильно было бы вынести такой хак в ie.css, подключаемый только в IE и забить на ошибки w3c в нем.

[zenwarr]

Олег Матрозов: codemug.com/html/css-hacks-for-ie6ie7ie8ie9-and-ie10
согласен, лучше хаки не использовать, а подключать отдельный файл для нужной версии IE через условные комментарии.