Если однажды дизайнер принесет вам на блюдечке невероятно красивый, сияющий, округлый web-application для IPhone, эта шпаргалка и google помогут вам не ударить в грязь лицом.
Доки и готовые решения
- iphone-universal — Normalized CSS & HTML framework to develop iPhone webdev applications — на самом деле, это во-первых и в единственных — там есть абсолютно все. Можно как использовать библиотеку, так и просто посматривать туда. Но я все-таки перечислю ключевые моменты для удобства.
- Safari CSS Reference — все поддерживаемые webkit свойства (под каждым указано, какая версия движка поддерживает, в том числе, и движка айфона).
- CSS3.info — CSS3 в примерах. Thanks to David Storey.
- CSS3 на W3C — драфт спецификации css3, если уж совсем невмоготу.
Свойства и методы, на которые стоит обратить внимание
- <meta name=”viewport” content=”width=320, initial-scale=1.0, maximum-scale=1.0, user-scalable=0″/> — задает стандартную ширину экрана и запрещает увеличивать и растягивать сайт (для веб-приложений это обычно необходимо, в отличие от простых сайтов).
- размер шрифтов — в пикселах; и — ура! — мы можем использовать очень красивые шрифты типа Helvetica (посмотреть полный список поддерживаемых шрифтов).
- -webkit-box-shadow — создает тень у блока (полное описание свойств, о которых я буду говорить, есть в Safari CSS Reference; не вижу смысла устраивать здесь сеанс копипастинга).
- -webkit-border-radius — скругляет уголки блоку.
- -webkit-background-size — позволяет растягивать бэкграунд, например, качественно растягивает сложные градиенты.
- text-shadow — почему-то дизайнеры любят тексты с тенюшечками; порадуем их.
- background:url(/i/iphone/1.png) repeat-x, url(/i/iphone/1.png) 3px 0 no-repeat; — а это пример multiple background.
- помним про псевдоселекторы (псевдоклассы) :last-child, :hth-child(), :after и прочие — не плодим лишних сущностей в html.
- color:rgba(0,0,0,.80); — задание цвета с альфа-каналом для прозрачности. Работает по всех свойствах, где есть цвет — background, text-shadow и т.п.
- ну и суперхак — чтобы полностью спрятать поле ввода, традиционно надо убрать ему border и background, однако айфон все равно отрисовывает полю внутреннюю тень, даже при background:none. Лечится это следующим правилом: background:url(about:blank);
Как показала моя личная практика, этих свойств вполне достаточно, чтобы реализовать все то сияние, которое намечтал себе дизайнер. Кстати, я использовала в этой верстке reset.css, было и удобно, и обошлось без неожиданностей, так что можете использовать тоже.
С благодарностью Вадиму Макееву, который помогал разбираться в этом мне.
- ~ RSS 2.0
- ~ Комментировать
- ~