Когда хуже - лучше

Когда хуже - лучшеWednesday, April 27, 2011

парам-пам-пам!

Wednesday, April 27, 2011


CSS3CSS3


Еще бы

• Практически все возможно в CSS3

• И так просто, как никогда



Круглые уголкитень для блока


Помните? Или еще делаете? ;-)

Text

http://cssing.org.ua/2008/06/23/rounded-corners-unusual-approach/




A+BWednesday, April 27, 2011

border-radius:10px


Но не всё так гладко


CSS3 - черновик






Safari








VML


VML

ExpressionsWednesday, April 27, 2011

VML

Expressions

filter


IE9


Должны ли сайты выглядеть везде одинаково?


Не-а





Сайты должны быть доступны и нормально выглядеть у максимального кол-ва пользователей


Как?!


1. Осознать что воможно


http://caniuse.com/


http://caniuse.com

http://caniuse.com

Статистика в Украине

~70% CSS3

Статистика в СНГ


Например

1. border-radius

2. @font-face

3. transform

4. transition

5. gradient

6. box-shadow

7. text-shadow

8. rgba


2. правильная запись


box-shadow?

-moz-box-shadow: 0px 0px 4px #ffffff; -webkit-box-shadow: 0px 0px 4px #ffffff; box-shadow: 0px 0px 4px #ffffff;


box-shadow?

-moz-box-shadow: 0px 0px 4px #ffffff; -webkit-box-shadow: 0px 0px 4px #ffffff; box-shadow: 0px 0px 4px #ffffff;

стандартное свойство - последнее


3. fallback


Градиенты с fallback


RGBA с fallback






sass!

.bla{ @include gradient(#ffffff,#000000); }

@mixin gradient($color1,$color2) {....

}

В коде (sass):


квадратные сайты лучше смотрятся в интерфейсе ие6!и работают быстрее


Можно:

1. border-radius

2. @font-face

3. transform

4. transition

5. gradient

6. box-shadow

7. text-shadow

8. rgba


Groupon.ru

• Все было сделано на умном CSS3

• В IE6 выглядело идентично


и ие6 не заработал









это работает


Продать деградацию

• Скорость разработки (деньги)• Поддержка (деньги)• Скорость загрузки и работы сайта (качество)

• Богатство фич, анимаций (качество)Wednesday, April 27, 2011

Продать деградацию

• youtube.com

• twitter.com

• yandex.ru


Образовывать дизайнеровобразовывать заказчиков

• Рассказывать дизайнерам, что такое graceful degradation и что нового в CSS3

• Рассказывать заказчикам


[счастье]



You ARE butterfly!


Спасибо!

Юрий Артюх,http://cssing.org.ua,twitter.com/akella


http://cssing.org.ua

http://cssing.org.ua

Когда хуже - лучше

Technology

ffffff boxshadow

ffffff webkit

mixin gradient

css3 ie6

graceful degradation

rgba fallbackwednesday

vml lterexpressionswednesday