Краткая статья, посвященная тому же вопросу - как реализовать кросс-браузерную поддержку SVG в браузерах.

В предыдущей статье “SVG fallback с помощью PNG” было показано четыре очень интересных способа реализации такой задачи. В этой статье будут показаны также несколько способов решения, но уже с помощью библиотеки jQuery .

В начале статьи автор рассказывает о преимуществах использования формата графики SVG. Думаю, что многие уже устали читать деферамбы о пользе SVG. Мне, как переводчику, тем более надоело переводить всю эту “воду”, поэтому смело ее опускаю и перехожу к главному.

jQuery и Modernizr

Для реализации этого способа понадобиться библиотека Modernizr. Код реализации должен выглядеть таким образом:

if (Modernizr.svg) {
  // Supports SVG
} else {
  // Doesn't support SVG (Fallback)
}

Если Modernizr обнаружит, что пользовательский браузер не поддерживает SVG, то запуститься простой jQuery-скрипт, который произведет замену расширения

1
svg
на
1
png
у всех файлов-изображений:

if (!Modernizr.svg) {
  $('img[src*="svg"]').attr('src', function() {
    return $(this).attr('src').replace('.svg', '.png');
  });
}

Данный способ имет точно такие же ограничения, что и скрипт из предыдущей статьи - “SVG fallback с помощью PNG”. То есть, нужно иметь два комплекта файлов - один в SVG-формате, другой в PNG-формате. Имена файлов должны быть идентичными.

SVGMagic - плагин под jQuery

SVGMagic - это простой плагин под библиотеку jQuery, который отыскивает в HTML-документе все SVG-изображения (в том числе и фоновые SVG-изображения). А затем им создаются PNG-копии всех найденных SVG-изображений, если браузер пользователя не поддерживает SVG.

Для работы с плагином SVGMagic достаточно установить его в проект и запустить инициализацию через jQuery:

$(document).ready(function(){
  $('img').svgmagic();
});

Работа плагина SVGMagic строится следующим образом. Проверяется возможность браузером пользователя отображения SVG-изображений. Если такой поддержки нет, то плагин выполняет полную проверку всего HTML-документа и собирает коллекцию всех URL на SVG-файлы, размещенные внутри этого документа.

Затем эта коллекция URL отправляется на сервер плагина. Сервер производит скачивание всех SVG-изображений по этим URL. Затем производиться конвертирование SVG в PNG.

На страницу клиента отправляется новая коллекция URL, которые теперь указывают на файлы формата PNG. Браузер посетителя загружает по этим ссылкам новые PNG-файлы и внешний вид страницы не нарушается.

SVGeezy - еще один плагин jQuery

SVGeezy является fallback-плагином в полном смысле этого слова. Плагин проверяет поддержку SVG в браузере пользователя. Если таковой нет, то выполняется замена значения в атрибуте

1
src
на то, в котором указывается на путь PNG-файла.

Для работы с плагином нужно подключить его в проект и инициализировать:

svgeezy.init(false, 'png');

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

1
false
. Этот параметр может понадобиться в случае, когда нет необходимости в работе плагина на каких-то страницах.

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

Например, файл по пути

1
/images/logo.svg
будет заменен файлом по пути
1
/images/logo.png
.

На этом самая интересная часть статьи “How to fallback to PNG if SVG not supported?” завершается. Как лично мне кажется, в данной статье заслуживают внимания только первый и последний способы реализации SVG fallback.

На этом все.


Примечание переводчика: статья просто отличная и написана мастером своего дела 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
для всех элементов в DOM в зависимости от того, поддерживает ли браузер SVG.

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

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

1
no-svg
просто не существует в DOM, если браузер поддерживает 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
, которая встраивается внутрь HTML-тега
1
<img>
. Благодаря этой функции осуществляется откат (fallback), если браузер не смог загрузить изображение по пути, указанному в атрибуте
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
. Например, можно будет выбрать версию SVG; встраивать изображения в виде графики или же сохранить их отдельно, с созданием внешней ссылки на них; выбрать способ стилизации (с помощью презентационных аттрибутов или же при помощи CSS-стилей в элементе
1
style
).

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

Окно настроек экспорта SVG в Adobe Illustrator

Почему представленный выбор настроек является наилучшим, рассказано 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 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 Editor

Обратите внимание на размер исходного 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
. Но на тот момент я был полностью доволен системой Susyone и мне очень не хотелось переключаться на другой инструмент.

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

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

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

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

Asymmetric Layout Basic Setup

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

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

1
$susy
нужно внести два параметра:
1
columns
и
1
output
. Параметр
1
columns
должен быть Sass-списком для того, чтобы можно было работать с ассиметричной разметкой (asymmetric layouts).

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

$list : 1 2 3 2 1;

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

1
$list
располагаются пять значений:
1
1
,
1
2
,
1
3
,
1
2
,
1
1
. Если поместить этот список в качестве параметра в глобальную переменную
1
$susy
, то в результате получим ассиметричную разметку (asymmetric layout), состоящую из пяти столбцов.

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

1
output: isolate
:

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

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

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

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

1
container
для блока-обертки. Помимо этого, в данном примере для блока-обертки добавим еще высоту на 100% viewport, так как внутри блока нет содержимого и иначе мы его просто не увидим:

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

Asymmetric Layout

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

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

1
output: isolate
, необходимо уточнить месторасположение каждой отдельной части разметки. Для этой цели нужно использовать параметр
1
$location
.

Параметр

1
$location
указывает месторасположение каждого отдельного
1
span
и может принимать следующие значения:

  • 1
    
    first
    
  • 1
    
    last
    
  • 1
    
    at <number>
    

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

1
first
. Если блок располагается последним, то для него нужно использовать слово
1
last
. Если же блок располагается в разметке, к примеру, начиная со 2-го столбца, то в миксине
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
временно опустим для более ясной картины:

Созданная Asymmetric Layout

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

1
.nest-one
и
1
.nest-two
немного сложнее, нежели для основных блоков разметки. Имеется ввиду, что при разметке блоков-потомков необходимо учитывать факт их вложенности.

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

1
.content
, а мы знаем, что данный блок имеет структуру (2 3 2), которая также является ассиметричной разметкой (asymmetric layout).

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

1
span
.

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

1
.nest-one
является первым блоком в разметке и занимает ширину в один (1) столбец ассиметричной сетки (asymmetric layout). Блок с классом
1
.nest-two
является последним блоком в разметке и занимает ширину в два (2) столбца.

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

.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
в целом оказывает влияние на всю разметку, созданную в Susy.

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

1
gutter
в разметке Susy является самой важной настройкой, поскольку он оказывает влияние на весь код в целом. Если у вас перед прочтением статьи существовал такой вопрос, то данная статья именно для вас.

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

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

1
gutter
позволяет полностью менять всю разметку страницы, созданную в Susy. Данный параметр определяет, где должны находиться отступы
1
gutter
относительно столбцов
1
columns
. Также данная настройка определяет, будут ли отступы
1
gutter
являться CSS-свойством
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
необходимо создать простую структуру:

Базовая разметка в Susy

Gutter-position: after

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

1
gutter-position
является ключевое слово
1
after
. Данное значение заставляет Susy располагать отступы gutters после каждого столбца разметки. В этом режиме необходимо удалить отступ у последнего столбца в разметке. В этом случае отступы gutters являются CSS-свойством margin и размещаются в разметке следующим образом:

Gutter-position: after

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

1
gutter-position
миксин
1
span
создает три CSS-правила -
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
, созданный Susy в данной разметке.

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

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
. Суть этого значения также простая. Вместо размещения отступов gutter после столбцов (как в случае с
1
after
), при значении
1
before
отступы gutters размещаются перед столбцами. В этом случае необходимо удалить отступ у первого столбца в разметке. Отступы gutter также являются в данном случае CSS-свойством
1
margin
:

Gutter-position: before

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

1
before
для параметра
1
gutter-position
миксин
1
span
генерирует три CSS-правила:
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
генерируются в CSS-коде в виде CSS-свойства
1
margin
. В этом случае нет необходимости удалять отступы для крайних столбцов разметки:

Gutter-position: split

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

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
будет иметь ширину 2-х столбцов из 3-х; блок с классом
1
.child-two
будет иметь ширину 1-го столбца из 3-х.

.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);
}

Применение ключевого слова nest

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

1
и
.child-two` вписались в границы сетки, “нарисованной” фоновым изображением!

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

Если “копнуть” поглубже и проанализировать сгенерированный 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
этого блока не учитывается (75% равно 3/4).

Блоки-потомки имеют все те же свойства, что и блок-родитель. Но при этом отступы 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
. Отступы gutters также делятся пополам (надвое) и обе половинки располагаются по обеим сторонам каждого столбца. Однако, в этом случае в CSS-выводе отступы являются свойством
1
padding
, а не
1
margin
. Также в этом случае нет необходимости удалять отступы у крайних столбцов в разметке:

Gutter-position: inside

Отступы

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
. Единственное исключение заключается в том, что отступы gutters получаются в фиксированных единицах измерения, а не в процентах. Кроме этого, в глобальной переменной
1
$susy
необходимо задать параметр
1
column-width
с указанием ширины столбца
1
column
.

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

1
inside
работает точно также, как и значение
1
split
. При использовании значения
1
inside
необходимо добавлять ключевое слово
1
nest
к блоку-родителю и использовать миксин
1
span
для всех блоков-потомков.

Значение

1
inside
и
1
split
имеют одинаковый сгенерированный CSS-код, поэтому можно с легкостью менять между собой эти значения в глобальной переменной
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
в разметке Susy. В книге вопрос позиционирования рассмотрен подробнее на основе более сложного примера. Если материал, поданный в статье, вам понравился, то книга понравиться еще больше.

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