devote 3 янв 2013 в 04:14

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

13 мин

36K

HTML * Internet ExplorerВеб-разработка *

+47

Комментарии 43

devote 3 янв 2013 в 04:37

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

devote 4 янв 2013 в 17:16

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

Morfi 3 янв 2013 в 05: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 3 янв 2013 в 05:08

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

devote 3 янв 2013 в 05:12

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

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

Morfi 3 янв 2013 в 05:22

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

devote 3 янв 2013 в 05:42

Вы уверенны?

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

tsmar 3 янв 2013 в 07:26

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

micbsv 3 янв 2013 в 18:26

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

devote 4 янв 2013 в 12:34

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

ISpy 3 янв 2013 в 09:02

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

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

Staltec 3 янв 2013 в 09:20

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

devote 4 янв 2013 в 12:34

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

smashercosmo 4 янв 2013 в 16:34

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

torbasow 5 янв 2013 в 07:45

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

tenshi 3 янв 2013 в 09:24

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

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

devote 4 янв 2013 в 12:37

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

SergeiStartsev 3 янв 2013 в 09:28

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

НЛО прилетело и опубликовало эту надпись здесь

monolithed 3 янв 2013 в 12:39

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

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

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

ambientos 3 янв 2013 в 15:21

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

НЛО прилетело и опубликовало эту надпись здесь

devote 4 янв 2013 в 12:24

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

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

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

НЛО прилетело и опубликовало эту надпись здесь

Delka 3 янв 2013 в 10:15

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

kotia 3 янв 2013 в 10:28

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

dizer 3 янв 2013 в 11:21

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

monolithed 3 янв 2013 в 12:43

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

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

Delka 3 янв 2013 в 12:55

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

devote 4 янв 2013 в 12:16

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

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

Delka 4 янв 2013 в 12:22

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

devote 4 янв 2013 в 12:29

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

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

Delka 4 янв 2013 в 12:33

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

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

iborzenkov 3 янв 2013 в 12:58

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

KEKSOV 3 янв 2013 в 10:31

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

devote 4 янв 2013 в 12:38

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

НЛО прилетело и опубликовало эту надпись здесь

Delka 3 янв 2013 в 12:57

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

Nedder 3 янв 2013 в 12:43

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

JC_Piligrim 3 янв 2013 в 14:30

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

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

devote 4 янв 2013 в 12:39

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

IBobko 4 янв 2013 в 01: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 4 янв 2013 в 16:43

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

Зарегистрируйтесь на Хабре, чтобы оставить комментарий