IE9 для разработчиков

3,026 views

Published on

Published in: Education
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,026
On SlideShare
0
From Embeds
0
Number of Embeds
1,188
Actions
Shares
0
Downloads
13
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

IE9 для разработчиков

  1. 1. IE9 для разработчиков Юрий Артюх, 16 сентября 2010 Thursday, September 16, 2010
  2. 2. Плохое про IE9 • Он еще бета • Он наверняка хуже чем IE10 Thursday, September 16, 2010
  3. 3. Хорошее • Аппаратное ускорение • SVG+XHTML • HTML5 • CSS3 Thursday, September 16, 2010
  4. 4. ACID3 Thursday, September 16, 2010
  5. 5. ACID3 IE8 20 IE9 p1 55 IE9 p2 68 IE9 p3 83 IE9 p4 95 0 25 50 75 100 Thursday, September 16, 2010
  6. 6. Почему не 100? • SVG Fonts • SMIL • Who Cares? :) Thursday, September 16, 2010
  7. 7. W3C & Microsoft? • Microsoft создал 7200 тестов для CSS2.1 • 2138 тестов за время разработки IE9 Thursday, September 16, 2010
  8. 8. Thursday, September 16, 2010
  9. 9. Thursday, September 16, 2010
  10. 10. Thursday, September 16, 2010
  11. 11. Thursday, September 16, 2010
  12. 12. CSS3 Селекторы Thursday, September 16, 2010
  13. 13. Работают все Thursday, September 16, 2010
  14. 14. Например <table> <tr class=”odd”> <td>row1</td> <td></td> </tr> <tr class=”even”> <td>row2</td> <td></td> </tr> <tr class=”odd”> <td>row3</td> <td></td> </tr> … </table> Thursday, September 16, 2010
  15. 15. Например <table> <tr> <td>row1</td> <td></td> </tr> <tr> <td>row2</td> <td></td> </tr> <tr> <td>row3</td> <td></td> </tr> … </table> CSS: tr:nth-child(odd) { background-color:...;} Thursday, September 16, 2010
  16. 16. И даже ::selected Thursday, September 16, 2010
  17. 17. .article:not(div) Thursday, September 16, 2010
  18. 18. border-radius Thursday, September 16, 2010
  19. 19. border-radius РАБОТАЕТ! Thursday, September 16, 2010
  20. 20. border-radius РАБОТАЕТ! Серьезно! Thursday, September 16, 2010
  21. 21. Thursday, September 16, 2010
  22. 22. Thursday, September 16, 2010
  23. 23. Thursday, September 16, 2010
  24. 24. Thursday, September 16, 2010
  25. 25. Thursday, September 16, 2010
  26. 26. IE9 Thursday, September 16, 2010
  27. 27. Safari Thursday, September 16, 2010
  28. 28. Twitter fail Thursday, September 16, 2010
  29. 29. Ошибка • CSS специально для Webkit+Mozilla • Лучше feature detect, а не browser detect Thursday, September 16, 2010
  30. 30. RGBA HSLA Thursday, September 16, 2010
  31. 31. Шрифты Thursday, September 16, 2010
  32. 32. @font-face { font-family: FONTNAME; src: url(fonts/FONTNAME.ttf) format("truetype"); }   body { font-family: FONTNAME, Georgia, serif; } Thursday, September 16, 2010
  33. 33. WOFF! Thursday, September 16, 2010
  34. 34. @font-face { font-family: FONTNAME; src: url(fonts/FONTNAME.woff) format("woff"); }   body { font-family: FONTNAME, Georgia, serif; } Thursday, September 16, 2010
  35. 35. Конец EOT Thursday, September 16, 2010
  36. 36. Конец EOT • Тот же TTF только сжатый Thursday, September 16, 2010
  37. 37. Конец EOT • Тот же TTF только сжатый • Содержит информацию о шрифте Thursday, September 16, 2010
  38. 38. Конец EOT • Тот же TTF только сжатый • Содержит информацию о шрифте • WOFF –  в среднем на 40% меньше TTF Thursday, September 16, 2010
  39. 39. Конец EOT • Тот же TTF только сжатый • Содержит информацию о шрифте • WOFF –  в среднем на 40% меньше TTF • IE9, Mozilla, Webkit – уже внедрили Thursday, September 16, 2010
  40. 40. Пример font-face Thursday, September 16, 2010
  41. 41. Media Queries Thursday, September 16, 2010
  42. 42. @media
screen
and
(max‐width:400px)
 


{ 





div
{border:none;} 


} Thursday, September 16, 2010
  43. 43. Пример Thursday, September 16, 2010
  44. 44. Calc() Thursday, September 16, 2010
  45. 45. Bye, expression #block
{ 

width:
calc(50%
‐
1em+30px); } Thursday, September 16, 2010
  46. 46. DataURI Thursday, September 16, 2010
  47. 47. data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP HTML: <img
src="data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP"> CSS: background‐image:url(data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP) Thursday, September 16, 2010
  48. 48. DataURI • IE6/7 – не поддерживалось • IE8 – 32 килобайта максимум • IE 9 – 4 гигабайта Thursday, September 16, 2010
  49. 49. Developer Tools Thursday, September 16, 2010
  50. 50. Thursday, September 16, 2010
  51. 51. Thursday, September 16, 2010
  52. 52. Скорость Thursday, September 16, 2010
  53. 53. Thursday, September 16, 2010
  54. 54. CSS3 – 70% Thursday, September 16, 2010
  55. 55. Thursday, September 16, 2010
  56. 56. Спасибо! Юрий Артюх, http://cssing.org.ua, twitter.com/akella Thursday, September 16, 2010

×