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

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

Thursday, September 16, 2010

Плохое про IE9

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


Хорошее

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

• HTML5

• CSS3


ACID3


IE8

IE9 p1

IE9 p2

IE9 p3

IE9 p4

0 25 50 75 100

95

83

68

55

20

ACID3


Почему не 100?

• SVG Fonts

• SMIL

• Who Cares? :)


W3C & Microsoft?

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

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






CSS3 Селекторы


Работают все


Например

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


Например

<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:...;}


И даже ::selected


.article:not(div)


border-radius


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


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







IE9


Safari


Twitter fail


Ошибка

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

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


RGBA HSLA


Шрифты


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


WOFF!


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


Конец EOT


Конец EOT

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


Конец EOT


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


Конец EOT



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


Конец EOT



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

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


Пример font-face


Media Queries


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


Пример


Calc()


Bye, expression

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


DataURI


data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP

HTML:

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

CSS:

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


DataURI

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

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

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


Developer Tools




Скорость



CSS3 – 70%



Спасибо!

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


http://cssing.org.ua

http://cssing.org.ua

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

Education