HTML/CSS Evangelist » css

Еще один способ использования свойства 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.

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

Александр Бойченко — 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