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

Question

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

Около года назад я просмотрел в Интернете, какие другие крупные сайты используют (Yahoo, Google, BBC и т. Д.), И обнаружил, что большинство из них используют те или иные формы обнаружения браузеров (JS, HTML-выражения if, сервер основан). Я тоже начал этим заниматься. Почти на всех сайтах, над которыми я работал в последнее время, я использую jQuery, поэтому я использую встроенное обнаружение браузера.

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

Answer 1

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

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

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

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

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

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

Уровень 1:

• Firefox 3;
• IE7.

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

Уровень 2:

• Firefox 2;
• Safari;
• Opera;
• Chrome.

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

Уровень 3:

• IE6;
• Другие.

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

Answer 2

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

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

Answer 3

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

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

Что я бы порекомендовал:

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

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

Edit:

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

Answer 4

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

Answer 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`, они ' Re гарантированно работать.

Что касается не связанных с IE проблем CSS, я так и не нашел такой, которая заслуживала бы обнаружения в браузере.

Answer 6

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

Answer 7

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

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

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

Op3ra 9.6, S @ fari 3, Chr0me 1, 1 Интернет Xpl0rer 6, 7 и 8, Firefux 1.5

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

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

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

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

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

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

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

На самом деле, я убираю, что все «доступные» браузеры идентифицируют себя как N $ 4, чтобы мы могли легко убрать их из динамического представления и не дать себя обмануть.

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

---

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

Answer 8

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

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

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

Answer 9

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

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

Answer 10

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