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

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

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

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

Вывод:

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

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

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

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

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

Представляю вашему вниманию CSScomb для WebStorm for Mac OS\Linux.

Идея на самом деле очень простая – модифицировать php скрипт CSScomb таким образом, чтоб он обрабатывал нужный мне css файл. Это оказалось довольно просто. Сам скрипт пока очень сырой, он не умеет проверять *.css файл это или нет или обрабатывать целые папки…

Что необходимо для установки:

• Mac OS
• установленный PHP
• Скачать CSScomb для WebStorm
• Сам WebStorm

Установка:

• Распаковать csscomb.php.zip – в удобную для Вас директорию.
• Запустить WebStorm.
• Открыть настройки
• Найти External tools
• Нажать Add
• В открывшимся окне заполнить поля
  • Name: CSScomb
  • Description: CSS normalizer
  • Галочки оставляем все
  • Program: php
  • Parameters: /path/to/csscomb.php $FilePath$
  • Ok

Парочка скринов:

Пример работы скрипта можно посмотреть http://miripiruni.org/css-reorder/. Сами правила можно редактировать в файле csscomb.php.

Подозреваю, что под Windows миграция будет абсолютно безболезненная.

UPD. Скрипт доступен на гитхабе проекта CSScomb

Разработчики 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. эта информация несколько раз мелькала в интернетах, но почему-то должного внимания к себе не привлекла.

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

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

Сделать это можно с помощью инструмента tweakpng (http://entropymine.com/jason/tweakpng/), сам инструмент работает под виндой

Для этого открываем нужный файл (можно перетаскиванием)
затем в меню insert -> bKGD (Background color) -> выставляем нужный цвет -> сохраняем

в результате добавляется еще одна строка

теперь PNG-24 в IE6 выглядит следующим образом

Внимание: такие картинки не рекомендуется скармливать png оптимизаторам, некоторые из них могут удалить параметр bKGD, и IE6 снова будет показывать серый фон

Нормальные браузеры по прежнему будут показывать полупрозрачность…

При использовании фильтра alphaimageloader – bKGD игнорируется и рисуется прозрачный фон.

Для любознательных http://banzalik.ru/labs/ie6png24bg/ – смотреть в IE6

UPD: обратите внимание на то, что мы не убиваем прозрачность, мы меняем этот противный серый фон, на любой другой, при этом сама полупрозрачность есть, и мы ее получим, применив фильр к картинке!

В процессе работы я столкнулся с проблемой – IE6 упорно не хотел показывать некоторые символы, что меня весьма огорчило. Сперва я грешил на шрифт, но после выступления Вадима решил провести небольшое исследование…

Я скачал 6 готовых наборов с сайта http://www.fontsquirrel.com/fontface и вставил в них таблицы спецсимволов, дабы посмотреть на результат. Увы я зря грешил на шрифт, на всех шести страницах, IE6 показал одинаковый результат, определенные символы не показываются или вместо них показывается прямоугольник. Возможно проблема и не в 6ИЕ, а в конвертере fontsquirrel, но это уже тема для отдельного эксперимента :)

Вывод: на данный момент, технику вставки шрифтов нужно использовать с осторожностью, так как рискуем в IE6 получить совершенно не тот результат, что ожидали. В крайнем случаи применять трансформацию шрифтов для заголовков в содержании которых мы уверены,  и там точно не появится длинное тире или знак евро…

Скрин проблемы:

Ссылки на тестовые страницы:
http://banzalik.ru/labs/fonts/0/ – оригинальные таблицы, шрифты не подгружаются
http://banzalik.ru/labs/fonts/1/
http://banzalik.ru/labs/fonts/2/
http://banzalik.ru/labs/fonts/3/
http://banzalik.ru/labs/fonts/4/
http://banzalik.ru/labs/fonts/5/
http://banzalik.ru/labs/fonts/6/

Ссылки по теме:
Павел Ловцевич – @font-face или назад в будущее/
Вадим Макеев – Веб-шрифты vs. Шрифты для веба
Юрий Артюх – font-face оживление

спрайт вида

размером 1000px*1000px.

Итак, задача сводится к 2 действиям:
1) Увеличить размер спрайта
2) Получить «хитрый» спрайт

Если внимательно изучить тот спрайт, что надо получить, то можно заметить, что растягивать его куда проще, чем первоначальный, поэтому менять размер картинки мы будем после того, как получим «хитрый» спрайт. Кстати – особенность спрайта легко растягиваться может служить нам на руку, так как не всегда с первого раза можно угадать его размер, вдруг в наш блок решат засунуть больше текста, чем это предполагалось заранее?

Определившись с порядком работ, пора приступать, нам потребуется 4 шага, чтоб получить финальный результат, не так много, правда? :)

Шаг 1: Получаем «хитрый» спрайт,
По сути он получается смещением картинки влево и вверх. Для этого лучше всего использовать фотошоповский фильтр offset:

вуаля, спрайт готов :)

Шаг 2, 3, 4:
Увеличиваем спрайт в размере:)
Image -> Convas Size …

Растягиваем нижний пиксель на всю высоту

Растягиваем правый пиксель на всю ширину

Сохраняем\оптимизируем полученный результат.

Новая версия (как теперь):

Старая версия (как должно быть):

Zen Coding for WebIDE

Zen CSS for WebIDE , Zen HTML  for WebIDE

Полностью перенесены:

• http://code.google.com/p/zen-coding/wiki/ZenHTMLElementsRu
• http://code.google.com/p/zen-coding/wiki/ZenCSSPropertiesRu

Качаем архив, распаковываем в:

MacOS: ~/Library/Preferences/WebIDE10/templates
Win: User\YouName\.WebIde10\config\templates\

Zen Coding это Zen HTML +Zen CSS, поэтому, если качаете архив zen_coding.xml, остальные архивы Вам не нужны.

upd: теперь последние версии Zen Coding, Zen CSS, Zen HTML для WebIDE и intellij idea можно скачать на сайте проекта.