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

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

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

Я действительно, ДЕЙСТВИТЕЛЬНО хочу иметь хороший, хорошо структурированный, должным образом наследуемый CSS (объектно-ориентированный CSS, если вам нравится это модное словечко), но я чувствую, что рано или поздно это произойдет. быть специализированными классами и классами, основанными на местоположении.

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

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

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


css internet-explorer standards-compliance
person Phil.Wheeler    schedule 19.04.2009    source источник

Ответы (7)


arrow_upward
9
arrow_downward

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

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

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

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

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

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

person Calvin    schedule 20.04.2009
comment
Отличный ответ. Мне это нравится. Я согласен с тем, что поставщикам кажется, что это вопрос времени, когда они примут и согласуют интерпретацию данного стандарта. В прошлом рассеянный склероз был заведомо плохим для этого, но, похоже, он улучшается. Вернуться к установленным стандартам — это разумно, хотя на практике это не всегда легко. - person Phil.Wheeler; 20.04.2009
comment
Проблема в том, что старые стандарты также не являются согласованными кроссбраузерными. Если вы не работаете с позиционированием картинок и таблиц размером 1px, вы не сможете получить одинаковый рендеринг в разных браузерах. Интересно то, что вы не должны пытаться получить одинаковую визуализацию для пикселя. Позвольте браузеру творить чудеса, а пользователь изменяет размер вашего дизайна в соответствии с своими потребностями. - person Esteban Küber; 20.04.2009

arrow_upward
3
arrow_downward

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

Еще мне помогает сброс CSS. Хотя это не решит всех проблем IE, оно даст вам хорошую основу для работы.

person Bayard Randel    schedule 19.04.2009
comment
Да, я думаю, это идеалистическая часть меня, которая пытается выполнить все в одной таблице стилей. Хотя я полностью уважаю использование условных выражений, я просто стараюсь избегать их, так как считаю их уродливыми и немного усложняющими обслуживание. К сожалению, придется столкнуться с реальностью. - person Phil.Wheeler; 20.04.2009
comment
Альтернативой является использование CSS-хаков, что, на мой взгляд, еще более уродливо. Условные комментарии — меньшее из двух зол. - person Bayard Randel; 20.04.2009
comment
Вам не нужно делать полный css для IE. Я обнаружил, что могу исправить свои стили всего несколькими строками (10–50 строк) в отдельном файле css, ориентированном на IE, чтобы компенсировать его блочную модель. С другой стороны, CSS-хаки обычно являются злом. - person Esteban Küber; 20.04.2009

arrow_upward
1
arrow_downward

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

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

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

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

person Esteban Küber    schedule 20.04.2009
comment
Да, я полностью согласен с использованием хаков. Определенно планирую держаться подальше от такого подхода. Ничего хорошего из этого не выйдет. - person Phil.Wheeler; 20.04.2009

arrow_upward
1
arrow_downward

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

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

person David Robbins    schedule 20.04.2009

arrow_upward
1
arrow_downward

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

<!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.

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

person Ola Tuvesson    schedule 20.04.2009

arrow_upward
0
arrow_downward

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

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

Вздох.

person Paul D. Waite    schedule 21.12.2009

arrow_upward
-1
arrow_downward

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

person KahWee Teng    schedule 20.04.2009