Как сделать стили только для safari
Обновлено: 05.07.2024
Хаки в вёрстке web-страниц вообще лучше не использовать. Но, раз они есть, грех о них не знать. Тем более, в некоторых случаях это оправдано при использовании определенных особенностей браузера для ускорения рендеринга web-страницы.
Хаком — это метод, позволяющий воспринимать CSS только определенному браузеру.
Хаки могут использоваться не только для исправления багов в верстке, но и в случае использования определенных особенностей браузера для ускорения рендеринга web-страницы в нём (к примеру CSS3-свойства).
Conditional comments в IE
Несмотря на известность, в них есть много редко используемого. Например таблица стилей, которая будет видна всем браузерам, кроме IE версий 5-8.
Conditional comments для 6, 7, 8 версии (8я версия тоже их поддерживает — не удивляйтесь).
Только IE
В случае если у html-страницы есть доктайп, этот хак работает только для IE6. А в случае quirks-mode, хак работает в IE6 и IE7.
В случае, если у html-страницы есть доктайп, этот хак работает в IE7.
Только IE6
Только IE7
Только IE8
IE6 и IE7
Хак, работающий в IE6 и IE7 по аналогии со свойством !important.
IE6, IE7 & Safari
! в Google Chrome 2 не работает. Хак пригождается в общем для IE css-файле, когда нужно отделить стили от IE8.
Небольшое дополнение к предыдущей заметке на тему CSS хаков для разных браузеров и их версионной фрагментации. По какой-то причине, при ее написании, мне не удалось найти рабочих хаков для движка Webkit, лежащем в основе браузеров Safari и Chrome.
Раньше Safari не пользовался большой популярностью. Сейчас на ситуацию оказывает большое влияние развитие рынка мобильных устройств. Как известно, многие мобильные платформы используют Webkit в качестве браузерного движка. И сюда относится не только линейка гаджетов от Apple, но и популярные Android устройств, а также смартфоны на базе Samsung Bada.
Еще ситуацию подогревает и тот факт, что Webkit поддерживает массу экспериментальных CSS3 свойств, дающих верстальщику новые возможности.
Рассмотрю два варианта адаптации стилей под Chrome и Safari: вендорные префиксы и CSS хак.
Вендорные префиксы – Vendor prefixes
Прежде всего, если необходимо скорректировать поведение стилей для Safari или Chrome, рекомендую поискать требуемое свойство с вендорным префиксом.
Например, webkit поддерживает свойство -webkit-margin-start и -webkit-padding-start , которые эквиваленты margin-left и padding-left соответственно. Разница лишь в том, что для письма справа-налево, вендорные свойства будут работать с зеркальным эффектом. То есть, например, -webkit-margin-start будет задавать отступ справа.
Пример:
Вендорные свойства отсутствуют в спецификациях, поэтому делают CCS код невалидным.
Полный список доступен в Safari CSS Reference. К слову, для FireFox есть аналогичный документ, который называется Mozilla CSS Extensions.
В дополнение к теме вендорных свойств, настоятельно рекомендую ознакомиться с обзором от автора, с именем Peter Beverloo — Vendor-prefixed CSS Property Overview. Очень полезная таблица, в которой, не сомневаюсь, можно найти много интересного.
Если префиксованых свойств недостаточно, то можно использовать следующий css хак.
Работает во всех версиях Safari и Chrome, что мне попадались. Какие-то совсем древние версии этих браузеров я не тестировал, конечно, но не думаю, что сейчас это может быть актуально.
Комментарии (1)
В борьбе с префиксами может сильно помочь автопрефиксер, он обрабатывает css, удаляет ненужные вендорные префиксы и дописывает те, которых не хватает.
Обзор html мата-тегов для браузеров Safari на платформах Mac OS X и iOS.
Apple Touch Icon
Иконка сайта в iOS на экране закладок и домашнем экране.
Иконки разных размеров указываются атрибутом sizes :
Apple Touch Icon Precomposed
Тоже самое что и apple touch icon , но с наложенными эффектами в стиле iOS с закругленными углами и т.д.
Mask Icon
Используется в MacOS при сохранении сайта на рабочий стол. Элементы SVG должны быть черного цвета, цвет задается атрибутом color .
Apple-Mobile-Web-App-Title
При добавлении сайта на домашний экран в iOS задает имя иконки.
Apple-Mobile-Web-App-Capable
Хотя настройки окна просмотра, являются важным средством для оптимизации веб-контента для iOS, таблицы стилей представляют дополнительные методы оптимизации. Например, можно использовать iOS CSS расширения для управления изменением размера текста и элементов подсветки. Если вы используете условные CSS, то вы можете использовать эти параметры, не затрагивая того, как другие браузеры отображают веб-страницы.
Опирайтесь на свойства CSS3
Есть много свойств CSS3, доступных для использования в Safari десктоп столе и iOS. CSS свойства, которые начинаются с -webkit- обычно предлагают свойства CSS3 или Apple расширения CSS. Например, вы можете использовать следующие свойства CSS для имитации пользовательского интерфейса iOS:
Настройка размера текста
В дополнение к управлению окном просмотра, вы можете контролировать размер текста, который Safari на iOS использует при визуализации текстового блока.
Настройка размера текста важна, чтобы текст был разборчивым, когда пользователь выполняет двойное нажатие. Если пользователь выполняет двойное нажатие на HTML блочный элемент, такой как
- Safari на iOS масштабирует область просмотра, чтобы она соответствовала ширине блока в видимой области. Когда веб-странице отображается, Safari на iOS получает ширину блока и определяет соответствующий масштаб текста, чтобы текст был разборчивым.
Если автоматическая регулировка размера текста не работает на веб-странице, то вы можете отключить эту функцию или задать свой собственный масштаб в процентах. Например, текст с абсолютном расположением элементов может выйти за границы окна просмотра после регулировки. Другие страницы, возможно, потребуют несколько небольших изменений, чтобы они выглядели лучше. В этих случаях, используйте CSS свойство -webkit-text-size-adjust для изменения настроек по умолчанию для любого элемента, который отображает текст.
Сравните веб-страницы, показываемые Safari на iOS с -webkit-text-size-adjust установленым в auto , none и 200% . На iPad, значение по умолчанию для -webkit-text-size-adjust none . Для всех других устройств, значение по умолчанию auto .
Чтобы выключить автоматическую регулировку текста введите -webkit-text-size-adjust с none , как показано ниже:
Для регулировки масштаба текста на 200% введите:
Установка этого свойства для различных типов блоков с помощью встроенного стиля в HTML.
Подсветка элементов
По умолчанию, когда пользователь нажимает на ссылку или JavaScript интерактивный элемент, Safari на iOS выделяет область, в прозрачный серый цвет. Используя -webkit-tap-highlight-color CSS, вы можете либо изменить, либо отключить это поведение по умолчанию на веб-страницах.
Синтаксис задания этого свойства CSS:
Это унаследованное свойство, которое изменяет цвет в момент прикосновения, управляя значением альфа. Если вы не укажете значение альфа, Safari на iOS применяет значение альфа к цвету по умолчанию. Чтобы отключить подсветку касания, устанавливаем альфу в 0 (невидимый). Если вы установите альфа в 1.0 (непрозрачный), то элемент не будет виден при касании.
Использование значения альфа 0.4 для пользовательского выделения цветом показанного справа на рисунке ниже:
Вы также можете использовать CSS-свойство -webkit-tap-highlight-color в сочетании с установкой события сенсорного экрана для настройки поведения кнопок, как на десктоп системе. На iOS, события мыши передаются так быстро, что down или active состояние никогда не будет получено. Поэтому псевдо состояние active: срабатывает только тогда, когда установлено событие прикосновения на элемент HTML - например, когда установлено ontouchstart на элементе следующим образом:
Теперь, когда нажата и удерживается кнопка на IOS, кнопка изменяется в указанный цвет без окружающего прозрачного серого цвета.
2017-07-11 в 13:20, admin , рубрики: css, css3, iOS, safari, Safari для iOS, web, webkit, разработка под iOS
Доброго времени суток, дорогие хабрахабровцы!
Свойства
1. -webkit-overflow-scrolling: touch
Это css-свойство добавит плавный скролл в блоках с overflow: scroll. Рекомендую добавлять это свойство везде, где внутри блока может возникать прокрутка, к примеру, в мобильном меню.
2. -webkit-text-size-adjust: none
Отключает масштабирование текста в горизонтальной ориентации.
Устанавливает цвет выделения активного элемента при тапе на нем (a, label). По умолчанию это серый цвет, и часто может быть ни к чему, или выбиваться из общего дизайна.
Пример такого выделения:
4. -webkit-appearance: none
Отключает наложение на элементы стилей системы: тени, border-radius и т.д. Применяется для input (но не всех), textarea, и т.д. Удобно, когда надо задать единый вид элементов на всех устройствах.
Применяется не только в верстке для Safari.
5. media not (hover)
Данный медиа-запрос позволит отдельно прописывать стили только для устройств, поддерживающих hover. Таким образом, на тач-устройствах не будут возникать лишние анимации, ненужные данным типам устройств.
Можно использовать не только в верстке для Safari. Применять в обратную сторону (т.е. media (hover)) можно, но с осторожностью из-за ограниченно поддержки браузерами.
Фиксы
1. background-attachment: fixed
Проблема: background-attachment: fixed не работает в iOS Safari.
Решение: Фиксировать не фон, а блок или псевдоэлемент.
2. Нежелательный скролл модального окна
Проблема: Это довольно редкий случай, но для общей информации, думаю, так же полезно будет знать о нем. Если модальное окно имеет собственную прокрутку и в закрытом состоянии просто установлен отрицательный z-index (и, к примеру, opacity: 0) — то при попытке скролла страницы, модальное окно может перехватить скролл. В результате чего не будет осуществляться прокрутка страницы.
Решение: Добавляем pointer-events: none к модальному окну в закрытом состоянии.
Проблема: В Safari на iOS, при смене position с fixed на absolute, меню пропадает с экрана пока скролл не завершится.
Решение: Использовать для меню position: -webkit-sticky. Поведение меню будет сравнимо с вышеописанным, но пропадать ничего не будет! Плюс, не надо использовать js
К слову, значение sticky для свойства position сейчас поддерживается большим количеством браузеров, поэтому его можно использовать и в десктопных браузерах.
4. Блок с position: fixed при скролле
Если реализации решений предыдущих проблем я видел на некоторых сайтах, то данная проблема на сайтах встречается постоянно.
Проблема: При скролле в браузере изменяется высота экрана. Отсюда, если при раскрытом меню или модальном окне не блокировать скролл, возникает подобный эффект:
Величина в 70px покрывает разницу в изменении высоты окна. И только transform позволяет прорисовывать фон элемента за пределами экрана в данной ситуации.
Выводы
Спасибо за внимание!
Update
В свойствах изменен пункт 5. Спасибо dom1n1k за ценное замечание.
Читайте также: