View
1.282
Download
0
Category
Tags:
Preview:
DESCRIPTION
Graceful degradation helps us to forget about ie7 headache.
Citation preview
Когда хуже - лучшеWednesday, April 27, 2011
парам-пам-пам!
Wednesday, April 27, 2011
Wednesday, April 27, 2011
CSS3CSS3
Wednesday, April 27, 2011
Еще бы
• Практически все возможно в CSS3
• И так просто, как никогда
Wednesday, April 27, 2011
Wednesday, April 27, 2011
Круглые уголкитень для блока
Wednesday, April 27, 2011
Помните? Или еще делаете? ;-)
Text
http://cssing.org.ua/2008/06/23/rounded-corners-unusual-approach/
Wednesday, April 27, 2011
A+BWednesday, April 27, 2011
border-radius:10px
Wednesday, April 27, 2011
Но не всё так гладко
Wednesday, April 27, 2011
CSS3 - черновик
Wednesday, April 27, 2011
Wednesday, April 27, 2011
Wednesday, April 27, 2011
Wednesday, April 27, 2011
Wednesday, April 27, 2011
Safari
Wednesday, April 27, 2011
Wednesday, April 27, 2011
Wednesday, April 27, 2011
Wednesday, April 27, 2011
Wednesday, April 27, 2011
Wednesday, April 27, 2011
Wednesday, April 27, 2011
VML
Wednesday, April 27, 2011
VML
ExpressionsWednesday, April 27, 2011
VML
Expressions
filter
Wednesday, April 27, 2011
IE9
Wednesday, April 27, 2011
Должны ли сайты выглядеть везде одинаково?
Wednesday, April 27, 2011
Не-а
Wednesday, April 27, 2011
Wednesday, April 27, 2011
Wednesday, April 27, 2011
Wednesday, April 27, 2011
Сайты должны быть доступны и нормально выглядеть у максимального кол-ва пользователей
Wednesday, April 27, 2011
Как?!
Wednesday, April 27, 2011
1. Осознать что воможно
Wednesday, April 27, 2011
Статистика в Украине
~70% CSS3
Статистика в СНГ
Wednesday, April 27, 2011
Например
1. border-radius
2. @font-face
3. transform
4. transition
5. gradient
6. box-shadow
7. text-shadow
8. rgba
Wednesday, April 27, 2011
2. правильная запись
Wednesday, April 27, 2011
box-shadow?
-moz-box-shadow: 0px 0px 4px #ffffff; -webkit-box-shadow: 0px 0px 4px #ffffff; box-shadow: 0px 0px 4px #ffffff;
Wednesday, April 27, 2011
box-shadow?
-moz-box-shadow: 0px 0px 4px #ffffff; -webkit-box-shadow: 0px 0px 4px #ffffff; box-shadow: 0px 0px 4px #ffffff;
стандартное свойство - последнее
Wednesday, April 27, 2011
3. fallback
Wednesday, April 27, 2011
Градиенты с fallback
Wednesday, April 27, 2011
RGBA с fallback
Wednesday, April 27, 2011
Wednesday, April 27, 2011
Wednesday, April 27, 2011
Wednesday, April 27, 2011
Wednesday, April 27, 2011
sass!
.bla{ @include gradient(#ffffff,#000000); }
@mixin gradient($color1,$color2) {....
}
В коде (sass):
Wednesday, April 27, 2011
квадратные сайты лучше смотрятся в интерфейсе ие6!и работают быстрее
Wednesday, April 27, 2011
Можно:
1. border-radius
2. @font-face
3. transform
4. transition
5. gradient
6. box-shadow
7. text-shadow
8. rgba
Wednesday, April 27, 2011
Groupon.ru
• Все было сделано на умном CSS3
• В IE6 выглядело идентично
Wednesday, April 27, 2011
и ие6 не заработал
Wednesday, April 27, 2011
Wednesday, April 27, 2011
Wednesday, April 27, 2011
Wednesday, April 27, 2011
Wednesday, April 27, 2011
Wednesday, April 27, 2011
Wednesday, April 27, 2011
Wednesday, April 27, 2011
это работает
Wednesday, April 27, 2011
Продать деградацию
• Скорость разработки (деньги)• Поддержка (деньги)• Скорость загрузки и работы сайта (качество)
• Богатство фич, анимаций (качество)Wednesday, April 27, 2011
Продать деградацию
• youtube.com
• twitter.com
• yandex.ru
Wednesday, April 27, 2011
Образовывать дизайнеровобразовывать заказчиков
• Рассказывать дизайнерам, что такое graceful degradation и что нового в CSS3
• Рассказывать заказчикам
Wednesday, April 27, 2011
[счастье]
Wednesday, April 27, 2011
Wednesday, April 27, 2011
You ARE butterfly!
Wednesday, April 27, 2011
Спасибо!
Юрий Артюх,http://cssing.org.ua,twitter.com/akella
Wednesday, April 27, 2011
Recommended