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

IE9 для разработчиковЮрий Артюх, 16 сентября 2010

Thursday, September 16, 2010

Плохое про IE9

• Он еще бета• Он наверняка хуже чем IE10

Thursday, September 16, 2010

Хорошее

• Аппаратное ускорение• SVG+XHTML

• HTML5

• CSS3

Thursday, September 16, 2010

ACID3

Thursday, September 16, 2010

IE8

IE9 p1

IE9 p2

IE9 p3

IE9 p4

0 25 50 75 100

95

83

68

55

20

ACID3

Thursday, September 16, 2010

Почему не 100?

• SVG Fonts

• SMIL

• Who Cares? :)

Thursday, September 16, 2010

W3C & Microsoft?

• Microsoft создал 7200 тестов для CSS2.1

• 2138 тестов за время разработки IE9

Thursday, September 16, 2010

Thursday, September 16, 2010

Thursday, September 16, 2010

Thursday, September 16, 2010

Thursday, September 16, 2010

CSS3 Селекторы

Thursday, September 16, 2010

Работают все

Thursday, September 16, 2010

Например

<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

Например

<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

И даже ::selected

Thursday, September 16, 2010

.article:not(div)

Thursday, September 16, 2010

border-radius

Thursday, September 16, 2010

border-radiusРАБОТАЕТ!

Thursday, September 16, 2010

border-radiusРАБОТАЕТ!Серьезно!

Thursday, September 16, 2010

Thursday, September 16, 2010

Thursday, September 16, 2010

Thursday, September 16, 2010

Thursday, September 16, 2010

Thursday, September 16, 2010

IE9

Thursday, September 16, 2010

Safari

Thursday, September 16, 2010

Twitter fail

Thursday, September 16, 2010

Ошибка

• CSS специально для Webkit+Mozilla

• Лучше feature detect, а не browser detect

Thursday, September 16, 2010

RGBA HSLA

Thursday, September 16, 2010

Шрифты

Thursday, September 16, 2010

@font-face { font-family: FONTNAME; src: url(fonts/FONTNAME.ttf) format("truetype");} body { font-family: FONTNAME, Georgia, serif;}

Thursday, September 16, 2010

WOFF!

Thursday, September 16, 2010

@font-face { font-family: FONTNAME; src: url(fonts/FONTNAME.woff) format("woff");} body { font-family: FONTNAME, Georgia, serif;}

Thursday, September 16, 2010

Конец EOT

Thursday, September 16, 2010

Конец EOT

• Тот же TTF только сжатый

Thursday, September 16, 2010

Конец EOT

• Тот же TTF только сжатый

• Содержит информацию о шрифте

Thursday, September 16, 2010

Конец EOT

• Тот же TTF только сжатый

• Содержит информацию о шрифте

• WOFF –  в среднем на 40% меньше TTF

Thursday, September 16, 2010

Конец EOT

• Тот же TTF только сжатый

• Содержит информацию о шрифте

• WOFF –  в среднем на 40% меньше TTF

• IE9, Mozilla, Webkit – уже внедрили

Thursday, September 16, 2010

Пример font-face

Thursday, September 16, 2010

Media Queries

Thursday, September 16, 2010

@mediascreenand(max‐width:400px){div{border:none;}}

Thursday, September 16, 2010

Пример

Thursday, September 16, 2010

Calc()

Thursday, September 16, 2010

Bye, expression

#block{width:calc(50%‐1em+30px);}

Thursday, September 16, 2010

DataURI

Thursday, September 16, 2010

data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP

HTML:

<imgsrc="data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP">

CSS:

background‐image:url(data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP)

Thursday, September 16, 2010

DataURI

• IE6/7 – не поддерживалось

• IE8 – 32 килобайта максимум

• IE 9 – 4 гигабайта

Thursday, September 16, 2010

Developer Tools

Thursday, September 16, 2010

Thursday, September 16, 2010

Thursday, September 16, 2010

Скорость

Thursday, September 16, 2010

Thursday, September 16, 2010

CSS3 – 70%

Thursday, September 16, 2010

Thursday, September 16, 2010

Спасибо!

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

Thursday, September 16, 2010