Главная
Блог разработчиков phpBB
 
+ 17 предустановленных модов
+ SEO-оптимизация форума
+ авторизация через соц. сети
+ защита от спама

Bootstrap CSS Sprite: синтаксический сахар для

Anna | 31.05.2014 | нет комментариев

В один очаровательный день я отчётливо осознал, что утомился писать длинные ссылки на файлы изображений, всякий раз задавать им ширину и высоту, заботиться о том, Дабы это всё не прыгало при загрузке и не мигало при наведении мышкой. И я решил автоматизировать всю эту рутину. Так возникBootstrap CSS Sprite — библиотека, которая разрешает трудиться со всеми вашими изображениями, как с одним спрайтом. При этом доступ к тайлам спрайта осуществляется в жанре Twitter Bootstrap.

Приведу пример: у нас есть файл изображения cat.png. Дабы показать это изображение нужно применять тег<i>, указав для него CSS-класс img-cat, как мы делаем это в Twitter Bootstrap:

<i></i>


Превосходства

 

  • Взамен множества файлов с изображениями мы получаем один и, как следствие, каждого один запрос к серверу взамен множества.
  • Смена изображения при первом наведении мышкой (hover) без мигания и подёргиваний.
  • Огромнее нет нужды указывать ширину и высоту для всякого изображения в HTML-образцах — библиотека сделает это за нас в сгенерированном CSS-файле.
  • Поменьше HTML-кода:
    <i></i>
    

    взамен

    <img src="<?=$this->theme->baseUrl?>/images/cat.png" style="width: 64px; height: 64px;" />
    

    Думаю, это будет подлинно экономить время!

Как применять

Давайте разглядим самый легкой метод применения библиотеки. Для генерации спрайта нужно указать, где и какие файлы нужно брать. В нашем случае берём jpg, jpeg, gif и png из директории /path/to/images/source. После этого указываем путь к файлу спрайта — /path/to/images/sprite.png — в него будут объединены все начальные изображения. Также будет сгенерирован CSS-файл — /path/to/css/sprite.css, тот, что содержит классы для всех обработанных изображений. Эти классы определяют ссылку на изображение, его размеры, а также поведение при наведении мышкой.

$sprite = new BootstrapCssSprite(array(
    'imgSourcePath' => '/path/to/images/source',
    'imgSourceExt'  => 'jpg,jpeg,gif,png',
    'imgDestPath'   => '/path/to/images/sprite.png',
    'cssPath'       => '/path/to/css/sprite.css',
    'cssImgUrl'     => '/url/to/images/sprite.png',
));
$sprite->generate();

Генерацию нужно запускать только при добавлении новых изображений.

Также теснее готова реализация в виде компонента для Yii Framework. Работа с ним будет всецело аналогична. Нужно легко скопировать файл YiiBootstrapCssSprite.php в /extensions/ и добавить его в конфиг:

'components' => array(
    ...
    'sprite' => array(
        'class'         => 'ext.YiiBootstrapCssSprite',
        'imgSourcePath' => '/path/to/images/source',
        'imgSourceExt'  => 'jpg,jpeg,gif,png',
        'imgDestPath'   => '/path/to/images/sprite.png',
        'cssPath'       => '/path/to/css/sprite.css',
        'cssImgUrl'     => '/url/to/images/sprite.png',
    ),
    ...
)

Позже чего генерируем спрайт:

Yii::app()->sprite->generate();

:hover

Для того, Дабы менять картинку при наведении мышкой, довольно каждого лишь положить файл изображенияcat.hover.png рядом с cat.png. И это всё! Если же нужно изменять картинку при наведении мышкой на её родительский элемент (а не на саму картинку), тогда придётся попотеть и добавить CSS-класс hover-img к этому элементу:

<button><i></i> My Cat</button>

Также есть вероятность вручную эмулировать событие наведения:

$('.img-cat').addClass('hover');

Планы на грядущее

Планов по становлению достаточно много. Из основного:

  • Реализовать генерацию спрайта с применением различных графических библиотек (теперь есть реализация только с GD lib).
  • Оформить библиотеку в виде компонента (бандла, etc.) для основных PHP-фреймворков (Yii, Zend, Symfony).
  • Портировать библиотеку на другие веб-ориентированные языки (Ruby, Python, .Net, Java, etc.).

Верю, что позже публикации статьи, планы на грядущее гораздо расширятся, а веселье веб-разработчиков всех стран и народов повысится. Ожидаю ваших комментариев и пулл реквестов :)

UPD maximw высказал отличную идею: заменить тег <i> на <div>. Дозволено будет сделать данный тег конфигурируемой опцией.

Источник: programmingmaster.ru

Оставить комментарий
Форум phpBB, русская поддержка форума phpBB
Рейтинг@Mail.ru 2008 - 2017 © BB3x.ru - русская поддержка форума phpBB