Тонкий css для internet explorer Павел Корнилов. Браузеры
TRANSCRIPT
![Page 1: Тонкий CSS для Internet Explorer Павел Корнилов. Браузеры](https://reader036.vdocuments.site/reader036/viewer/2022062409/56649c855503460f9493b949/html5/thumbnails/1.jpg)
Тонкий CSS дляInternet Explorer
Павел Корнилов
![Page 2: Тонкий CSS для Internet Explorer Павел Корнилов. Браузеры](https://reader036.vdocuments.site/reader036/viewer/2022062409/56649c855503460f9493b949/html5/thumbnails/2.jpg)
Браузеры
![Page 3: Тонкий CSS для Internet Explorer Павел Корнилов. Браузеры](https://reader036.vdocuments.site/reader036/viewer/2022062409/56649c855503460f9493b949/html5/thumbnails/3.jpg)
Internet Explorer
Ошибки
![Page 4: Тонкий CSS для Internet Explorer Павел Корнилов. Браузеры](https://reader036.vdocuments.site/reader036/viewer/2022062409/56649c855503460f9493b949/html5/thumbnails/4.jpg)
HTML
• <img alt=“alt”/>
• <label>Имя: <input/></label>
• PNG
![Page 5: Тонкий CSS для Internet Explorer Павел Корнилов. Браузеры](https://reader036.vdocuments.site/reader036/viewer/2022062409/56649c855503460f9493b949/html5/thumbnails/5.jpg)
CSS
• :hover
• opacity
• inherit
• :first-child
![Page 6: Тонкий CSS для Internet Explorer Павел Корнилов. Браузеры](https://reader036.vdocuments.site/reader036/viewer/2022062409/56649c855503460f9493b949/html5/thumbnails/6.jpg)
Решения
• DHTML Behaviors
• expression
• Иногда верстать таблицами
![Page 7: Тонкий CSS для Internet Explorer Павел Корнилов. Браузеры](https://reader036.vdocuments.site/reader036/viewer/2022062409/56649c855503460f9493b949/html5/thumbnails/7.jpg)
DHTML Behaviors
Подключение:behavior: url(behavior.htc);
Внутри:jScript или VBScript
![Page 8: Тонкий CSS для Internet Explorer Павел Корнилов. Браузеры](https://reader036.vdocuments.site/reader036/viewer/2022062409/56649c855503460f9493b949/html5/thumbnails/8.jpg)
Whatever:hover
body { behavior: url(hover.htc) }
Лечит::hover
:active
![Page 9: Тонкий CSS для Internet Explorer Павел Корнилов. Браузеры](https://reader036.vdocuments.site/reader036/viewer/2022062409/56649c855503460f9493b949/html5/thumbnails/9.jpg)
IE PNG Fix
img, div { behavior: url(iepngfix.htc) }
Лечит альфа прозрачность у PNG:картинки
фон
![Page 10: Тонкий CSS для Internet Explorer Павел Корнилов. Браузеры](https://reader036.vdocuments.site/reader036/viewer/2022062409/56649c855503460f9493b949/html5/thumbnails/10.jpg)
Expression
.mydiv {
a: expression(alert(), b, c = 1);
}
Что это за конструкция?
![Page 11: Тонкий CSS для Internet Explorer Павел Корнилов. Браузеры](https://reader036.vdocuments.site/reader036/viewer/2022062409/56649c855503460f9493b949/html5/thumbnails/11.jpg)
Особенность
• Исполняется при каждом действии пользователя
• После каждого блока ставится запятая
• with(this), this - необязателен
![Page 12: Тонкий CSS для Internet Explorer Павел Корнилов. Браузеры](https://reader036.vdocuments.site/reader036/viewer/2022062409/56649c855503460f9493b949/html5/thumbnails/12.jpg)
В ней работает
• Вызов функции
• Анонимные функции
• Присваивание переменной
• (true) ? 1 : 2
• комментарии // и /**/
• Конкатенация
![Page 13: Тонкий CSS для Internet Explorer Павел Корнилов. Браузеры](https://reader036.vdocuments.site/reader036/viewer/2022062409/56649c855503460f9493b949/html5/thumbnails/13.jpg)
Не работает
• Точка с запятой
• if … else
• Иногда, пробелы
![Page 14: Тонкий CSS для Internet Explorer Павел Корнилов. Браузеры](https://reader036.vdocuments.site/reader036/viewer/2022062409/56649c855503460f9493b949/html5/thumbnails/14.jpg)
function expression() {
// колдовской код
}
![Page 15: Тонкий CSS для Internet Explorer Павел Корнилов. Браузеры](https://reader036.vdocuments.site/reader036/viewer/2022062409/56649c855503460f9493b949/html5/thumbnails/15.jpg)
Похоже?
![Page 16: Тонкий CSS для Internet Explorer Павел Корнилов. Браузеры](https://reader036.vdocuments.site/reader036/viewer/2022062409/56649c855503460f9493b949/html5/thumbnails/16.jpg)
Style
Три способа:
• style
• currentStyle
• runtimeStyle
![Page 17: Тонкий CSS для Internet Explorer Павел Корнилов. Браузеры](https://reader036.vdocuments.site/reader036/viewer/2022062409/56649c855503460f9493b949/html5/thumbnails/17.jpg)
Примеры
Вспомните JavaScript
![Page 18: Тонкий CSS для Internet Explorer Павел Корнилов. Браузеры](https://reader036.vdocuments.site/reader036/viewer/2022062409/56649c855503460f9493b949/html5/thumbnails/18.jpg)
alt и title
img
{
behavior: expression(
(this.alt&&!this.title) ? this.title = '' : ''
)
}
![Page 19: Тонкий CSS для Internet Explorer Павел Корнилов. Браузеры](https://reader036.vdocuments.site/reader036/viewer/2022062409/56649c855503460f9493b949/html5/thumbnails/19.jpg)
alt и title
img
{
behavior: expression(
(alt&&!title) ? title = '' : ''
)
}
![Page 20: Тонкий CSS для Internet Explorer Павел Корнилов. Браузеры](https://reader036.vdocuments.site/reader036/viewer/2022062409/56649c855503460f9493b949/html5/thumbnails/20.jpg)
alt и title
img
{
behavior: expression(
(alt&&!title) ? title = '' : '', runtimeStyle.behavior = 'none'
)
}
![Page 21: Тонкий CSS для Internet Explorer Павел Корнилов. Браузеры](https://reader036.vdocuments.site/reader036/viewer/2022062409/56649c855503460f9493b949/html5/thumbnails/21.jpg)
alt и title
img
{
behavior: expression(
runtimeStyle.behavior = 'none',
(alt&&!title) ? title = '' : ''
)
}
![Page 22: Тонкий CSS для Internet Explorer Павел Корнилов. Браузеры](https://reader036.vdocuments.site/reader036/viewer/2022062409/56649c855503460f9493b949/html5/thumbnails/22.jpg)
alt и title
img
{
scrollbar-face-color: expression(
runtimeStyle.scrollbarFaceColor = '#fff',
(alt&&!title) ? title = '' : ''
)
}
![Page 23: Тонкий CSS для Internet Explorer Павел Корнилов. Браузеры](https://reader036.vdocuments.site/reader036/viewer/2022062409/56649c855503460f9493b949/html5/thumbnails/23.jpg)
background и png
filter: expression(
(runtimeStyle.filter == '') ?runtimeStyle.filter =
'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+currentStyle.backgroundImage.split('\"')[1]+', sizingMethod=crop)'
:
runtimeStyle.filter,
runtimeStyle.backgroundImage = 'none'
)
![Page 24: Тонкий CSS для Internet Explorer Павел Корнилов. Браузеры](https://reader036.vdocuments.site/reader036/viewer/2022062409/56649c855503460f9493b949/html5/thumbnails/24.jpg)
IMG и PNG
filter: expression(
(runtimeStyle.filter==''&&className!='ie')?
(h = this.insertAdjacentHTML('afterEnd', '<span style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+src+',sizingMethod=scale);
zoom:1"><img width="'+width+'" height="'+height+'" src="'+src+'" alt="" style="visibility:hidden;display:block" class="ie"/></span>'), style.display = 'none‘)
:
'',
runtimeStyle.filter = 'none'
)
![Page 25: Тонкий CSS для Internet Explorer Павел Корнилов. Браузеры](https://reader036.vdocuments.site/reader036/viewer/2022062409/56649c855503460f9493b949/html5/thumbnails/25.jpg)
Павел
Корнилов http://lusever.livejournal.com/