Простейший способ делать закругленные углы любого типа в Internet Explorer 6,7,8 без JavaScript

[devote]

И как всегда все мои разработки вы можете найти на ГитХабе: https://github.com/devote

[devote]

Обсуждение данной статьи и решения так же можно почитать тут

[Morfi]

Я в свое время писал шаблон вот так (который потом растягивался с помощью css по px или %):

<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="decor">
<?import namespace="decor" implementation="#default#VML" ?>
<decor:shapetype adj="0,0,0,0" coordorigin="0 0" coordsize="1000000 1000000" id="corners" stroked="false" path="m @17,0 l @19,0 qx @0,@20 l @0,@22 qy @21,@1 l @23,@1 qx 0,@24 l 0,@18 qy @17,0 x e">
	<decor:formulas>
		<decor:f eqn="val width" />
		<decor:f eqn="val height" />
		<decor:f eqn="prod @0 1 pixelwidth" />
		<decor:f eqn="prod @1 1 pixelheight" />
		<decor:f eqn="val #0" />
		<decor:f eqn="if #2 #1 @4" />
		<decor:f eqn="if #3 #2 #1" />
		<decor:f eqn="if @6 @6 @4" />
		<decor:f eqn="if #3 #3 @7" />
		<decor:f eqn="val @4" />
		<decor:f eqn="val @4" />
		<decor:f eqn="sum pixelwidth 0 @5" />
		<decor:f eqn="val @5" />
		<decor:f eqn="sum pixelwidth 0 @7" />
		<decor:f eqn="sum pixelheight 0 @7" />
		<decor:f eqn="val @8" />
		<decor:f eqn="sum pixelheight 0 @8" />
		<decor:f eqn="prod @2 @9 1" />
		<decor:f eqn="prod @3 @10 1" />
		<decor:f eqn="prod @2 @11 1" />
		<decor:f eqn="prod @3 @12 1" />
		<decor:f eqn="prod @2 @13 1" />
		<decor:f eqn="prod @3 @14 1" />
		<decor:f eqn="prod @2 @15 1" />
		<decor:f eqn="prod @3 @16 1" />
	</decor:formulas>
</decor:shapetype>

Который позволяет писать

<decor:shape type="#corners" fillcolor="#fff" adj="20" /> все углы 20
<decor:shape type="#corners" fillcolor="#fff" adj="20,10" /> верхние углы 20 нижние 10
<decor:shape type="#corners" fillcolor="#fff" adj="20,10,15,18" /> и все углы разные

[devote]

Тоже вариант) Упрощает написание чисел, можно и допилить будет потом. Хотя функционала это не добавит, а вот лишних тегов с формулами добавит))) Но тем не менее спасибо, учту на будущее.

[devote]

Хотя тут есть и недостаток:

<decor:shape type="#corners" fillcolor="#fff" adj="20,0,0,0" /> все углы 20 хотя нужен тока один

[Morfi]

Вы уверенны? Я просто уже не помню как я делал, и не хочу вспоминать vml, но помню что делал только с одним углом (хотя возможно я ставил 20,1,1,1)

[devote]

Вы уверенны?

Да вполне, пустое значение воспринимается как ноль, поэтому проверка по if #1 #1 #0 выдаст второй результат, а вот если ставить 20,1,1,1 то конечно все будет пучком

[tsmar]

Убил бы ваших заказчиков! (это предложение не является офертой, я не предоставляю услуги такого рода ни на какой основе)

[micbsv]

Ну зачем же убивать, просто выкатить за эту плюшку для IE8 рейт * 2, это отрезвляет.

[devote]

Верно сказано, именно за такое я и беру в 2-3 раза больше, и меня это устраивает… Если заказчик платит, то за это ему хоть под ИЕ6 будут углы крыглые

[ISpy]

То есть, VMLFRAME это итоговое решение, которое работает в IE6-8?

Скриншоты с примерами жгут :) Лично мне более интересны стандартные варианты, например для кнопки (1px border + 3px border-radius + какой-нибудь фон) или блок с текстом (1px border + 10px border-radius + параграф текста) — можно было бы посмотреть качество рендера. Вообще, было бы круто добавить подобную демку в пост.

[Staltec]

Среди ваших вариантов решения нет такого:
Вежливо послать отказаться и приступить к следующему заказу.

[devote]

И потерять деньги? причем двойную плату?

[smashercosmo]

Именно. Совершенно спокойно взять и потерять деньги (в том случае если у вас конечно не какая-то критическая ситуация, когда каждая копейка на счету).

[torbasow]

Есть вещи дороже денег.

[tenshi]

Что-то как-то много кода… для чего там ветвления?

У меня как-то с этим по проще было: github.com/nin-jin/PMS/blob/80db5fd273a9cd25d3b8459a1951e28d9f977fcd/wc/css3/wc-css3.vml

[devote]

У вас проще и менее функционально, у меня побольше написано но более функционально… Говорю же писать статьи не умею, видимо я написал не совсем понятно… Приношу извинения если вы что-то не так поняли в статье, но в моя формула позволяет не только блок делать с круглыми углами, но и просто бордюры с прозрачным контентом… Именно по этому там больше формул.

[SergeiStartsev]

Заказчик хочет круглые углы? Пусть наконец обновит свой браузер и, простите, не е… мозг разработчикам. Думал, что большинство от этого недуга уже вылечилось.

[monolithed]

Исполнитель делает работу для заказчика, а не для себя.

Вот представьте себе ситуацию, у вас проравало водопровод и вы пригласили сантехника.
Сантехник посмотрел на ваши трубы и сказал: «У вас тут какая-то ху*ня с трубами — они железные, вот когда поставите стеклопластик, тогда и зовите меня».

Хотите такого же отношения к себе?

[ambientos]

Не-не, сантехник чуть по-другому должен ответить: "… они железные. Но я с радостью поставлю вам стеклопластик за отдельную плату со скидкой."

[devote]

Ну представил и что? Пример с гнилым водопроводом тут совсем не катит. Пример нужно приводить такой, у вас дома водопровод из железных труб и к вам приходит сантехник со словами, давайте вы смените себе водопроводные трубы на металлопластик, утверждая это тем что ему с ними работать проще. Вы станете менять трубы ради того что бы водопроводчику потом было проще? Сомневаюсь что станете менять, ведь железные трубы вполне себе нормально справляются не текут, не мешают… Дык зачем ради чьих то капризов что-то менять?

Та же байда и с браузерами, если разработчику проще работать с модернизированными браузерами, это не значит что пользователь будет ради вас стараться. Менять полюбившееся и привычное на то что вам удобнее.

А я не против писать хоть даже под ИЕ6 если за это хорошо заплатят.

[Delka]

Спасибо за подробный разбор работы с VML,
но зачем писать свой велосипед, если CSS3PIE делает тоже самое, по тому же принципу, через VML!

[kotia]

Может, GPL-лицензия не подходит проекту

[dizer]

CSS3PIE не модифицируется при этом. GPL библиотеки можно использовать в коммерческих продуктах.

[monolithed]

Вы точно статью читали?

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

[Delka]

Конечно читал. И понимаю так что вы веcь этот презентационный мусор на VML пишите руками в шаблоны, а не генерите на JS (и не используете уже готовое решение CSS3PIE где делается тоже самое) ради небольшой экономии производительности?

[devote]

и не используете уже готовое решение CSS3PIE где делается тоже самое

вот именно что там не делается тоже самое. Весь просчет радиусов делает библиотека. Чем сильно тормозит работу. Почитайте исходники данной библиотеки и увидите что в ней формулы не используются, хотя они работают в разы быстрее чем постоянная слежка за событием onresize и перерисовкой элементов. Поверьте, я много библиотек видел и почти все изучал изнутри, но такого подхода в них я пока не видел.

[Delka]

Ну а у вас радиус всегда один и тот же, поэтому просчёта нет, верно? Т.е. вы реализовали частный случай без автоматизации — поэтому он быстрей. По сути просто написали руками то что сгенерировал бы CSS3PIE.

[devote]

Есть, при изменении размера блока всегда делается пересчет радиуса… потому что библиотеки используют относительные позиции а не статичные… Так устроен VML у него нет таких понятий как пикселы, там все в процентах, если блок становится больше, то и радиус увеличивается… А что бы этого не было нужно делать пересчет. Что собственно библиотеки и делают… Почитайте исходники этих библиотек и все поймете.

А в случае что я привел в пример в статье, пересчет делает сам браузер за счет формул. Что намного меньше нагружает браузер. Вот если библиотеку CSS3PIE перепишут на подобные формулы, вот тогда ей цены не будет.

[Delka]

Вот если библиотеку CSS3PIE перепишут на подобные формулы, вот тогда ей цены не будет.

Сделайте pull request github.com/lojjic/PIE

[iborzenkov]

JavaScript библиотеки очень заметно загружают браузер
Все правильно — пользователи IE должны страдать!

[KEKSOV]

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

[devote]

Спасибо за книжку, почитаю на досуге)

[Delka]

DD_roundies — это тот же VML, только генерующийся аавтоматически из JS.
Эта библотека из которой вырос CSS3PIE, тоже генерирующий VML.

[Nedder]

За использование прямоугольника со скругленными углами вас засудит Apple.

[JC_Piligrim]

Видимо, вам только еще предстоит узнать это: rghost.ru/42705952/image.png

Стыдно, товарищ. Стыдно!

[devote]

Согласен, нужно было скрины в PNG сохранить, ступил, каюсь)))

[IBobko]

Простейший способ делать закругленные углы любого типа
…
<v:f eqn=«sum #5 #7 0»/><v:f eqn=«sum @32 @33 0»/><v:f eqn=«prod #4 @3 1»/>
<v:f eqn=«if @34 @35 @9»/><v:f eqn=«prod #5 @2 1»/><v:f eqn=«sum @0 0 @37»/>
…

да, да…

[smashercosmo]

В какой-то момент я начал говорить всем своим заказчикам, что если им нужна пусть даже минимальная поддержка IE6-7, то пусть ищут себе другого разработчика. Как результат: я начал выполнять в два раза больше заказов.