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

[maximw]

Я никак не могу понять тенденцию использовать тэги не по назначению. Тэг <i> — выделение текста курсивом, какого черта делать из этого картинку.

Было такое, что я изменял чужой код. Для меня пустой тэг <i> — это отсутствующий текст курсивом. Я его удалил как мусор, т.к. текста нет и в той области сайта нет генерируемого в JS контента. А оказалось там были какие-то иконки. Пришлось исправлять назад.

Пожалуйста, не делайте геморрой при поддержке кода. Используйте тэги по назначению.

[uaoleg]

Данный подход я позаимствовал у далеко не последнего по популярности фреймворка. И да, тег <i> не пустой, у него есть класс img-cat, что как бы намекает. Порой, выйти за рамки — это хорошо :)

[maximw]

Я понимаю, что я «никто и ничто» чтоб критиковать Twitter Bootstrap, тем не менее, даже у них — это плохая практика. Имхо.

А чем плох <span class=«img-cat»> или <div class=«img-cat»>. Длиннее на 2-3 символа? Зато понятно что это какой-то блок, а не текст курсивом.

[uaoleg]

У <img /> есть обязательный атрибут src, который сводит всю задумку на нет. Я сам бы рад использовать именно этот тег.

[HighQuality]

и alt тоже обязательный, кажется

[uaoleg]

Да, точно.

[alesto]

alt\title помогает гуглу индексировать картинки

[uaoleg]

Либа предназначена для оформительских картинок (иконок например). Она категорически не подходит для отображения целевых картинок (например фотографий на Фликре). Поэтому их ценность для гугла стремится к нулю или даже уходит в минуса.

[vdv73rus]

Можно написать сниппет для вашего текстового редактора, например
testimg-800-600
который по хоткею вставит что-нибудь такое:
<img src="http://placekitten.com/800/600" width="800" height="600" alt="Test image">
Выход может быть в любом синтаксисе (haml если надо)

Или я не совсем понял проблемы?

[uaoleg]

Помимо выигрыша в HTML-коде, тут идёт использование одного спрайта для всех картинок, и очень удобная поддержка :hover

[crizis]

Никто не запрещает оставлять значение src пустым (вуаля, src="", и всё замечательно).

[uaoleg]

Это будет невалидно. Если идти в этом направлении, тогда уже надо писать либо src="//:0", либо src="about:blank".

[crizis]

Извиняюсь, был неправ.

[crizis]

Извиняюсь, был неправ.

[SovGVD]

Пихните в него пустую прозрачную гифку 1х1 пиксель и проблема решена. В погоне за непонятой экономии символов получается невероятная чушь, по сути можно всю html верстку сделать из тега i (+ огромная таблица стилей, перепределяющая поведение тега в заивисимости отустановленного класса) и будет экономно и черт ногу сломит что с этим делать. Полностью согласен что теги надо использовать по назначению.

Меньше HTML-кода:

<i class="img-cat"></i>

вместо

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

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

вы забыли указать что весь этот длинный код просто ушел в css файлик

[uaoleg]

Вы указали всего лишь один пункт из 4. И при этом довели его до абсурда.

[SovGVD]

Ну незнаю, имхо абсурд это использование тега курсива для вывода бекграунда чтобы имитировать картинку. Ну да бог с ним, кому как нравится, просто потом тяжело разгребать все эти хитросплетения верстальщиков, когда шаблон на проект натягиваешь и мозг рушится от нелогичных решений, которые еще надо заставить работать, да к ним еще и IE хаки под каждый недобраузер применить.
Можно кстаии вообще свой тег сделать, типа и ему в css-ки прописать:

mycat {
width:
height:
background: url(tralalala)
}

Давно такое не пробовал, но помнится что в Опере лет 5 назад прокатывало — делал свои теги для отображения модулей внутри WYSIWYG редатора.

Про пункты… 1 пункт уже давно многими для веба используется (у гугла вроде как 1 спрайт на всё), конечно всё подряд в спрайты не напихать, но например хорошо подходит для круговых обзоров товаров (не помню как это правильно называется, когда мышкой крутишь, а объект как бы крутится по одной или 2м осям, т.е. просто огромный бэкграунд передвигается), 2 пункт вытекает из первого, 3 пункт — раздутая css-ка или гора css-ок под каждый шаблон (но это не в коем слуучае не минус, у самого такая же штука, да и gzip никто не отменял)

[uaoleg]

Тоже думал о том, чтобы ввести свой тег. Возможно сделаю это вообще настройкой, чтобы каждый мог указать по своему вкусу. Но изначально ориентировался на Twitter Bootstrap, как на очень популярное решение.

[n0r8]

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

[uaoleg]

О, Вы немного подправили коммент. Думаю это хороший вариант, чем не повод для пулл реквеста?

[maximw]

Да, прошу прощения. Забыл, что парсер комментариев съедает тэги, поправил символы < >.

[Jemeron]

Полагаю, тег <i> в качестве жертвы был выбран из-за намеков на слова «icon» или «image». Кто-то курсив и тегом <em> делает

[kovalevsky]

Для курсива уже используется em Для курсива i использовать уже не верно вроде бы как)

[uaoleg]

Не совсем верно, он всё также в строю, просто теперь у него сузилась семантика.

[kovalevsky]

Спасибо, буду знать!

[dobeer]

Аналогично с тегами <b> и <strong>, первый делает физически жирным текст, а второй определяет важность помеченного текста, но браузеры отображают их одинаково. Напрашивается вопрос — так задумано на будущее, если вдруг решат что их можно отображать по разному или это для поисковиков так задумано?

[n0r8]

Вы в большей части бекенд программист?

[maximw]

Да.
Из чего вывод сделали, если не секрет?

[n0r8]

Я фронтенд разработчик и сразу видно программиста когда он начинает рассуждать о тегах, css и подобных вещах. И часто видно что им встречается работа только плохих фронтенд разработчиков.

[maximw]

Если бы был фронтэнд разработчик — тэги и css были бы его головной болью. Я бы только контроеллеры-модельки пописывал. :)

Но нас есть верстальщик, на нем верстка + немного js, слайдеры, окошки и т.п. Я думаю фронтэнд разработчик это гораздо более широкое понятие. А вот верстальщик, да, видно что делает лишь бы выглядело как на макете и во всех браузерах. Порой кажется, что он даже не понимает как этот код потом будет преобразован во view. И что надо делать чтоб он был удобен в использовании, максимально стойким к правкам, которые всегда есть и будут.
Сейчас понемногу собираю материалы по верстке (хотя сам в ней довольно слаб) обязательные для ознакомления верстальщикам.

[vdv73rus]

А почему бы верстальщику не делать сразу во вьюхах код? Потом будет гораздо проще заменять текстовую рыбу на переменные. Правда здесь надо очень хорошо понимать что и в каком виде придёт в шаблон.

Я вообще против того, чтобы отдавать в интеграцию чистый html.

По поводу материалов можем пообщаться отдельно, у меня тоже есть мысли на этот счёт, но с другой стороны баррикад.

[vdv73rus]

Я для генерации спрайтов использую glue, для автоматического расчёта размеров rails-sass-images
Там всё красиво + retina

Раньше compass'ом баловался, но он перестал быть актуальным чуть менее чем полностью

Для тестовых картинок http://placekitten.com/ & http://lorempixel.com/

[uaoleg]

Хорошие инструменты, смотрел на них перед написанием либы. Но рассмотренная либа даёт ощутимо больше возможностей.

[n0r8]

Можно уточнение в чем же потеряна актуальность компасса?

[vdv73rus]

Например, добрая половина миксинов заменяется этим https://github.com/ai/autoprefixer

[twenty]

Вы так говорите, будто Compass — это только ценный мех работа с префиксами.

[vdv73rus]

А что там такого ещё есть выдающегося?
Вполне хорошо живётся с http://bourbon.io/docs/ + compass для rails 4 нестабилен

[uaoleg]

Очень дельное уточнение, спасибо!

[iborzenkov]

Хм

Прежде чем делать открытие — загляни в справочник.

compass-style.org/help/tutorials/spriting/

[n0r8]

мне тоже кажется что по сравнению с компасом это неочень…

[uaoleg]

Не видел у них поддержки :hover, плюс хотелось реализации именно в стиле Twitter Bootstrap.

[vdv73rus]

В спрайтах у compass есть «magic selectors» :hover, :active, :target http://compass-style.org/help/tutorials/spriting/magic-selectors/

[uaoleg]

Да, это я не досмотрел у них.

[vdv73rus]

Кстати, в 3-ем бутстрапе иконочки вынесены в отдельный репозиторий и тег <i> заменён на <span>
http://glyphicons.getbootstrap.com/

[uaoleg]

Отлично! Предложение перейти на <span> уже звучало несколько раз. И я добавил апдейтом в пост, что планирую сделать это изменение.

[iborzenkov]

То-есть из-за того что функция возвращает список тегов развернулся эпичный срач какой тег юзать? (я не нашел больше в коде нигде теги)
Интересует простой китайский вопрос — а на хуа? Куда потом этот список тегов юзать, кроме как для примера?
Ну и сразу чтобы два раза не вставать — а чем compass не в стиле бутстрапа, раз ховер и компанию уже нашли?

[afitiskin]

Если картинка несет смысловое значение (относится к тесту) то следует использовать отдельные файлы изображений, тэг img с аттрибутом alt.

Если же картинка играет роль иконки, бэкграунда и не несет смыслового значения, то лучше всего задавать ее в качестве background-image для нужного тега. (найдено на stackoverflow)

При этом очистить html-код от мусорных тегов, вроде предложенных вами <i class="some-image"></i> или предложенных в комментириях <span class="some-image"></span> помогут псевдоэлементы ::before и ::after коих целых 2 на каждый тег (за исключением input)

Генерация спрайтов — задача тривиальная и решенная уже много-много раз (полный список решений). Тем более, последнее время использование data:uri считается более лучшим, так как экономит память и количество запросов к серверу, и, в качестве бонуса, избавляет от головной боли слежения за версией спрайта (если сайт обновляется и с некоторой периодичностью в спрайт добавляются новые иконки).

Так, собственно вопрос, зачем еще одно решение задаче, которая уже давно решена?

[afitiskin]

Если все ради того, чтобы ускорить набор кода, то я вам советую выбрать хороший редактор. Например: webstorm с плагином emmet, live templates и автоматической подстановкой (включая размеры картинок) по клавише tab

[afitiskin]

Не стал вдаваться в поддробности по поводу тегов без псевдоэлементов, спасибо за дополнение.
А по поводу иконок — опять таки, если иконка прямо относится к тексту, то используйте img, если нет — все что угодно, но при этом по возможности семантично (лишние теги плодить не имеет смысла).

И, кстати, забыл упомянуть, что если верстка проекта нацелена на хорошие браузеры (IE9+) то есть еще возможность использовать множественные бэкграунды, для избавления от лишних тегов.

[uaoleg]

data:uri бесспорно интересная технология, но в FF и IE работает далеко не оптимально. И этим никак нельзя принебречь. А за версией спрайта мне кажется следить очень просто: по времени его создания и времени обновления директории с исходными изображениями. Вот Вам и один из плюсов моего велосипеда :)

[uaoleg]

Для большей нагядности приведу пример кода из документации:

abstract class BaseController
{
    public function init()
    {
        ...
        if (APP_ENV === APP_ENV_DEV) {
            Yii::app()->sprite->generate(); // Regenerates sprite only if source dir was changed
        }
        ...
    }
}

[afitiskin]

Склонен не доверять результатам данного теста, тесты какие-то слишком синтетические. Я ради эксперимента провел аналогичный сравнительный анализ на одном из последних своих проектов: два теста на двух сборках проекта — одна с картинками в файлах, другая с картинками в data:uri (в data:uri добавлялись только иконки, причем оптимизированные с помощью imageOptim, размер не более 2х кб на каждую). И результаты в FF (версии 21, 22) получились ровным счетом обратные, в сборке с data:uri событие window.onload срабатывало в среднем в 3-4 раза быстрее. Для чистоты эксперимента — в Сhrome и FF nightly 25.0a1 data:uri быстрее в 2 раза

[uaoleg]

Посмотрел дату публикации той статьи и понял, что я неправ :)

[uaoleg]

Сегодня в этом уже нет никакого смысла. Просто настройте себе HTTP/2

• Nginx www.digitalocean.com/community/tutorials/how-to-set-up-nginx-with-http-2-support-on-ubuntu-16-04
• Apache httpd.apache.org/docs/2.4/howto/http2.html