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» и позиционировать элементы абсолютно.

Поделиться
Отправить
 10   2010   browsers   css   html   ie   vml   программирование
36 комментариев
blog.ad.by 2010

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

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

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

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

blog.ad.by 2010

Ситуация такая. Демо работает если исправить одну строку на «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) 2010

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

zg.livejournal.com 2010

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

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

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

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

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

gleb-arestov.moikrug.ru 2010

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 2010

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

zg.livejournal.com 2010

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. У тебя есть ’<v:shadow ...’ . Надо сделать ’<v:shadow class=«vml» ...’ .

2. У тебя есть ’ -ms-behavior: url(#default#VML);’ . Нужно либо эту строчку убрать нах, либо добавить к блоку #bar2 position:absolute; . Иначе твой код (этот: ’-ms-behavior: url(#default#VML);’ ) бессмысленен.

:)

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

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

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

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

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

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

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

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

olmokhov.livejournal.com 2010

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

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

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

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

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

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

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

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

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

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

gleb-arestov.moikrug.ru 2010

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

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

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

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

greli (greli.livejournal.com) 2010

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Илья 2010

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

Это как?

Популярное