devote Jan 3 2013 at 08:14

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

13 min

36K

Website development*Internet ExplorerHTML*

+47

Comments 43

devote Jan 3 2013 at 08:37

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

devote Jan 4 2013 at 21:16

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

Morfi Jan 3 2013 at 09:04

Я в свое время писал шаблон вот так (который потом растягивался с помощью 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 Jan 3 2013 at 09:08

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

devote Jan 3 2013 at 09:12

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

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

Morfi Jan 3 2013 at 09:22

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

devote Jan 3 2013 at 09:42

Вы уверенны?

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

tsmar Jan 3 2013 at 11:26

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

+33

micbsv Jan 3 2013 at 22:26

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

devote Jan 4 2013 at 16:34

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

ISpy Jan 3 2013 at 13:02

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

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

Staltec Jan 3 2013 at 13:20

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

devote Jan 4 2013 at 16:34

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

smashercosmo Jan 4 2013 at 20:34

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

torbasow Jan 5 2013 at 11:45

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

tenshi Jan 3 2013 at 13:24

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

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

devote Jan 4 2013 at 16:37

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

SergeiStartsev Jan 3 2013 at 13:28

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

UFO just landed and posted this here

monolithed Jan 3 2013 at 16:39

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

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

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

ambientos Jan 3 2013 at 19:21

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

UFO just landed and posted this here

devote Jan 4 2013 at 16:24

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

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

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

UFO just landed and posted this here

Delka Jan 3 2013 at 14:15

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

kotia Jan 3 2013 at 14:28

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

dizer Jan 3 2013 at 15:21

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

monolithed Jan 3 2013 at 16:43

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

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

Delka Jan 3 2013 at 16:55

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

devote Jan 4 2013 at 16:16

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

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

Delka Jan 4 2013 at 16:22

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

devote Jan 4 2013 at 16:29

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

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

Delka Jan 4 2013 at 16:33

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

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

-1

iborzenkov Jan 3 2013 at 16:58

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

KEKSOV Jan 3 2013 at 14:31

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

devote Jan 4 2013 at 16:38

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

UFO just landed and posted this here

Delka Jan 3 2013 at 16:57

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

Nedder Jan 3 2013 at 16:43

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

JC_Piligrim Jan 3 2013 at 18:30

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

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

devote Jan 4 2013 at 16:39

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

IBobko Jan 4 2013 at 05:52

Простейший способ делать закругленные углы любого типа
…
<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 Jan 4 2013 at 20:43

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

Show the best of all time