HTML/CSS Evangelist » html

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

Александр Бойченко — Fri, 09 Dec 2011 23:35:08 +0000

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

Особенность работы свойства zoom в IE заключается в том, что оно применяется не только для содержимого контейнера, но и для скроллбара контейнера.
Чтобы получить контейнер со скролом достаточно указать атрибут overflow: auto и ограничить высоту|ширину. В результате получим что-то вроде:

Вторым шагом – попробуем применить свойство zoom:50%, содержимое блока уменшится в 2 раза:

Как видно из картинки – мы уже получили узкий скролл, правда, уменьшили высоту блока и текст внутри.
Исправить это можно двумя шагами:
1 – увеличим высоту средствами css.
2 – увеличим содержимое блока в 2 раза (ровно на столько, на сколько мы уменьшили блок-родитель), для этого все содержимое блока обворачиваем в еще один элемент и задаем ему свойство zoom:200%:

Комбинируя разные значения zoom можно получить скролбары не только маленького размера, но и большого:

Разумеется, это работает только в IE.

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

Александр Бойченко — Mon, 27 Dec 2010 15:40:10 +0000

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

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

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

Яндекс
Wikipedia
digg

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

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

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

1861097.9903115.1306696357.2f536c093d61f73b3df89ed9d24b05d8

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

Александр Бойченко — Sun, 16 May 2010 12:39:22 +0000

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

Суть теста – генерируем 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 – Сортировка CSS свойств

Александр Бойченко — Mon, 05 Apr 2010 18:51:30 +0000

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

Представляю вашему вниманию 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

Александр Бойченко — Wed, 31 Mar 2010 08:56:09 +0000

Больше всего камней в 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

Александр Бойченко — Tue, 16 Feb 2010 11:47:43 +0000

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

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

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

Сделать это можно с помощью инструмента 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: обратите внимание на то, что мы не убиваем прозрачность, мы меняем этот противный серый фон, на любой другой, при этом сама полупрозрачность есть, и мы ее получим, применив фильр к картинке!

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

Александр Бойченко — Wed, 11 Nov 2009 07:58:26 +0000

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

Наша задача, получить из

спрайт вида

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

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

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

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

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

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

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

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

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

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