Приемлемые CSS хаки / исправления

Question

Есть ли список «хороших» чистых хаков CSS, которые наверняка будут ориентированы на будущее?

Например, zoom:1 безопасен, если только он подается в IE, и вы помните, что он там. Самым распространенным способом использования дочерних селекторов является не безопасный, потому что IE7 поддерживает их. Использование height:1% просто кажется грязным (но это может быть только я).

Я знаю о ie7-js , поэтому ошибки IE6 меня не сильно волнуют. Кроме того, я не ищу религиозные дебаты, просто источники.

---

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

Спасибо также за предложения использовать отдельные CSS-файлы или не беспокоиться об этом. Я полностью согласен с вами, и для меня это данность. Но когда я сталкиваюсь с проблемой компоновки, мне нужно безопасное исправление, которое минимизирует риск повторного возникновения проблемы в $ IE или $ FF + 1. К сожалению, я не прояснил это.

Answer 1

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

Answer 2

Я часто пользовался сайтом Питера-Пола Коха " QuirksMode " для решения проблем, связанных с CSS и кросс-браузерной совместимостью. Он не одобряет методы, специфичные для браузера, но у него есть страница, посвященная CSS Hacks .

Answer 3

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

http://www.positioniseverything.net/

Answer 4

Николь Салливан (AKA Stubbornella ), работающая в команде производительности Yahoo, предложила в 7 навыках исключительного исполнения , что вам следует использовать хак с подчеркиванием CSS исправлять ошибки IE6, потому что:

• Хаков должно быть немного и далеко друг от друга.
• Если у вас будет только 5-6 хаков (что уже достаточно), то не имеет смысла помещать их во внешний файл и тем самым отделять его от его контекста.
• Дополнительный файл приведет к снижению производительности ( Yahoo Best Practices, Правило 1 ).

Однако следует отметить, что это недопустимый CSS.

Answer 5

Нет такой вещи, как хороший чистый / приемлемый взлом [css] - всегда кодируйте в соответствии со стандартами, а затем используйте таблицы стилей, специфичные для браузера + версии, для любых хаков, необходимых для работы.

Например:
default.css
default.ie6-fix.css
default.ie7-fix.css
default.ff2-fix.css
и т.д.

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

(Загрузка отдельных таблиц стилей с использованием условных комментариев для IE и анализ кода пользовательского агента для других браузеров.)

Answer 6

Вот хороший список фильтров, которые очень стабильны:

/* 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; }
  }

Answer 7

Эта статья является хорошим обзором хаков CSS: http://www.webdevout.net/css-hacks

Answer 8

Centricle содержит хороший список хаков CSS и их совместимости.

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

Answer 9

Изменение вашего 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-файлов является огромным плюсом, если только вы не хотите закончить беспорядочным бесполезным беспорядком.

Answer 10

Underscore-взлом для IE6-вещей работает довольно хорошо, например.

min-height:50px;
_height:50px;

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