ie9 для разработчиков
TRANSCRIPT
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