Поговорим о вёрстке, её качестве и инструментах разработчика

[lexxcode]

alexriz, так как ты модератор, продублируй плиз последние посты во флейме, а тут оставь только пост Клиерика

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

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

Из коробки вроде нету, а вот в Emmet есть, шикарно работает. Правда особого резона в Base64 в большинстве случаев нету

[deadrash]

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

Из коробки вроде нету, а вот в Emmet есть, шикарно работает. Правда особого резона в Base64 в большинстве случаев нету

Не только картинки, Emmet так любые файлы в Base64 переводит =)

[lexxcode]

ну я в общем-то и не говорил, что только картинки

[klierik]

Из коробки вроде нету, а вот в Emmet есть, шикарно работает. Правда особого резона в Base64 в большинстве случаев нету

В основном все картинки, которые приходится вставлять в качесте фона, я прописываю как URL и так же дублиую как Base64.

А дайте-ка хоть ссылочку на то что умеет в ST2 из картинки создать base64.

[update]

Encode/Decode Image to data:URL

Под Mac комбинация: Ctrl + Shift + D

[lexxcode]

[update] Encode/Decode Image to data:URL Под Mac комбинация: Ctrl + Shift + D

Да это оно. под windows ctrl + '

В основном все картинки, которые приходится вставлять в качесте фона, я прописываю как URL и так же дублиую как Base64.

да я тоже одно время пробовал всякие махинации с Base64. Но все это приводит только к лишним неудобствам.

Во-первых мир неидеален и далеко не всегда подключением какой-то картинки можно ограничится в каком-то одно месте. Следовательно придется прописывать хеш несколько раз, что в свою очередь на ровном месте раздувает css до безобразия.

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

Вот, например, градиентный фон для чего либо. Всем известная colorzilla предлагает вариант генерирования целый зоопарк вариантов градиента с разными префиксами + Base64 хеш svg картинки для IE9.

А вот теперь стоит задуматься, svg нужен только тем кто не умеет рисовать градиенты css средствами, но в случае с Base64, хеш будут грузить вместе с css все кому он нужен и кому совершенно бесполезен.

Я же градиенты подключаю так:

.selector {
  background: url(../img/box_bg.svg) no-repeat 0 0 #eee; /* Chrome 25-, Firefox 15-, Opera 12, Safari, IE9, Mobile*/
  background: linear-gradient(#fff, #000); /* Chrome 26+, Firefox 16+, Opera 12.1+, IE10+ */
}

Все кто представляют адекватные браузеры рисуют градиент через css, чуть по старее через svg, но если уж совсем все плохо то просто моноцвет.

При этом svg будет загружаться только теми кому он действительно нужен, а не всеми подряд

оой что-то я уже лихо свернул с темы, сорри

[klierik]

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

Типичная ситуация:

background: url(../images/blocks/twist/controls.png) 0 50% no-repeat;
background-image: url(data:image/png;base64, ... );

В таком случае при надобности всегда известно что править

А те кто не умеют читать base64, загрузят картинку.

Очень важный факт который тут стоить зацепить - конечный вес стилей. Его нельзя сбрасывать со счетов.

Но есть обратная сторона вопроса - есть ли смысл заморачиватся изза пары десятков килобайт? А на этот вопрос отвечает уже заказчик в рамках ТЗ для Оптимизации ресурса

А вот с градиентами я сейчас использую другой путь: https://github.com/twitter/bootstrap/blob/master/less/mixins.less

Раздел // Gradients

Все современные браузеры уже отрисуют что надо. А вот с тем же ИЕ8 можно справится, подставив в фон просто картинку.

Быстро и удобно (в рамках моего режимо разработки). Хотя данный подход сейчас скорее експерементальный, и, как раз, проходит в рамках создания крупного проекта, но пока что все идет отлично. Ближе к концу ситуация будет более прозрачна и понятна достоен ли данный подход на жизнь. Внести изменения в данном случае просто.

[lexxcode]

А вот с градиентами я сейчас использую другой путь: https://github.com/t...ess/mixins.less Раздел // Gradients

Ну это по сути тот же, старый добрый, подход что и в colorzilla, если я правильно понял? Навключать целую пачку вариантов с префиксами

[klierik]

Если разговор идет про зоопарк то -- да. На выходе тот же перечень вариантов. Но в рамках использования проще.