Примечание переводчика: статья просто отличная и написана мастером своего дела Nick.

Немного лирики “для тех, кто в танке” - fallback можно в данном контексте перевести как - “откат”. То есть, если браузер по каким-то причинам не поддерживает SVG, то на web-странице выполняется “откат” - SVG-изображения заменяются на PNG-изображения.

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

Далее - текст автора по имени Nick (в вольном переводе).

В следующих четырех сниппетах я рассмотрю применение метода SVG fallback c помощью PNG-изображений четырьмя различными способами. Все четыре способа направлены на одну цель - обеспечение кросс-браузерной поддержки SVG на web-странице.

Если вы еще не используете SVG в своих проектах, то вам следует уже начать это делать. SVG великолепен и является прекрасным способом минимизации и упрощения спрайтов; в частности, когда это касается таких вещей, как иконки. Если на создаваемом вами сайте все изображения сохранены в формате PNG, то для вас самое время перескочить на SVG-поезд.

Ниже показаны сниппеты, которые тремя различными путями осуществляют применение SVG, а также SVG fallback к изображениям формата PNG, если браузер не поддерживает SVG.

Что мы будем рассматривать:

• SVG в качестве фонового изображения,

  1

  fallback

  с помощью Modernizr
• SVG в качестве фонового изображения,

  1

  fallback

  с помощью CSS
• SVG в качестве встраиваемого изображения (тег

  1

  img

  ), onerror fallback
• SVG в качестве встраиваемого изображения (тег

  1

  img

  ), , fallback с помощью Modernizr

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

1

svg

1

no-svg

SVG в качестве фонового изображения, fallback с помощью Modernizr

Используя Modernizr, мы отпеределяем, поддерживает браузер SVG или нет. Если SVG используется в качестве фонового изображения, то тогда проще сохранить изображения для страницы в двух верысиях - SVG и PNG (прим. переводчика: например, IcoMoon умеет так делать). В таблице стилей CSS тогда нужно добавить дополнительный класс. При таком подходе исключается двойная загрузка файлов (SVG и PNG), так как класса

1

no-svg

.tomato {
  background-image: url('img/tomato.svg');
}
.no-svg .tomato {
  background-image: url('img/tomato.png');
}

SVG в качестве фонового изображения, fallback с помощью CSS

Этот способ будет даже немного покруче, так как он не зависит от какой-либо библиотеки. Даже если библиотека Modernizr подключена у вас в проекте, в этом случае она уже не играет никакой роли. Но если вы подключили библиотеку Modernizr в проект только для того, чтобы реализовать откат (fallback) для фоновых изображений SVG, то вам лучше воспользоваться рассматриваемым методом.

Данный метод основан на маленькой хитрости, заключающейся в том, что поддержка множественных фоновых изображений (multiple background) в браузерах почти точно такая же, что и поддержка SVG. Другими словами, если браузер не поддерживает множественные фоны (multiple background), то он не будет поддерживать и SVG. В результате по коду произойдет откат (fallback) до первой строки, в которой прописано отображение PNG-версии файла.

.tomato {
  background: url('img/tomato.png');
  background-image: url('img/tomato.svg'), none;
}

SVG в качестве встраиваемого изображения (тег img), onerror fallback

Для этого метода необходимо редактирование HTML-кода. Основан метод на использовании Javascript-функции

1

onerror

1

<img>

1

src

Однако, с етим методом нужно быть осторожным. Если отката (fallback) не произойдет, то некоторые браузеры могут “зависнуть” в бесконечном цикле. Это явно не хорошо.

<img src="tomato.svg" onerror="this.src='tomato.png'" />

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

Однако, если у вас стоит именно такая задача, то вам можно воспользоваться четвертым способом, рассмотренным ниже.

Зависания браузера в бесконечном цикле можно избежать благодаря небольшой поправке, которую подсказал Roy Reed:

<img src="tomato.svg" onerror="this.src='tomato.png'; this.onerror=null;" />

SVG в качестве встраиваемого изображения (тег img), fallback с помощью Modernizr

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

Если браузер поддерживает SVG, то строку с тегом

1

img

<img src="tomato.svg" />

Если же браузер пользователя не поддерживает SVG, то запускается мальнький скрипт, который отыскивает в DOM все img-элементы с атрибутом

1

src="*.svg"

1

svg

1

png

Чтобы метод сработал, необходимо иметь две версии (SVG и PNG) одного файла; имена файлов должны быть идентичными.

Ниже показан HTML и Javascript. Чтобы пример сработал, убедитесь, что подключили библиотеку Modernizr:

<img src="tomato.svg" />

if(!Modernizr.svg) {
  var imgs = document.getElementsByTagName('img');
  var svgExtension = /.*\.svg$/
  var l = imgs.length;
  for(var i = 0; i < l; i++) {
    if(imgs[i].src.match(svgExtension)) {
      imgs[i].src = imgs[i].src.slice(0, -3) + 'png';
      console.log(imgs[i].src);
    }
  }
}

Заключение

Я считаю нужным сказать еще раз, что если на данный момент в своих проектах вы не используете SVG, то вам следует перейти на его использование.

Поддержка SVG на сегодня достаточно хорошая, а в скором времени этот формат будет использоваться повсеместно. Применение SVG в проекте имеет множество преимуществ.

Для новичков - вам мне стоит беспокоиться об версии PNG-изображений специально для Retina-дисплеев. SVG-изображения не зависят от разрешения экрана, поэтому с поддержкой адаптивных дизайнов у таких изображений проблем нет.

SVG-изображения могут быть встроены прямо в HTML-документ в качестве одного их его элементов; при этом отпадает необходимость в сохранении SVG-изображения в качестве отдельного файла.

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

Возможности SVG очень велики, поэтому смело запрыгивайте на платформу SVG-поезда и не бойтесь его использовать на практике! SVG дружелюбен и приятен в обращении.

На этом все.

От переводчика. Привожу вольный перевод великолепной статьи “Styling And Animating SVGs With CSS” от Sara Soueidan.

Данная статья является одной из пяти в серии, посвященной формату SVG. Больше мне сказать нечего - читайте Сару.

CSS может использоваться для стилизации и анимации векторной графики точно также, как для стилизации и анимации HTML-элементов. В этой статье, которая является производной от моего недавнего выступления на конференциях CSSconf EU и From the Front, где я рассказывала о перспективах и приемах работы с форматом векторной графики SVG и возможностях ее стилизации при помощи CSS.

Я покажу, каким образом можно экспотировать и оптимизировать SVG-файлы, способы вставки этих файлов в web-документ, способы стилизации и анимации SVG-файлов, на практике применим стили и анимацию к SVG-файлам-примерам.

Введение

Масштабируемая векторная графика (SVG) представляет из себя векторные изображение для двухмерной графики (2D), в основе которой лежит формат XML. Подобная графика имеет поддержку интерактивности и анимации. Другими словами, SVG-файлы представляют из себя XML-теги, которые генерируют фигуры и изображения; к этим фигурам и изображениям могут быть применены стили и эффекты с помощью CSS точно также, как это делается с обычными HTML-элементами.

Анимация или интерактивность в SVG-файлах могут быть достигнута двумя способами - с помощью CSS или с помощью Javascript. В этой статье будет рассмотрен первый способ - как это сделать с помощью CSS.

Существует много причин, почему нужно делать выбор в пользу SVG и почему нужно использовать этот формат сегодня:

• графика в формате SVG является масштабируемой и не зависящей от разрешения. Такая графика выглядит великолепно везде, будь то экраны с высоким разрешением Retina или же печатный вариант;
• изображения имеют отличную поддержку браузеров. Создать

  1

  fallbacks

  для браузеров, не имеющих поддержки, очень легко и в этой статье будет показано, как это сделать.
• поскольку файлы в своей основе являются текстом, то они хорошо поддаются архивации, что позволяет сделать их значительно меньше по размеру, чем файлы форматов JPEG или PNG.
• файлы стилизуются и анимируются с помощью CSS или Javascript
• файлы формата SVG имеют встроенную поддержку

  1

  clipping

  ,

  1

  masking

  ,

  1	background blend modes

  и

  1

  filters

  . Эти возможности эквиваленты возможностям обычного графического редактора, такого как Photoshop.
• к файлам можно получить доступ. Другими словами, к ним можно получить легкий доступ через DOM API, что делает их прекрасным инструментом для инфографики и визуализации данных. Это дает ему преимущество перед HTML5 Canvas, поскольку контент последнего недоступен. С другой стороны, можно легко инспектировать каждый элемент файла с помощью инспектора элементов браузера точно также, как это делается с обычными HTML-элементами. Помимо этого, файлы доступны для экранных устройств чтения, если это необходимо. В последней части этой статье будет более подробно рассмотрен вопрос доступности файлов.
• существует достаточно инструментов для создания, редактирования и оптимизации файлов. Помимо этого, существуют инструменты для облегчения и ускорения работы с SVG-файлами, что позволяет значительно ускорить рабочий процесс. Эти инструменты также будут рассмотрены позже.

Экспортирование SVG из графических редакторов и их оптимизация

Из всех редакторов векторной графики имеется три самых популярных:

1. Adobe Illustrator
2. Inkscape
3. Sketch

Adobe Illustrator - платное приложение от Adobe. Очень популярный редактор с прекрасным интерфейсом и множеством возможностей, что делает его любимым инструментом многих дизайнеров.

Inkscape является бесплатной альтернативой. Несмотря на более скромный интерфейс, этот редактор имеет все необходимые возможности для работы с векторной графикой.

Sketch - это приложение только под Mac OS X. Оно также не бесплатное, но уже успело стать достаточно популярным и собрать свою группу поклонников. Обладает множеством инструментов и возможностей, что делает работу в этом редакторе быстрее и удобнее.

Для создания векторной графики можно выбрать любой из этих трех редакторов. После создания SVG-файлов перед их вставкой на web-страницу нужно выполнить две операции: экспортирование из редактора и очистка этих файлов от лишних данных.

В этой статье я буду показывать экспортирование и оптимизацию SVG-файлов на примере редактора Adobe Illustrator. Этот процесс практически ничем не отличается от подобного в других редакторах. За исключением некоторых специфических настроек самого Illustrator, о чем будет упоминаться по ходу этой статьи.

Для экспортирования графики в SVG-формат в Illustrator нужно перейти в меню по пути “File” - “Save as”, а затем выбрать формат

1

.svg

1

.svg

1

style

Ниже показано изображение с окном экспорта SVG, в котором представлен наилучший набор настроек для сохранения файлов SVG для web:

Почему представленный выбор настроек является наилучшим, рассказано Michaël Chaize в прекрасной статье Export SVG for the Web With Illustrator CC.

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

Имеется несколько инструментов для оптимизации SVG-кода. Peter Collingridge создал online-инструмент SVG Editor, в котором можно как вставлять напрямую, так и загружать свои собственные SVG-файлы. Инструмент обладает многими возможностями по оптимизации - удалением вспомогательного кода, комментариев, пустых групп и так далее. Одной из интересных настроек является управление числом знаков после запятой для координат точек:

SVG Editor обладает возможностью автоматически перемещать SVG-изображение в самую верхнюю часть документа. Приятной особенностью данного инструмента является возможность предварительного просмотра, что позволяет сразу решить, какие изменения оставить, а какие - нет. Некоторые настройки могут привести к нарушению кода SVG-файла.

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

Редактор SVG Editor является online-инструментом. Если вы предпочитаете offline инструмент, то попробуйте SVGO (O - сокращение от “оптимизатор”). Этот инструмент основан на Node.js, имеет простой и понятный drag-and-drop интерфейс. Если вам не нравиться использовать online-инструменты, то SVGO будет хорошей альтернативой.

Ниже представлено простое изображение формата “до и после”, иллюстрирующее процесс оптимизации SVG-файла в online-редакторе SVG Editor. Красным цветом выделены paths и наглядно показано, насколько эффективен процесс оптимизации в данном случае:

Обратите внимание на размер исходного SVG-файла и размер его оптимизированной версии. Вне всяких сомнений, оптимизированная версия более удобочитаемая.

После оптимизации SVG-файлов они готовы для встраивания их на web-страницу, для дальнейшей стилизации и анимации с помощью CSS.

P.S.

На практике воспользовался обоими инструментами оптимизации SVG - SVG Editor и SVGO. Могу сказать по личному опыту, что SVGO обладает значительно лучшим коэффициентом оптимизации. К слову сказать, это отечественная разработка команды Yandex.

От переводчика. Данная статья является вольным переводом поста Creating Asymmetric Layouts With Susy автора Zell Liew.

Цель статьи - на простом примере показать, каким образом можно создавать ассиметричную разметку (asymmetric layout) с помощью Susy 2. Обзор ни в коей мере не является каким-либо пособием - это просто очень краткий экскурс по возможностям Susy 2 в области (asymmetric layout). Далее - вольный перевод с разрешения автора.

Когда я впервые услышал об ассиметричной разметке (asymmetric layout), на тот момент такую можно было сделать только с помощью фреймворка Singularity GS. Подобная разметка была чем-то невероятно крутым и я очень захотел сделать подобную же - с неравной шириной столбцов

1

columns

Можете представить мой восторг, когда вышла новая версия Susy 2, в которой была включена поддержка ассиметричной разметки (asymmetric layout).

В этой статье я покажу, как просто можно создавать ассиметричную разметку (asymmetric layout) с помощью Susy 2.

Что мы будем делать

В этой статье мы будем создавать с помощью Susy простую fluid-разметку. В этой разметке есть две боковых панели и два вложенных блока-потомка внутри центрального блока с контентом:

Глобальные переменные Susy

Для того, чтобы использовать возможность создания ассиметричной разметки (asymmetric layout) в Susy, в ее глобальной переменной

1

$susy

1

columns

1

output

1

columns

Sass-список является строкой значений, разделенных пробелом и выглядит он примерно таким образом:

$list : 1 2 3 2 1;

Внутри данного списка

1

$list

1

1

1

2

1

3

1

2

1

1

1

$susy

Также же необходимо добавить еще один параметр

1

output: isolate

$susy : (
  columns: 1 2 3 2 1,
  output: isolate
)

После установки этих параметров все готово для создания заметки с помощью Susy.

Создание ассиметричной разметки (asymmetric layout)

Как правило, первым важным шагом является добавление миксина

1

container

.wrap {
  @include container(1140px);
  height: 100vh;
}

Прежде чем продолжить создание разметки, необходимо разобраться с еще одним вопросом.

Так как в глобальных настройках Susy используется параметр

1

output: isolate

1

$location

Параметр

1

$location

1

span

• 1

  first

• 1

  last

• 1	at <number>

Если какой-либо отдельный блок по разметке располагается первым, то для него необходимо использовать ключевое слово

1

first

1

last

1

span

1

at 2

Теперь, обладая всеми этими знаниями, можно создать разметку для трех блоков:

1

.sidebar-one

1

.content

1

.sidebar-two

Блок

1

.sidebar-one

.sidebar-one {
  @include span(1 first);
}

Блок

1

.sidebar-two

.sidebar-two {
  @include span(1 last);
}

Блок

1

.content

.content {
  @include span(3 at 2);
}

Теперь все три блока должны точно расположиться в создаваемой нами ассиметричной разметке (asymmetric layout). Два оставшися блока

1

.nest-one

1

.nest-two

Создание разметки для вложенных блоков

1

.nest-one

1

.nest-two

Оба наших блока расположены внутри блока

1

.content

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

1

span

Блок с классом

1

.nest-one

1

.nest-two

Такая разметка создается с помощью следующего кода:

.nest-one{
  @include span(1 of (2 3 2) first);
}
.nest-two{
  @include span(2 of (2 3 2) last);
}

Как видим по исходному коду, при создании разметки нет необходимости указывать точную ширину (px,%) каждого блока. Благодаря Susy создание ассиметричной разметки (asymmetric layout) выполняется просто, с применением той теории, о которой только что говорилось. Достаточно только указать число столбцов, которое должен занимать каждый блок.

Более сложный пример разметки

Пример ассиметричной разметки, представленный в этой статье, достаточно простой. Более сложным случаем является создание адаптивной ассиметричной разметки (asymmetric layout).

В качестве примера могу привести образец ассиметричной разметки, созданной Nathan Ford с применением приложения GridsetApp. Этот образец является хорошим примером адаптивной страницы, которая дает представление о том, что может Susy.

Примечание переводчика: на этом самое существенное и интересное в этой статье заканчивается. Дальше идет реклама книги автора. Собственно, данная статья для этого и писалась, конечно. Но ради даже такого простого примера ассиметричной разметки (asymmetric layout) на Susy стоило превести этот пост.

При изучении Susy одним из вопросов, который всегда стоял передо мной, заключался в следующем: “Как удалить

1

padding

или

1

margin

у первого и последнего столбца

1

column

в разметке Susy без применения CSS-свойств

1	first-child

и

1	last-child?

”.

Этот вопрос является один из самых главных для всех, кто только начинает изучение Susy. Если посмотреть в корень данного вопроса, то его основную суть можно свести к следующему (если судить по многочисленным постам в Интернет): необходимо использовать значение

1

inside

1

after

1

gutter

Как мне кажется, вопрос о расположении отступов

1

gutter

Что такое - расположение отступов gutter

Расположение отступа

1

gutter

1

gutter

1

columns

1

gutter

1

padding

1

margin

Эта параметр находиться среди глобальных настроек переменной

1

$susy

1

span

1

gutter

1

$susy

По умолчанию, расположение отступов в Susy определено ключевым словом

1

after

1

before

1

split

1

inside

1

inside-static

1

gutter-position

1

$susy

$susy: (
  gutter-position: after ( before | after | split | inside | inside-static )
);

Ключевые слова в круглых скобках являются возможными вариантами значения параметра

1

gutter-position

Для ясности понимания тонкостей разметки в Susy при использовании параметра

1

gutter-position

Gutter-position: after

Значением по умолчанию для параметра

1

gutter-position

1

after

При использовании значения по умолчанию для параметра

1

gutter-position

1

span

1

width

1

margin-right

1

float: left

.test {
  @include span(3 of 4);
}

Результирующий CSS-код:

.test {
  width: 73.68421%;
  float: left;
  margin-right: 5.26316%;
}

В этом коде свойство

1

margin-right

1

gutter

Можно использовать ключевое слово

1

last

1

margin

.last {
  @include span(1 of 4 last);
}

В результате получим результат в виде

1

margin-right: 0

.last {
  width: 21.05263%;
  float: right;
  margin-right: 0;
}

В рассматриваемой нами разметке область контента занимает 3 столбца из 4. При этом область боковой панели размещается в одном столбце из 4-х. Кроме того, боковая панель является последним элементом разметки, поэтому код для подобного случая будет таким:

.content {
  @include span(3 of 4);
}
.sidebar {
  @include span(1 of 4 last);
}

Краткое заключение: значение

1

after

параметра

1	gutter-position

является наиболее интуитивно понятным случаем создания разметки в Susy. При использовании значения по умолчанию единственный момент, о котором следует помнить - это убрать отступ у последнего столбца разметки с помощью ключевого слова

1

last

.

Gutter-position: before

Значение

1

before

1

after

1

after

1

before

1

margin

При использовании значения

1

before

1

gutter-position

1

span

1

width

1

margin-left

1

float: left

.test {
  @include span(3 of 4);
}

Результирующий CSS-код будет выглядеть таким образом:

.test {
  width: 73.68421%;
  float: left;
  margin-left: 5.26316%; /* Notice this is margin left, not right */
}

Так как значение

1

before

1

after

1

after

1

last

1

first

.content {
  @include span(3 of 4 first);
}

.sidebar {
  @include span(1 of 4);
}

В результате получим точно такую же разметку, что и в предыдущем случае.

Краткое заключение: при использовании значения

1

before

разметка получается точно такой же, как и в предыдущем случае. Единственное отличие заключается в применении ключевого слова

1

first

для первого столбца разметки.

Gutter-position: split

Значение

1

split

1

gutter-position

1

before

1

after

1

split

1

gutter

1

gutters

1

margin

Если, как в нашем случае, имеются только два блока (с классом

1

.content

1

.sidebar

1

span

.content {
  @include span(3 of 4);
}
.sidebar {
  @include span(1 of 4);
}

Однако, ситуация становиться не такой ясной, если блок

1

.content

1

.sidebar

Давайте добавим два блока

1

div

1

.child-one

1

.child-two

1

.content

<div class="content">
  <h2>
    Content
  </h2>
  <div class="child-one">
    <h2>
      Child One
    </h2>
  </div>
  <div class="child-two">
    <h2>
      Child Two
    </h2>
  </div>
</div>

Для обоих вновь созданных блока применим тот же подход, что и ранее. Блок с классом

1

.child-one

1

.child-two

.content {
  @include span(3 of 4);
}

.child-one {
  @include span(2 of 3);
}

.child-two {
  @include span(1 of 3);
}

Обратите внимание на тот факт, что границы обоих блоков

1

.child-one

1

.child-two

Это происходит потому, что при задании для параметра

1

gutter-position

1

split

1

.content

1

.child-one

1

.child-two

Для создания правильной разметки в данном случае необходимо добавить для блока-родителя ключевое слово

1

nest

.content {
  @include span(3 of 4 nest); // Добавлен ключ nest
}

.child-one {
  @include span(2 of 3);
}

.child-two {
  @include span(1 of 3);
}

Теперь посмотрите, как точно оба блока .child-one

1

и

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

Если “копнуть” поглубже и проанализировать сгенерированный CSS-код, то можно заметить, что для блоков

1

.child-one

1

.child-two

.content {
  width: 75%;
  float: left;
}

.child-one {
  width: 60%;
  float: left;
  margin-left: 3.33333%;
  margin-right: 3.33333%;
}

.child-two {
  width: 26.66667%;
  float: left;
  margin-left: 3.33333%;
  margin-right: 3.33333%;
}

Блок-родитель имеет плавание влево

1

float: left

1

gutters

Блоки-потомки имеют все те же свойства, что и блок-родитель. Но при этом отступы gutters имеют место быть для этих блоков.

Краткое заключение: значение

1

split

кардинально отличается от двух рассмотренных ранее значений

1

before

и

1

after

. При использовании значения

1

split

необходимо добавлять ключевое слово

1

nest

к блоку-родителю и использовать миксин

1

span

для всех блоков-потомков.

Gutter-position: inside/inside-static

Оба значения

1

inside

1

inside-static

1

split

1

padding

1

margin

Отступы

1

gutters

1

gutter-position: inside

1

split

1

nest

.content {
  @include span(3 of 4);
}

.child-one {
  @include span(2 of 3);
}

.child-two {
  @include span(1 of 3);
}

Если просто добавить ключевое слово

1

nest

1

.content

.content {
  @include span(3 of 4 nest); // The nest key is needed
}
.child-one {
  @include span(2 of 3);
}
.child-two {
  @include span(1 of 3);
}

Значение

1

inside-static

1

inside

1

$susy

1

column-width

1

column

Краткое заключение: значение

1

inside

работает точно также, как и значение

1

split

. При использовании значения

1

inside

необходимо добавлять ключевое слово

1

nest

к блоку-родителю и использовать миксин

1

span

для всех блоков-потомков.

Значение

1

inside

1

split

1

$susy

1

gutter-position

Заключение

Различные типы разметки в Susy создаются с помощью выбора расположения отступов

1

gutters

1

gutters

Существует два основных способа создания разметки при содействии отступов

1

gutters

• значения

  1

  before

  и

  1

  after

  имеют создают отступы

  1

  gutters

  с одной стороны каждого столбца

  1

  column

  ; для крайнего столбца необходимо удалить отступ

  1

  gutter

  с помощью ключевого слова

  1

  first

  или

  1

  last

  .

• значения

  1

  inside

  ,

  1	inside-static

  ,

  1

  split

  разделяют каждый отступ

  1

  gutter

  на две равные половины, которые располагаются по обе стороны каждого столбца

  1

  column

  . Такие отступы не нуждаются в удалении.

Эта статья является небольшой выдержкой из книги Learning Susy, а точнее - из главы 8, посвященной позиционированию отступов

1

gutter

Примечание переводчика: данный пост является переводом статьи Understanding Gutter Positions in Susy, созданным мною с любезного разрешения ее автора Zell Liew.

Коротенькая заметка о небольшом баге в Photoshop CC 2014, связанном с невозможностью узнать размер pattern’а.

В предыдущих версиях Photoshop все было проще - выбираешь в палитре слоев примененный образец и в окне “Pattern Overlay” достаточно навести курсор мыши на пример pattern’а. Появляется всплывающая подсказка, в которой видны размеры образца.

В Photoshop CC 2014 теперь таким образом невозможно получить подсказку о размере образцов изображения. Это баг или фича Photoshop CC 2014 - непонятно. Но жить стало труднее без такой возможности.

Однако, выход все же есть, хоть и через всем известное место. Решение таково.

Шаг первый - Pattern Stamp

В палитре инструментов выбираем инструмент Pattern Stamp:

Шаг второй - верхняя панель инструментов

Переводим взгляд вверх, на верхнюю панель инструментов (или как она там называется - неважно). На ней находим иконку окна Pattern Overlay:

Шаг третий - окно Pattern Overlay

Щелкаем мышкой по этой иконке. Появится окно Pattern Overlay со списком образцов изображений. Наводим курсор мыши на нужный образец и в появившемся tooltip видим размеры (момент появления tooltip я не заснял - но оно работает):

Заключение

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