Еще один способ использования свойства zoom

Категория: (css, html, Статьи) автор: Александр Бойченко дата: 10-12-2011

В 99.9% случаев CSS свойство zoom используется верстальщиками для активации hasLayout в IE. Я хочу рассказать о том 0.01% проценте использования этого свойства.
В те времена, когда трава была зеленее, миром правил IE, а дизайнеры учились рисовать сайты- приходилось часто сталкиваться с неоднозначными дизайнерскими решениями.
Одним из этих решений – кастомные скроллбары, например такие:
маленький скролл
Читать далее »

Полупрозрачный JPG

Категория: (img) автор: Александр Бойченко дата: 22-11-2011

Попался мне на глаза достаточно интересный способ значительно уменьшить размер большого полупрозрачного PNG.
Начнем с примера.  PNG – 334Кб, aJPG – 74 Кб.
Суть приёма в следующем.
Читать далее »

Кеширование jQuery за счет источников трафика.

Категория: (html, jQuery) автор: Александр Бойченко дата: 27-12-2010

Многие сайты львиную долю посетителей получают за счет источников переходов, это могут быть сайты, поисковые системы, каталоги, вики.

Так, вот почему бы не использовать уже загруженный jQuery у тех пользователей, которые только что пришли с подобных сайтов?

Предположим, у нас 3 сайта, которые генерируют существенный процент трафика.

  • Яндекс
  • Wikipedia
  • digg

Все они используют jQuery. Если определять HTTP_REFERER и подставлять сурс на jquery, используемый сайтом-источником перехода – можно получить профит, ведь в большинстве случав jQuery будет еще находится в кеше. Конечно, надо не забыть поставить сессионную куку, которая будет помнить, что у этого пользователя сегодня jquery кастомный, а не дефолтный.

Да, у этого приема есть и минусы, например надо постоянно мониторить генераторы трафика на актуальность ссылок, но это все делается весьма несложными автоматами.

p.s. Эту технику можно применять не только для jquery.
Возможно, этот велосипед уже где-то описывался, лично мне он пришел в голову только сегодня.

1861097.9903115.1306696357.2f536c093d61f73b3df89ed9d24b05d8

Не все теги одинаково полезны

Категория: (css, html, Статьи) автор: Александр Бойченко дата: 16-05-2010

Решил померять как быстро отрисовываются теги без применения к ним каких-либо стилей.

Суть теста – генерируем 10к тегов на одной странице и меряем reflow.

Результаты оказались очень любопытные.

Пока даю весьма скромную таблицу, с малым набором тегов.

Тег Safari 4.0.5 (mac) FF 3.6.3 (mac) Opera 10.53 (mac) iPad
div 173 270 218 710
span 52 608 113 294
p 173 287 235 711
b 50 607 116 299
i 50 600 1164 297

Очень странные результаты показал IE – почти нулевые рефлоу (поэтому пока не заполняю таблицу с результатами IE*)

Вывод:

  • в Opera и Safari inline элементы в 2 раза быстрее блочных
  • в FF все наоборот, блочные быстрее инлайновых в 2 раза
  • существую теги, которые серьезно влияют на рефлоу (например i в Опере и FF )

Скоро проведу более детальное исследование + проверим скорость основных css свойств.

upd. имена тегов в таблице ведут на соответствующие тесты

CSScomb в WebStorm – продолжение

Категория: (Новости) автор: Александр Бойченко дата: 06-04-2010

В продолжение моей вчерашней записи про CSScomb в WebStorm спешу поделиться более усовершенствованным скриптом.

Теперь он обрабатывает только .css файлы и умеет ходить по папкам, да-да, теперь можно применять CSScomb прямо к папке, содержащей css файлы или прямо к папке проекта.

Обновленный файл лежит по старой ссылке.
Инструкция по устаноке в предыдущей статье.

CSScomb в WebStorm – Сортировка CSS свойств

Категория: (css, html, WebIDE) автор: Александр Бойченко дата: 05-04-2010

Есть хороший проект называется CSScomb от Вячеслава Олиянчука aka miripiruni. Суть его в том, что он сортирует CSS свойста согласно определенному порядку, который мы выставляем самостоятельно. Уже есть плагины для Coda и TextMate. Однако я пользуюсь WebStorm (WebIde) и очень захотелось подобного функционала именно в нем. Ну что ж сказано – сделано :)
Читать далее »

Фильтры в IE8

Категория: (html) автор: Александр Бойченко дата: 31-03-2010

Больше всего камней в IE8, со стороны разработчиков, летело из-за того, что в нем не работали фильтры, которые понимали IE6-IE7.
Однако это не так, IE8 (в режиме IE=EmulateIE8) умеет отрабатывать фильтры.

Разработчики IE8 просто поменяли синтаксис вызова фильтра, теперь прийдется писать не
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
а
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";

Пример работы: http://banzalik.ru/labs/ie8filter/

P.s. эта информация несколько раз мелькала в интернетах, но почему-то должного внимания к себе не привлекла.

Произвольный цвет фона у PNG24 с прозрачностью в IE6

Категория: (html) автор: Александр Бойченко дата: 16-02-2010

Все знают про проблему полупрозрачных PNG-24 в IE6, выглядит она так

Серый фон, который заливает всю прозрачность, можно менять на произвольный цвет.

Эта статья о том, как избавиться от серого фона при этом не потеряв полупрозрачность :)
Читать далее »

Веб-шрифты vs. Шрифты для веба и IE6

Категория: (Новости) автор: Александр Бойченко дата: 05-12-2009

Так получилось, что я использовал технику вставки шрифтов в страницу еще до выступления Вадима в Минске, поэтому решил написать небольшое дополнение к выступлению Вадима Макеева – «Веб-шрифты vs. Шрифты для веба.«.

Читать далее »

Универсальный способ декорирования блоков – создание спрайта

Категория: (html) автор: Александр Бойченко дата: 11-11-2009

Не так давно Сергей Чикуёнок описал способ декорирования блоков. Способ мне показался довольно интересным, однако ключевой особенностью этого метода является использование необычного спрайта о быстром создании которого и пойдет речь ниже.
Читать далее »