Приемлемые CSS-хаки / исправления
https://stackoverflow.com/questions/504261
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Есть ли список "хороших" чистых CSS-взломов, которые наверняка пригодятся в будущем?
Например, zoom:1 безопасен до тех пор, пока он подается только в IE, и вы помните, что он там есть.Очень распространенный способ использования дочерних селекторов заключается в не безопасно, потому что IE7 поддерживает их.Используя height:1% просто чувствую себя грязным (но это может быть только из-за меня).
Я знаю о ie7-js, так что ошибки IE6 меня не сильно беспокоят.Кроме того, я не ищу религиозных дебатов, только источники.
Спасибо за ответы - я выбрал в качестве ответа тот, у которого есть лучшие источники.
Также спасибо за предложения использовать отдельные CSS-файлы или не беспокоиться об этом.Я полностью согласен с вами, и для меня это данность.Но когда я сталкиваюсь с проблемой макета, мне нужно безопасное исправление, которое сведет к минимуму риск того, что мне придется вернуться к проблеме в $ IE или $ FF + 1.Извини, что я не объяснил это яснее.
Решение
Это хорошее место для хорошо документированных и хорошо протестированных ошибок браузера, а хаки позволяют вам обойти их:
Другие советы
Для большинства ошибок IE, я думаю, вам лучше всего использовать условные комментарии вокруг ссылки на определенную для браузера таблицу стилей.Это, как правило, делает вещи довольно аккуратными и вполне самодокументируемыми.
Я использовал книгу Питера-Пола Коха "Причудливый режим" на веб-сайте много проблем, связанных с CSS и кроссбраузерной совместимостью.Он склонен неодобрительно относиться к специфичным для браузера методам, но у него есть страница на CSS - Хаки.
Николь Салливан (ОН ЖЕ Стубборнелла) кто работает в команде Yahoo Performance team, предложенной в 7 Привычек для исключительного совершенства что вам следует использовать CSS-хак подчеркивания для исправления ошибок IE6, потому что:
- Взломов должно быть немного, и они должны быть далеко друг от друга.
- Если у вас будет всего 5-6 взломов (что уже достаточно), тогда не имело бы смысла размещать их во внешнем файле и тем самым отделять его от контекста.
- Дополнительный файл может привести к снижению производительности (Рекомендации Yahoo, Правило 1).
Однако следует отметить, что это недопустимый CSS.
Не существует такого понятия, как хороший чистый / приемлемый взлом [css] - всегда кодируйте в соответствии со стандартами, а затем используйте таблицы стилей, зависящие от браузера + версии, для любых взломов, необходимых для того, чтобы все заработало.
Например:default.css
default.ie6-fix.css
default.ie7-fix.css
default.ff2-fix.css
и т.д.
Затем, когда будет выпущена новая версия браузера, скопируйте исправления предыдущей версии и удалите биты, которые больше не применяются (и добавьте новые биты, если необходимо).
(Загружайте отдельные таблицы стилей, используя Условные комментарии для IE и отслеживание пользовательского агента для других браузеров.)
Подчеркивание-хак для IE6-stuff работает довольно хорошо, например.
min-height:50px;
_height:50px;
Это не требует переноса элементов из контекста в новые css-файлы, их получает только IE6, и их легко отфильтровать, если вы решите прекратить поддержку IE6.Они также очень минимальны и не будут сильно загромождать ваш CSS.
Изменение вашего CSS для поддержки конкретного браузера никогда не бывает неправильным - до тех пор, пока вы можете легко его содержать.Как вы заметите, браузеры, совместимые со стандартами, * кашляют * всем за исключением MSIE, никогда не порвет с будущими релизами.Новые стандарты W3C также не нарушают предыдущие стандарты, они обычно устарели или, самое большее, расширяют предыдущие стандарты.
Люди упоминали условные комментарии, которые отлично подходят для работы с IE.Но вам понадобится немного больше для работы со всеми браузерами (mobile, gecko, webkit, opera и т.д.).Обычно вы анализируете заголовки входящих запросов, чтобы получить тип и версию браузера из параметра User-Agent.Основываясь на этом, вы можете начать загрузку ваших CSS-файлов.
Я верю, что большинство из нас делает это так::
- Первая разработка для одного браузера, соответствующего стандартам (возьмем, к примеру, FF)
- Как только CSS будет завершен, вы перейдете к поддержке providig для IE (это можно легко сделать с помощью условных комментариев, как уже упоминалось ранее)
- Сначала создайте CSS-файл, который точно настроит все для IE6 и любой другой версии ниже
- Затем создайте CSS-файл, который будет обрабатывать все для IE7
- Наконец, создайте CSS-файл, который будет обрабатывать все для IE версий IE8 и выше
- Как только выйдет IE9, убедитесь, что вы настроили обработку IE8 + для конкретного IE8, и создайте файл IE9 + CSS с необходимыми исправлениями
- Наконец, создайте дополнительный CSS-файл для исправлений webkit
- При необходимости вы также можете создать дополнительные файлы, специально предназначенные для Chrome или Safari, если требуется
Что касается специфичных для браузера реализаций CSS, я обычно группирую их все в моем основном файле css (вы можете легко выполнить поиск по ним и заменить их в одном документе, если это необходимо).Поэтому, если что-то должно быть прозрачным, я бы установил и непрозрачность, и фильтры (MSIE) в одном блоке.Браузеры просто игнорируют реализации, которые они не поддерживают, так что вы в безопасности.Конкретные реализации, которых я бы предпочел избегать, - это пользовательские реализации (эй, мне нравится поле -moz над полем W3C, но я просто не хочу на него полагаться).
Поскольку это связано с наследованием и переопределением CSS, вам не нужно переопределять все объявления CSS и определения в каждом файле CSS.Каждый последовательно загруженный CSS-файл должен Только содержит селектор и конкретные определения, необходимые для исправления, и ничего больше.
В итоге вы получаете ваш (огромный) основной css-файл и другие, содержащие по несколько строк в каждом, для конкретных исправлений браузера, что в итоге дает то, что не так уж сложно поддерживать и отслеживать.Это личное предпочтение, на каком браузере будет основан ваш базовый css-файл, но обычно вы будете ориентироваться на браузер, который создаст наименьшее количество проблем для других браузеров (так что да, разработка для IE6 была бы очень плохим решением на данный момент).
Как всегда, следование передовым практикам, прагматичность и скрупулезность в выборе и специфике каждого класса, а также использование фреймворков приведут вас по пути совершенства, при этом исправления будут требоваться редко.Структурирование ваших CSS-файлов - огромный плюс, если только вы не хотите в итоге получить неупорядоченный бессмысленный беспорядок.
Центрикл имеет хороший список 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; }
}
При определении правил я считаю полезным разрешить естественную деградацию, например, в CSS3 есть поддержка цветовых моделей RGBA, но в CSS2 ее нет, поэтому я ловлю себя на том, что делаю:
background-color: #FF0000;
background-color: rgba( 255,0,0, 50% );
Таким образом, при сбое более позднего правила в старых браузерах, которые его не поддерживают, оно будет изменено до ранее определенного стиля.
Я предпочитаю глобальный условный комментарий техника , описанная Хироки Чалфантом;
Я считаю полезным хранить мои правила, ориентированные на IE, бок о бок с моими правилами, ориентированными на стандарты, в единой допустимой таблице стилей.
