stringtranslate.com

CSS хак

CSS -хакер — это метод кодирования , используемый для скрытия или отображения разметки CSS в зависимости от браузера , номера версии или возможностей. Браузеры по-разному интерпретируют поведение CSS и различаются уровнями поддержки стандартов W3C . CSS-хаки иногда используются для достижения единообразного внешнего вида макета в нескольких браузерах, не имеющих совместимого рендеринга. Большинство этих хаков не работают в современных версиях браузеров, и другие методы, такие как обнаружение поддержки функций, стали более распространенными.

Виды хаков

Неверный или несовместимый CSS.

Из-за особенностей интерпретации CSS различными браузерами большинство хаков CSS включают в себя написание недействительных правил CSS, которые интерпретируются только определенными браузерами, или использование ошибок в определенных браузерах. Примером этого является префикс правил с подчеркиванием (как в _width) для Internet Explorer 6 — другие браузеры будут игнорировать эту строку, позволяя использовать ее для написания кода, специфичного для одного браузера .

Подобные хаки CSS включают в себя создание синтаксических ошибок, таких как звездочки, пропущенные пробелы и комментарии CSS вокруг имен свойств. Кроме того, в Internet Explorer 6 и 7 !importantобъявление распознается как таковое по любой строке после восклицательного знака, например !ie. [1]

Неподдерживаемый CSS

Хотя новые правила 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

Существует множество библиотек 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

Рекомендации

  1. ↑ Пол Айриш (15 апреля 2009 г.). «Браузерные CSS-хаки». www.paulirish.com . Проверено 8 июня 2022 г.
  2. ^ «Префикс поставщика». Сеть разработчиков Mozilla . Проверено 12 октября 2016 г.

Внешние ссылки