Каков консенсус по поводу взломов “Голосовой семьи”?

Question

Я только начал работать в довольно крупной компании, и моя группа управляет всеми их общедоступными веб-сайтами.Сегодня я впервые открыл таблицу стилей и увидел более 20 примеров того, как дизайнеры использовали voice-family hack для исправления ошибки IE.(Я не знаю, почему они вообще позволяют графическим дизайнерам писать какую-либо разметку)

Каково общее общественное мнение о взломе voice-family?Стоит ли тратить время на рекомендацию использовать условные комментарии IE для включения таблиц пользовательских стилей?

Answer 1

Взломы любого рода опасны, поскольку они могут привести к непредвиденным последствиям в будущих браузерах (многие из них сломались с IE7).Безопасными способами фильтрации CSS являются:

• (Только для IE) Использование условных комментариев.Они всегда будут работать в браузерах Microsoft и всегда будут игнорироваться всеми другими браузерами, поскольку они находятся в комментариях
• Таргетинг на функции - использование CSS-селекторов, которые поддерживаются только современными браузерами, чтобы остановить попытки старых браузеров интерпретировать правила.Однако тот факт, что браузер распознает синтаксис, не означает, что он обрабатывает его правильно.Все, что вы гарантируете здесь, это то, что старые браузеры не будут пытаться отобразить эти правила, а не то, что современные будут выполнять их правильно

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

Answer 2

Взлом "voice-family", более известный как взлом модели Tantek Celik Box, используется для скрытия определенных правил CSS из IE4 / 5 в Windows из-за неправильной реализации стандарта CSS в этих браузерах.Это попытка предоставить наиболее корректную единую таблицу стилей для всех браузеров, не прибегая к перехвату браузером нескольких таблиц стилей.

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

Посмотрите фильм Джеффри Зельдмана Проектирование с использованием веб-стандартов для более глубокого понимания того, почему соблюдение стандартов (насколько это возможно) является достойной целью, и почему использование перехвата браузера и нескольких таблиц стилей только вызывает головную боль у разработчика:

http://www.amazon.com/Designing-Web-Standards-Jeffrey-Zeldman/dp/0321385551/

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

Еще одним хорошим справочником является проект веб-стандартов, в котором есть много полезной информации и руководств по этому предмету:

http://www.webstandards.org/

Если вы измените свой стиль кодирования в сторону соответствия стандартам, вам, как правило, не придется так сильно беспокоиться о выпуске будущих браузеров.Да, вам все равно придется протестировать их, но вам не обязательно писать, а затем тестировать пользовательские таблицы стилей для каждой из них.

Answer 3

Мое мнение о подобных взломах таково, что вам следует избегать их, если можете.Если возможно получить правильный рендеринг в браузерах, не прибегая к подобным ухищрениям, то вы должны сделать это правильно.Однако иногда браузеры имеют глючные реализации CSS, и необходимо использовать хаки, подобные этому.

Answer 4

Не используйте условные включения.Используйте CSS-селектор вместо этого, это гораздо элегантнее.Вы можете настроить таргетинг на классы в отдельных браузерах (и / или версиях).:

.MyClass { ...}

.ie6 .MyClass { ...}