IE, непрямоугольные блоки и тени

IE крутой (20.16КиБ)

Что я хочу сказать по поводу статьи «Хитрая тень» в блоге Олега Мохова?

<html>
<head>
<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/>
<style type="text/css">
.vml {
    behavior: url(#default#VML);
    -ms-behavior: url(#default#VML);
    font: 12px Tahoma, sans-serif;
}
#bar1 {
    width: 400px;
    height: 60px;
    color: white;
    padding: 12px;
    display: block;
}

#bar2 {
    width: 20px;
    height: 22px;
    padding: 12px;
    color: white;
    position:absolute;
}
</style>
</head>

<body>

  <v:roundrect class="vml" id="bar1" fillcolor="navy" strokecolor="navy" strokeweight="1px" arcsize="0.1">
  Привет, ребята из W3C! Отсталый Internet Explorer уже много-много лет умеет смешивать векторный язык и
  HTML, а в 2010 году не все продвинутые браузеры так умеют.
  <v:shadow class="vml" on="true" opacity="0.3" color="navy" offset="7px,5px" />
  </v:roundrect>

   <v:shape class="vml" id="bar2"
   fillcolor="red" strokecolor="red"
   coordorigin="0 0" coordsize="200 200"
   path="m 1,1 l 800,1, 800,400, 1800,400, 1800,1500, 1,1500, x e">
   <v:shadow class="vml" on="true" opacity="0.3" color="red" offset="7px,5px"  />
    <p>Привет<br />ещё раз!</p>
    <p>Вы знаете, уже Internet Explorer 5.0 умеет делать непрямоугольные блоки.</p>
    <p>Причём, делает это непринуждённо.</p>
   </v:shape>
</body>

</html>

Что IE умеет круче ещё с пятой версии.

Добавлено позднее: в комментариях мне подсказывают, что в IE8/9 надо либо включать режим эмуляции, либо использовать «-ms-behavior» и позиционировать элементы абсолютно.

Поделиться
Отправить
36 комментариев
blog.ad.by

Точнее умел. Уже не умеет — это демо не работает в IE8.

Евгений Степанищев (bolknote.ru)

Комментарий для blog.ad.by:

А если указать режим эмуляции EmulateIE7?

blog.ad.by

Ситуация такая. Демо работает если исправить одну строку на «v\:* {».
Но вот если добавить <meta http-equiv=«X-UA-Compatible» content=«IE=edge» /> и конечно <?import namespace=«v» urn=«urn:schemas-microsoft-com:vml» implementation=«#default#VML» declareNamespace ?> то shadow и shape не работают.

Евгений Степанищев (bolknote.ru)

Комментарий для blog.ad.by:

А, зараза. Слеш пропал. Спасибо! Что-то я не слышал, чтобы VML отключали в IE8, надо почитать на эту тему.

olo-olo-lo (olo-olo-lo.ya.ru)

Потому что нужно позиционировать вторую фигуру как минимум абсолютно. Также не забываем о -ms-behavior в IE8+.

Евгений Степанищев (bolknote.ru)

Комментарий для olo-olo-lo.ya.ru:

Ох, щи. Но, впрочем, это небольшие изменения.

P.S. В IE6 работает без абсолютного.

Сергей Чикуёнок (chikuyonok.ru)

В IE8 немного поменялся CSS-парсер, поэтому правило v\:* не работает. Лучше всего задавать VML-поведение через отдельный класс, например так: .vml{behavior:url(#default#VML);}

И потом всем VML-элементам указывать этот класс

Евгений Степанищев (bolknote.ru)

Комментарий для chikuyonok.ru:

Спасибо! Я как-то ни разу так и не работал именно с IE8, только режимы эмуляции.

Евгений Степанищев (bolknote.ru)

Комментарий для chikuyonok.ru:

Очень странно, что они сломали обратную совместимость в этом месте.

Евгений Степанищев (bolknote.ru)

Код поправил.

zg.livejournal.com

Комментарий для Евгения Степанищева:

не факт, что специально сломали. ситуация, когда что-то отвалилось, прошло пару лет, кто-то заметил и отрапортовал, в ответ получив: за пару лет вы первый, кто заметил, проблемы нет, блаблабла, очень характерна для мс.

Евгений Степанищев (bolknote.ru)

Комментарий для zg.livejournal.com:

Мне кажется, это стереотип. MS делает продукты не более бажные, чем любая другая фирма.

gleb-arestov.moikrug.ru

pgml апрель 1998 http://www.w3.org/TR/1998/NOTE-PGML-19980410
vml май 1988 http://www.w3.org/TR/1998/NOTE-VML-19980513
Может быть уже хватит повторять «vml была предложена раньше svg, в 1998 году и была отвергнута » и о том какой был ie молодец, что придумал использовать ajax в проприетарном activex?
Ведь pgml была предложена раньше vml и тоже была отвергнута, естестенно, что разные спецификации было решено слить в одну.

Можно конечно опустить такие вещи в svg как анимация и фильтры, но опустить xlink — (возможность использовать один элемент множество раз, не повторя кода) нельзя

zg.livejournal.com

Комментарий для Евгения Степанищева:

я про величину бажности продуктов мс не написал ни слова.

Евгений Степанищев (bolknote.ru)

Комментарий для gleb-arestov.moikrug.ru:

Может быть уже хватит повторять «vml была предложена раньше svg, в 1998 году и была отвергнута » и о том какой был ie молодец, что придумал использовать ajax в проприетарном activex?

Конечно хватит. Я это уже давно прекратил повторять, непонятно почему вы это повторяете. Я сейчас говорю о внедрении векторной графики в HTML.

Читайте внимательнее, пожалуйста.

Можно конечно опустить такие вещи в svg как анимация и фильтры

Конечно можно. Ведь анимация и фильтры есть и в IE.

Можно конечно опустить такие вещи в svg как анимация и фильтры, но опустить xlink — (возможность использовать один элемент множество раз, не повторя кода) нельзя

Кажется я никогда не говорил, что VML лучше SVG. Я утверждал только, что MS гораздо дальновиднее всех остальных в вопросе технологий в вебе.

Евгений Степанищев (bolknote.ru)

Комментарий для zg.livejournal.com:

я про величину бажности продуктов мс не написал ни слова.

Ну как же? А это?

ситуация, когда что-то отвалилось, прошло пару лет, кто-то заметил и отрапортовал, в ответ получив: за пару лет вы первый, кто заметил, проблемы нет, блаблабла, очень характерна для мс.

Я утверждаю, что это не характерно для MS, это общая ситуация отрасли.

olo-olo-lo (olo-olo-lo.ya.ru)

Комментарий для Евгения Степанищева:

Рубрика «Алсо в комментариях мне подсказывают...».

  1. Неплохо было бы выставить классы и для теней.
  2. Убрать -ms-behavior, ибо это свойство — способ отнести код только к IE8+ , и сделать его недоступным для меньших версий на страницах с выставленным X-UA-Compatible. В предлагаемых тобой обстоятельствах этого метатега нет. На данный момент простой behavior работает везде. Моё предыдущее сообщение касалось случая, предложенного в третьем посте, а также случая (ахтунг!) с выставленным Doctype. Вот тогда-то без позиционирования в IE8+ не обойтись.
Евгений Степанищев (bolknote.ru)

Комментарий для olo-olo-lo.ya.ru:

Неплохо было бы выставить классы и для теней.

К сожалению, очень мало что для VML можно выставить из CSS, MS давно не развивает этот момент, да сейчас уже и не надо -​-​ сейчас MS повернулся лицом к SVG.

Убрать -ms-behavior, ибо это свойство — способ отнести код только к IE8+

Там в коде два свойства, для IE8+ и для IE7 и ниже.

zg.livejournal.com

Комментарий для Евгения Степанищева:

Ну как же? А это?

это про то, что шансы исправления бага, который не затрагивает большой процент пользователей, либо крупных клиентов, равны чуть более чем нулю. про количество собственно багов в продуктах мс — ни слова.

olo-olo-lo (olo-olo-lo.ya.ru)

Комментарий для Евгения Степанищева:

Гениально, ИМХО! Женя, тебе +100500 за сообразительность и внимательность! )))

Евгений Степанищев (bolknote.ru)

Комментарий для olo-olo-lo.ya.ru:

Что-то я не понял где я проявил сообразительность и внимательность :)

olo-olo-lo (olo-olo-lo.ya.ru)

Комментарий для Евгения Степанищева:

Нигде. :) Пока пишу рубрику «Попроще», можешь попробовать перечитать сообщения #1, #3,#5,#7 так, как будто бы остальных нет вовсе.

olo-olo-lo (olo-olo-lo.ya.ru)

Комментарий для Евгения Степанищева:

Рубрика «Попроще».

  1. У тебя есть ’<v:shadow ...’ . Надо сделать ’<v:shadow class=«vml» ...’ .
  2. У тебя есть ’ -ms-behavior: url(#default#VML);’ . Нужно либо эту строчку убрать нах, либо добавить к блоку #bar2 position:absolute; . Иначе твой код (этот: ’-ms-behavior: url(#default#VML);’ ) бессмысленен.
    :)
Евгений Степанищев (bolknote.ru)

Комментарий для olo-olo-lo.ya.ru:

1) а, точно.
2) ок
Спасибо, поторопился исправить.

Евгений Степанищев (bolknote.ru)

Образчик того, как интернет отучает от вежливости. :(

olo-olo-lo (olo-olo-lo.ya.ru)

Комментарий для Евгения Степанищева:

Пожалуйста! :)

olmokhov.livejournal.com

Круто-круто! =)

Только мне нельзя было вообще никак притрагиваться к текущему html’ю. Можно было, конечно, написать expression, но он, наверняка, затормозил бы reflow, хотя надо будет померять. Да и, тут не совсем тень, надо бы размытие ещё =)

Евгений Степанищев (bolknote.ru)

Комментарий для olmokhov.livejournal.com:

Только мне нельзя было вообще никак притрагиваться к текущему html’ю

Понимаю. К сожалению, MS, как известно, на много лет забросило развитие технологий в IE, так что VML можно управлять через CSS в весьма небольших пределах.

Можно было, конечно, написать expression, но он, наверняка, затормозил бы reflow, хотя надо будет померять.

Если сделать «одноразовый» expression, то было бы всё нормально.

Да и, тут не совсем тень, надо бы размытие ещё =)

Это да. Надо накладывать blur, т. е. фильтр, а это уже тормоза. В VML нет «собственного» blur, только через фильтр.

gleb-arestov.moikrug.ru

http://bolknote.ru/all/1786#55
«Для IE включается VML, это, если кто не знает, появившаяся ещё до SVG технология построения векторных изображений. Более мощная, чем SVG, кстати»

Евгений Степанищев (bolknote.ru)

Комментарий для gleb-arestov.moikrug.ru:

А для чего это повторение моей написанной два года назад заметки? В подтверждение чего? Что я это повторяю? Нет, я это не повторяю. Написал и всё.

greli (greli.livejournal.com)

Комментарий для olo-olo-lo.ya.ru:

display:block/inline-block напишите и не нужен будет никакой position:absolute. У меня behavior и без -ms- работает в IE8.

Евгений Степанищев (bolknote.ru)

Комментарий для greli.livejournal.com:

display:block/inline-block напишите и не нужен будет никакой position:absolute

Whatever. Не вижу плюсов.

У меня behavior и без -ms- работает в IE8.

Переключите его в режим IE8, он у вас в режиме совместимости работает.

Евгений Степанищев (bolknote.ru)

Комментарий для greli.livejournal.com:

Кроме того, это демка блоков, которые не являются прямоугольниками. Так что к чёрту подробности :)

Шушпанчик (sairi-na-tenshi.ya.ru)

а вкладывать друг в друга он их умеет? ._.

Шушпанчик (sairi-na-tenshi.ya.ru)

нашёл способ — обернуть внутренности в textbox

Илья

нашёл способ — обернуть внутренности в textbox

Это как?

Популярное