Приемлемые CSS хаки / исправления
Есть ли список "хороших" чистых хаков CSS, которые наверняка будут ориентированы на будущее?
Например, zoom:1 безопасен, пока он обслуживается только IE, и вы помните, что он там. Очень распространенный способ использования дочерних селекторов небезопасен, потому что IE7 поддерживает их. С помощью height:1% просто чувствует себя грязным (но это может быть только я).
Я знаю ie7-js, поэтому ошибки IE6 меня не сильно волнуют. Кроме того, я не ищу религиозные дебаты, просто источники.
Спасибо за ответы - я выбрал один из лучших источников в качестве ответа.
Спасибо также за предложения использовать отдельные CSS-файлы или не беспокоиться об этом. Я полностью согласен с вами, и для меня это данность. Но когда я сталкиваюсь с проблемой компоновки, мне нужно безопасное исправление, которое минимизирует риск повторного возникновения проблемы в $IE или $FF + 1. Извините, я не прояснил это.
12 ответов
Это хорошее место для хорошо документированных и хорошо протестированных багов браузера, а хаки позволяют обходить их:
Для большинства ошибок IE, я думаю, вам лучше использовать условные комментарии вокруг ссылки на таблицу стилей, специфичную для браузера. Это имеет тенденцию держать вещи довольно опрятными, и это довольно самодокументирование.
Я часто пользовался сайтом Питера-Пола Коха " QuirksMode " для решения проблем, связанных с CSS и кросс-браузерной совместимостью. Он склонен не одобрять методы, специфичные для браузера, но у него есть страница о CSS-хакерах.
Николь Салливан (AKA Stubbornella), которая работает в команде производительности Yahoo, предложила в "7 навыках исключительного качества", что вам следует использовать хак с подчеркиванием CSS для исправления ошибок IE6, потому что:
- Взломов должно быть немного и далеко.
- Если у вас будет только 5-6 хаков (что уже достаточно), то не имеет смысла помещать их во внешний файл и тем самым отделять его от контекста.
- Дополнительный файл приведет к снижению производительности ( Yahoo Best Practices, Правило 1).
Однако следует отметить, что это недопустимый CSS.
Нет такого понятия, как хороший чистый / приемлемый взлом [css] - всегда кодируйте в соответствии со стандартами, а затем используйте таблицы стилей, специфичные для браузера + версии, для любых хаков, необходимых для работы.
Например:default.cssdefault.ie6-fix.cssdefault.ie7-fix.cssdefault.ff2-fix.css
так далее
Затем, когда выйдет новая версия браузера, скопируйте взломы предыдущей версии и удалите биты, которые больше не применяются (и добавьте новые биты, если необходимо).
(Загрузите отдельные таблицы стилей, используя условные комментарии для IE, и сниффинг пользовательского агента для других браузеров.)
Эта статья является хорошим обзором хаков CSS: http://www.webdevout.net/css-hacks
Вот хороший список фильтров, которые очень стабильны:
/* Opera */
.dude:read-only { color: green; }
/* IE6/IE7 */
@media,
{
.dude { color: silver;}
}
/* IE8 \0 */
@media all\0
{
.dude { color: brown; }
}
/* IE9 monochrome and \9 */
@media all and (monochrome: 0)
{
.dude { color: pink\9; }
}
/* Webkit */
* > /**/ .dude, x:-webkit-any-link { color:red; }
/*
* > /**/
/* hides from IE7; remove if unneeded */
/* Firefox */
@-moz-document url-prefix()
{
.dude { color: green; }
}
Underscore-взлом для IE6-вещей работает довольно хорошо, например.
min-height:50px;
_height:50px;
Это не требует перемещения вещей из контекста в новые css-файлы, только IE6 получает их, и их легко отфильтровать, если вы решите прекратить поддерживать IE6. Они также очень минимальны и не будут сильно загромождать ваш CSS.
Изменение вашего CSS для поддержки конкретного браузера никогда не бывает неправильным - до тех пор, пока вы можете легко его содержать. Как вы заметите, совместимые со стандартами браузеры, * кашляющие * все, кроме MSIE, никогда не сломаются с будущими выпусками. Новые стандарты W3C также не нарушают предыдущие стандарты, они обычно не поддерживают или расширяют предыдущие стандарты.
Люди упомянули условные комментарии, которые отлично подходят для работы с IE. Но вам понадобится немного больше для работы со всеми браузерами (мобильный, геккон, веб-набор, опера и т. Д.). Обычно вы анализируете заголовки входящих запросов, чтобы выбрать тип и версию браузера из параметра User-Agent. Исходя из этого, вы можете начать загрузку ваших файлов CSS.
Я верю, что большинство из нас делает это:
- Первая разработка для одного совместимого со стандартами браузера (например, FF)
- Когда CSS завершен, вы подходите к поддержке IE для обеспечения (это можно легко сделать с помощью условных комментариев, как уже упоминалось)
- Сначала создайте файл CSS, который точно настроит все для IE6 и любой другой версии ниже.
- Затем создайте файл CSS, который будет обрабатывать все для IE7
- Наконец, создайте файл CSS, который будет обрабатывать все для IE версий IE8 и выше
- Как только выйдет IE9, убедитесь, что вы установили обработку IE8+ для IE8 и создаете файл IE9+ CSS с необходимыми исправлениями
- Наконец, создайте дополнительный CSS-файл для исправлений веб-набора
- При необходимости вы также можете создать дополнительные файлы, специально предназначенные для Chrome или Safari, если это необходимо
Что касается специфичных для браузера реализаций CSS, я обычно группирую их все в моем основном файле CSS (вы можете легко выполнить их поиск и заменить их в одном документе, если это необходимо). Поэтому, если что-то должно быть прозрачным, я бы установил прозрачность и фильтры (MSIE) в одном блоке. Браузеры просто игнорируют реализации, которые они не поддерживают, так что вы в безопасности. Конкретные реализации, которых я бы хотел избежать, являются пользовательскими реализациями (эй, мне нравится поле -moz над W3C, но я просто не хочу на него полагаться).
Поскольку это происходит с наследованием и переопределением CSS, вам не нужно переопределять все объявления и определения CSS в каждом файле CSS. Каждый последовательно загруженный файл CSS должен содержать только селектор и конкретные определения, необходимые для исправления, и ничего больше.
В итоге вы получите ваш (огромный) основной css-файл и другие файлы, содержащие по несколько строк каждая, для конкретных исправлений браузера - что подводит итог чему-то, что не так сложно поддерживать и отслеживать. Это личное предпочтение, на каком браузере будет базироваться ваш базовый CSS-файл, но обычно вы будете ориентироваться на браузер, который создаст наименьшее количество проблем для других браузеров (так что да, разработка для IE6 будет очень плохим решением в этом точка).
Как всегда, следование передовой практике и прагматичность и тщательность с селекторами и особенностями каждого класса и использование фреймворков приведут вас на путь совершенства с редкими необходимыми исправлениями. Структурирование ваших CSS-файлов является огромным плюсом, если только вы не хотите закончить беспорядочным бесполезным беспорядком.
У Centricle есть хороший список хаков CSS и их совместимости.
Я не думаю, что вы найдете список хаков, которые будут в будущем, так как знаете, что можно сказать, какая глупость будет реализована в IE дальше.
При определении правил я считаю целесообразным допустить естественную деградацию, например, в CSS3 есть поддержка цветовых моделей RGBA, но нет в CSS2, поэтому я решаю:
background-color: #FF0000;
background-color: rgba( 255,0,0, 50% );
Так что, когда более позднее правило не будет работать в старых браузерах, которые его не поддерживают, оно будет ухудшено до ранее определенного стиля.
Я предпочитаю глобальную технику условных комментариев, описанную Хироки Чалфантом;
Я считаю полезным хранить мои правила, ориентированные на IE, рядом с моими правилами, ориентированными на стандарты, в одной действительной таблице стилей.