Javascript - отключение таблицы стилей агента пользователя

Разбор CSS и создание CSSOM

Возможно, вы слышали о DOM, но слышали ли вы о CSSOM (CSS Object Model) (объектной модели CSS)? До того, как я начал исследовать эту тему, я об этом ни чего не знал!

Подобно файлам HTML и DOM, когда файлы CSS загружаются, они должны быть проанализированы и преобразованы в дерево — на этот раз CSSOM. Он описывает все селекторы CSS на странице, их иерархию и их свойства.

Чем CSSOM отличается от DOM, так это тем, что он не может быть построен постепенно, поскольку правила CSS могут перезаписывать друг друга в разных точках из-за specificity (порядка применения свойства). Вот почему загрузка CSS блокирует рендеринг, поскольку до тех пор, пока весь CSS не будет проанализирован и не будет построен CSSOM, браузер не может знать, где и как разместить каждый элемент на экране.

Определение функций с помощью Modernizr

Библиотека Modernizr, написанная на JavaScript, поможет проверить кроссбраузерность сайта: поддерживается ли в различных браузерах конкретная функция HTML5 или CSS3. Если функция не доступна, то может быть загружен альтернативный CSS или JavaScript-код.

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

Стоит отметить, что Modernizr не добавляет недостающие функции в браузер. Поэтому вам нужно будет предоставить код из резервного CSS или полифилла.

Для начала необходимо скачать полнофункциональную сборку. Позже, когда вы будете готовы к разработке, можно создать пользовательскую сборку со специфическими функциями, которые вы тестируете. Все, что нужно сделать, это добавить класс .no-js в HTML-тег сайта и включить скрипт Modernizr в разделе head после любого CSS-файла:

<!DOCTYPE html> 
<html class="no-js" lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Modernizr Demo</title>

    <link rel="stylesheet" href="normalize.css"> 
    <link rel="stylesheet" href="style.css"> 
    <script src="modernizr.js"></script> 
</head> 
<body> 
    <h1>Modernizr Demo</h1>

    <p>This is a Modernizr exercise.</p>

    <script src="script.js"></script> 
</body> 
</html>

Класс .no-js используется, чтобы проверить, включен ли JavaScript в браузере пользователя. Если он включен, Modernizr заменит .no-js классом .js. Функция тестирования Modernizr анализирует, поддерживается ли в браузере конкретная функция и генерирует ряд классов, которые добавляются в HTML-элемент. Google Chrome 47.0.2526.111, например, будет возвращать следующие классы объектов.

В настоящее время Modernizr доступен в качестве глобального объекта, который можно вызвать в сочетании с названием функции, чтобы проверить существует ли она. Он возвращает логическое значение (true или false).

Рассмотрим два простых примера CSS и JavaScript.

Пример решения проблем CSS кроссбраузерности: проверка поддержки SVG и предоставление в качестве резервного варианта PNG

В настоящее время наблюдается тенденция к все более активному использованию SVG (Scalable Vector Graphics), но эта графика не поддерживается в IE8 и ниже. Если SVG поддерживается в браузере, Modernizr генерирует CSS-класс .svg. Если SVG не доступен, инструмент добавляет в HTML класс.no-svg. С помощью приведенного ниже CSS браузеры с поддержкой SVG будут использовать обычный класс .logo, в то время как браузеры, не поддерживающие SVG — правила .no-svg:

.logo { 
	background-image: url('logo.svg'); 
	width: 164px; 
	height: 49px; 
} 
.no-svg .logo { 
	background-image: url('logo.png'); 
	width: 164px; 
	height: 49px; 
}

Пример JavaScript: определение border-radius и добавление соответствующих классов CSS

Округление углов рамки не поддерживается в IE8 и ниже. Мы можем создавать различные CSS-классы, которые применяются в зависимости от наличия функции border-radius:

// Класс для браузера с функцией border-radius
.round-borders {
	border-radius: 5px;
}

// Класс для браузера без функции border-radius
.black-borders {
	border: 3px solid #000000;
}

Теперь можно использовать JavaScript, чтобы сохранить целевой идентификатор в качестве переменной, а затем через условие добавить классы CSS:

var element = document.getElementById('TestID');
if (Modernizr.borderradius) {
    element.className = 'round-borders';
} else {
    element.className = 'black-borders';
}

Заключение

Когда речь идет об адаптивном веб-дизайне в устаревших браузерах, не существует какого-то универсального решения

Важно проанализировать аудиторию ресурса, чтобы получить представление о реальной численности пользователей браузеров. Затем нужно тщательно протестировать сайт, чтобы выявить потенциальные проблемы кроссбраузерности

Тщательно выбирая правильные полифиллы, добавляемые в условных комментариях, можно обойти отсутствие наиболее существенных функций HTML5. Кроме этого возможность определения с помощью Modernizr является удобным способом предоставить резервные CSS и JavaScript для устаревших браузеров, в которых отсутствует поддержка современного функционала HTML5 и CSS3.

Пожалуйста, опубликуйте ваши комментарии по текущей теме статьи. За комментарии, отклики, дизлайки, лайки, подписки огромное вам спасибо!

Вадим Дворниковавтор-переводчик статьи «Cross-Browser Compatibility Responsive Web Design for Old Browsers»

Так что такое кроссбраузерность?

Понятие кроссбраузерности появилось еще на заре освоения интернета в начале 90-х годов. В то время существовало всего два ведущих браузера — Internet Explorer от Microsoft и Netscape Navigator. Считалось, что если сайт одинаково корректно отображается в обоих приложениях, то с кроссбраузерностью у него все в порядке. Затем Netscape Navigator прекратил свое существование, но стали один за другим появляться новые разработки браузерных систем. Некоторые сайты в них отображались корректно, с другими начинали возникать различные баги. Посетители относились к подобным проблемам негативно и просто напросто переставали посещать такие сайты. Разработчики веб-ресурсов вынуждены были учитывать этот фактор и искать пути решения проблемы.

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

Конечно, нет необходимости добиваться совершенно одинакового отображения визуальной и текстовой информации сайта во всех без исключения версиях браузеров. Достаточно, чтобы ресурс обладал адаптивностью ко всем возможным устройствам просмотра вне зависимости от размеров экрана. Не должно быть проблем с версткой, когда картинки, баннеры, логотипы «наезжают» друг на друга или вовсе не отображаются. Текстовая информация должна быть читабельной, особенно это касается таблиц

Важно, чтобы корректно работали сервисные приложения, вшитые в ресурс

Кроссбраузерными считаются сайты, которые хорошо работают на:

Google Chrome и производных обозревателях (типа Яндекс.Браузера, Chromium, Opera c 15 версии и т.д.);
Microsoft Edge (сейчас он тоже работает на движке Blink, как и Chrome);
Mozilla Firefox;
Safari (браузер, который используется на iOS и macOS).

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

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

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

Проанализируйте свою аудиторию

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

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

Ответив на эти вопросы с помощью статистических данных, например, из Google Analytics, можно получить объективную картину.

Специфика

Всё вышеперечисленное имеет место быть в том случае, если вес ваших селекторов одинаков. Если же вы приписываете ID, классы или вложенность элементов, то тут включается CSS специфика.

Существует 4 категории составляющих веса селектора: строчные стили, ID, классы и простые элементы. Как оценивать вес? Расклад такой:

ID-шки весят 100 очков
Классы весят 10 очков
Элементы весят по 1 очку

Зная это, рассчитаем приоритет селектора:

#content .sidebar .module li a

100 + 10 + 10 + 1 + 1 = 122 (ID, 2 класса, 2 элемента)

Запомните:

ID весит больше всего по сравнению с классами и элементами, поэтому вы должны ограничить использование ID в ваших стилях до минимума;
В случаях, когда селекторы весят одинаково, порядок их применения будет такой: последний селектор имеет больший приоритет;
Стили списанные в HTML самые козырные, так как они ближе всех к элементу;
Единственный способ переопределить встроенные стили, это использовать ключевое слово !important;
Псевдо-классы и атрибуты весят так же, как и обычные классы;
Псевдо-элементы весят, как обычные элементы;
Универсальный селектор (*) не весит ничего.

Как проверить кроссбраузерность сайта

Самый простой способ определить наличие кроссбраузерности – вручную открыть и проанализировать все страницы сайта в наиболее популярных обозревателях. Согласитесь, метод практически неприемлемый для крупных интернет-проектов, особенно с постоянно обновляемым контентом. Хотя совсем исключать этот способ тоже не стоит.

Сначала нужно понять, какие браузеры нужны для теста. Для этого лучше всего воспользоваться специальными сервисами аналитики – Яндекс.Метрикой и Google Analytics. Они покажут, каким браузерами отдают предпочтение ваши пользователи. Согласно статистике Statcounter, в тройку лидеров в РФ входят: Google Chrome, Яндекс.Браузер и Opera.

Проверить кроссбраузерность веб-ресурса в автоматическом режиме можно с помощью специальных платных и бесплатных сервисов. Рассмотрим некоторые из них подробнее.

CrossBrowserTesting

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

Используются следующие способы проверки:

«Живой тест». Можно работать с ресурсом в браузере с заранее выбранными параметрами, записывать видео и делать скриншоты.
Тест Selenium. Подразумевает автоматическую проверку в соответствии с предварительно созданным скриптом. Результаты записываются в формате видеофайла.
Режим автоматического сохранения скриншотов. Можно комбинировать различные ОС, браузеры, устройства и размеры экранов.
Локальное подключение. Можно проверить документы, которые еще не загрузились на сайт.

В течение 7 дней доступен бесплатный тестовый период с лимитом в 60 минут.

Browsershots

Онлайн-сервис проверки сайтов на кроссбраузерность в более чем 200 обозревателях и их сборках, в том числе малопопулярных и устаревших. Результат сохраняется в виде скриншотов. Есть бесплатная и платная версии. При бесплатном варианте запрос ставится в очередь, период ожидания может достигать нескольких часов. В случае платной подписки сайт будет проверяться в приоритетном порядке.

IE NetRenderer

Как видно из названия, проверить кроссбраузерность сайта можно только для Internet Explorer, начиная с версии 5.5 и заканчивая 11. Сервис работает онлайн, указать здесь можно только версию браузера и адрес тестируемого ресурса.

Browserling

Осуществляет проверку не в эмулируемом, а в реальном окне браузера, который установлен на виртуальной машине программы. Работает с ОС Windows и 4+ версиями ОС Android в пяти популярных браузерах – Chrome, Opera, IE, Safari, Firefox. Ресурс полностью платный.

Spoon Browser Sandbox

Проводит бесплатную проверку кроссбраузерности сайта в последних версиях Chrome, IE, Opera, Safari и Firefox. Тестирование в старых релизах платное. После загрузки специального плагина доступно тестирование всех параметров кроссбраузерности. Интерфейс русифицирован.

MultiBrowser

Платный сервис проверки кроссбраузерности. Работает со всеми доступными версиями Firefox, Chrome, Safari 5.1, несколькими сборками Explorer и эмуляциями большинства смартфонов и планшетов. Приложение способно подключать браузеры, уже установленные на ПК, либо загружать версии, которые нужны пользователю. Есть функция тестирования сайта в различных браузерах в офлайн-режиме. Бесплатная демо-версия доступна в течение двух недель.

Sauce Labs

Онлайн-сервис тестирования кроссбраузерности. При оформлении платной подписки доступна автоматическая проверка около 700 комбинаций браузеров, разрешений и устройств.

Equafy

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

Viewlike.us

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

Объединение DOM и CSSOM, для построения дерево рендеринга

Дерево рендеринга представляет собой комбинацию DOM и CSSOM и представляет все, что будет отображаться на странице. Это не обязательно означает, что все узлы в дереве рендеринга будут визуально присутствовать, например узлы со стилями opacity: 0 или visibility: hidden будут включены и могут быть прочитаны программой чтения с экрана и т. д., тогда как те, которые настроены на display: none будет исключены. Кроме того, такие теги, как <head>, не содержащие визуальной информации, всегда будут пропущены.

Как и в случае с движками JavaScript, разные браузеры имеют разные механизмы рендеринга.

Параметры, определяющие кроссбраузерность

Любой посетитель сайта в считанные секунды определит, насколько корректно работает ресурс в его обозревателе. Сделает он это исходя из следующих критериев:

Расположение элементов. Если сайт не адаптирован под конкретный браузер, его элементы могут съезжать за пределы экрана, накладываться друг на друга или не отображаться.
Текст. Очень важный критерий, особенно для статейных ресурсов, которых сегодня становится все больше. Текст не должен наслаиваться, съезжать или отображаться в виде нечитаемых символов.
Скорость загрузки. Если сайт очень тяжелый, страницы грузятся медленно и зависают, то пользователь очень быстро покинет такой ресурс.
Адекватная работа всех кнопок, сайдбаров и других функционально активных элементов. Если при нажатии на определенную кнопку команда не выполняется либо реализуется некорректно, то это означает, что у этого сайта могут быть проблемы с кроссбраузерностью.
Адаптивность под все устройства. Ресурс одинаково хорошо должен отображаться и работать на всех гаджетах – компьютерах, планшетах, смартфонах. В крайнем случае должны существовать специальные мобильные версии сайта.

Согласно данным компании Google, более 70% интернет-трафика сейчас идет через мобильные устройства. С 1 июля 2019 г. индексирование с приоритетом мобильного контента включено по умолчанию в Google Chrome для всех новых сайтов. Это заставляет веб-разработчиков все активнее заниматься обеспечением совместимости страниц с планшетами и смартфонами.

Как браузер читает CSS

В первую очередь вам необходимо знать, каким образом браузер читает CSS код. Делает он это сверху вниз, проходясь последовательно по каждой строчке:

/*Строка 10*/
ul li a {
 color: red;
}

/*Строка 90*/
ul li a {
 color: blue;
}

Правило написанное на строке 10, будет заменено на строке 90. В результате цвет ссылки будет синим. Правила с одинаковыми селекторами, которые находятся ближе к концу файла имеют больший приоритет.

Тот же самый принцип работает при последовальном подключении CSS файлов:

<link href='css/style.css' rel='stylesheet'>
<link href='css/custom.css' rel='stylesheet'>

Выполнение JavaScript

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

События загрузки

После того, как синхронно загруженный JavaScript и DOM будут полностью проанализированы и готовы, будет сгенерировано событие document.DOMContentLoaded. Для любых сценариев, которым требуется доступ к DOM, например, для управления им или прослушивания событий взаимодействия с пользователем, рекомендуется сначала дождаться этого события перед выполнением сценариев.

document.addEventListener('DOMContentLoaded', (event) => {
    // You can now safely access the DOM
});

После того, как все остальное, например асинхронный JavaScript, изображения и т. д., завершили загрузку, запускается событие window.load.

window.addEventListener('load', (event) => {
    // The page has now fully loaded
});

Проблемы в устаревших браузерах и различные подходы к разработке

Адаптивный веб-дизайн во многом зависит от медиа-запросов, с помощью которых изменяется CSS для различных разрешений экрана. Кроме этого современные сайты характеризуются использованием семантических элементов HTML5 (например, <header>, <nav>, <section>, <aside>, <footer>) для группировки компонентов дизайна. Селекторы CSS3 используются для выбора конкретных элементов и дальнейшего назначения стилей (например, , :checked, :nth-child(n), :not(selector), :last-child)). И, наконец, адаптивная типографика часто задается с помощью единиц REM (root em).

Это подводит нас к следующим техническим сложностям при реализации CSS кроссбраузерности:

Медиа-запросы CSS3: не поддерживается в IE6, 7 и 8;
Семантические элементы HTML5: не поддерживается в IE6, 7 и 8;
Селекторы CSS3: не поддерживается в IE6. Только частично поддерживаются в IE7 и 8;
Единицы REM: не поддерживается в IE6, 7 и 8. Только частично поддерживаются в IE9 и 10;
Лимит количества правил CSS: IE9 и ниже поддерживают только 4095 CSS-селекторов. Правила после 4095-ого селектора не применяются.

Указанные выше ошибки будут иметь наибольшее влияние на стратегию, применяемую при реализации адаптивного дизайна.

Существуют две основных стратегии разработки: постепенное упрощение и прогрессивное улучшение.

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

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

Подобный подход при реализации кроссбраузерности предполагает начало разработки с простой версии, к которой затем добавляются более сложные элементы. Старые браузеры смогут отображать сайт с базовым уровнем опыта взаимодействия. А новые функции HTML / CSS / JavaScript будут доступны в браузерах, которые могут реально их использовать.

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

Какой подход выберете вы, зависит от личных предпочтений и условий проекта:

Прогрессивное улучшение обеспечивает большую стабильность, так как вы можете постепенно добавлять новые функции для современных браузеров. Но оно требует более тщательного планирования;
Некоторые разработчики утверждают, что нет смысла поддерживать устаревшие браузеры и должны использоваться новейшие технологии. Поддержка современных браузеров дает намного лучший опыт взаимодействия;
Существует мнение, что прогрессивное улучшение мертво, так как множество JavaScript-приложений не работают надлежащим образом при этом подходе;
Веб-доступность для общественных учреждений может быть определена в юридических требованиях конкретных территориальных образований, и это может повлечь необходимость применения особого подхода.

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

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

Если нужно создать резервный CSS или включить кроссбраузерность JavaScript для ранних версий Internet Explorer, то можете использовать условные комментарии. Они поддерживаются в Internet Explorer 5-9, они используют синтаксис комментариев HTML в сочетании с логическими значениями. В зависимости от логического значения (true или false) код внутри тегов комментариев будет выводиться или скрываться в соответствующих версиях браузера:

<!--> КОД, КОТОРЫЙ БУДЕТ ВЫПОЛНЯТЬСЯ <!-->

// если Internet Explorer 


// если НЕ Internet Explorer 


// если Internet Explorer 7 


// если НЕ Internet Explorer 7 


// если Internet Explorer 9 или НИЖЕ 


// если Internet Explorer 7 или ВЫШЕ


// если Internet Explorer 6 ИЛИ 7 


// если ВЫШЕ Internet Explorer 6 НО НИЖЕ 9

Код автоматически скрывается во всех браузерах, не поддерживающих условные комментарии. Наглядным примером того, как условные комментарии могут быть эффективно использованы на практике, является HTML5 Boilerplate, который добавляет специфические классы CSS для устаревших версий Internet Explorer:

<!-->      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <!--> 
<!-->         <html class="no-js lt-ie9 lt-ie8" lang=""> <!--> 
<!-->         <html class="no-js lt-ie9" lang=""> <!--> 
<!--><!--> <html class="no-js" lang=""> <!--<!-->

CSS Справочники

CSS СправочникCSS ПоддержкаCSS СелекторыCSS ФункцииCSS ЗвукCSS Веб шрифтыCSS АнимацииCSS ДлиныCSS Конвертер px-emCSS Названия цветаCSS Значения цветаCSS по умолчаниюCSS Символы

CSS Свойства

align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
caption-side
caret-color
@charset
clear
clip
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor
direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-weight
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows
hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
left
letter-spacing
line-height
list-style
list-style-image
list-style-position
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
mix-blend-mode
object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y
padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes
resize
right
tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top
transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function
unicode-bidi
user-select
vertical-align
visibility
white-space
width
word-break
word-spacing
word-wrap
writing-mode
z-index

Normalize.css и CSS Autoprefixer

Обычно я начинаю новые проекты в CDN со сброса CSS с помощью Normalize.css, который обеспечивает лучшую кроссбраузерность при определении стилей HTML-элементов, используемых по умолчанию, вплоть до Internet Explorer 8. Normalize.css сохраняет нужные стили элементов, нормализует их внешний вид и исправляет ряд ошибок и несоответствий в различных браузерах.

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

// Webkit-браузеры, такие как Chrome и Safari
-webkit- 
// Firefox
-moz- 
// Internet Explorer
-ms- 
// Opera 
-o-

Проблема заключается в том, что префиксы неудобны в использовании и с ними связано много ошибок. Поэтому я использую плагин CSS Autoprefixer в сочетании с Grunt.

Обычные правила CSS будут обработаны с помощью плагина и к ним будут добавлены префиксы на основе базы данных «Can I Use«. Рекомендуется задать в конфигурации версии браузеров, которые нужно поддерживать, например:

options: {
 browsers: 
 }

В качестве примера рассмотрим следующий класс CSS:

.example { 
    background-image: linear-gradient(top left, #4676dd, #00345b); 
    display: flex; 
    transition: 1s all; 
}

С помощью CSS Autoprefixer он преобразуется в:

.example { 
    background-image: -webkit-linear-gradient(top left, #4676dd, #00345b); 
    background-image: -moz-linear-gradient(top left, #4676dd, #00345b); 
    background-image: linear-gradient(top left, #4676dd, #00345b); 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-transition: 1s all; 
    -moz-transition: 1s all; 
    transition: 1s all; 
}

Заключение

Существуют и другие приёмы и трюки для поддержания кросс-браузерной совместимости, но эта статья должна снабдить вас базовым фундаментом, на котором будут строиться все ваши дальнейшие знания по этой проблеме.

Хорошей идеей является время от времени перечитывать ваш код и проверять его на совместимость с различными браузерами.

Если вы знаете какие-нибудь другие приёмы, которые мы не осветили здесь, или у вас есть комментарии или предложения, мы будем рады их услышать. Пожалуйста, оставляйте ваши комментарии к этой статье.

Вадим Дворниковавтор-переводчик статьи «Simple Yet Important Cross-Browser Styling Tips Everyone Should Know»