Скруглённые углы на чистом CSS для Opera 9.5, FF 1.5, IE 5, Konqueror и Safari3

Всё, надоело. Никто не использует VML и SVG? Почему все делают скруглённые углы только кучей картинок или через CSS3-свойства? В общем, представляю код, который работает для Opera 9.50 и выше (через SVG background), IE5.0 и выше (через VML), на FireFox 1.5, Safari3 и Konqueror (через свойства CSS3). Та-да:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<!-- подключаем пространство имён VML для IE -->
<!--[if vml]>
    <xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/>
    <style> v\:* { behavior: url(#default#VML); display: block; } </style>

<![endif]-->

<title>Скруглённые углы</title>

<style type="text/css">
    *    { padding: 0; margin: 0; }
    body { background: white; color: black; font: 12px Arial, sans-serif; }

    .rounded { margin: 100px auto; text-align: center; width: 50%; position: relative; padding: 10px; }

/*
Нижеприведённые background-image работает только в Opera 9.50 и представляет собой закодированный алгоритомом base64
код SVG-картинки:

<svg xmlns="http://www.w3.org/2000/svg">
<mask id="mask">
   <rect width="100%" height="100%" rx="10" ry="10" fill="white" stroke="black" stroke-width="2"/>
</mask>
<rect stroke="black" fill="white" stroke-width="4" mask="url(#mask)" width="100%" height="100%" rx="10" ry="10"/>
</svg>


В этой картинке подготавливается бакграунд со скруглёнными углами
*/
    noindex:-o-prefocus, .rounded-svg {
        background-image: url(data:image/svg+xml;base64,cюда нужно положить base64-кодированную картинку);
        border: none !important;
    }

    /* для разных браузеров указываем rounded corner через CSS3-свойство */
    .rounded-css3 {
        border: 1px solid black;
        -moz-border-radius: 1em;     /* mozilla 1.5 */
        -webkit-border-radius: 1em;  /* safari 3 */
        -khtml-border-radius: 1em;   /* Konqueror */
        border-radius: 1em;          /* CSS3 */
    }
</style>

</head>

<body >
    <!--[if vml]><v:roundrect class="rounded" strokecolor="black" strokeweight="1px" arcsize="0.25" ><![endif]-->
    <!--[if !vml]>--><div class="rounded rounded-css3 rounded-svg"><!--<![endif]-->
        <p>Вот эти ребята!</p>
    <!--[if !vml]>--></div><!--<![endif]-->
    <!--[if vml]></v:roundrect><![endif]-->
</body></html>

В коде есть несколько хаков. В частности, для «Оперы» я использую background, вставленный как SVG-изображение, через data URL. Поэтому приходится выключать border, иначе он закрывает края background. SVG закодировано в base64 (функция base64_encode в PHP), потому что оно занимает так меньше, чем в URL encoded.

Далее. Для IE включается VML, это, если кто не знает, появившаяся ещё до SVG технология построения векторных изображений. Более мощная, чем SVG, кстати. Весь VML включается через условные комментарии и другие браузеры этого безобразия не видят, в том числе их не увидит и валидатор (хотя ему и без VML тут есть на что поругаться).

Для остальных браузеров используются их префиксное свойство border-radius, которое включено в CSS3.

Поделиться
Отправить
59 комментариев
hshhhhh.name

опера 9.50 у меня на работе не подхватила, попробую ещё из дома.
сафари, фф и ие таки да, показали ).
болк крутой!

Free, Anonymous OpenID by http://www.jkg.in/ (www.jkg.in/openid/qfzh43mc)

<link rel=«stylesheet» href=«css/opera.css» type=«opera/css» media=«screen» />

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

Не работает на моей Opera 9.51

blog.ad.by

Ну почему никто, используют люди.
Например http://cssing.org.ua/2008/06/23/rounded-corners-unusual-approach/#comment-12678
Другое дело, что этот товарищ на меня сослался, но у меня SVG нет, только VML. Что ему мешало выкатить свой пример с SVG, я лично не совсем понимаю.

Про -khtml-border-radius не знал, спасибо. И вообще — отличная работа.

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

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

Спасибо!

Кстати, в поисках лучшего решения для «Оперы» (тут требовалось отрубить border), нашёл-таки CSS hack для 9.50, упоминания о нём есть changelogs на их сайте.

morozov.livejournal.com

Грязновато выглядит (смотрел в Опере и FF): визуально толщина скругленного участка границы кажется толще и шумит/шипит.

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

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

Ничего такого не вижу.

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

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

Можно screenshot?

blog.ad.by

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

В принципе, можно использовать SVG как фон и в Safari, но ограничения там дурацкие:
1) Начиная с Safari 3.1
2) Размер SVG должен совпадать с размером блока
http://ad.by/svg-test/svg_rounded_corner_safari31.html

muxa-ru.livejournal.com

Почему все делают скруглённые углы только кучей картинок или через CSS3-свойства?

Потому что качество лучше и ровнее.

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

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

Ну а тогда зачем? :) Прямой путь — это border-radius.

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

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

Где именно лучше и равнее и по сравнению с чем? У меня всё кругло и ровно.

xcellnt.livejournal.com

Вообще то «Konqueror», даже в коде это написано :) *на правах зануды*.

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

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

Я это слово без словаря не напишу :)

muxa-ru.livejournal.com

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

Где именно лучше и равнее и по сравнению с чем?

Лучше «с картинками». Качество скруглений не зависит от модели браузера и потому ровнее.

http://muxa.ru/img/bolk-round.jpg

Да и само по себе, качество скругления полученого из графического редактора будет выше чем сделает браузер. Специализация.

З.Ы. а теперь всё тоже самое плюс:

  • залить цветом
  • залить цветом и положить вертикальный градиент у верхней границы
  • залить цветом и положить горизонтальный градиент у левой границы
  • залить цветом и положить фоновую картинку прижатую в верхний-левый угол
muxa-ru.livejournal.com

З.З.Ы. под «качество ровнее» подразумевалось что скругления выглядят одинаково в разных браузерах, а не длина полученых блоков :)

muxa-ru.livejournal.com

Кстати, люди добрые. Сам я не местный, из-за злого BoЛka и его опытов поставил себе злостобучую Оперу 9.51. А типа «стилизована под хрен знает что». Как в ней вернуть нормальный вид?

zencd.livejournal.com

Вот рендеринг от четырёх бро:
http://www.picamatic.com/view/640057_rounds/

На мой взгляд приемлим только сафарийский вариант.

zencd.livejournal.com

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

http://habrahabr.ru/blog/opera/44411.html

savintsev.ru

Круто!
Болк молодец

muxa-ru.livejournal.com

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

О да-а-а-а!!!!!!!!!! Спасибо.

Ray T. Kerrygun (kerrygun.ru)

<blockquote>З.Ы. а теперь всё тоже самое плюс:

  • залить цветом
  • залить цветом и положить вертикальный градиент у верхней границы
  • залить цветом и положить горизонтальный градиент у левой границы
  • залить цветом и положить фоновую картинку прижатую в верхний-левый угол <blockquote>

И тенющечки, тенюшечки чтоб были.

Ray T. Kerrygun (kerrygun.ru)

Полупрозрачные.

arty (arty.name)

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

чтобы вернуть опере прежний вид: меню — tools — appearance — skin — classic
ну или  http://my.opera.com/spybot2d/blog/2008/06/07/classic-skin-for-opera-9-5-10051

blog.ad.by

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

Слушай, а ты -khtml-border-radius проверял? Он вообще работает?
Я пробовал Konqueror 4.00.83 (win32) и Konqueror 3.4.0 (cygwin) — не работает совсем. И в бинарниках не находится.

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

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

Дотюнить по размерам — дело несложное, это не так важно. Качество скругления мне на глаз кажется одинаковым.

Положить градиент картинкой совсем несложно, не понимаю в чём тут затруднения.

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

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

Она не стилизована под «хрен знает что», это новый скин и именно в нём будут все новые измененения происходить :)

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

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

Положить градиент картинкой совсем несложно, не понимаю в чём тут затруднения.

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

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

тенюшечки — через shadow или положить картинкой, тоже мне фокус :)

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

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

Не проверял, негде мне. В интернетах нашёл.

simonov.myopenid.com

в бете ie8 вообще не показывает.

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

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

В бете IE8 ничего смотреть нельзя.

ELV1S (elv1s.ru)

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

Мне мешала лень. Вот пример: http://elv1s.ru/files/html%2Bcss/vector-corners.html
Получилось почти как у Болка. Правда у него хаки другие и SVG вставлено через base64.

ELV1S (elv1s.ru)

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

У меня в ссылке опять «+» заменяется на «%20» :-(

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

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

У тебя же файлы сегодня созданы ;)  http://elv1s.ru/files/html%2Bcss/

ELV1S (elv1s.ru)

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

vector-corners.html сегодня был изменён и закачен. Ну, естественно это не актуально, после того-то как ты всё хорошо расписал уже.

0range (0range.ru)

эххх если б не опера мона была бы юзать border-radius :/
правда border-radius пока что через жопу реализован в сафари и лисе, но все же поддержка оперы не помешала
и вообще w3c тянет и тянет резину с css3 :(((((( пора им что то менять иначе css3 в полной форме выйдет лишь лет через 6-7

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

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

Если бы не «Опера» и не IE

0range (0range.ru)

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

да ие безнадежен или gracefull degradation для него или через экспрешены

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

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

В этом вопросе безнадёжна «Опера», в IE всё-таки что-то можно сделать.

faxenoff.livejournal.com

А возможно ли скриптом переконвертить обычный <div class=«rounded» /> в <v:roundrect class=«rounded />? Посмотрел через DOM, вроде обычная нода, только есть отличия в scopeName,tagUrn и nodeName. Вот как раз последнее я и не знаю как менять, если только не как обычно — сделать новую ноду, внутренности скопировать, старую грохнуть. Но это как то...

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

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

Можно и переконвертить. На MSDN есть примеры работы.

faxenoff.livejournal.com

Ну тогда алгоритм более-менее вырисовывается. В отдельном ie.css пишем в expression функцию конверчения, а в нужных селекторах её вызываем с параметрами цвета, радиуса уголков и прочим. Хорошо бы ещё и градиент сделать возможным. Там же обнуляем svg-бэгкраунд во избежание недоразумений.

+ Без кондишен коментариев.
+ Всё в css
+ Можно применять к чему угодно — названия классов не зашиты в функцию

  • Ну скрипт, ну так что же?

ps. Пока некогда самому, но если кто-то быстро реализует — отпишитесь здесь.

faxenoff.livejournal.com

Нарисовывается достаточно простое решение, без всяких if vml.
Объявляем ns:v и спокойно делаем <v:roundrect /> в Opera & FF. Оформляем их через css как v\:roundrect{}.

В xhtml+xml режиме Opera&FF работает как-то странно и приходится включать в css:
@namespace v «urn:schemas-microsoft-com:vml»; и использовать v|roundrect{}, но при этому всё равно какие-то глюки происходят.

Понадобилось сразу же сделать скруглённые уголки у картинок.
В IE всё решилось добавкой в
<v:roundrect>
    <v:fill type=«frame» src=«image.jpg» ></:fill>
</v:roundrect>

В FF и так всё хорошо.

В Opera возникла проблема — прописанный в svg <image /> работает отлично, но зачем нам такое нужно, плодить svg, особенно если используется cms?

К <img> SVG background-image применяется без успеха. Поэтому сейчас стоит проблема сделать сниффер изнутри svg, который бы определял src тэга <v:fill/> и вставлял его как src для <svg:image /> (внутри svg-файла). Пока у меня почему-то не получается добиться даже alert() из SVG вставленного как картинка (в режиме страницы text/html). Что-то мне кажется что и не получиться. 8-(

Может есть какие-то методы передать url как параметр в svg?

faxenoff.livejournal.com

Конкретнее по xhtml+xml режиму в Опера и FF:

Проблема в том, что на <v:roundrect> не действуют в css-ные правила через class & id. И даже аттрибут style не действует. Но по тэгу «v|roundrect» — всё работает. Видимо надо допрописывать DTD для <v:roundrect>.

Т. е. для окончательного решения вопроса требуется:

  1. Найти как заставить <v:tags> подчиняться css через классы.
  1. Достать src картинки из SVG, которое можно заранее прописать как атрибут <v:tags src=»...«> скриптом из svg (как-то надо пробиться к объекту, содержащему svg).
  1. Если 1 получилось, а 2 не получается — прописать в каждом <v:tags> свой style=«background-image:url(round.svg?myimage.jpg);» и внутри SVG скриптом определять параметр и использовать его на <image xlink:href=«top_logo_bg.jpg» />

И всё это только ради Оперы. 8-(

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

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

Посмотрите мою посленюю заметку, решение сразу найдётся. По поводу того как передать в SVG картинку сказать не могу, да и не надо это. Не понимаю чем плохо внедрять SVG в CSS.

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

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

Тем более, что SVG это вектор, а JPEG — растр. Именно поэтому я применяют svg background.

faxenoff.livejournal.com

Задача1: Множество разноцветных скруглённых блоков с разными id и class.
В IE+FF решаема без проблем. Я сразу отказался от [if vml] и сделал namespace:v для этих целей. А в Опере для каждого блока потребуется отдельный SVG. Хотелось бы использовать одну svg-маску, а фон менять стилями или скриптом (но тоже из стилей) — это же как-то должно делаться, ведь там везде xml. Внедрение svg как mime в css действительно наименьшее зло, но это неудобно.

Задача2: Скругление уголков у картинок (как пример: новостная лента или аватары)
Например при генерации кода, конечно же мы знаем адрес картинки и можем использовать его в html. Для того чтобы скруглить в Опере уголки у картинки, пока есть один способ — сделать svg с картинкой и маской и применить его как background-image. Но на все новостные картинки, мы, миллионы svg c бэграундами — не напасёмся.

p.s. Не забываем, что у мы используем всё только на блоках <v:roundrect> для интеграции с IE и забываем о замене его на div или на svg, чтобы не усложнять вёрстку.

p.p.s. Фон для картинок может быть любым и неоднородным. Обработка картинок на сервере не подходит.

-​-​-​-​-​-​-​-​-​-​-​-​-​-​-​-​-​
Сейчас я всё же делаю отдельные svg для каждого блока и применяю их через враппер (или просто через родительский блок) #wrapper v|roundrect{...} так как class на объекты из инопланетянского namespace не работает!

gr1b0k.livejournal.com

первый раз услышал о «noindex:-o-prefocus»
в спецификации указано что-то типа «если попадается незнакомый селектор- не парсить правило вообще»?

gr1b0k.livejournal.com

http://blog.ad.by/2008/08/easy-way-to-embed-transparent-png24.html

Кстати, валидатор от W3C таки научился понимать
пространства имен. Это позволяет не использовать
условные комментарии для включения VML.

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

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

Да, именно так в спецификации и написано. noindex — это просто тег, можно написать «xxx» или что-то другое.

tnq.livejournal.com

по моему есть один недочет у этого способа — при большом количестве содержимого в блоке также и увеличиваются скругления в ИЕ, ведь рисует он их в зависимости от размеров блока. Для ЦСС3 можно в пикселях задать скругление, для СВН — тоже, а вот с ИЕ облом.

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

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

Не пробовал на больших блоках, видимо зря. Так как схему утянули в несколько мест без указания источника, думаю, заниматься ей я не буду. Пусть занимаются те, кто утянул.

Мне-то самому скруглённые углы уже начинают надоедать.

romchus.livejournal.com

Лучше уж по старинке, слишком все заморочено и крайне не гибко... но прикольно...

Вообще только и мечтаю чтобы давно уже все браузеры перешли на css3 сидим блин в каменном веке и наслаждаемся фоксом

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

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

А FF каким-то прорывом является? Браузеры все более-менее борятся за функционал. Вряд ли кого-то можно выделить.

poltoraivana.ru

Да уж отличная статья. Только в вот в HTML вставлять SVG как то не корректно. Там всё проще картинками обыграть.

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

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

Кто это вам сказал, что некорректно?

бдбдбдб

Откройте ссылку та-да в ie8 посмотрите там нет углов только текст

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

Комментарий для бдбдбдб:

Ну так поправьте, чтобы в IE8 работал VML, тоже мне проблема. SVG в HTML появилось только в IE9. Ничего некорректного в этом нет.

Некорректно комментировать статью пятилетней давности. Откройте какую-нибудь более современную.

Популярное