Хороший дизайн CSS и поддержка IE6 / IE7 являются взаимоисключающими?

Question

Как и любой веб-разработчик, я обычно проклинаю создателей IE6 грязными и несвоевременными смертями, по крайней мере, один раз в неделю. И все же моя компания требует, чтобы я продолжал поддерживать этот самый ненавистный браузер.

Сегодня моей проблемой было желание сначала использовать подстановочный знак в моем CSS, а затем пытаться использовать вместо этого свойство «наследовать». Ни один из которых не поддерживается IE7 -.

Я действительно, ОЧЕНЬ хочу иметь хороший, хорошо структурированный, должным образом наследуемый CSS (объектно-ориентированный CSS, если вам нравится это модное слово), но у меня в глубине живота возникает ощущение, что рано или поздно это должны быть специализированные классы и классы, основанные на местоположении.

В связи с этим возникает вопрос: учитывая, насколько ужасно IE работает со многими концепциями CSS, нельзя ли адекватно поддерживать этот браузер в то же время, что и с хорошо структурированным документом CSS?

Просто для пояснения: я знаю, что существует множество способов (некоторые законные, некоторые менее), чтобы обойти ошибки и недостатки, обнаруженные в IE6 и 7. Я действительно спрашиваю: «Если вы хотите иметь единственную, хорошо написанную таблицу стилей, которая правильно наследует, вы должны выбирать между этим и иметь согласованный вид во всех браузерах? " Надеюсь, что это имеет смысл.

Другими словами, должен ли я придерживаться своих принципов и кодировать хорошую таблицу стилей или я должен согласиться с тем, что IE6 по-прежнему пользуется ужасно высокой (20% по последним подсчетам) долей рынка, и заставить себя поддержать ее? Или есть какое-то счастливое средство, которое позволяет мне минимизировать операцию Франкенштейна на моем HTML и CSS, в то же время достигая некоторых респектабельных результатов в IE?

Answer 1

Если честно, вы не можете винить во всем IE (хотя Microsoft, безусловно, является худшим нарушителем). Часть проблемы с такими большими и быстро развивающимися стандартами заключается в том, что это слишком большая движущаяся цель, чтобы своевременно ее идеально реализовать. К сожалению, циклы выпуска веб-браузеров не совпадают с выпуском новых веб-спецификаций. Поэтому все, что могут сделать разработчики браузеров, - это попытаться реализовать как можно больше функций из последних рекомендаций W3C, выбрав, что, по их мнению, 1002 * будет наиболее часто используемыми функциями для реализации в первую очередь.

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

И иногда дело не в том, что один браузер "менее" соответствует стандартам, чем другой. С новыми стандартами часто возникает проблема, когда разные команды разработчиков выбирают различные части новой спецификации. Таким образом, даже несмотря на то, что CSS3 уже начинает реализовываться большинством браузеров, нам, вероятно, придется подождать, пока CSS4 не будет опубликован, прежде чем увидеть согласованную поддержку во всех основных механизмах рендеринга. И если вы попытаетесь использовать новейшие функции CSS3 прямо сейчас, вам будет сложно установить совместимость во всех основных браузерах. Но если вы используете функции, представленные в CSS1, это совсем не проблема.

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

Помимо этого, единственное постоянное решение, которое я вижу в этой повторяющейся ситуации, заключается в том, чтобы W3C расставила приоритеты различным частям вновь представленных спецификаций, чтобы новые функции могли быть реализованы в дискретных фазах, синхронизированных по всем основные браузеры. Так, например, правилам грамматики может быть дан наивысший приоритет наряду с установленным сроком его реализации. После этого наступит второй этап, который может быть селектором элементов и атрибутов и т. Д. И т. Д.

Это потребует огромного уровня сотрудничества между W3C и командами разработчиков, но оно того стоит. В конце концов, пользователям и веб-разработчикам бесполезно реализовывать одно подмножество функций из CSS3, в то время как Firefox реализует другое подмножество, а браузеры Webkit - еще одно подмножество. «Стандарт» не годится до тех пор, пока он не станет стандартизированным на всех основных платформах рендеринга. Лучше, чтобы каждый браузер поддерживал меньше новых функций, но чтобы все они были с одинаковыми функциями , чем для того, чтобы они по отдельности представили массу своих собственных функций, которые не поддерживаются повсеместно.

Answer 2

Вовсе нет - вы можете компенсировать недостатки IE с помощью условных комментариев и конкретной таблицы стилей IE, одновременно передавая вашу «красивую» таблицу стилей другим браузерам.

Что-то еще, что я нахожу, помогает использовать CSS reset . Хотя это не решит все проблемы IE, оно дает вам хорошую основу для работы.

Answer 3

Конечно, нет. Если вы убедитесь, что они отображают страницу в «стандартном» режиме, а не в «причудливом» режиме, многие распространенные проблемы IE CSS решены. Для этого вы должны предоставить действительный оператор doctype в верхней части страницы, например

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

*,html {
margin: 0;
padding: 0;
}

Наконец, одна общая проблема с макетами на основе CSS в IE заключается в том, что очистка с плавающей точкой не происходит, когда вы ожидаете. Это связано со скрытым свойством объекта в IE, которое называется hasLayout; только объекты, которые имеют «макет», будут правильно обтекать и содержать плавающие дочерние объекты. Легко убедиться, что ваши контейнеры имеют «макет», просто указав для них хотя бы одно измерение:

height: 1%;
width: 100%;
zoom: 1;

Я лично не использую условные таблицы стилей IE, за исключением одной вещи: заменять фоны PNG на GIF в IE <7 - в этом нет ничего плохого, я просто нахожу, что это излишне усложняет ситуацию, когда вам нужно определить внешний вид одного и того же объекта в двух разных местах. С помощью трех приведенных выше советов и немного терпения вы сможете создавать макеты на основе CSS, используя единую таблицу стилей, которая отображается так же хорошо в IE 6/7, как и в Mozilla / Webkit. </p>

Удачного кодирования!

Answer 4

Существует замечательный сайт Положение - это все , в котором подробно описано, как FF, IE и Safari соответствуют стандарту CSS. На сайте вы найдете большинство обходных путей / лекарств для IE, которые избавят вас от необходимости писать так много условного кода для вашего CSS.

Вы также можете проверить A List Apart , чтобы узнать больше о CSS и IE. Также есть отличные статьи по макетированию без таблиц с помощью CSS, обработке ошибки высоты в IE и т. Д. Удачи - IE 6 действительно плохо работает с CSS.

Answer 5

Самая раздражающая особенность IE6 - это управление коробочной моделью. Вместо этого вы должны придерживаться маржи при позиционировании блоков и пытаться использовать относительные размеры шрифта, чтобы разрешить изменение размера шрифта в IE. Остальные причуды хорошо документированы .

Использование условных комментариев - это самый чистый способ иметь чистую таблицу стилей для браузеров с хорошим поведением и при этом использовать IE в IE. Это то, что я использую, мне нужен только 1 файл CSS из нескольких строк, чтобы восстановить внешний вид моих сайтов.

темный путь кроссбраузерного согласованного внешнего вида - это css hacks , но я настоятельно не рекомендую его использовать, особенно сейчас, когда в течение некоторого времени нам придется нацеливаться на три разных IE (6, 7 и 8)

Обычно, если стиль работает как в FF, так и в Chrome / Safari, IE остается лишь несколькими исправлениями.

Answer 6

IE 6 действительно ограничивает то, что мы можем сделать.

Меня достает отсутствие поддержки расширенных селекторов (и наследования - IE 7 тоже этого не поддерживает). Было бы неплохо иметь дочерние селекторы и селекторы атрибутов, это действительно сократило бы объем кода, который мы должны писать и поддерживать. Вы можете обойтись без их поддержки, дублируя ваши стили, поэтому вам просто придется кодировать так, как будто их не существует.

Вздох.

Answer 7

Следуйте только онлайн-учебникам CSS, которые правильно отображаются с IE6 и Chrome (или Webkit). Если он выглядит правильно в обоих случаях, он, вероятно, выглядит правильно (почти) во всех браузерах.