Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 54
на букве «e» вы немного схалтурили =)
по поводу использования «некритичных прелестей CSS3» — думаю вполне можно. Пусть и 10-ая опера не поддерживает, но все равно это вопрос времени. Трешка все равно придет. Здесь нет неразберихи как в будущем языке разметки для веба: HTML 5 или XHTML 2 (или я что-то пропустил?).
Я боюсь, что полноценно использовать CSS3 мы сможем нескоро, IE только-только, с выходом IE8, начал поддерживать CSS2.
Дим, с оперой все проще. По версии которую я слышал (кстати на хабре) внутренние билды с бордер радиусом есть, он работает. Выпускать на свет их не хотят из-за некоторых разногласий в поведении вебкита и геко по этому вопросу. Грубо говоря Опера не готова принять ни чью сторону пока не выйдет четкая спецификация. Что за разногласия в поведении, не спрашивай, я не вдавался в подробности :) Для меня важнее что на свойство не забито, оно есть и в нужный момент его просто включат :)
Я согласен с тобой, потом его бы включили по спецификации, а сейчас и с -o- было бы здорово.
Это все-таки увеличивает количество реализаций ^^ и оттягивает момент принятия окончательного решения из-за этого (как будет в случае с тегом видео, для которого не прописан кодек, и разные браузеры используют разные — а значит, будет война форматов).
Конкретно про разногласия о рендере тоже сказать ничего не могу, но наглядно видна разница в том, как они скругляют (впрочем, это даже хорошо, в некотором смысле) :)
Также есть мизерная проблема в именовании www.css3.info/preview/rounded-border/ и проблема с разной размерностью в скруглении одного уголка (надо использовать border-top-left-radius: 5px 20px; вместо того чтобы прописать border-radius с 8 значениями)
Конкретно про разногласия о рендере тоже сказать ничего не могу, но наглядно видна разница в том, как они скругляют (впрочем, это даже хорошо, в некотором смысле) :)
Также есть мизерная проблема в именовании www.css3.info/preview/rounded-border/ и проблема с разной размерностью в скруглении одного уголка (надо использовать border-top-left-radius: 5px 20px; вместо того чтобы прописать border-radius с 8 значениями)
Вот приблизительная разница в рендеренге (кликабельно)
извращение
За Оперу действительно обидно, такой прогресивный браузер, Асид тест на 100% проходит, а бордер-радиус так и не научилась использовать. Если бы и опера умела так делать, на ие можно было бы спокойно положить, а так приходится извращаться.
честно говоря, вместо «ложить на IE» — я был бы более рад если бы мелкомягкие это научились это делать в IE — вот это было бы действительно круто.
А за оперой не постоит, они и так семимильными шагами развиваются, что не неделя — новая функциональность.
А за оперой не постоит, они и так семимильными шагами развиваются, что не неделя — новая функциональность.
Сейчас буду жаловаться: %)
А еще Опера до сих пор считает проценты integer'ами. Это дико бесит, невозможно быстро создать три равные колонки из дивов, задав им 33.3%, дробные части отбрасываются (даже не округляются).
Еще иногда сильно необходимо задать разные overflow для высоты и ширины, это она тоже не умеет. В то время как это есть у всех, включая шестого осла (overflow:[x] [y],overflow-x,overflow-y).
Ну и вот таких мелочей достаточно много.
Скорость «перерендера» отдельных объектов на странице тоже достаточно тормозная, это хорошо заметно на сложной анимации жыэсом.
PS: Опероводы, — у вас замечательный браузер ;) Это так, крик души, приходится много сталкиваться со сложной версткой и манипулированием кучей элементов через JS.
А еще Опера до сих пор считает проценты integer'ами. Это дико бесит, невозможно быстро создать три равные колонки из дивов, задав им 33.3%, дробные части отбрасываются (даже не округляются).
Еще иногда сильно необходимо задать разные overflow для высоты и ширины, это она тоже не умеет. В то время как это есть у всех, включая шестого осла (overflow:[x] [y],overflow-x,overflow-y).
Ну и вот таких мелочей достаточно много.
Скорость «перерендера» отдельных объектов на странице тоже достаточно тормозная, это хорошо заметно на сложной анимации жыэсом.
PS: Опероводы, — у вас замечательный браузер ;) Это так, крик души, приходится много сталкиваться со сложной версткой и манипулированием кучей элементов через JS.
за старание — 5, за верстку — 5+, за букву «е» заберу "+" от «5+», которую дал за верстку :)
молодец!
молодец!
давно использую прелести ксс3, где это возможно (бордер-радиус, техт-шадов и так по мелочи) и поддерживается. самое, наверное, более нужное свойство ксс3 это сабж, весьма жалко что опера (об ие и не мечтаем) его не держит :(
Для оперы можно применять SVG, в котором закругленны уголки.
а скрытый счётчик LI для проверки хабраэффекта? :)
не о технологии вообще, а о примере в частности
страница весит 11,4 Кб
принтскрин надписи в gif — 6,7 Кб и, о чудо!, он одинаково выглядит во всех браузерах
;)
страница весит 11,4 Кб
принтскрин надписи в gif — 6,7 Кб и, о чудо!, он одинаково выглядит во всех браузерах
;)
ради справедливости «взвесил» только стили: 8,8 Кб
Ради справедливости же стоит отметить что любой уважающий себя сервер сжимает передаваемый контент Gzip-ом.
Степень сжатия картинки и текста отличается примерно на порядок
Степень сжатия картинки и текста отличается примерно на порядок
ваша визитка —… :)
Классно стили у дивов назыаются
а почему некоторые буквы разной высоты? должны же быть одинаковой ;)
По хорошему да, надо привести всё к одной высоте и по ширине кое-что поправить. Спасибо, что заметили.
Выровнял ^_^
молодец
хорошая работа, хороший опыт!
думаю, многим будет полезна эта статья, только жаль, что не все браузеры это поддерживают… а можно было бы так классно оформлять блоки всякие
хорошая работа, хороший опыт!
думаю, многим будет полезна эта статья, только жаль, что не все браузеры это поддерживают… а можно было бы так классно оформлять блоки всякие
Именно выровнять? Хм — около пяти-семи минут.
Вот так — floomby.ru/content/mxeCvw1keU/ — эта задача становится и вовсе простой (красные линии — это дивы с красным фоном, на необходимых высотах).
Вот так — floomby.ru/content/mxeCvw1keU/ — эта задача становится и вовсе простой (красные линии — это дивы с красным фоном, на необходимых высотах).
доставило. спасибо
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Демонстрация свойства border-radius