CSS от А до Я: как добиться кроссбраузерности

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

Полный видеоурок и его текстовую версию по правилу @supports здесь.

S значит поддержка во всех браузерах

Отслеживать поддержку свойств в браузере нужно постоянно. В сети есть замечательные сайты типа caniuse.com, которые помогают следить за уровнем поддержки свойств, а также потрясающие средства автоматизации, как Autoprefixer. С Autoprefixer вам больше не нужно будет вручную писать вендорные префиксы.

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

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

Не беспокойтесь об анимации и плавных переходах

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

Если начальное состояние анимации не передвигает элемент за пределы экрана или не делает его невидимым (например, opacity: 0), то нас не волнует тот факт, что элемент перестанет двигаться в старых браузерах.

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

Не беспокойтесь о легких трансформациях

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

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

Не беспокойтесь о полупрозрачных цветах

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

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

В случае с анимацией или трансформацией у нас нет другого выхода. Хотя можно использовать GIF анимацию в зависимости от обстоятельств. Но в некоторых случаях отсутствие поддержки приводит к тому, что перед пользователем открывается пустая страница. Если вы поддерживаете IE8, то ваш случай как раз подходит под полупрозрачные цвета.

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

Если вы хотите сделать фон background элемента полупрозрачным красным, вы можете сначала задать обычный цвет, а ниже переписать его полупрозрачным.

Старые браузеры увидят первое объявление и распознают красный цвет. Следом они увидят второе объявление (которое должно переписать первое), но они не поймут его значения. Браузеры посчитают второе объявление background неправильным и оставят цвет красным.

Техника подходит для прозрачных цветов, градиентов, скругленных углов, rem единиц и много другого. Довольно простая концепция.

Так о чем же нужно беспокоиться?

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

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

Разборчивость текста имеет важное значение. Не так давно я пробовал прочитать статью с хорошим серым шрифтом на светло-сером фоне. Мне пришлось повозиться с панелью разработчика и повысить контрастность, чтобы я смог нормально читать контент!

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

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

Автор: Guy Routledge

Источник: //www.sitepoint.com/

Редакция: Команда webformyself.

Комментарии Вконтакте: