Css хак для iphone

iPhone 4 на CSS3 без использования картинок

Предисловие

Несколько недель назад в просторах интернета я увидел очень заинтересовавшую меня вещь — iOS иконки на CSS3 полностью без картинок. Первое что подумал — «Я тоже так могу»! А спустя еще 5 минут для себя четко решил — «challenge accepted». Но чтоб не повторяться я решил немножко усложнить задачу — сделать не только иконки, но и сам девайс.

Постановка задачи

Итак, в тот-же день я решил сделать iPhone4 на CSS3 абсолютно без картинок, base64, canvas или SVG и добавить еще некоторую изюминку — интерактивные возможности:
— включение/выключение;
— блокировка при включении и разблокировка как в реальном iPhone;
— анимация «slide to unlock» текста на экране блокировки;

Используемые технологии

Интересные и необходимые технологии CSS3, которые и обрисовали всю картину без графики:
— border-radius для скругления уголков практически всех составляющих элементов устройства.
— box-shadow для создания как внешних так и внутренних теней элементов.
— background: linear-gradient и background: radial-gradient — создание большинства цветных заливок иконок и бликов.
— background-size — для создания полосатого фона у иконок Message и Phone;
— transform: rotate, skew, scale — трансформирование некоторых составляющих иконок, для создания максимально схожих к идеалу картинок;
— before и after псевдоэлементы — для минимизации HTML кода;
— :nth-child(n) — для выборки n-го элемента в динамике и некоторых иконках типа App Store и iTunes, содержащих одинаковые внутренние элементы c небольшим отличием примерно в 1-м или двух свойствах.

jQuery + jQuery UI

Из этой технологии не использовалось практически ничего уникального. Набор animate() функции для анимации «slide to unlock», вылета иконок и убирания панелей блокировки при разблорировке, draggable эффекта для слайдера при разблокировке.
Стиль написания самого скрипта унаследован у Html5BoilerPlate.

В HTML я не стал использовать кастомные теги, хоть это и позволено, а просто использовал в основном div, hr, b, и списки.

Куски кода

HTML cтруктура iPhone

CSS3 интересные части

(Полный CSS код приводить было бы не уместно, так как там всего-то 3395 строчки кода)

Иконки

Все иконки заключаются в контейнеры с классом «icon», дабы их можно было безболезненно переставлять местами в коде по надобности и чтоб задать сразу им обрамительный единый стиль с тенью и названием.

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

для дока немного другой случай позиционирования:

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

jQuery интересные части

Как я уже и говорил — взял стиль написания скрипта у html5BoilerPlate. Все настройки, возможности и состояния iPhone описаны в одном объекте. Структура объекта iphone:

Обработка процесса «Slide to unlock»

Что получилось

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

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

Увы этот пункт наверное самый печальный. iPhone4 на CSS3 отлично работает в WebKit браузерах Safari и Chrome под Mac OS X (в Windows возможно неправильное отображение иконки Phone), так же правильно отображается в последних Firefox и Opera. Для iOS устройств пришлоcь выключить анимацию «slide to unlock», которая очень сильно замедляла страницу в браузере устройства. Что касается Internet Explorer — приношу ему свои извинения.

Источник

CSS и iOS Safari

Доброго времени суток, дорогие хабрахабровцы!

Всегда хочется, что бы твой сайт выглядел одинаково хорошо на разных устройствах, включая и мобильные. Но, если поведение в браузерах Android во многом предсказуемо, то с iOS возникает ряд «сюрпризов». О них сегодня и поговорим!

Часть примеров уже публиковалась на Хабре, но я все-равно решил включить их в статью. Разделю статью на две части. В первой – приведу список полезных css-свойств для webkit, а во второй поговорим о фиксах проблем, возникающих при версте для iOS Safari.

Свойства

1. -webkit-overflow-scrolling: touch

Это css-свойство добавит плавный скролл в блоках с overflow: scroll. Рекомендую добавлять это свойство везде, где внутри блока может возникать прокрутка, к примеру, в мобильном меню.

2. -webkit-text-size-adjust: none

Отключает масштабирование текста в горизонтальной ориентации.

3. -webkit-tap-highlight-color: #ccc

Устанавливает цвет выделения активного элемента при тапе на нем (a, label). По умолчанию это серый цвет, и часто может быть ни к чему, или выбиваться из общего дизайна.

Пример такого выделения:

4. -webkit-appearance: none

Отключает наложение на элементы стилей системы: тени, border-radius и т.д. Применяется для input (но не всех), textarea, и т.д. Удобно, когда надо задать единый вид элементов на всех устройствах.

Применяется не только в верстке для Safari.

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

Можно использовать не только в верстке для Safari.

Фиксы

1. background-attachment: fixed

Проблема: background-attachment: fixed не работает в iOS Safari.

Решение: Фиксировать не фон, а блок или псевдоэлемент.

2. Нежелательный скролл модального окна

Проблема: Это довольно редкий случай, но для общей информации, думаю, так же полезно будет знать о нем. Если модальное окно имеет собственную прокрутку и в закрытом состоянии просто установлен отрицательный z-index (и, к примеру, opacity: 0) — то при попытке скролла страницы, модальное окно может перехватить скролл. В результате чего не будет осуществляться прокрутка страницы.

Решение: Добавляем pointer-events: none к модальному окну в закрытом состоянии.

3. Пропадание меню при скролле
Для того, что бы меню «прилипало» к верхней границе экрана при скролле страницы, часто используют следующий прием. Изначально у меню установлено свойство position: absolute, и при достижении верхней границы окна, через js оно меняется на fixed. А при скролле страницы к началу, значение опять меняется на absolute.

Проблема: В Safari на iOS, при смене position с fixed на absolute, меню пропадает с экрана пока скролл не завершится.

Решение: Использовать для меню position: -webkit-sticky. Поведение меню будет сравнимо с вышеописанным, но пропадать ничего не будет! Плюс, не надо использовать js

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

4. Блок с position: fixed при скролле

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

Проблема: При скролле в браузере изменяется высота экрана. Отсюда, если при раскрытом меню или модальном окне не блокировать скролл, возникает подобный эффект:

Решение: Нужно сделать следующий «трюк», используя transform.

Величина в 70px покрывает разницу в изменении высоты окна. И только transform позволяет прорисовывать фон элемента за пределами экрана в данной ситуации.

Выводы

А выводов особо нет, просто пользуйтесь ) Если знаете еще полезные css-свойства или «фиксы», применимые на практике, пишите в комментариях!

Спасибо за внимание!

Update
В свойствах изменен пункт 5. Т.к. media (hover) имеет узкую поддержку. Спасибо dom1n1k за ценное замечание.

Источник

CSS хаки

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

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

Хак — исправление ошибки или добавление новой функции посредством использования другой недокументированной или некорректно реализованной особенности. (с) Lurkmore

Грязный хак — это быстрое решение какой-либо проблемы, в основном в краткосрочной перспективе, лишающее сущность код внутренней красоты и дисгармонирующее с её внутренним устройством. (с) Lurkmore

CSS-хаки для браузера Internet Explorer

ZOOM:1 :
Хак, предназначенный для определения hasLayout

PNG в IE6 :
Для IE6 подключается htc-файл iepngfix.htc, для правильной работы фоновых изображений формата PNG для всех элeментов, в файле cssf-ie6.css. Используется IE PNG Fix v1.0 RC4 последней версии.

Если важны байты есть пример использования фильтра для IE:

Отделение стилей от IE6 :

Отделение стилей от IE6 и IE7 :

Отделение стилей от IE6 — IE8 :

Conditional comments в IE :
Условные комментарии работают только в IE под Windows, для других браузеров они являются обычными комментариями, поэтому их можно безболезненно использовать. Синтаксис такой:

Conditional comments в IE6, IE7, IE8 :

Box Model хак :
В IE существуют глюки, когда border и padding включаются в ширину элемента. Box Model хак фиксит их.

Min-width и max-width в IE :
IE не понимает эти свойства css. Хак для блока выглядит так:

Простые селекторы:
Не обязательно создавать отдельный файл для разных браузеров. Можно использовать индивидуальные css-селекторы в основном css-файле:

Грязные хаки для IE6 :

Грязные хаки для IE7 :

Грязные хаки для IE8 :

Грязные хаки, работающие в IE6 и IE7 :

Источник

CSS Hack to Target Anything but iOS (Androids, but not iPads/iPhones)

I have been working on finding a way to target Androids or iPads/iPhones (separately) and this one I have worked out appears to do the job nicely.

If your device is not responding, it could be your browser or your device are out of date. While not required for the base css hack, both device AND browser must respond with device pixel ratio > 1 to be rendering in hi-def modes. Check your browser here, and check your device at atmedia.info or at mqtest.io. The CSS below include the necessary stats.

This one is one I just made this weekend. It targets webkit (chrome/safari/android browser) but this one segregates itself from iOS devices. In other words, this one works on Android and Desktop/Laptop devices but not on iPad/iPhone.

Chrome on the iOS device I have (an iPad mini) uses the Safari engine, and responds like Safari, not like Chrome but still gets blocked on iPad via this hack. However, testing ‘Puffin’ on Android and iPad shows that Puffin (flash enabled web browser) responds like Chrome is supposed to — how it works on an Android device, and works the same on both types of devices, but does not report pixel ratio > 1 so it acts like a desktop browser. Puffin is NOT blocked on iPad via this hack, but Chrome and Safari are.

Please note: Android version 4 does NOT mean you have Android Browser version 4… I have seen Android versions 4 and above using Android Browser version 1. If your OS is up to date, but your browser is NOT up to date, it will not work for you. If you are unsure, check your user agent string, or simply go to whatismybrowser.org to tell you about your device and browser.

The tests are from many devices, running Android OS 4.0.1 and newer. It probably will work on 4.0.0 as well, but I have not tested on that version of the Android OS at this time.

If you wish to target hi-def mobiles, but not desktops/laptops:

Or conversely, if you wish to avoid hi-def mobiles but target desktops
(and old non-hi-definition mobiles) this should do the trick:

Here is one for Safari 8 (non-iOS/non-mobile version)

This one is only for Safari 6.1 and 7 (non-iOS as well so it would also not be for mobiles)

The basic underscore hack is based on my previous hacks for Internet Explorer 10+ and 11+. Any Internet Explorer hack will of course not be iOS hacks, but they are included here for the fact that they are siblings.

Both Internet Explorer and Firefox are non-iOS, so for Firefox
you have the same result by default using this method to target Firefox:

Источник

Расширенный сборник CSS-хаков

Статья является расширенным сборником CSS-хаков в сравнении с аналогичной статьей.
Под хаком подразумевается метод, позволяющий воспринимать CSS только определенному браузеру.
Хаки могут использоваться не только для исправления багов в верстке, но и в случае использования определенных особенностей браузера для ускорения рендеринга web-страницы в нём (к примеру CSS3-свойства)

Всем известные Conditional comments в IE

link href =»styles.css» rel =»stylesheet» media =»all»/> — [ endif ] — >

Другие хаки для IE

В случае если у html-страницы есть доктайп, этот хак работает только для IE6.
В случае quirks-mode, хак работает в IE6 и IE7.

В случае, если у html-страницы есть доктайп, этот хак работает в IE7.

Грязные хаки, работающие только в IE6

Грязные хаки, работающие только в IE7

Грязные хаки, работающие в IE6 и IE7

Хак, работающий в IE6 и IE7 по аналогии со свойством !important.

Грязный хак для IE6, IE7 & Safari

Нюанс — в Google Chrome 2 не работает. Хак пригождается в общем для IE css-файле, когда нужно отделить стили от 8-ки

Грязный хак для Safari 3

Также не работает в Chrome 2. О причине использования такого хака и о других хаках для сафари можно узнать здесь.

Грязный хак для FF2, FF3

Грязный хак для FF2, FF3 и IE7

Грязный хак для FF3 и IE7

Грязный хак для Opera 9.5 и IE7

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

Хак для FF2, FF3, Safari 3, Chrome 2, Opera 9.5

Хак для Safari 3 и 4!, Chrome 2

Хаки для Safari 3, Chrome 2, Opera 9.5

Хак для FF2, FF3, Safari 3 и Chrome 2

Этот хак может быть использован к примеру, если вы хотите для Safari и FF сделать скругленные уголки при помощи CSS, а для остальных браузеров хотите, чтобы было картинками.

Отделение стилей от IE6

link href =»styles.css» rel =»stylesheet» media =»all»/> — [ endif ] — >

Отделение стилей от IE6 и IE7

Отделение стилей от IE6-8

Об отделении стилей для IE

А затем дополнительно отделяю хаками * html и *+html стили для IE6 и IE7 соответственно. Оставшиеся стили получаются для всех IE.

Изменение рендеринга IE8

meta http-equiv =»X-UA-Compatible» content =»IE=8″/>

Основные значения content следующие (взято отсюда):

• «IE=7» — включает режим Strict в котором рендерятся все страницы;
• «IE=EmulateIE7» — включает режим совместимости с IE7, в котором в зависимости от DOCTYPE будет применяться либо стандартный для IE7 режим рендеринга (Strict), либо quirks-режим (Quirks);
• «IE=EmulateIE8» — страница форсируется в режим «IE8 Standards» вне зависимости от того, включен ли режим совместимости «Compatibility View» в браузере пользователя, а quirks-страницы отображаются в Quirks-режиме.
• «IE=8» — включается режим максимального соответствия стандартам «IE8 Standards».

В случае нежелания переписывать старые проекты под IE8 — вы можете воспользоваться IE=EmulateIE7

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

Источник