CSS -хакер — это метод кодирования , используемый для скрытия или отображения разметки CSS в зависимости от браузера , номера версии или возможностей. Браузеры по-разному интерпретируют поведение CSS и различаются уровнями поддержки стандартов W3C . CSS-хаки иногда используются для достижения единообразного внешнего вида макета в нескольких браузерах, не имеющих совместимого рендеринга. Большинство этих хаков не работают в современных версиях браузеров, и другие методы, такие как обнаружение поддержки функций, стали более распространенными.
Из-за особенностей интерпретации CSS различными браузерами большинство хаков CSS включают в себя написание недействительных правил CSS, которые интерпретируются только определенными браузерами, или использование ошибок в определенных браузерах. Примером этого является префикс правил с подчеркиванием (как в _width
) для Internet Explorer 6 — другие браузеры будут игнорировать эту строку, позволяя использовать ее для написания кода, специфичного для одного браузера .
Подобные хаки CSS включают в себя создание синтаксических ошибок, таких как звездочки, пропущенные пробелы и комментарии CSS вокруг имен свойств. Кроме того, в Internet Explorer 6 и 7 !important
объявление распознается как таковое по любой строке после восклицательного знака, например !ie
. [1]
Хотя новые правила CSS верны по текущим стандартам, старые браузеры игнорируют их как «недействительные». Написав старые правила, за которыми следуют новые правила, которые отменяют или изменяют старые, можно активировать только определенные правила в старых браузерах.
До версии 10 Internet Explorer поддерживал специальный синтаксис комментариев, который позволял читать блоки HTML только определенными версиями браузера. Эти комментарии в основном используются для предоставления конкретных обходных решений CSS и JavaScript для старых версий браузера. Никакие другие браузеры не интерпретировали эти комментарии и не предлагали аналогичную функциональность.
Ниже приведены примеры различного синтаксиса этих комментариев.
< head > < title > Тест </ title > < link href = "all_browsers.css" rel = "таблица стилей" type = "text/css" > <!--[if IE]> <link href="ie_only.css " rel="stylesheet" type="text/css"> <![endif]--> <!--[if lt IE 7]> <link href="ie_6_and_below.css" rel="stylesheet" type=" text/css"> <![endif]--> <!--[if !lt IE 7]> <![IGNORE[--> <![IGNORE[]]> < link href = "recent.css" rel = «таблица стилей» type = «text/css» > <!--<![endif]--> < link href = «not_ie.css» rel = «таблица стилей» type = «text/css» > <!- -<![endif]--> </ head >
Сокрытие кода с помощью хаков часто приводит к некорректному отображению страниц при обновлении браузеров. Эти хаки могут привести к неожиданному поведению новых браузеров, которые могут интерпретировать их иначе, чем их предшественники. Поскольку Internet Explorer 6 и 7 вышли из употребления, хаки CSS также пришли в упадок. Современные методы таргетинга на функции менее хрупкие и подвержены ошибкам.
Каждый из самых популярных браузерных механизмов рендеринга имеет собственный префикс поставщика для экспериментальных свойств. Однако из-за распространения этих свойств в реальном коде производители браузеров начали отходить от этой практики в пользу флагов функций. [2]
Ниже приведен список префиксов из различных механизмов компоновки:
/* Кроссбраузерный линейный градиент CSS3 */ . линейный градиент { /* Браузер Gecko (Firefox) */ background-image : -moz- linear-gradient ( top , #D7D 0 % , #068 100 % ); /* Opera */ background-image : -o- linear-gradient ( top , #D7D 0 % , #068 100 % ); /* старый синтаксис Webkit */ background-image : -webkit- gradient ( linear , left top , left low , color -stop ( 0 , #D7D ), color-stop ( 1 , #068 )); /* Webkit (Safari, Chrome, iOS, Android) */ background-image : -webkit- linear-gradient ( top , #D7D 0 % , #068 100 % ); / * W3C */ фоновое изображение : линейный градиент ( вниз , #D7D 0 % , #068 100 % ); }
Префиксы поставщиков были разработаны для функций, которые находились в стадии разработки, а это означает, что синтаксис может даже не быть окончательным. Кроме того, добавление правила для реализации функции в каждом браузере не очень хорошо масштабируется, если вы хотите поддерживать множество браузеров. Следовательно, основные поставщики браузеров отходят от префиксов поставщиков в пользу других методов, таких как запросы функций.@supports
Существует множество библиотек JavaScript для определения того, какие функции доступны в конкретном браузере, чтобы можно было написать правила CSS, ориентированные на них. Библиотеки, такие как Modernizr, добавляют к html
элементу классы, позволяющие использовать такие правила CSS, как ..cssgradients .header
В CSS3
была представлена новая функция, известная как запросы функций , позволяющая обнаруживать определенные функции в CSS (без необходимости использования библиотеки JavaScript для обнаружения функций ). Эту новую директиву можно использовать для проверки поддержки или отсутствия поддержки определенной функции, а проверки можно комбинировать с and
, or
и not
. Очевидно, что правила будут работать только в браузерах, поддерживающих .@supports
@supports
заголовок { дисплей : блок ; } @ support ( display : flex ) { header { display : flex ; } }
Хотя обнаружение функций и правила JavaScript могут помочь определить браузеры, которым требуется резервная функциональность, они не устраняют ошибки в конкретных браузерах и не включают эти расширенные функции. Полифилы — сценарии, обеспечивающие единообразие поведения во всех браузерах, — могут использоваться для добавления поддержки новых правил CSS (например, медиа-запросов в IE 8), а также для исправления ошибок в определенных браузерах. Поскольку полифилы добавляют или исправляют функциональность в браузерах, у которых ее нет, они служат другой цели, чем запросы функций, но могут использоваться в сочетании с ними.@supports