Тонкий 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/