-
rocon — подробности
Рассмотрим, как работает библиотека rocon.
rocon дожидается загрузки DOM-дерева документа и ищет все элементы с классом
rcN, где N — радиус скругления, и добавляет им скругленные уголки.Safari
Создается новая новая таблица стилей в документе, в которой классам
rcNуказываются CSS-свойства-webkit-border-radiusи-khtml-border-radius.Firefox
По аналогии с Safari указывается CSS-свойство
-moz-border-radius.Opera
Через <canvas> рисуется звездочка, которая затем преобразуется в data: URL картинку. Затем для каждого уголка создается по отдельному элементу и каждому указывается эта картинка в качестве фона. Все CSS-свойства указываются в таблице стилей, а не в самих элементах (это значит, что их можно легко перекрывать).
Internet Explorer
Такой же способ, как и у Opera, только используется VML. Соответственно, уголок вставляется как элемент, а не как фоновая картинка.
С первыми двумя случаями все довольно просто: используем внутренние возможности браузера для рисования скругленных уголков. Для двух последних все намного сложнее. После инициализации основному блоку указывается класс
rocon-init— это значит, что элемент был инициализирован. Также добавляется классrocon__N, где N — некий порядковый номер, характеризующий набор уникальных свойств блока: радиус скругления, цвет фона, толщина бордюра и так далее. Соответственно, если попадаются элементы с одинаковым набором этих характеристик, новые уголки не рисуются, а достаются из кэша. Для каждого создаваемого элемента с уголком присваиваются классыrocon-tl,rocon-tr,rocon-bl,rocon-br, что означает, соответственно, левый верхний, правый верхний, левый нижний и правый нижний. Все стили записываются в новую таблицу стилей, а не в сам элемент. Тем самым вы можете менять некоторые свойства уголка через CSS, что будет особенно полезно в IE6. Дело в том, что в этом браузере неправильно работают CSS-свойстваrightиbottom. И если первое свойство я смог эмулировать с помощьюmargin-left: 100%, то со вторым проблема: я пока не знаю, как это можно исправить. Поэтому вам придется указывать вручную его позицию. Так как уголок добавляется в самый конец блока, вы можете воспользоваться тем, что его сместит контент блока в самый низ и подкорректировать его позицию с помощью свойстваmargin-top(на забудьте поставитьbottom: auto).Можно в любой момент добавить любому блоку скругление или поменять его свойства (радиус, цвет фона и так далее). Чтобы изменения вступили в силу, нужно вызвать метод
rocon.update(elem), гдеelem— указатель на элемент, который нужно обновить.Все пожелания и комментарии просьба указывать в багтрекере.
44 комментария
библиотеку потестим.
по сайту: красиво так. лично мне не нравится только иконка RSS. мутняг какой-то =)
Учту
В Opera можно использовать SVG, тогда не придётся использовать Canvas.
Насколько я понимаю, речь о SVG в data: URL? Тогда сложнее будет сгенерировать скриптом нужную картинку.
Интересны различия с http://dillerdesign.com/experiment/DD_roundies/. Судя по описанию - методы теже используются. А что по производительсности?
Методы похожи тем, что и там, и у меня используется VML. В остальном — различия. Там рисуется весь блок с уголками на VML и накладывается сверху. А дальше начинается жесть: с помощью expressions отслеживаются изменения позиции и габаритов блока, чтобы изменить их в случае, например, изменения размера шрифта или растягивании браузера. К тому же, поменять свойства созданного блока довольно проблематично (например, на hover поменять цвет блока).
Я задумывал библиотеку с учетом требований по производительности (никаких сторонних процессов для создания растягивающихся блоков), гибкости (менять цвет фона блока с помощью CSS) и количества (можно без особых проблем сделать 100 блоков на странице).
Cпасибо, буду пробовать.
Огромное спасибо за библиотеку! Наиболее стабильная из всех, которыми я пользовался. Единственный минус — нет возможности задавать, какие именно уголки необходимо закруглить. Т.е. классы
.rcN-tl, .rcN-tr, .rcN-br и .rcN-bl,
а также rcN-t (объединяющий rcN-tl и rcN-tr) и т.д.
очень бы пригодились.
Пытался добавить такой функционал сам, но не смог. Не программист я…
С уважением.
Такая возможность будет в новой версии, которая скоро появится. Пока можно поступить вот так.
Да я сейчас так и делаю ) Спасибо за оперативность, буду ждать!
Не понял почему именно библиотеку вы называете экспериментальной.
Она пока не прошла необходимой «сертификации»: не проверил на реальных сайтах, не проверил по производительности, не проверил по удобству и так далее. Я сейчас активно разрабатываю новую версию, там будут исправлены проблемы производительности в Opera и добавлено много новых фич.
В хроме, не красиво смотрятся углы, может, сделать звездочкой или другими внутренними средствами.
Спасибо, проверю
Кстати, в IE6 проблема с вложенными скругленными блоками. На http://chikuyonok.ru/playground/rocon/ в IE6 у Nested blocks внизу видны зазоры в 1px.
И еще в некоторых случаях скрипт не скругляет углы у вложенного блока, но скругляет у родителя.
В любом случае ждем новую версию. Спасибо за труд!
Я об этом написал в «подробностях».
А можете пример привести?
очень! а в будущем возможно будет задавать единицы измерения? например, em вместо px хотя бы для safari/firefox.
Это можно и сейчас делать, если переопределить CSS-свойства у этих элементов.
создание теней для скругленных элементов + взможность дорисовывать тени к эементам на странице, былобы замечательно
С тенями все не так просто, для них у меня припасена отдельная идейка.
Opera пропускает текстовые инпуты (другие пока не смотрел), а ie на них затыкается и не отрисовывает уголки на других элементах вообще. С -webkit-/-moz- проблем конечно же нет
Ок, попробую придумать что-нибудь
http://www.dillerdesign.com/experiment/DD_roundies/
Скрипт с похожей функциональностью, правда IE8 не поддерживает (точнее поддерживает, но как-то криво), а также оперу не поддерживает
Если посмотрите, что он делает с вашей страницей, у вас отпадет желние им пользоваться
Хромыга 3й (вебкит из последних) плоховато прорисовывает, и не мешало бы попеарить либу, а то я её случайно нашёл %)
Совсем забыл, либа чудесна
Спасибо, проверю в Хроме. А библиотеку начну пиарить, когда доделаю новую версию.
досадный баг с text-align: center; для блока с круглыми углами у ие6. пример кода и скриншот результата закинул в багтрекер - http://code.google.com/p/rocon/issues/detail?id=8
Сергей, когда ожидается новая версия? примерно хотя бы - неделя, месяц, год?
понравилась текущая версия, потому очень жду новой с новыми плюшками 
всё, что я пробовал ДО этой библиотеки, - редкое г*** , да ещё и жутко прожорливое…
Спасибо за приятный отзыв
На этой неделе все мое свободное время уже занято, постараюсь занятся ей со следующей недели. Она уже готова где-то на 70%, осталось побороть жуткие тормоза в Опере и попробовать добавить поддержку background-image
Добрый день Сергей,
Можно узнать когда планируется новая версия с возможностью описанной Николем 15 марта 2009 года (возможность скругления нужных уголков)?
Времени, как обычно, не хватает
Сейчас я довожу до более-менее стабильного состояния zen coding, после чего брошу все силы на rocon.
Хотел вот о чем спросить, в IE7 не округляется рамка (http://qik.su/Z/test.html) из-за моих кривых рук или виноват MS?
эх… заждались уже совсем… если уже новая версия не светит в ближайшее время, то, может, подскажете, как быть с хромом? у него углы просто ужасные получаются.. может забить на его кривую поддержку свойства бордер-радиус и тоже рисованные подставлять, как для оперы?
Крутейшая библиотека
скажите, когда планируется выпуск второй версии? также хотелось бы иметь краткую русскую документацию со всеми настройками, а также результаты тестов - в каких случаях работает, а в каких не стоит применять. На поддержку ие6 тратить силы уже наверное нет смысла, более важна работоспособность в ие8 и опера 10.
Очень важно учесть поддержку некоторыми версиями CSS3 свойства border-radius
Комменты не читал, может кто и заметил выше уже, но:
1) в сафари 3.0.2 не пашет
2) в FF2 как я и говорил, уголки отвратительного качества без сглаживания
3) и последнее, в Опере 9.2 не пашет на inline-элементах )
а так гуд конечно, well done, trooper! © CrimsonLand
в ие6 расчлененка если поставить на блок text-align:center (может даже и left, right), притом пробовал как и на сам блок с классом “rc-N” так и на внутренний..
как выяснилось, чтобы исправить ситуацию в ие при text-align, нужно добавить следующее:
.rocon-init .rocon-tl, .rocon-init .rocon-bl { text-align:left; }
Кстати, новая Опера 10.50 уже поддреживает родной border-radius
В FireFox нашел весьма печальный баг.
Применение -moz-border-radius к изображениям не дает в FF никакого результата, поэтому в такой ситации ничем помочь (пока) не может. Т.е. в остальных браузерах все классно - уголки дорисоваваются и вуаля. А в FF полагаемся на border-radius и пролетаем. И такая фигня в мозиле даже в версии 3.6
Что же я ее раньше не нашел, столько времени и нервов экономит, спасибо
Тем самым вы можете менять некоторые свойства уголка через CSS, что будет особенно полезно в IE6. Дело в том, что в этом браузере неправильно работают CSS-свойства right и bottom.
а если делать
margin-top:-XXpx; bottom:auto; top:100%;
Как побороть косяк, что нижние уголки висят на месте при изменении высоты блока?