Пример — часы на СSS3 без изображений и JavaScript

[Efsi]

У вас секундная стрелка не симметрична (Safari). Когда 0 или 15/30/45 секунд очень заметно.

[rassadin]

Да, я посморел сейчас под макосью. Тот пример, что на github.com лежит — загружается в немного кривом состоянии.
Если пощелкать немного приходит в нормальное. Попробую понять как поправить.

[MikeLP]

Ага… и горизонт завален. А вообще я охренел от этого примера! Это крутотень!!!

[whybenormal]

Это бесподобно! Перед тем, как прочел статью, сразу посмотрел пример. И первый вопрос возник: Как в css определить текущее время!? Конечно же, пара строчек javascript это не кошерно, но сервером генерить css-ку — это, как мне кажется, еще более не кошерно. Зато в заголовке можно смело указывать «без javascript». Видимо, причина не использовать JS таится только в красоте заголовка.

[rassadin]

Ничего подобного.
Есть какие то правила которые устанавливаешь для себя и потом их придерживаешься. Вот и все.

Та же история например с логотипом CSS3. Захотелось вставить на страницу, но поскольку установил для себя не использовать графику, пришлось реализовать средствами CSS

[whybenormal]

Да хоть ascii-артом, вопрос в том. Имеет ли это смысл с точки зрения пользователя, не учитывая личных пунктиков разработчика?

«поскольку установил для себя не использовать графику» — на то были причины, или опять таки, личное?

[tagir_valeev]

Так неплохо, если не обращать внимания, что один процессор съедается на 100% :-)

[bolk]

Сафари, МакОС, не вижу никакой новой нагрузки на процессор при открытии примера.

[ghosthope]

Win 7 Pro x64 один проц забивается процентов под 80-90.

[jekakmail]

Win 7 HB x64 — 30-40, браузер Google Chrome.

[loststylus]

OS X, Chrome, 6-8% (google chrome renderer)

[xaoc80]

ubuntu 12 64, firefox — 80% загрузки на процессоре

[ghosthope]

Да, тоже в FF такая загрузка.

[usualdesigner]

В FF редко когда бывает меньше

[TheShock]

Вы не правы

[RedFox]

Win 8, Chrome — всего 8% и то не факт, что от часиков.

[TheShock]

Сафари, МакОС, не вижу никакой новой нагрузки на процессор при открытии примера.

Зависит от драйверов на видяху

[IvanFF]

С сервера открываете? Или все же ядро?

[anmi]

Ubuntu, голый chromium. Одно ядро на 69%

[cbone]

У меня куллер на повышеных оборотах закрутился после открытия вкладки. А пример Очень крутой.

[Renius]

Ipad3 chrome.
При попытке проскролить часы замирают.
Практически — не применимо, академически — просто офигенно.

[rassadin]

Практически все доводиться до ума при возможности и необходимости :)

[bolk]

При попытке проскроллить в АйОсе замирают процессы отрисовки, недавно на «Хабре» статья была хорошая про тормоза «Андроида», там это разбиралось. Это by design.

[rassadin]

Я несколько «оптимизировал» пример.
У меня в эмуляторе теперь процессор не загружается на все 100%.
Думаю и у вас должно быть хорошо.

[Anexroid]

Охренеть. Больше слов нет. Да, баги есть, но это всё равно очень круто. Спасибо вам.

[open4]

Да, как живые, даже лучше — на моих секундной стрелки нет =) img-fotki.yandex.ru/get/4122/59225420.3/0_ac398_b82b16a6_XL.jpeg.jpg

[mapron]

И Ваши отстают на час =)
А так аж мурашки от сходства. От осознания что со времен ACID1 браузеры научились куче разных штук.

[sergonavt]

(риторический вопрос) Мне одному кажется, что развитие CSS пошло куда-то не туда?

(вопрос к автору) Сколько времени заняла у Вас разработка этих часов? Без учёта «изучения фотографий для правдоподобного хромирования». Хотя бы примерно — 2 часа, 8 часов, 20 часов, 80 часов?

[rassadin]

(ответ на вопрос мне лично) Сама собственно база за полдня сделана — она достаточно простая.
А вот с рамкой, да совместимость под разные браузеры, еще часов 20 наверное ушло. да, похоже на то.

(попытка ответа на риторический вопрос) CSS страшно гонят Apple да Google.
Уже можно посмотреть что ждет в будующем.
Из хорошего — текстовые регионы и обработка корректного заполнения форм.
Из сомнительного — шейдеры.
Как по мне так я думаю в перспективе CSS должен впитывать в себя все типовые задачи по оформлению UI,
которые сейчас решаются через JS. И это правильно.

[lavmax]

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

[eyeless_watcher]

Надолго оставлять пробовали? Рассинхрон стрелок будет, как мне кажется, из-за задержек между последовательными анимациями секундной стрелки.

[boodda]

после 5 минут созерцания, все стрелки разъехались и вывалились из циферблата)
WinXP, Opera последняя на сегодня

[rassadin]

Да, опера, звездец какой пучок багов, так что не обессудьте — все-таки это эксперимент, а не продакшн… :)

[SowingSadness]

Очень заинтересовала деградация с IE9 до IE10
Где в MS накосячили?

[aszhitarev]

На все вопросы «Но зачем?» отвечайте — потому что могу.
Автор, Вы — круты.

[ZAZmaster]

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

[lampa]

Время задается с помощью предустановленных углов поворота стрелок, автор же целый абзац на это отвел!
Вот, смотрите: tezla.ru/rassadin/wall-clock-demo/

[Forx]

Если я правильно понял, то проблемы с округлением при отрисовке меток в 25-ом хроме уже нет. По крайней мере их располагаются они нормально.

[shushu]

Ачууметь!
Мисье знает толк в извращениях! :)
Но действительно не понятно почему такая нагрузка.

PID USER      PR  NI  VIRT  RES  SHR S %CPU %MEM    TIME+  COMMAND                                                                                        
8345 shushu    20   0  212m  48m  30m R   84  1.4   0:30.59 chrome  

[dimmaq]

Странно, открыл одновременно в ie10, chrome, fx20 — не больше 5% cpu каждый браузер съел, т.е. ничего. Система win7 x64

[TheShock]

Но действительно не понятно почему такая нагрузка.

Аппаратное ускорение не включено)

[gro]

JavaScript, но это было бы не кошерно. Поэтому установкой времени занимается серверный скрипт

На сервере-то Гринвич :'(

[rassadin]

На сервере GMT устанавливается просто потому, чтобы быть политически нейтральным :)
А так хоть в Петропавловске Камчатском можно генерировать.

Хотя все-таки по честному локальное время на клиенте без JS нормально не получить.
Хотя можно конечно базу IP->Timezone прикрутить и пытаться пользователям их локальное определять.

[ZAZmaster]

Так может всё-таки поступить «не кошерно» и сделать на JavaScript? В таком случае пользователь который откроет страничку с часами увидит своё время =)

[hugrid]

Ух ты, они не только офигительны, но еще и время правильно показывают!

[TheShock]

Делали бы на Canvas — не знали бы проблем.

[gasizdat]

Пример безусловно крут и вызывает уважение. Однако мне чем дальше, тем больше кажется, что CSS3 это просто жесть. Мало того, что поддержка этого дела почти не реальна (вот вспомнит ли даже сам автор через год-другой, за что сей кусок отвечает:

.mr {
	width:0.5em;
	height:0.5em;
	background:#222;
	margin:-1.05em 0 0 3.74em;
	border-radius:0.25em;
}

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

[TheShock]

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

[rassadin]

Вы правильно заметили проблему вызывавшую снижение производительности,
и чтобы её обойти, я был вынужден заменил линейную анимацию на апроксимацию (см текст выше)

Но источник проблемы не в том, что я использую linear, а в том, что «браузер думает, что происходят» (изменения).
Фактически браузер, в отличии от отрисовки кодом в Canvas, имеет доступ к информации на предыдущем кадре, и может отслеживать и отрисовывать только изменения.

У Flash например с этим все впорядке, у CSS анимации с этим, как мы видем, все не очень хорошо.
А сложить два числа (две функции анимации) 60 раз в секунду, не должно вызывать таких больших проблем.

Я последние лет пять занимался ресурсоемком сложным графическим интерфейсов, и немножко отражаю что такие вопросы по оптимизации должны решаться исключительно движком, а не накладывать ограничения на возможности.

[TheShock]

Ну я так понимаю, изменения на самом деле есть, но они стремятся к нулю.

А сложить два числа (две функции анимации) 60 раз в секунду, не должно вызывать таких больших проблем.

Конечно, что все эти 60 раз будет складываться два разных флоата, а они, как известно имеют погрешность. Лучше вообще эти анимации не запускать, пока стрелка должна стоять на месте.

Фактически браузер, в отличии от отрисовки кодом в Canvas, имеет доступ к информации на предыдущем кадре, и может отслеживать и отрисовывать только изменения.

На Канвасе можно всё очень вкусно и легко заоптимизировать так, что даже на самых слабых машинах оно будет работать очень быстро.

[rassadin]

Ну да есть такая особенность работы с числами в формате Floating Point. Никто не мешает движку определять является ли разница визуально различимой или нет.

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

Здесь задача стояла другая. Ну вы понимаете.

[rassadin]

это экспериментальный код. он специально написан так как написан и делает все так скажем на грани новых технологий.

если бы это был production код, то
1) были бы совершенно другие требования к совместимости и искуственных ограничений
2) что касается комментирования кода и названия идентификаторов, то был бы полный порядок
3) он бы не глючил и выглядел одинаково, потому что не достаточно отлаженные технологии и сырая функциональность просто бы не использовалась.

[akselei]

а как часовой пояс менять?=)

[rassadin]

я думал сделать карту часовых поясов и выбор, но мне честно было уже лень это делать.

[zodchiy]

Зашел на «playground @github-pages», браузер Хром, при смене размера разъезжаются стрелки, бегают отдельно от часов.
Т.е. пример работает только сферически и в вакууме.

[rassadin]

часики более менее безглючно ходят на codepen.io.

playground @github-pages — это эксперимент в рамках новых технологий цель которого не сделать рабочую везде версию, а оценить как с этими технологиями справляется ваш Хром (плохо). По результатам чего я сейчас как раз занимаюсь составлением баг репортов для разработчиков Webkit, Firefox и IE.

[Dima_Sharihin]

Asus tf300tg, Android 4.1

У меня планшет сферический в вакууме?

[onthefly]

Про мое знакомство с HTML(CSS тогда еще не существовало)

Я познакомился с HTML в 1999 году и с тех пор от случая к случаю я занимался frontend-разработкой для веб, как правило, скорее как хобби, и очень изредка, как часть какого-нибудь большого рабочего проекта.

CSS был предложен в 1994 году, в 1996 была опубликована первая спецификация, в том же году был выпущен ie3 с поддержкой этой технологии.

[rassadin]

Соглашусь с вами по датам немного неправильное заявление — поправил.
Что касается СSS1 то можно говорить, что его нормальная его поддержка появилась только IE4.

[TunzTunz]

Часы отлично подходят для рабочего стола веб-приложения «умного дома». На планшете, вроде, крутятся…

[mannaro]

Хм… Что-то я не заметил тут логики:

Хотя… Если прищуриться и наклонить голову на pi/8 радиан, то.. не. Не катит.

Google Chrome (Версия 25.0.1364.97 m)

[mannaro]

А если включить «CSS3 Syntax», то часы вообще встают на 12 ночи (или утра) ровно

[mannaro]

Хотя очень впечатлило… Но только как фан (ибо на реальных проектах это использовать глупо и не рационально)

[mannaro]

«нерационально», конечно же

[VaKonS]

По поводу векторизации — "Vector Magic" не пробовали?

Например, те же цифры из часов (онлайн-версия, без ручной правки).

Руками, разумеется, аккуратнее получится.

[iva2000]

Так, отлично. Реально симпатичные.
А можно ваши часики на рабочий стол в Windows поставить?
А на заставку?
А виджетом на андроид?

[mannaro]

1) Известными мне способами — нет;
2) Читайте HTML виджеты для Windows 8;
3) Читайте HTML виджеты для android.