-
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 комментариев
библиотеку потестим.
по сайту: красиво так. лично мне не нравится только иконка 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%;
Как побороть косяк, что нижние уголки висят на месте при изменении высоты блока?
Снова я 🙂
1. Сергей а зачем делать margin-left:100% для всех версий осла, а не только для 6ой? Либо в коде не работает if(browser.version < 7)
2. Почему уголки смешаются больше на 1 пиксель, чем ширина рамки? width:7px; left:-5px;
1. Просто хотел по-меньше использовать browser sniffing. Это универсальное решение для всех браузеров.
2. По-моему были кое-какрие неточности с поворотом VML объекта, и он был смещён как раз на один пиксель. Поэтому ставлю такую поправку. Если не ошибаюсь, такая поправка действует только для правых уголков.
1. Может все таки для всех браузеров кроме ie6 сделать нормально по углам, а уже умирающее животное через margin и прочее?
2. На тестовой странице самый первый блок правые уголки в осле торчат правей блока…
1. rocon делался во времена активного использования IE6. К тому же, решение одинаково работает во всех браузерах. Зачем ставить дополнительные проверки и усложнять жизнь кодерам, которые хотят переопределить что-то в CSS?
2. Да, может где-то ошибка закралась. Но помню, что сталкивался с проблемами смещения.
Спасибо за библиотеку!
Сергей, спасибо за библиотеку!
У оперы глюк с цветом бордера в местах скругления. Собственно вопросы:
1. В чем причина, есть ли метод лечения?
2. Если нет метода, то в исходнике видел строку (217) «TODO Добавить исключение при правильной работе border-radius». Как добавить это исключение для оперы >= 10.50 ? Простое добавление border-radius в css «перекрывается» rocon’ом.
Заранее благодарен!
Вчера так же был замечен глюк в осле. A display:block вложен SPAN с background, фон от SPAN раскидался по углам A
rocon сейчас находится в заброшенном состоянии, так как я не вижу в нём особого смысла: скоро выйдет IE9, после чего все производители браузеров будут нативно поддерживать скруглённые уголки.
Это не какая-то жизненно важная фича, без которой сайт не будет работать, просто декорация. Желающие поддерживать её могут взять исходный код новой версии библиотеки и довести её до ума (она почти готова): http://github.com/sergeche/rocon
Не думаю что с выходом IE9 кол-во проблем уменьшится, а даже наоборот… и заказчикам трудно объяснить, что это просто декорация…
Здравствйте, хотел прикрепить ваш скрипт к скрипту модуля thickbox для друпал. работать его удалось заставить только на опере, что печально. Действовал — добавил после всех append(‘див с ид=TB_window ‘) строку rocon.update($(«#TB_window»).get(0)); — что видимо не свовсем верно. можете помочь разобраться в проблеме?
Сергей, подскжите, решена ли проблема закругленных углов плюс вращение с помощью -ms-filter: «progid:DXImageTransform.Microsoft.Matrix
Спасибо.