Graceful degradation helps us to forget about ie7 headache.

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

2. парам-пам-пам!
Wednesday, April 27, 2011

3. Wednesday, April 27, 2011

4. CSS3
CSS3
Wednesday, April 27, 2011

5. Еще бы
• Практически все возможно в CSS3
• И так просто, как никогда
Wednesday, April 27, 2011

6. Wednesday, April 27, 2011

7. тень для блока
Круглые уголки
Wednesday, April 27, 2011

8. Помните? Или еще делаете? ;-)
Text
http://cssing.org.ua/2008/06/23/rounded-corners-unusual-approach/
Wednesday, April 27, 2011

9. A+B
Wednesday, April 27, 2011

10. border-radius:10px
Wednesday, April 27, 2011

11. Но не всё так гладко
Wednesday, April 27, 2011

12. CSS3 - черновик
Wednesday, April 27, 2011

13. Wednesday, April 27, 2011

14. Wednesday, April 27, 2011

15. Wednesday, April 27, 2011

16. Wednesday, April 27, 2011

17. Safari
Wednesday, April 27, 2011

18. Wednesday, April 27, 2011

19. Wednesday, April 27, 2011

20. Wednesday, April 27, 2011

21. Wednesday, April 27, 2011

22. Wednesday, April 27, 2011

23. Wednesday, April 27, 2011

24. VML
Wednesday, April 27, 2011

25. VML
Expressions
Wednesday, April 27, 2011

26. VML filter
Expressions
Wednesday, April 27, 2011

27. IE9
Wednesday, April 27, 2011

28. Должны ли сайты выглядеть
везде одинаково?
Wednesday, April 27, 2011

29. Не-а
Wednesday, April 27, 2011

30. Wednesday, April 27, 2011

31. Wednesday, April 27, 2011

32. Wednesday, April 27, 2011

33. Сайты должны быть доступны и
нормально выглядеть у
максимального кол-ва
пользователей
Wednesday, April 27, 2011

34. Как?!
Wednesday, April 27, 2011

35. 1. Осознать что воможно
Wednesday, April 27, 2011

36. http://caniuse.com/
Wednesday, April 27, 2011

37. Статистика в Украине
Статистика в СНГ
~70% CSS3
Wednesday, April 27, 2011

38. Например
1. border-radius 5. gradient
2. @font-face 6. box-shadow
3. transform 7. text-shadow
4. transition 8. rgba
Wednesday, April 27, 2011

39. 2. правильная запись
Wednesday, April 27, 2011

40. 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

41. 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

42. 3. fallback
Wednesday, April 27, 2011

43. Градиенты с fallback
Wednesday, April 27, 2011

44. RGBA с fallback
Wednesday, April 27, 2011

45. Wednesday, April 27, 2011

46. Wednesday, April 27, 2011

47. Wednesday, April 27, 2011

48. Wednesday, April 27, 2011

49. sass!
@mixin gradient($color1,$color2) {
....
}
В коде (sass):
.bla{
@include gradient(#ffffff,#000000);
}
Wednesday, April 27, 2011

50. квадратные сайты лучше
смотрятся в интерфейсе ие6!
и работают быстрее
Wednesday, April 27, 2011

51. Можно:
1. border-radius 5. gradient
2. @font-face 6. box-shadow
3. transform 7. text-shadow
4. transition 8. rgba
Wednesday, April 27, 2011

52. Groupon.ru
• Все было сделано на умном CSS3
• В IE6 выглядело идентично
Wednesday, April 27, 2011

53. и ие6 не заработал
Wednesday, April 27, 2011

54. Wednesday, April 27, 2011

55. Wednesday, April 27, 2011

56. Wednesday, April 27, 2011

57. Wednesday, April 27, 2011

58. Wednesday, April 27, 2011

59. Wednesday, April 27, 2011

60. Wednesday, April 27, 2011

61. это работает
Wednesday, April 27, 2011

62. Продать деградацию
• Скорость разработки (деньги)
• Поддержка (деньги)
• Скорость загрузки и работы сайта (качество)
• Богатство фич, анимаций (качество)
Wednesday, April 27, 2011

63. Продать деградацию
• youtube.com
• twitter.com
• yandex.ru
Wednesday, April 27, 2011

64. Образовывать дизайнеров
образовывать заказчиков
• Рассказывать дизайнерам, что такое
graceful degradation и что нового в CSS3
• Рассказывать заказчикам
Wednesday, April 27, 2011

65. [счастье]
Wednesday, April 27, 2011

66. Wednesday, April 27, 2011

67. You ARE butterfly!
Wednesday, April 27, 2011

68. Спасибо!
Юрий Артюх,
http://cssing.org.ua,
twitter.com/akella
Wednesday, April 27, 2011