Что лучше: CSS-хаки или обнаружение браузера?

Ответ 1

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

С javascript вы часто можете избежать большей части этой боли через библиотеки, такие как (как вы заявляете) jQuery, и проверку поддержки функциональности, а не идентификацию конкретного браузера (большую часть времени). В некоторых случаях вам нужно точно знать (например, модель окна).

Ответ 2

Существует третий вариант:

Минимизировать или устранить необходимость обнаружения браузера и хакеров CSS.

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

После этого я следую этим правилам:

• Используйте то, что я называю минимальным CSS, имея в виду только широко используемые функции;
• При необходимости используйте таблицы для сложной компоновки. Вам может не понравиться это, но, откровенно говоря, делать что-то вроде бок о бок, таблицы будут работать в браузерах, которые вернутся на десятилетие, и будут намного меньше усилий, чем заставить divs работать с комбинациями абсолютного позиционирования, плавания и т.п.;
• Заставить IE6 в строгий режим, а не в режиме quirks, добавив DOCTYPE. Я не могу подчеркнуть, насколько это облегчит вам жизнь, но, как ни странно, многие люди не делают этого все еще;
• Свернуть box model, либо используя правильный DOCTYPE, либо используя вложенные элементы блока, а не другие взломы модели коробки; и
• При необходимости добавьте дополнительные файлы CSS для соответствующих браузеров. Я имею тенденцию делать это на сервере, а не на клиенте с сгенерированными страницами (что, если смотреть на него, больше всего). У многих проектов, над которыми я работал, были файлы IEfix.css.

После этого я разделяю браузеры на уровни:

Уровень 1:

• Firefox 3;
• IE7.

Мой сайт должен работать над этим.

Уровень 2:

• Firefox 2;
• Сафари;
• Opera;
• Chrome.

Мой сайт должен работать над этим. Это может оскорбить некоторых людей, но, откровенно говоря, доля рынка этих браузеров настолько низка, что они просто не так важны, как Firefox 3 или IE7.

Уровень 3:

• IE6;
• Другие.

Минимальные усилия будут предприняты для работы над ними, если это не требуется, например, требование компании. IE6 - это кошмар, но доля рынка по состоянию на декабрь составляла 20% и быстро падала. Кроме того, существуют достоверные проблемы с безопасностью (например, на финансовых веб-сайтах), чтобы отговорить или даже запретить использование IE6, чтобы сайты, такие как Paypal заблокировали IE6 и Google сообщает пользователям об отключении IE6.

Ответ 3

Есть ли причина, по которой вы используете или не используете ни одно из них?

Да. Обнаружение браузера на стороне клиента ломается, если JavaScript отключен и может работать некорректно с будущими версиями браузера. Последняя причина также верна для CSS-хаков. Обнаружение браузера на стороне сервера ломается, если пользователь явно пытается его разбить, но он все же может быть жизнеспособной альтернативой.

Что я рекомендую:

Убедитесь, что код работает в совместимых с браузерами браузерах, то есть в одном или двух из них, и проверьте browsershots.org после этого. Скорее всего, можно будет реализовать желаемый результат во всех них с помощью одной таблицы стилей.

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

Edit:

Если мне нужно также поддерживать старый браузер, я обычно иду путь изящного деградации: я просто позволю им показать чистый html с базовой таблицей стилей (размеры шрифта, цвета,...). Все причудливые вещи будут скрыты с помощью правила @import.

Ответ 4

Мне обычно нравится иметь таблицу стилей для совместимых со стандартами браузеров, таких как Firefox и Safari, а затем использовать условные комментарии для обнаружения Internet Explorer и служат для него дополнительным файлом CSS, содержащим исправления и переопределения IE.

Ответ 5

За 6 лет написания HTML и CSS для жизни подавляющее большинство моих проблем с CSS возникло из Internet Explorer.

Как указано в других ответах, вы можете использовать условные комментарии для обслуживания дополнительных таблиц стилей в IE (или для добавления класса в <body> или <html>`` element, if you don’t like multiple stylesheets). Unlike CSS hacks, conditional comments are explicit and supported. Unlike trying to detect IE from the user-agent string`, theyre гарантированно работает.

Что касается проблем с IE, отличных от IE, Ive никогда не находил того, что стоило обнаружить браузер.

Ответ 6

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

Ответ 7

Я предпочитаю использовать обнаружение браузера и помещать независимый от браузера CSS в свой собственный файл.

Лучшее решение, однако, состоит в том, чтобы найти CSS, который по умолчанию является кросс-совместимым, и просто использовать его.

Ответ 8

Я тоже не хочу использовать. Во многих случаях проблемы, которые могут быть у IE, можно избежать, упростив структуру вашей разметки несколько.

Это также помогает, если вы используете достойный CSS reset, например Эрик Мейер.

Я также медленно, но уверенно отбрасываю поддержку IE6 в принципе, особенно учитывая последние проблемы безопасности с IE6 и IE7 - мы не будем менять привычки просмотра браузеров и предпочтения браузера, если будем продолжать поддерживать дрянные браузеры.

Ответ 9

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

Говоря из ограниченного опыта, развивающего эти вещи... Я предполагаю, что вы хотите сделать пятновую веб-страницу, которая вспыхивает без грязной покупки Adoobi:

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

Op3ra 9.6, S @fari 3, Chr0me 1, 1nternet Xpl0rer 6, 7 и 8, Firefux 1.5

• Используйте правило @import css, чтобы вырезать css в древних браузерах и позволить им есть торт.

• Используйте комбинацию обнаружения объектов и обход браузера для поиска и устранения проблемных браузеров (все версии ниже целевого значения). Также поймайте древние браузеры, которые, как вы знаете, не соответствуют скорости (свойство css, которое вы можете проверить и сравнить с известным значением) на всякий случай, если они пройдут мимо сниффера, также используйте условные комментарии, чтобы выгнать 1E5, подавая им некоторые анти-css для успокойте его на своем пути, аналогичный для ie6, за исключением того, чтобы держать его в jQu3ry, если это вообще возможно.

• Используйте динамический элемент для загрузки jQu3ry libray в разрешенные браузеры (любые, которые не провалили ваши тщательные тесты). То есть мы даже не импортируем библиотеку, когда знаем, что она не будет работать/мы позволяем всем остальным.

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

• Разверните это с помощью медиа-операторов, и вы можете проверить значение css, уникальное для этих устройств, теперь у вас будет больше знаний для настройки макета (т.е. уничтожить эти столбцы и сжать эти изображения). Отключите анимацию и т.д.

• Держите его доступным, всегда используя текстовые ярлыки и некоторые трюки с позиционированием, чтобы они исчезли, если вам нужен мистер гениальный парень меню... просто не полагайтесь на изображения или только Javascript для просмотра ваших сайтов.

• Его достаточно легко блокировать все, что находится ниже Netsc @pe 4. Предоставление им только базовой сети, как она должна была быть изначально. То есть даже не указывайте фон или цвет, или шрифт, или что-либо для них. По умолчанию браузер должен работать нормально. Информация будет доступна.

Фактически, я перехожу к тому, что все "доступные" идентификаторы браузеров сами по себе, как N $4, поэтому мы можем легко вырвать их из динамического представления и не допустить, чтобы они перевернули инвалидов.

Увы, она была хорошим кораблем, но даже хороший корабль для пугания когда-либо лежащего из M $должен умереть. Не бойтесь, что у нас есть еще лучший вариант;)

Только мои 2 цента, применяйте с осторожностью.

Ответ 10

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

Ответ 11

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

сначала вы добавляете хаки, а затем начинаете беспокоиться о том, как они ведут себя в разных браузерах и разных машинах.

вместо этого вы можете полагаться на специальные расширения css для поставщиков http://reference.sitepoint.com/css/vendorspecific

Ответ 12

[Мой подход] [1] с использованием класса PHP для определения версии os, браузера и браузера.

[1]: мой подход с использованием класса PHP для обнаружения os, браузера и версии браузера http://reinholdweber.com/css/css-hacks-browser-version-detection-a-new-approach/

Ответ 13

Лично я нашел, что это довольно много времени, чтобы найти все эти хаки и проверить их; каждое изменение, которое вы делаете, нужно протестировать в браузерах 4+, чтобы убедиться, что он ничего не сломал.

Вам не нужно проверять "правильные" CSS-хаки в каждом браузере.

Идея заключается в том, что вы пишете код, совместимый с стандартами, а затем добавляете определенные хаки для таргетинга на один и только один браузер (или движок рендеринга), который делает ошибку. Например, написание "* html #myelement" предназначено только для исключения для IE6: никакой другой браузер никогда не пострадает от этого взлома, поэтому нет необходимости полностью его тестировать. Это может пойти только не так, если появился какой-то новый неясный браузер и сделал ту же ошибку, что и IE6, что крайне маловероятно, а не ваша ошибка, и что-то, что можно было бы быстро зафиксировать.

Есть некоторые вещи, которые называют себя хаками CSS, но которые используют недопустимые конструкции, такие как "_propertyname" hack. Это может нарушить работу браузеров, потому что, когда вы используете неверный код, каждый браузер может интерпретировать его по-разному. Не используйте их.

Честно говоря, это ни в коем случае не проблема, которая когда-то была, в первую очередь потому, что IE5 мертв. Если вы используете доктрину режима стандартов и записываете стандарты, она будет работать в текущем раунде браузеров. Единственный реальный оставшийся проблемный случай - IE6, на который вы можете нацеливаться на "* html"; маловероятно, что вам понадобится гораздо больше для хакеров CSS, чем это. К счастью, дни Box Model Hack закончились.

Ответ 14

Слушайте свой код! Кент Бек говорит об этом. И в Крыло-Цуне говорят: будьте как вода, которая сгибается! Или что-то.

Посмотрите, вот CSS Hack, чтобы получить IE5, чтобы понять html5: http://blog.whatwg.org/styling-ie-noscript.

И здесь то же самое с использованием JS: http://blog.whatwg.org/supporting-new-elements-in-ie.

Сравните 5 страниц описания взлома с 5 строками хорошо понятного кода. Итак, используйте JS.

Вещи имеют свои преимущества и свои недостатки. И ваше понимание вопроса и элегантность фактического кода приводят путь.

Ответ 15

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