• 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 — указатель на элемент, который нужно обновить.

    Все пожелания и комментарии просьба указывать в багтрекере.

    Метки: , ,
  • 55 комментариев

    1. 27 февраля 2009

      библиотеку потестим.

      по сайту: красиво так. лично мне не нравится только иконка RSS. мутняг какой-то =)

    2. Сергей Чикуенок
      27 февраля 2009

      Учту :)

    3. 1 марта 2009

      В Opera можно использовать SVG, тогда не придётся использовать Canvas.

    4. Сергей Чикуенок
      1 марта 2009

      В Opera можно использовать SVG, тогда не придётся использовать Canvas.

      Насколько я понимаю, речь о SVG в data: URL? Тогда сложнее будет сгенерировать скриптом нужную картинку.

    5. 1 марта 2009

      Интересны различия с http://dillerdesign.com/experiment/DD_roundies/. Судя по описанию – методы теже используются. А что по производительсности?

    6. Сергей Чикуенок
      2 марта 2009

      Судя по описанию – методы теже используются. А что по производительсности?

      Методы похожи тем, что и там, и у меня используется VML. В остальном — различия. Там рисуется весь блок с уголками на VML и накладывается сверху. А дальше начинается жесть: с помощью expressions отслеживаются изменения позиции и габаритов блока, чтобы изменить их в случае, например, изменения размера шрифта или растягивании браузера. К тому же, поменять свойства созданного блока довольно проблематично (например, на hover поменять цвет блока).

      Я задумывал библиотеку с учетом требований по производительности (никаких сторонних процессов для создания растягивающихся блоков), гибкости (менять цвет фона блока с помощью CSS) и количества (можно без особых проблем сделать 100 блоков на странице).

    7. 3 марта 2009

      Cпасибо, буду пробовать.

    8. Николай
      15 марта 2009

      Огромное спасибо за библиотеку! Наиболее стабильная из всех, которыми я пользовался. Единственный минус — нет возможности задавать, какие именно уголки необходимо закруглить. Т.е. классы
      .rcN-tl, .rcN-tr, .rcN-br и .rcN-bl,
      а также rcN-t (объединяющий rcN-tl и rcN-tr) и т.д.
      очень бы пригодились.

      Пытался добавить такой функционал сам, но не смог. Не программист я…
      С уважением.

    9. Сергей Чикуенок
      15 марта 2009

      Такая возможность будет в новой версии, которая скоро появится. Пока можно поступить вот так.

    10. Николай
      15 марта 2009

      Да я сейчас так и делаю ) Спасибо за оперативность, буду ждать!

    11. 28 марта 2009

      Не понял почему именно библиотеку вы называете экспериментальной.

    12. Сергей Чикуенок
      28 марта 2009

      Она пока не прошла необходимой «сертификации»: не проверил на реальных сайтах, не проверил по производительности, не проверил по удобству и так далее. Я сейчас активно разрабатываю новую версию, там будут исправлены проблемы производительности в Opera и добавлено много новых фич.

    13. Аркатов Дмитрий
      29 марта 2009

      В хроме, не красиво смотрятся углы, может, сделать звездочкой или другими внутренними средствами.

    14. Сергей Чикуенок
      29 марта 2009

      Спасибо, проверю

    15. Николай
      14 апреля 2009

      Кстати, в IE6 проблема с вложенными скругленными блоками. На http://chikuyonok.ru/playground/rocon/ в IE6 у Nested blocks внизу видны зазоры в 1px.
      И еще в некоторых случаях скрипт не скругляет углы у вложенного блока, но скругляет у родителя.

      В любом случае ждем новую версию. Спасибо за труд!

    16. Сергей Чикуенок
      14 апреля 2009

      Кстати, в IE6 проблема с вложенными скругленными блоками.

      Я об этом написал в «подробностях».

      И еще в некоторых случаях скрипт не скругляет углы у вложенного блока, но скругляет у родителя.

      А можете пример привести?

    17. Кир
      3 мая 2009

      очень! а в будущем возможно будет задавать единицы измерения? например, em вместо px хотя бы для safari/firefox.

    18. Сергей Чикуенок
      3 мая 2009

      Это можно и сейчас делать, если переопределить CSS-свойства у этих элементов.

    19. 13 мая 2009

      создание теней для скругленных элементов + взможность дорисовывать тени к эементам на странице, былобы замечательно

    20. Сергей Чикуенок
      13 мая 2009

      С тенями все не так просто, для них у меня припасена отдельная идейка.

    21. Кир
      14 мая 2009

      Opera пропускает текстовые инпуты (другие пока не смотрел), а ie на них затыкается и не отрисовывает уголки на других элементах вообще. С -webkit-/-moz- проблем конечно же нет :)

    22. Сергей Чикуенок
      14 мая 2009

      Ок, попробую придумать что-нибудь

    23. Рустам
      20 мая 2009

      http://www.dillerdesign.com/experiment/DD_roundies/
      Скрипт с похожей функциональностью, правда IE8 не поддерживает (точнее поддерживает, но как-то криво), а также оперу не поддерживает

    24. Сергей Чикуенок
      20 мая 2009

      Если посмотрите, что он делает с вашей страницей, у вас отпадет желние им пользоваться :)

    25. 10 июня 2009

      Хромыга 3й (вебкит из последних) плоховато прорисовывает, и не мешало бы попеарить либу, а то я её случайно нашёл %)

    26. 10 июня 2009

      Совсем забыл, либа чудесна ;)

    27. Сергей Чикуенок
      10 июня 2009

      Спасибо, проверю в Хроме. А библиотеку начну пиарить, когда доделаю новую версию.

    28. set
      18 июня 2009

      досадный баг с text-align: center; для блока с круглыми углами у ие6. пример кода и скриншот результата закинул в багтрекер – http://code.google.com/p/rocon/issues/detail?id=8

    29. set
      18 июня 2009

      Сергей, когда ожидается новая версия? примерно хотя бы – неделя, месяц, год? :) понравилась текущая версия, потому очень жду новой с новыми плюшками ;) :) всё, что я пробовал ДО этой библиотеки, – редкое г*** , да ещё и жутко прожорливое…

    30. Сергей Чикуенок
      18 июня 2009

      Спасибо за приятный отзыв :)
      На этой неделе все мое свободное время уже занято, постараюсь занятся ей со следующей недели. Она уже готова где-то на 70%, осталось побороть жуткие тормоза в Опере и попробовать добавить поддержку background-image

    31. 2 июля 2009

      Добрый день Сергей,
      Можно узнать когда планируется новая версия с возможностью описанной Николем 15 марта 2009 года (возможность скругления нужных уголков)?

    32. Сергей Чикуенок
      2 июля 2009

      Времени, как обычно, не хватает :) Сейчас я довожу до более-менее стабильного состояния zen coding, после чего брошу все силы на rocon.

    33. 2 июля 2009

      Хотел вот о чем спросить, в IE7 не округляется рамка (http://qik.su/Z/test.html) из-за моих кривых рук или виноват MS?

    34. set
      29 сентября 2009

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

    35. 11 ноября 2009

      Крутейшая библиотека

    36. dr.kos
      18 декабря 2009

      скажите, когда планируется выпуск второй версии? также хотелось бы иметь краткую русскую документацию со всеми настройками, а также результаты тестов – в каких случаях работает, а в каких не стоит применять. На поддержку ие6 тратить силы уже наверное нет смысла, более важна работоспособность в ие8 и опера 10.

    37. dr.kos
      18 декабря 2009

      Очень важно учесть поддержку некоторыми версиями CSS3 свойства border-radius

    38. Joe
      20 февраля 2010

      Комменты не читал, может кто и заметил выше уже, но:
      1) в сафари 3.0.2 не пашет
      2) в FF2 как я и говорил, уголки отвратительного качества без сглаживания
      3) и последнее, в Опере 9.2 не пашет на inline-элементах )
      а так гуд конечно, well done, trooper! © CrimsonLand

    39. Your Banny Wrote
      12 марта 2010

      в ие6 расчлененка если поставить на блок text-align:center (может даже и left, right), притом пробовал как и на сам блок с классом “rc-N” так и на внутренний..

    40. Your Banny Wrote
      14 марта 2010

      как выяснилось, чтобы исправить ситуацию в ие при text-align, нужно добавить следующее:
      .rocon-init .rocon-tl, .rocon-init .rocon-bl { text-align:left; }

    41. Эльдар
      16 марта 2010

      Кстати, новая Опера 10.50 уже поддреживает родной border-radius

    42. Vlad43
      14 апреля 2010

      В FireFox нашел весьма печальный баг.
      Применение -moz-border-radius к изображениям не дает в FF никакого результата, поэтому в такой ситации ничем помочь (пока) не может. Т.е. в остальных браузерах все классно – уголки дорисоваваются и вуаля. А в FF полагаемся на border-radius и пролетаем. И такая фигня в мозиле даже в версии 3.6

    43. 27 июля 2010

      Что же я ее раньше не нашел, столько времени и нервов экономит, спасибо

    44. 27 июля 2010

      Тем самым вы можете менять некоторые свойства уголка через CSS, что будет особенно полезно в IE6. Дело в том, что в этом браузере неправильно работают CSS-свойства right и bottom.
      а если делать
      margin-top:-XXpx; bottom:auto; top:100%;

      Как побороть косяк, что нижние уголки висят на месте при изменении высоты блока?

    45. 10 августа 2010

      Снова я :)
      1. Сергей а зачем делать margin-left:100% для всех версий осла, а не только для 6ой? Либо в коде не работает if(browser.version < 7)
      2. Почему уголки смешаются больше на 1 пиксель, чем ширина рамки? width:7px; left:-5px;

    46. Сергей Чикуенок
      10 августа 2010

      1. Просто хотел по-меньше использовать browser sniffing. Это универсальное решение для всех браузеров.
      2. По-моему были кое-какрие неточности с поворотом VML объекта, и он был смещён как раз на один пиксель. Поэтому ставлю такую поправку. Если не ошибаюсь, такая поправка действует только для правых уголков.

    47. 10 августа 2010

      1. Может все таки для всех браузеров кроме ie6 сделать нормально по углам, а уже умирающее животное через margin и прочее?
      2. На тестовой странице самый первый блок правые уголки в осле торчат правей блока…

    48. Сергей Чикуенок
      11 августа 2010

      1. rocon делался во времена активного использования IE6. К тому же, решение одинаково работает во всех браузерах. Зачем ставить дополнительные проверки и усложнять жизнь кодерам, которые хотят переопределить что-то в CSS?

      2. Да, может где-то ошибка закралась. Но помню, что сталкивался с проблемами смещения.

    49. 4 сентября 2010

      Спасибо за библиотеку!

    50. john smith
      15 октября 2010

      Сергей, спасибо за библиотеку!

      У оперы глюк с цветом бордера в местах скругления. Собственно вопросы:

      1. В чем причина, есть ли метод лечения?

      2. Если нет метода, то в исходнике видел строку (217) “TODO Добавить исключение при правильной работе border-radius”. Как добавить это исключение для оперы >= 10.50 ? Простое добавление border-radius в css “перекрывается” rocon’ом.

      Заранее благодарен!

    51. 15 октября 2010

      Вчера так же был замечен глюк в осле. A display:block вложен SPAN с background, фон от SPAN раскидался по углам A

    52. Сергей Чикуенок
      15 октября 2010

      rocon сейчас находится в заброшенном состоянии, так как я не вижу в нём особого смысла: скоро выйдет IE9, после чего все производители браузеров будут нативно поддерживать скруглённые уголки.

      Это не какая-то жизненно важная фича, без которой сайт не будет работать, просто декорация. Желающие поддерживать её могут взять исходный код новой версии библиотеки и довести её до ума (она почти готова): http://github.com/sergeche/rocon

    53. 15 октября 2010

      Не думаю что с выходом IE9 кол-во проблем уменьшится, а даже наоборот… и заказчикам трудно объяснить, что это просто декорация…

    54. cozmi
      2 декабря 2010

      Здравствйте, хотел прикрепить ваш скрипт к скрипту модуля thickbox для друпал. работать его удалось заставить только на опере, что печально. Действовал – добавил после всех append(‘див с ид=TB_window ‘) строку rocon.update($(“#TB_window”).get(0)); – что видимо не свовсем верно. можете помочь разобраться в проблеме?

    55. Людмила
      15 ноября 2012

      Сергей, подскжите, решена ли проблема закругленных углов плюс вращение с помощью -ms-filter: “progid:DXImageTransform.Microsoft.Matrix

      Спасибо.

    Комментировать

    Powered by Zen Coding

    (Spamcheck Enabled)