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

blog.ad.by (blog.ad.by)
11 июня 2010, 20:43

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

bolk (bolknote.ru)
11 июня 2010, 22:48, ответ предназначен blog.ad.by:

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

blog.ad.by (blog.ad.by)
11 июня 2010, 23:03

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

bolk (bolknote.ru)
11 июня 2010, 23:48, ответ предназначен blog.ad.by:

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

olo-olo-lo (olo-olo-lo.ya.ru)
11 июня 2010, 23:49

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

bolk (bolknote.ru)
12 июня 2010, 00:23, ответ предназначен olo-olo-lo (olo-olo-lo.ya.ru):

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

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

Сергей Чикуёнок (chikuyonok.ru)
12 июня 2010, 02:18

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

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

bolk (bolknote.ru)
12 июня 2010, 11:44, ответ предназначен Сергей Чикуёнок (chikuyonok.ru):

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

bolk (bolknote.ru)
12 июня 2010, 11:48, ответ предназначен Сергей Чикуёнок (chikuyonok.ru):

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

bolk (bolknote.ru)
12 июня 2010, 13:00

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

zg.livejournal.com (zg.livejournal.com)
12 июня 2010, 13:10, ответ предназначен bolk (bolknote.ru):

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

bolk (bolknote.ru)
12 июня 2010, 13:36, ответ предназначен zg.livejournal.com:

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

gleb-arestov.moikrug.ru (gleb-arestov.moikrug.ru)
12 июня 2010, 15:14

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 (zg.livejournal.com)
12 июня 2010, 15:35, ответ предназначен bolk (bolknote.ru):

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

bolk (bolknote.ru)
12 июня 2010, 17:10, ответ предназначен gleb-arestov.moikrug.ru:

Может быть уже хватит повторять "vml была предложена раньше svg, в 1998 году и была отвергнута " и о том какой был ie молодец, что придумал использовать ajax в проприетарном activex?
Конечно хватит. Я это уже давно прекратил повторять, непонятно почему вы это повторяете. Я сейчас говорю о внедрении векторной графики в HTML.

Читайте внимательнее, пожалуйста.
Можно конечно опустить такие вещи в svg как анимация и фильтры
Конечно можно. Ведь анимация и фильтры есть и в IE.
Можно конечно опустить такие вещи в svg как анимация и фильтры, но опустить xlink - (возможность использовать один элемент множество раз, не повторя кода) нельзя
Кажется я *никогда* не говорил, что VML лучше SVG. Я утверждал только, что MS гораздо дальновиднее всех остальных в вопросе технологий в вебе.

bolk (bolknote.ru)
12 июня 2010, 17:11, ответ предназначен zg.livejournal.com:

я про величину бажности продуктов мс не написал ни слова.
Ну как же? А это?
ситуация, когда что-то отвалилось, прошло пару лет, кто-то заметил и отрапортовал, в ответ получив: за пару лет вы первый, кто заметил, проблемы нет, блаблабла, очень характерна для мс.
Я утверждаю, что это не характерно для MS, это общая ситуация отрасли.

olo-olo-lo (olo-olo-lo.ya.ru)
12 июня 2010, 17:21, ответ предназначен bolk (bolknote.ru):

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

bolk (bolknote.ru)
12 июня 2010, 17:48, ответ предназначен olo-olo-lo (olo-olo-lo.ya.ru):

Неплохо было бы выставить классы и для теней.
К сожалению, очень мало что для VML можно выставить из CSS, MS давно не развивает этот момент, да сейчас уже и не надо -- сейчас MS повернулся лицом к SVG.
Убрать -ms-behavior, ибо это свойство - способ отнести код только к IE8+
Там в коде два свойства, для IE8+ и для IE7 и ниже.

zg.livejournal.com (zg.livejournal.com)
12 июня 2010, 17:49, ответ предназначен bolk (bolknote.ru):

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

olo-olo-lo (olo-olo-lo.ya.ru)
12 июня 2010, 17:59, ответ предназначен bolk (bolknote.ru):

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

bolk (bolknote.ru)
12 июня 2010, 18:07, ответ предназначен olo-olo-lo (olo-olo-lo.ya.ru):

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

olo-olo-lo (olo-olo-lo.ya.ru)
12 июня 2010, 18:16, ответ предназначен bolk (bolknote.ru):

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

olo-olo-lo (olo-olo-lo.ya.ru)
12 июня 2010, 18:29, ответ предназначен bolk (bolknote.ru):

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

bolk (bolknote.ru)
12 июня 2010, 18:33, ответ предназначен olo-olo-lo (olo-olo-lo.ya.ru):

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

bolk (bolknote.ru)
12 июня 2010, 18:34

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

olo-olo-lo (olo-olo-lo.ya.ru)
12 июня 2010, 18:38, ответ предназначен bolk (bolknote.ru):

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

olmokhov.livejournal.com (olmokhov.livejournal.com)
12 июня 2010, 20:19

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

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

bolk (bolknote.ru)
12 июня 2010, 20:33, ответ предназначен olmokhov.livejournal.com:

Только мне нельзя было вообще никак притрагиваться к текущему html'ю
Понимаю. К сожалению, MS, как известно, на много лет забросило развитие технологий в IE, так что VML можно управлять через CSS в весьма небольших пределах.
Можно было, конечно, написать expression, но он, наверняка, затормозил бы reflow, хотя надо будет померять.
Если сделать «одноразовый» expression, то было бы всё нормально.
Да и, тут не совсем тень, надо бы размытие ещё =)
Это да. Надо накладывать blur, т.е. фильтр, а это уже тормоза. В VML нет «собственного» blur, только через фильтр.

gleb-arestov.moikrug.ru (gleb-arestov.moikrug.ru)
13 июня 2010, 23:21

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

bolk (bolknote.ru)
14 июня 2010, 02:38, ответ предназначен gleb-arestov.moikrug.ru:

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

greli (greli.livejournal.com)
26 июня 2010, 21:41, ответ предназначен olo-olo-lo (olo-olo-lo.ya.ru):

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

bolk (bolknote.ru)
26 июня 2010, 23:56, ответ предназначен greli (greli.livejournal.com):

display:block/inline-block напишите и не нужен будет никакой position:absolute
Whatever. Не вижу плюсов.
У меня behavior и без -ms- работает в IE8.
Переключите его в режим IE8, он у вас в режиме совместимости работает.

bolk (bolknote.ru)
26 июня 2010, 23:57, ответ предназначен greli (greli.livejournal.com):

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

Шушпанчик (sairi-na-tenshi.ya.ru)
26 августа 2010, 17:31

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

Шушпанчик (sairi-na-tenshi.ya.ru)
26 августа 2010, 19:15

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

Илья (инкогнито)
28 октября 2010, 14:33

>нашёл способ - обернуть внутренности в textbox
Это как?

Ваше имя или адрес блога (можно OpenID):

Текст вашего комментария, не HTML:

Кому бы вы хотели ответить (или кликните на его аватару)