Архив за Февраль 2009

  • Смотрим в браузер клиента

    Нереально крутой сервис: http://www.wizhelp.com.

    Позволяет прямо в браузере смотреть и управлять удаленным рабочим столом. Например, пишет клиент: «У меня что-то не работает на сайте». Максимум, что можно добиться от клиента в такой ситуации — скриншот сайта, а потом пытаться «вылечить по фотографии». Теперь его можно отправить на этот абсолютно бесплатный сервис и посмотреть, что же на самом деле у него происходит.

    Все что нужно — поддержка Java. Протестировал на маке и винде, все работает замечательно.

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

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

    Метки: , ,
  • rocon — экспериментальная библиотека для создания скругленных уголков

    Устав каждый раз создавать новые картинки для блоков с разным радиусом скругления и цветом фона, решил создать библиотеку, которая сама будет рисовать необходимые картинки и размещать их на странице.

    Библиотека называется rocon. Работает она довольно просто: подключаете файл rounded-corners.js на страницу и нужным блокам указываете класс rcN, где N — радиус скругления:

    <script type="text/javascript" src="rounded-corners.js"></script>
    <div class="rc10" style="background: red; padding: 5px;">Rounded block</div>
    

    Получим блок с радиусом скругления в 10 пикселей.

    Метод создания скруглений основан на моей лекции в Техногрете. Так же, как и в лекции, можно создавать скругления двух типов: формы и контр-формы. По умолчанию создается контр-форма, для создания формы нужно указать класс rc-shape:

    <script type="text/javascript" src="rounded-corners.js"></script>
    <div class="rc10 rc-shape" style="background: red; padding: 5px;">Rounded block</div>
    

    Вот основные достоинства библиотеки:

    • Работает во всех современных браузерах: IE6+, Safari 3+, Firefox 2+, Opera 9.25+.
    • Позволяет без проблем с производительностью создавать десятки скругленных блоков на странице (в моих тестах 100 блоков создавалось около 1 секунды).
    • Можно динамически менять цвет фона блока и радиус скругления с помощью метода rocon.update(elem).
    • Уголками можно управлять через CSS.
    • В IE6 этот способ будет работать намного быстрее, чем использование полупрозрачных PNG через AlphaImageLoader.

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

    Скачать с Google.Code

  • Opacity и AlphaImageLoader в IE

    Как известно, для отображения полупрозрачных PNG в IE6 нужно использовать CSS-фильтр AlphaImageLoader. Однако при использовании нескольких фильтров на одном элементе (например, Opacity и AlphaImageLoader) начинаются неприятности: у картинки появляются мерзкие артефакты:

    ie

    Решение проблемы довольно простое: прозрачность нужно указать не у самого элемента, а у его родителя.

    Посмотреть пример

    Метки: , ,
  • Загрузка картинок по требованию

    К своему стыду я был постоянно уверен, что если картинке указать
    display: none, то она не загрузится. На одном из последних проектов убедился, что это совсем не так: почти во всех браузерах картинка загрузится.

    Перепробовав кучу комбинаций HTML и CSS, остановился на таком решении:

    <div style="display: none">
    	<img src="empty.png" style="background-image: url(image1.jpg);" width="100" height="100" />
    	<img src="empty.png" style="background-image: url(image2.jpg);" width="100" height="100" />
    	<img src="empty.png" style="background-image: url(image3.jpg);" width="100" height="100" />
    </div>
    

    display: none нужно указывать именно у родителя, а не у самих картинок. Чтобы картинка в скрытом блоке не загружалось, нужно вынести ее из атрибута src. В данном случае я вынес ее стиль: при отключенном джаваскрипте пользователь сможет увидеть картинку (если вы об этом заранее позаботитесь).

    Другие комбинации давали разный результат в разных браузерах: кто-то загружал, кто-то не загружал.

    Метки: ,

← cтарое