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>Test</title>
  <link href="all_browsers.css" rel="stylesheet" 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="stylesheet" type="text/css"> <!--<![endif]-->
   <link href="not_ie.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
</head>

Критики

Сокрытие кода с помощью хаков часто приводит к некорректному отображению страниц при обновлении браузеров. Эти хаки могут привести к неожиданному поведению новых браузеров, которые могут интерпретировать их иначе, чем их предшественники. Поскольку Internet Explorer 6 и 7 вышли из употребления, хаки CSS также пришли в упадок. Современные методы таргетинга на функции менее хрупкие и подвержены ошибкам.

Альтернативы

Префиксы браузера

Каждый из самых популярных браузерных механизмов рендеринга имеет собственный префикс поставщика для экспериментальных свойств. Однако из-за распространения этих свойств в реальном коде производители браузеров начали отходить от этой практики в пользу флагов функций. ^[2]

Список префиксов

Ниже приведен список префиксов из различных механизмов компоновки:

Префикс поставщика	В использовании	Механизм макета	Создано	Используется
`-ah-`	Да	форматтер	Антенный Дом	Форматер антенного дома
`-apple-`	Да	Вебкит	Apple Инк.	Apple Safari 2.0 , виджеты Opera, браузеры на основе WebKit (как устаревший префикс)
`-atsc-`			Стандарты Комитета по передовым телевизионным системам
`-epub-`	Да	Вебкит	Рабочая группа EPUB	Chromium / Google Chrome , браузеры на базе WebKit
`-fx-`	Да		Sun Microsystems (сейчас приобретена Oracle Corporation )	JavaFX -приложения
`-hp-`			Hewlett-Packard (ныне HP Inc. и Hewlett Packard Enterprise )
`-khtml-`	Да / да	ХТМЛ /ВебКит	ГДЕ	KDE Konqueror / Apple Safari 1.1–Safari 2.0, браузеры на основе WebKit (в качестве устаревшего префикса)
`-moz-`	Да	Геккон	Фонд Мозиллы	Браузеры на основе Gecko[?], Mozilla Firefox
`-ms-`	Да	Трезубец / MSHTML	Корпорация Майкрософт	Microsoft Интернет Эксплорер
`mso-`		Офис	Корпорация Майкрософт	Майкрософт Офис[?]
`-o-`	Да	Скоро	Опера Программное обеспечение	Браузер Opera для настольных компьютеров до версии 12.16 , Opera Mini и Opera Mobile до версии 12.1 , браузер Nintendo DS и Nintendo DSi , интернет-канал Nintendo Wii
`prince-`	Да	Принц	ДаЛогика	ДаЛогика Принц
`-rim-`		Вебкит	БлэкБерри Лимитед	Браузер RIM для Blackberry
`-ro-`	Да	МАРТА	РеальныеОбъекты	RealObjects PDFreactor
`-tc-`			Высокие компоненты	Высокие компоненты
`-wap-`	Да	Скоро	WAP-форум	Браузер Opera для ПК и Opera Mobile, WAP-форум
`-webkit-`	да	ВебКит/Блинк	Apple Inc. ( WebKit )/ Google Inc. ( Мигните )	Apple Safari и Safari для iOS (WebKit), Chromium/Google Chrome для настольных компьютеров и мобильных устройств (мигает), Opera для настольных компьютеров и мобильных устройств начиная с версии 14 (мигает), браузер Android (мигает), браузер Nokia MeeGo 8.5, браузер Nokia Symbian 7.0 и более поздних версий ( WebKit), браузер Blackberry 6.0 и более поздних версий (WebKit).
`-xv-`	Нет	Скоро	Опера Программное обеспечение	Настольный браузер Opera для Windows 2000/XP

Пример

/* Cross-browser css3 linear-gradient */
.linear-gradient {

  /* Gecko browser (Firefox) */
  background-image: -moz-linear-gradient(top, #D7D 0%, #068 100%);

  /* Opera */
  background-image: -o-linear-gradient(top, #D7D 0%, #068 100%);

  /* older Webkit syntax */
  background-image: -webkit-gradient(linear, left top, left bottom,
    color-stop(0, #D7D), color-stop(1, #068));

  /* Webkit (Safari, Chrome, iOS, Android) */
  background-image: -webkit-linear-gradient(top, #D7D 0%, #068 100%);

  /* W3C */
  background-image: linear-gradient(to bottom, #D7D 0%, #068 100%);

}

Ограничение

Префиксы поставщиков были разработаны для функций, которые находились в стадии разработки, а это означает, что синтаксис может даже не быть окончательным. Кроме того, добавление правила для реализации функции в каждом браузере не очень хорошо масштабируется, если вы хотите поддерживать множество браузеров. Следовательно, основные поставщики браузеров отходят от префиксов поставщиков в пользу других методов, таких как @supports функциональные запросы.

Удаление функции

Обнаружение функций JavaScript

Существует несколько библиотек JavaScript для определения того, какие функции доступны в конкретном браузере, чтобы можно было написать правила CSS, ориентированные на них. Библиотеки, такие как Modernizr, добавляют классы в html элемент, позволяющий использовать правила CSS, такие как .cssgradients .header.

Запросы функций

была представлена новая функция, известная как запросы функций В CSS3 , позволяющая обнаруживать определенные функции в CSS (без необходимости использования библиотеки JavaScript для обнаружения функций ). Эту новую директиву можно использовать для проверки поддержки или отсутствия поддержки определенной функции, а проверки можно комбинировать с and, or, и not. Очевидно, @supports правила будут работать только в браузерах, поддерживающих @supports.

header {
    display: block;
}

@supports (display: flex) {
    header {
        display: flex;
    }
}

Полифилы скриптов

Хотя обнаружение функций JavaScript и @supports Правила могут помочь настроить таргетинг на браузеры, которым требуется резервная функциональность, но они не будут устранять ошибки в конкретных браузерах или включать эти расширенные функции. Полифилы — сценарии, обеспечивающие единообразие поведения во всех браузерах, — могут использоваться для добавления поддержки новых правил CSS (например, медиа-запросов в IE 8), а также для исправления ошибок в определенных браузерах. Поскольку полифилы добавляют или исправляют функциональность в браузерах, в которых ее нет, они служат другой цели, чем запросы функций, но могут использоваться в сочетании с ними.

Условные комментарии

Ссылки

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

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

Странность браузера — хаки и тесты Live CSS Джеффа Клейтона для фильтрации для основных браузеров, включая единственные известные хаки CSS для Safari 7 и 8.
Browsehacks.com – несколько методов и тестов браузерной фильтрации (Уго Жиродель, Джошуа Хибберт, Тим Пьетруски, Фабрис Вайнберг, Джефф Клейтон)
Фильтры префиксов Safari/Webkit (webkit) Фильтры исправлений]
Фильтры префиксов Mozilla (moz)
Фильтры префиксов Opera (wap) . На этой странице представлены все CSS-селекторы Opera.
CSS-фильтры — довольно полная таблица CSS-хаков, которые показывают и скрывают правила от определенных браузеров.
Фильтры и кроссовер — CSS-фильтры. Ошибки синтаксического анализа отмечены красным.
– Селектор браузера CSS – позволяет комбинировать CSS, специфичный для браузера, в одной таблице стилей (с использованием JavaScript).
– #IEroot – ориентация IE на единую таблицу стилей, содержащую весь CSS (без использования JavaScript, но с использованием условных комментариев для назначения специфичного для браузера тега произвольному корню контента). <div>)
Как настроить таргетинг только на IE (любую версию) в таблице стилей? – обсуждение на StackOverflow
Применять стиль ТОЛЬКО в IE – обсуждение на StackOverflow
Комментарии CSS – Как добавлять комментарии в CSS

[1] Пол Айриш (15 апреля 2009 г.). «Браузерные CSS-хаки» . www.paulirish.com . Проверено 8 июня 2022 г.

[2] «Префикс поставщика» . Сеть разработчиков Mozilla . Проверено 12 октября 2016 г.

[1]

[2]