Тонкий CSS для Internet Explorer

Тонкий CSS дляInternet Explorer Павел Корнилов

Браузеры

Internet ExplorerОшибки

HTML • <img alt=“alt”/> • <label>Имя: <input/></label> • PNG

CSS • :hover • opacity • inherit • :first-child

Решения • DHTML Behaviors • expression • Иногда верстать таблицами

DHTML Behaviors Подключение: behavior: url(behavior.htc); Внутри: jScript или VBScript

Whatever:hover body { behavior: url(hover.htc) } Лечит: :hover :active

IE PNG Fix img, div { behavior: url(iepngfix.htc) } Лечитальфа прозрачность у PNG: картинки фон

Expression .mydiv { a: expression(alert(), b, c = 1); } Что это законструкция?

Особенность • Исполняется при каждом действиипользователя • После каждого блока ставится запятая • with(this), this - необязателен

В ней работает • Вызов функции • Анонимные функции • Присваивание переменной • (true) ? 1 : 2 • комментарии//и/**/ • Конкатенация

Не работает • Точка с запятой • if … else • Иногда, пробелы

function expression() { // колдовской код }

Похоже?

Style Три способа: • style • currentStyle • runtimeStyle

Примеры Вспомните JavaScript

alt и title img { behavior: expression( (this.alt&&!this.title) ? this.title = '' : '' ) }

alt и title img { behavior: expression( (alt&&!title) ? title = '' : '' ) }

alt и title img { behavior: expression( (alt&&!title) ? title = '' : '', runtimeStyle.behavior = 'none' ) }

alt и title img { behavior: expression( runtimeStyle.behavior = 'none', (alt&&!title) ? title = '' : '' ) }

alt и title img { scrollbar-face-color: expression( runtimeStyle.scrollbarFaceColor = '#fff', (alt&&!title) ? title = '' : '' ) }

background и png filter: expression( (runtimeStyle.filter == '') ? runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+currentStyle.backgroundImage.split('\"')[1]+', sizingMethod=crop)' : runtimeStyle.filter, runtimeStyle.backgroundImage = 'none' )

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

Павел Корнилов http://lusever.livejournal.com/

Тонкий CSS для Internet Explorer