Допустимые хаки/исправления CSS

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

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

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

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

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

ОТВЕТЫ

Ответ 1

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

http://www.positioniseverything.net/

Ответ 2

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

Ответ 3

Я использовал Peter-Paul Koch " QuirksMode" сайт для вопросов, связанных с CSS и совместимостью между браузерами. Он, как правило, хмурится определенными браузерами методами, но у него есть страница на CSS Hacks.

Ответ 4

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

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

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

Ответ 5

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

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

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

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

Ответ 6

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

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

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

Ответ 7

Модификация CSS для поддержки браузеров никогда не бывает неправильной - если вы можете легко ее скрыть. Как вы заметили, совместимые со стандартами браузеры, * cough * все, кроме MSIE, никогда не будут ломаться с будущими версиями. Новые стандарты W3C также не нарушают прежние стандарты, они обычно не одобряют или расширяют прежние стандарты.

Люди упоминали условные комментарии, которые отлично подходят для обработки IE. Но вам понадобится немного больше для обработки всех браузеров (мобильных, gecko, webkit, opera и т.д.). Обычно вы обрабатываете входящие заголовки запросов, чтобы выбрать тип и версию браузера из параметра User-Agent. Исходя из этого, вы можете начать загрузку файлов CSS.

Я верю, как большинство из нас это делает:

  • Сначала создайте для одного браузера, совместимого со стандартами (например, возьмите FF)
  • Как только CSS будет завершен, вы подходите к поддержке поддержки 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 является огромным плюсом, если вы не хотите, чтобы в конечном итоге был беспорядочный бесполезный беспорядок.

Ответ 8

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

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

Ответ 10

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

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

Ответ 11

При определении правил я считаю, что это хорошо, чтобы обеспечить естественную деградацию, например, в CSS3 есть поддержка моделей RGBA Color, но в CSS2 нет, поэтому я нахожу себя:

 background-color: #FF0000; 
 background-color: rgba( 255,0,0, 50% );

Итак, когда более позднее правило выходит из строя на старых браузерах, которые его не поддерживают, он будет деградировать до ранее определенного стиля.

Ответ 12

Я предпочитаю метод глобальный условный комментарий, описанный Хироки Чалтантом;

Мне полезно поддерживать мои правила, ориентированные на IE, рядом с моими стандартными правилами в единственной допустимой таблице стилей.