Эмуляция интерфейса iPhone с помощью CSS

Некоторое время назад мне потребовалось «красиво» оформить логи бесед в жаббире. Поскольку рисовать я не умею вовсе, я обратился за подмогой к мирозданию. Поиск по готовым решениям открыл для меня малоизвестную, но, безусловно, заслуживающую внимания библиотечку. Строго говоря, это не библиотека. Это тщательно написанная и выверенная каскадная таблица стилей, позволяющая имитировать iPhone-интерфейс в браузерах.
Координатные данные проекта UiUiKit (Universal iPhone UI Kit):

Сайт автора: www.minid.net
SVN URL: code.google.com/p/iphone-universal/source/checkout
Download: code.google.com/p/iphone-universal/downloads/list

Оригинально библиотека заточена под web-приложения именно для iPhone, поэтому всякий CSS3+ ограничивается указанием свойств только для webkit'а. Я пропатчил CSS директивами для остальных и развернул демонстрационную страничку, чтобы можно было сразу потыкать в элементы интерфейса.
Выглядит симпатично (на картинке в начале топика — скриншот моего браузера). Приятного использования!

css
, iphone

+53

5 ноября 2011, 10:47

233

matiouchkine 14,1

комментарии (48)

ertaquo 5 ноября 2011, 11:08 #

А чем оно лучше/хуже jQuery Mobile, iUI и прочих? Например, оно iPhone UI Kit позволяет делать анимацию перехода?

+12

matiouchkine 5 ноября 2011, 11:11 # ↑

Оно не лучше и не хуже. Оно — просто один файлик css, который может быть просто подключен к существующему проекту. Там нет js, поэтому анимацию — вряд ли.

mcslayer 5 ноября 2011, 12:21 # ↑

Если анимацию и остальные «красивости» добавить с помощью css3, то будет еще лучше.

XAMelleOH 5 ноября 2011, 15:58 # ↑

Точно не вряд ли… есть какой-то проект, имитирующий интерфейс iPhone с помощью CSS3.

matiouchkine 5 ноября 2011, 16:19 # ↑

CSS — даже если это CSS100500 — это стилевой пакет атрибутов страницы. С помощью CSS анимацию навигации по страницам сделать не удастся. Поправьте меня, если я ошибаюсь.

beatlejute 5 ноября 2011, 20:04 # ↑

Загуглите css анимация

Zelgadis 5 ноября 2011, 21:58 # ↑

Человек говорит о переходе со страницы не страницу. Без javascript'a это не сделать.

Комментарий не читай
@
Сразу острить начинай

spiff 5 ноября 2011, 11:08 #

Длбавьте к тегу img параметр align = «left» | «right»

matiouchkine 5 ноября 2011, 11:12 # ↑

Спасибо.

RockmanLeto 5 ноября 2011, 11:49 #

Хорошая статья.
Кстати на изображении в топике интерфейс немного напоминает интерфейс китайской копии )

matiouchkine 5 ноября 2011, 11:53 #

Они наверняка тоже пережатый жипегом дизайн получили от заказчика ;-)

Error_403_Forbidden 5 ноября 2011, 12:08 #

А вот там не работает выделение текста. Это баг или фича?
Хотелось бы всё-таки иметь возможность выделять текст.

Andrusha 5 ноября 2011, 12:40 # ↑

В Опере работает, но шрифт с засечками почему-то

–2

matiouchkine 5 ноября 2011, 13:23 # ↑

Упс. И правда. Я посмотрю вечером. Если честно, я совсем не разбирался с кодом.

diamant 5 ноября 2011, 13:55 # ↑

Фича для айфона, чтобы по нажатию на кнопки-ссылки он не выделялись:
-webkit-user-select: none;

Error_403_Forbidden 5 ноября 2011, 14:08 # ↑

На вкладке «About» выделение совсем не помешало бы. Да и не только там

matiouchkine 5 ноября 2011, 14:20 # ↑

s/-webkit-user-select: none; //g

diamant 5 ноября 2011, 14:56 # ↑

сделайте
p{
-webkit-user-select: initial;
}

tenshi 5 ноября 2011, 12:49 #

chatter.mudasobwa.ru/forms.html — тут в хроме косяки с выравниванием текста.

matiouchkine 5 ноября 2011, 14:23 # ↑

У меня под рукой только chromium, там все хорошо. Скриншотик бы.

dimap 5 ноября 2011, 14:51 # ↑

img841.imageshack.us/img841/8913/a4f4f2b26b1f410487ac926.png
И ещё баг с кнопкой Back, как видите. Он на всех страничках.
Chrome Dev 17.0.928.0

matiouchkine 5 ноября 2011, 15:31 # ↑

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

dimap 5 ноября 2011, 15:36 # ↑

Тем не менее, у меня есть подозрение, что на стабильной то же самое…

matiouchkine 5 ноября 2011, 15:54 # ↑

Строка 572: попробуйте с margin-top поиграться.
Для кнопок: в строке 71 нужно line-height, и/или размер шрифта поменьше выставить.

Это из того, что могу сказать наугад. У меня на 14 версии хромиума не воспроизводится.

stell_hawk 6 ноября 2011, 06:51 # ↑

хм. учитывая что проект не обновляется с 2008 года, то о чем речь-то…
и очень умеляет надпись coming soon… которая написанна 2-3 года назад

tenshi 6 ноября 2011, 01:41 # ↑

img-fotki.yandex.ru/get/5412/103756340.0/0_76061_f814924_orig

dimap 6 ноября 2011, 02:06 # ↑

ну, как я и говорил. Разве что в стабильной ветке нет бага с кнопкой «Назад»

resetnow 5 ноября 2011, 13:12 #

Эмуляция — это, конечно, сильно сказано.

matiouchkine 5 ноября 2011, 13:25 # ↑

А как надо сказать, если при помощи css создается некое подобие внешнего вида iPhone? Скорее уж слово интерфейс тут гиперонимично.

Zhendalf 5 ноября 2011, 13:13 #

Как это выглядит на андроиде?

matiouchkine 5 ноября 2011, 13:25 # ↑

Не знаю :-)

Gafs 5 ноября 2011, 13:32 # ↑

Как седло на корове.

a1exDi 5 ноября 2011, 13:54 # ↑

Не знаю, каких результатов вы ожидали, учитывая, что это обычный CSS :) Но если интересно, то:

Zhendalf 5 ноября 2011, 13:56 # ↑

Вебкит вебкиту рознь. А опера — совсем другая история.

matiouchkine 5 ноября 2011, 14:18 # ↑

Спасибо.

NonRealDeveloper 5 ноября 2011, 14:05 #

JQuery mobile — наше всё

CKOPOBAPKuH 5 ноября 2011, 15:50 # ↑

да, но оно же тормозит. то есть, тестовые примеры выложенные на их сайте тормозят и на компьютере, и на всех телефонах, которые попадали мне в руки. айфон, правда, мне не попадал, но на galaxy s тормозят. и на samsung wave тормозят.
это я что-то не так делал и у вас всё нормально, или вы с этим смирились как-то?

Elegar 5 ноября 2011, 14:26 #

Сейчас Apple набежит с вами судиться за использование их дизайна:)

matiouchkine 5 ноября 2011, 14:39 # ↑

Мопед не мой, во-первых. Во-вторых — буду только рад их затроллить до изнеможения.

–1

andoriyu 5 ноября 2011, 22:03 # ↑

> Во-вторых — буду только рад их затроллить до изнеможения.
Так и вижу тебя со слюнями выставляющего самого себя идиотом на публики кричащим БАТТХЕРТ Я ВАС ЗАТРОЛЛЕЛ!!!!!111111111одинодин

Жаль, что я этого не увижу.

matiouchkine 6 ноября 2011, 08:34 # ↑

Мальчик, отойди от зеркала.

Zelgadis 6 ноября 2011, 09:35 # ↑

Всех затроллел. Молодец.

IGHOR 5 ноября 2011, 17:26 #

До сих пор не понимаю зачем в iOS кнопка назад в самом вверху экрана…
Разве это удобно тянуться через весь экран пальцем, держа его в одной руке, к верхнему углу и нажимать кнопку «Назад»?
Намного удобнее разместить ее внизу экрана, а еще лучше хардварную кнопку назад как в WP7 устройствах сделали…