Настройки css для браузеров

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

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

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

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

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

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

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

Курс «Frontend-разработчик»

— Научитесь верстать сайты для всех типов устройств.

— Сможете использовать JavaScript для работы в браузере.

— 77 часов теории, 346 часов практики.

— Выполните 5 масштабных проектов для портфолио.

— Помощь с поиском работы или стажировки.

Курс «веб-разработчик с нуля»

— Научитесь программировать на JavaScript и PHP.

— Сможете создавать сайты и веб-приложения.

— Сможете уверенно работать и с фронтендом, и с бэкендом веб-сервисов.

— Выполните 9 масштабных проектов для портфолио

— Помощь с поиском работы или стажировки.

Курс «PHP-разработчик с нуля»

— Научитесь создавать сайты и веб-приложения на языке PHP.

— Изучите актуальные фреймворки Laravel, Simfony и Yii2.

— 78 часов теории и 361 час практики.

— Вы создадите 5 масштабных проектов для портфолио.

— Помощь с поиском работы или стажировки.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Автор: Guy Routledge

Курс «Frontend-разработчик»

— Научитесь верстать сайты для всех типов устройств.

— Сможете использовать JavaScript для работы в браузере.

— 77 часов теории, 346 часов практики.

— Выполните 5 масштабных проектов для портфолио.

— Помощь с поиском работы или стажировки.

Курс «веб-разработчик с нуля»

— Научитесь программировать на JavaScript и PHP.

— Сможете создавать сайты и веб-приложения.

— Сможете уверенно работать и с фронтендом, и с бэкендом веб-сервисов.

— Выполните 9 масштабных проектов для портфолио

— Помощь с поиском работы или стажировки.

Курс «PHP-разработчик с нуля»

— Научитесь создавать сайты и веб-приложения на языке PHP.

— Изучите актуальные фреймворки Laravel, Simfony и Yii2.

— 78 часов теории и 361 час практики.

— Вы создадите 5 масштабных проектов для портфолио.

— Помощь с поиском работы или стажировки.

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

Источник

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

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

Что такое кроссбраузерность

1. Google Chrome — 40,87%.
2. Яндекс.Браузер — 25,07%
3. Safari — 12,99%.
4. Opera — 4,34%.
5. Android Browser — 3,32%.
6. Mozilla Firefox — 2,60%.
7. Samsung Internet — 2,24%.
8. Edge — 1,93%.
9. MIUI Browser — 1,72%.
10. Internet Explorer — 0,32%.

Зачем нужна кроссбраузерность

1. Сделать работу с сайтом более удобной. Так аудитории будет легче взаимодействовать с контентом и совершать конверсии.
2. Улучшить важный поведенческий фактор — показатель отказов. Он показывает процент людей, которые перешли на веб-ресурс, но посмотрели не более одной страницы. Когда такой показатель высок, поисковики считают сайт непопулярным и снижают его позиции в выдаче.
3. Создать положительный имидж ресурса и бренда. Если элементы сайта везде отображаются корректно, это показывает ответственный подход к делу и вызывает лояльность пользователей.
4. Увеличить целевую аудиторию за счет тех, кто пользуется редкими браузерами.

Необходимость в кроссбраузерности зависит от многих факторов.

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

Бывает немного иначе. Сайт делают для пользователей. Аналитики клиента уже подсчитали, что 99% аудитории пользуется браузером Safari, поэтому руководство компании решило не покупать услугу настройки кроссбраузерности.

А бывает и так, что у клиента нет аналитиков и поэтому он не знает, какой процент аудитории использует тот или иной браузер. Здесь кроссбраузерность будет уместна.

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

Сервисы для определения кроссбраузерности

Browsershots

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

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

Источник