CSS-хак - CSS hack

Эта статья о технике CSS. Не путать с проприетарным свойством CSS, специфичным для Microsoft.

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

Виды взломов

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

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

Неподдерживаемый 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]-->
  <!--[if !IE]--> <link href="not_ie.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
</head>

Критики

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

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

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

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

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

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

Префикс поставщика В использовании Layout Engine Создан Использован
-ah- да Форматировщик Антенный Дом Форматтер антенного дома
-apple- да WebKit Apple Inc. Apple Safari 2.0 , виджеты Opera, браузеры на основе WebKit (как устаревший префикс)
-atsc- Стандарты Комитета передовых телевизионных систем
-epub- да WebKit Рабочая группа EPUB Chromium / Google Chrome , браузеры на основе WebKit
-fx- да Sun Microsystems (теперь приобретена Oracle Corporation ) Приложения JavaFX
-hp- Hewlett-Packard (сейчас HP Inc. и Hewlett Packard Enterprise )
-khtml- Да / да KHTML / WebKit KDE KDE Konqueror / Apple Safari 1.1 - Safari 2.0, браузеры на основе WebKit (как устаревший префикс)
-moz- да Геккон Фонд Mozilla Браузеры на основе Gecko [?], Mozilla Firefox
-ms- да Трезубец / MSHTML Корпорация Майкрософт Microsoft Internet Explorer
mso- Офис Корпорация Майкрософт Майкрософт офис[?]
-o- да Престо Программное обеспечение Opera Настольный браузер Opera до версии 12.16 , Opera Mini и Opera Mobile до версии 12.1 , браузер Nintendo DS и Nintendo DSi , Интернет-канал Nintendo Wii
prince- да Принц ДаЛогика YesLogic Prince
-rim- WebKit BlackBerry Limited Браузер RIM Blackberry
-ro- да МАРТА Реальные объекты Реальные объекты PDFreactor
-tc- Высокие компоненты Высокие компоненты
-wap- да Престо Форум WAP Браузер Opera для настольных ПК и Opera Mobile, WAP-форум
-webkit- да WebKit / Blink Apple Inc. (WebKit) / Google Inc. (Blink) Apple Safari и Safari для iOS (WebKit), Chromium / Google Chrome для настольных и мобильных устройств (Blink), Opera для настольных и мобильных устройств, начиная с версии 14 (Blink), браузера Android (Blink), Nokia MeeGo Browser 8.5, Nokia Symbian Browser 7.0 и более поздних версий ( WebKit), Blackberry Browser 6.0 и выше (WebKit).
-xv- Нет Престо Программное обеспечение Opera Браузер Opera Desktop для 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: flexbox) {
    header {
        display: flexbox;
    }
}

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

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

использованная литература

  1. ^ «Префикс поставщика» . Сеть разработчиков Mozilla . Проверено 12 октября +2016 .

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

  • Странность браузера - хаки и тесты Джеффа Клейтона Live CSS для фильтрации основных браузеров, включая единственные известные хаки CSS для Safari 7 и 8
  • browserhacks.com - несколько методов фильтрации браузеров и тестов (Хьюго Жираудель, Джошуа Хибберт, Тим Пьетруски, Фабрис Вайнберг, Джефф Клейтон)
  • Safari / Webkit (webkit) фильтры префиксов фильтры исправлений]
  • Префиксные фильтры Mozilla (moz)
  • Фильтры префиксов Opera (wap) - на этой странице есть все селекторы CSS Opera.
  • CSS Filters - довольно полная таблица CSS-хаков, которые показывают и скрывают правила для определенных браузеров.
  • Filters and Cross-Over - фильтры CSS. Ошибки анализа отмечены красным.
  • - Селектор браузера CSS - позволяет комбинировать CSS, специфичный для браузера, в единую таблицу стилей (с использованием JavaScript).
  • - #IEroot - Таргетинг на IE с помощью единой таблицы стилей, содержащей весь CSS (без использования JavaScript, но с использованием условных комментариев для присвоения специфичного для браузера тега произвольному корню содержимого [div])