Добавление css-стилей для мобильного Safari

offtop

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

Мне очень повезло, что у нас в офисе был старенький Mac mini. Потому что только благодаря ему я смог подключиться к своему айфону и через веб-инспектор найти нужный мне элемент. Вот же геморрой на голову разработчиков — открыв safari в айфоне инструменты разработчика не выйдет. Можно только если подключите к IMac или MacBook, ну к компу, на котором стоит операционная система Mac OS.

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

Как точечно добавить стили только для мобильного Safari? Давай разберемся какие данные у нас есть на входе:

готовый CSS-код, который должен применяться только при определённом условии — когда сайт просматривают с мобильных устройств через Safari. В остальное время этот CSS не должен применяться.

Как я решил поставленную задачу

В интернете удалось найти хороший блок кода, содержащий в себе проверку клиента = браузера, в котором просматривают сайт.

/^((?!chrome|android).)*safari/i.test(navigator.userAgent)


Дальше я написал условие, при выполнеии которого для тега <body> добавляется css-class custom-safari.

if (/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
document.body.classList.add('custom-safari');
};

Ну и в завершении просто добавил соответствующие параметры в стилевой CSS-файл.

.custom-safari .lg-video {
	padding-bottom: 200vh;
	color: #ffffff;
}

В результате я реализовал правку и закрыл поставленную задачу

Какие ошибки я допускал при выполнении этой задачи

Я перемудрил с реализацией кода. Пытался добавить css-стили для нужного мне DOM-элемента через JavaScript. Мне не удалось это реализовать, так как мои стили перебивались другими стилями, которые аналогично добавлялись через JS, но только другими скриптами.

Оцените статью
Code4web
Добавить комментарий