Что лучше: взлом CSS или обнаружение браузера?

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

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

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

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

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

Есть третий вариант:

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

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

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

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

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

1-го уровня:

• Firefox 3;
• IE7.

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

Уровень 2:

• Firefox 2;
• Сафари;
• Опера;
• Хром.

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

Уровень 3:

• IE6;
• Другие.

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

Is there a reason you use or don't use either of these?

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

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

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

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

Редактировать:

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

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

Personally, I have found this to be quite time consuming to find all of these hacks and test them; each change you make you have to test in 4+ browsers to make sure it didn't break anything else.

Вам не нужно тестировать «правильные» хаки CSS в каждом браузере.

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

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

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

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

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

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

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

Послушайте, вот CSS-хак, чтобы IE5 понимал html5: http://blog.whatwg.org/styling-ie-noscript.

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

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

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

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

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

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

Op3ra 9.6, S @ fari 3, Chr0me 1, 1 Internet 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 цента, обращайтесь с осторожностью.

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

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

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

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

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

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

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

За 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 theuser-agent`, они гарантированно будут работать.

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