Коллекция практических советов и заметок по вёрстке13.01.2016 09:18

CSS Refresher

Это большая коллекция практических советов и заметок по вёрстке. Своеобразная памятка для тех, кто каждодневно использует CSS. Освещаются самые разные темы, от деталей поведения плавающих элементов до использования SVG и спрайтов. Проект постоянно обновляется, активное сообщество github также принимает в нем участие, там добавляются интересные замечания, о которых, возможно, вы и не слышали.

От переводчика

Приветствую всех, меня зовут Максим Иванов, и сегодня я подготовил для вас перевод заметок разработчика из Сан-Франциско Васанта Кришнамурти (Vasanth Krishnamoorthy) «CSS Refresher». Web-программирование одна из самых быстро развивающихся отраслей в наше время. Казалось бы, возьми какой-нибудь видеокурс на tuts+ и освой html-верстку, однако, как говорил разработчик Opera Software Вадим Макеев, выступая на конференции CodeFest, они все равно это делают плохо. Но давайте посмотрим, может мы итак все это знаем.

Содержание

Позиционирование (position)
Отображение элемента в документе (display)
Плавающие элементы (float)
CSS селекторы
Эффективные селекторы
Переотрисовка и перерасчет
CSS3 свойства
CSS3 медиа-запросы
Адаптивный web-дизайн
CSS3 переходы
CSS3 анимации
Масштабируемая векторная графика (SVG)
CSS спрайты
Вертикальное выравнивание
Известные проблемы

1. Позиционирование

CSS предоставляет нам до 5 различных значений свойства position. Но по существу, только 4 из них обычно используются.

div {
  position: static; /* по умолчанию */
  position: relative;
  position: absolute;
  position: fixed;
  position: inherit; /* не используется */
}

Статическое (static, по умолчанию):

Единственная причина, по которой вы будете устанавливать это свойство элементу, задавая его статическим, это для того, чтобы специально очистить некоторое позиционирование, которое было применено к этому элементу за пределами вашего контроля. Такая ситуация довольно редкая, так как позиционирование не наследуется каскадом.

Относительное (relative):

Мы можем смещать внутренние элементы в разных направлениях, сдвигать от верхней, правой, нижней и левой границы относительно нашего родительского контейнера. Это свойство является отправной точкой для внутренних элементов данного блока, это очень важное свойство.
При установке в положение relative элементы занимают один и тот же объем пространства на странице, точно также, если бы мы установили их в положение static.
Теперь мы имеем возможность использовать Z-индексы, благодаря которым элементы на веб-странице могут накладываться друг на друга в определенном порядке, и действительно Z-индексы на самом деле не умеют работать со статическими элементами. Даже если вы не установите значение Z-индекса, этот элемент все равно будет отображаться поверх других статически-позиционированных элементов.
Это ограничивает сферу абсолютного позиционирования дочерних элементов. Любой элемент, который является дочерним относительно позиционируемого элемента, может быть абсолютно позиционирован внутри этого блока.

Абсолютное (absolute):

Когда вы применяете абсолютное позиционирование, элемент прорисовывается в новом потоке документа. Это означает, что он больше не занимает никакого пространства среди всех элементов, которые его окружали, когда он был в статическом или относительном состоянии. Просто мы указываем элементу, где ему быть и он прилипнет.
Для элемента с положением absolute, вы можете указать позиционирование сверху, слева, снизу и справа, чтобы установить местоположение, в конце концов. Помните, что эти значения будут относительно ближайшего родительского элемента с относительным (или абсолютным) позиционированием. Если нет такого родителя, он будет размещаться относительно самой страницы.
Компромисс, и наиболее важная вещь, которую нужно помнить про абсолютное позиционирование заключается в том, что эти элементы удаляются из основного потока элементов страницы. Элемент с этим типом позиционирования не зависит от других элементов и не влияют на другие элементы.

Фиксированное (fixed):

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

Наследованное (inherit):

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

В итоге:

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

Подводные камни:

Вы не можете совмещать свойство position и свойство float. Если вы укажите оба свойства вашему элементу, действительным будет использоваться то свойство, которое было указано последним.
Внешние отступы (margin) не создают проблем абсолютно-позиционированным элементам. Допустим у вас есть обычный параграф (p элемент) с нижним отступом в 20 px (пикселей). Ниже него изображение с верхним отступом в 30 px. Пространство между параграфом и изображение не будет 50 px (20 px + 30 px), а скорее 30 px (30 px > 20 пикселей). Это момент называется схлопывающиеся отступы. Два отступа комбинируют (или сворачиваются) для того, чтобы объединиться в один. Абсолютно-позиционированные элементы не отслеживают отступы других элементов, тем самым перед вами не возникает неочевидный казус.

К прочтению:
Absolute, Relative, Fixed Positioning: How Do They Differ?
CSS Positioning 101
Learn CSS Positioning in Ten Steps

2. Отображение элементов в документе

Каждый элемент на веб-странице представляет собой прямоугольный блок. Свойства display определяет как должен вести себя этот прямоугольный блок, каким он должен быть.

div {
    display: inline;
    display: inline-block;
    display: block;
    display: run-in;
    display: flex;
    display: grid;
    display: none;
}

По умолчанию, все элементы являются строчными (inline), кроме тех, кто заведомо браузером указан как блочный (block). В лучшем случае, при помощи своих пользовательский стилей, вы можете сбросить строчный элемент, задав ему значение «block».

Строчный (inline):

Строчные элементы, имеющие «inline» по умолчанию. Такие как span, b, em и тд.
CSS свойства верхнего и нижнего margin/padding отступов будет игнорироваться, но будут применимы левый и правые margin/padding отступы. То есть в этом случае, у нас есть движется по горизонтали, но не по вертикали.
Для таких элементов игнорируются свойства ширины и высоты.
Если элемент является обтекаемым (имеет float), в этом случае, он по умолчанию принимает значение «block» и становится блочным.

Блочно-строчный (inline-block):

Блочный элемент, который обтекается другими элементами подобно строчному.
Такому элементу можно задавать ширину и высоту, внешние и внутренние отступы (движение по вертикали и горизонтали).
Сначала такой элемент отрисовывается подобно элементу со значением «block» (словно вы встраиваете изображение, img), однако затем отображается браузером как строчный элемент.
Существует проблема, которая возникает с внешними отступами.

Блочный (block):

Например, существует ряд элементов, которые по умолчанию имеют значение «block». Такие как div, section, ul и тд.
Блочные элементы не идут друг за другом, как строчные, они переносятся на новую строку. Если, например, ширина не задана, блок будет расширен до ширины родителя и заполнит его.
Игнорируется vertical-align.

Контекстный (run-in):

Устанавливает элемент как блочный или встроенный в зависимости от контекста.
Не поддерживается в Firefox + спецификация не очень хорошо определена.
Если после элемента с display в значении run-in следует блок, то он становится в одну строку с ним и является его частью. Иначе элемент вызывает разрыв строки.

Скрытый (none):

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

Табличный (table):

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

div {
  display: table;
  display: inline-table; /* как таблица, но в стиле inline-block */
  display: table-cell;
  display: table-column;
  display: table-colgroup;
  display: table-header-group;
  display: table-row-group;
  display: table-footer-group;
  display: table-row;
  display: table-caption;
}

Чтобы использовать, просто имитируйте нормальную структуру таблицы. Пример:


  
    
      Противно, но иногда полезно.

Адаптируемый (flex):

Направлена на предоставление более эффективного способа выравнивания и распределения места между элементами в контейнере (родительском блоке), даже если их размер неизвестен или динамический.
Основная идея flex-блоков, обладать способностью изменять свою ширина/высота (и другое), чтобы наилучшим образом заполнять свободное место (в основном, для поддержки адаптивности на всех видах устройств и размеров экрана).
В основном элементы будут распределяться либо вдоль главной оси, либо вдоль поперечной оси контейнера.
Flex-блоки лучше всего подходят для составных частей приложения и мелкомасштабных компонентов на странице, в то время как grid-блоки больше используется для компонентов на странице большого масштаба.
Также как существует inline-block, inline-table, существует и inline-flex.

Сеточный (grid):

Значение grid позволяет нам создавать макет сетки. Она направлена на решении проблем со старыми методами компоновки блоков, имеющих float и inline-block, которые в свою очередь имеют недостатки, и действительно не предназначались для макета страницы.
Основная идея grid-концепции, управлять содержимым, обеспечивая механизм распределения имеющегося пространство блоков в столбцы и строки, с помощью набора заранее установленных размеров.
Вместе с этим фактом мы можем устранить проблемы, которые появляются при разработке, опираясь на старую технику разработки сайтов, теперь вы тратите меньше усилий.
Не поддерживается. Только в IE10+.
Также как существует inline-block, inline-table, inline-flex, существует и inline-grid

К прочтению:
Flexbox Froggy
CSS Almanac: Display
The Difference Between «Block» and «Inline»
Learn CSS Layout: The «display» property

3. Плавающие элементы

div {
  float: none; /* по умолчанию */
  float: left;
  float: right;
  float: both;
  float: inherit;
}

Float определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон. Плавающие (обтекающие) элементы сначала выстраиваются в нормальном потоке, затем образуется новый поток, и они сдвигаются либо вправо, либо влево (в зависимости от выбранного значения) в родительском контейнере. Иными словами, они идут по порядку друг за другом. Учитывая, что в родительском контейнере есть достаточно свободного места, эти плавающие элементы не подстраиваются и не выравниваются для распределения пространства между этими самыми элементами.
Как правило, плавающий элемент обязательно должен иметь фиксированную ширину. Это гарантирует, что float ведет себя так как и ожидалось, избегая проблем в некоторых браузерах.
Элементу можно задать пять значений: left, right, both, inherit, и none. Присвоение значения «left» говорит элементам, идущим в DOM структуре, что они должны обтекать этот элемент по верхней границе плавающего элемента с левого края.
Правило, которое я обнаружил для себя, прекрасно работает для моих float-макетов.В своем HTML коде, я почти всегда сначала создаю плавающие элементы во время разметки, прежде чем добавлять простые элементы, которые могут взаимодействовать с ними. Вы экономите большую часть времени, и это дает желаемый результат.
Но и тут бывают проблемы, когда вы помещаете в родительский блок плавающие элементы, родительский контейнер не может определить динамически высоту своих дочерних элементов, поэтому родительский контейнер будет иметь высоту равную нулю. Это может поломать вашу верстку. Существует метод, который позволяет родительскому элементу, определить свое пространство с учетом каких-либо плавающих элементов внутри. Можно использовать CSS свойство overflow (переполнение) со значением hidden (скрыть). Обратите внимание, что значение свойства overflow не предназначено для такого рода использования, и может вызывать некоторые проблемы, такие как скрытие нужного контента в данный момент или появление нежелательных полос прокрутки.

Хак: для очистки плавающих элементов лучше применять «overflow: auto» к родительскому элементу.

Обратите внимание, что данный трюк не очищает плавающие элементы — он просто растягивает родительский контейнер. Вы можете принудительно очистить float, если вы добавите очищающий элемент после последнего плавающего элемента, или вы можете добавить в любом нужном вам месте, создав тем самым новый поток. Родительский элемент не умеет очищать дочерние плавающие элементы.

9 правил:
1. Плавающие элементы прижимаются к границам своих контейнеров, но не дальше.

2. Любой плавающий элемент будет находится либо рядом, либо ниже предыдущего элемента. Если элементы прижаты влево, второй элемент появится точно справа от первого. Если они прижаты вправо, второй элемент появится слева от первого (reverse).

3. Элемент с левым обтеканием, не может быть правее, чем элемент с правым обтеканием.

4. Плавающие элементы не могут подняться выше верхнего края родительского контейнера (однако становится еще сложнее, когда задействованы отступы).

5. Плавающий элемент не может быть выше своего соседа плавающего элемента.

6. Плавающий элемент не может быть выше своего соседа строчного элемента.

7. Плавающий элемент совместно со своим таким же соседом элементом, не могут выходить за края родительского контейнера.

8. Плавающий элемент должен быть помещен как можно выше.

9. Элемент с левым обтеканием должен быть помещен как можно дальше влево, как это возможно, элемент с правым обтеканием должен быть помещен как можно дальше вправо, как это возможно.

Подводные камни:


Lorem ipsum...

img {
  float: right;
  margin: 20px;
}

Внешние отступы, которые мы добавляем к абзацу применяется вдали справа от изображения. Это происходит потому, что изображение — блок! Вот почему он не увеличивает пространство между изображением и абзацем.

К прочтению:
Clearing floats
Everything You Never Knew About CSS Floats
CSS Floats 101

4. CSS селекторы

div#container > ul {
  border: 1px solid black;
}

Разница между выборкой X Y и X > Y в том, что в последнем будут выбрать только прямые потомки.

ul ~ p {
   color: red;
}

Этот селектор похож на Х + Y, но он менее строгий. В то время как смежный селектор (ul + p) выберет только первый элемент, который непосредственно предшествовало после p, в нашем же случае, это более обобщенная выборка. В нашем случае он отберет все элементы p, следующие за элементом ul.

a[href*="google"] {
  color: #1f6053;
}

Звезда означает, что указанное значение должно появиться где-то в значение атрибута.

a[href^="http"] {
   background: url(path/to/external/icon.png) no-repeat;
   padding-left: 10px;
}

Если мы хотим выбрать все ссылки, которые имеют атрибута href, начинающийся с http, то мы можем использовать данный селектор, показанный выше.

a[href$=".jpg"] {
   color: red;
}

И снова, мы используем регулярные выражение символ — $, который ищет с конца строки. В этом случае мы ищем все ссылки на изображения, заканчивающиеся на формат JPG.

a[data-info~="image"] {
   border: 1px solid black;
}

Тильда (~), символ позволяющий искать атрибут, в котором имеется значения разделенные пробелом.

div:not(#container) {
   color: blue;
}

Выбирает все элементы div, за исключением одного, элемент, который имеет идентификатор контейнера.

p::first-line {
   font-weight: bold;
   font-size: 1.2em;
}

Мы можем использовать псевдо-элементы (обозначение::) в стиле фрагментов элемента, например, выбрать первую строку или первую букву элемента. Это работает только для блочных элементов.

li:nth-child(3) {
   color: red;
}

nth-child псевдо-классы ориентирован на конкретные элементы в стеке (набор одинаковых по типу элементов). Она принимает целое число в качестве параметра, тем не менее, отсчет начинается не с нуля. Если вы хотите вытащить второй элемент списка, используйте li: nth-child (2). Мы даже можете использовать вытаскивать чередующиеся элементы в стеке, чтобы выбрать переменный набор нам необходимо в качестве параметра передать переменную (инкремент). Например, мы можем вытащить каждый четвертый элемент списка таким образом li: nth-child (4n).

li:nth-last-child(2) {
   color: red;
}

Что если у вас огромный список элементов в UL, и нам нужен только предпоследний элемент? Пусть у нас список из 10 элементов, мы могли сделать так li: nth-child (9), но, а если мы не знаем количество элементов, в этом случае, лучше использовать вариант, показанный выше.

li:first-child {
    border-top: none;
}

li:last-child {
   border-bottom: none;
}

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

К прочтению:
The 30 CSS Selectors you Must Memorize

5. Эффективные селекторы

Ниже приведен список селекторов в порядке эффективности (c учетом скорости поиска элемента и производительности). Идентификаторы являются наиболее эффективными, а псевдо-классы и псевдо-элементы являются наименее эффективными.

id (#myid)
class (.myclass)
tag (div, h1, p)
adjacent sibling (h1 + p)
child (ul > li)
descendant (li a)
universal (*)
attribute (a[rel=”external”])
pseudo-class and pseudo element (a:hover, li:first)

К прочтению:
CSS Selectors: Should You Optimize Them To Perform Better?

6. Переотрисовка и перерасчет

Переотрисовка (repaint):
Также известное, как redraw — это событие, которое происходит всякий раз, когда что-то делается видимым на странице, если ранее оно было скрыто (visibility: hidden, overflow: hidden, display: none, и др), или наоборот (visibility: visible, overflow: auto, display: static, и др), когда происходят какие-то изменения в макете. Примером может быть что угодно: добавление к элементу рамки, изменение цвета фона, изменение видимости стилей — все это приводит к переотрисовке страницы. Тем самым данное событие может дорого вам обойтись в плане производительности, так как нагружает браузерный движок поиском, проходами по всем элементам, чтобы определить, что является видимым уже, а что должно отобразиться.Перерасчет (reflow):
Перерасчет (или перекомпоновка) носит более значительный характер. Это событие будет происходить всякий раз, когда происходят манипуляции с DOM-деревом HTML документа, или когда стиль, который влияет на расположение, изменяется у элемента, это событие будет происходит всякий раз, когда атрибут class у элемента изменяется, или всякий раз, когда изменяется размер окна браузера. Цель перерасчета в том, чтобы определить, где различные части сайты теперь должны отображаться. Если вы измените родительские свойства, тогда его потомки также будут пересчитаны. Элементы, которые появляются после того, как DOM было сформировано, будут сформированы заново. Если изменяется дочерний элемент, тогда будет пересчитан и родительский элемент, чтобы учесть изменения своих потомков. Затем, происходит переотрисовка.

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

Минимальный перерасчет (minimal reflow):
Долгий перерасчет может повлиять на весь документ, всю веб-страницу. Чем больше документ, тем дольше перерасчет. Меньше HTML-кода лучше производительность. Элементы с абсолютным позиционирование или фиксированным, не влияют на структуру главного документа, так как они находятся в отдельном потоке, если в них произошли изменения, только они будут подвержены перерасчету. Конечно, документ, в котором произойдут изменения, все равно будут полностью переотрисованы, но эта проблема имеет слабый характер, чем перерасчет всего DOM-дерева.

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

Что вызывает перерасчет:
— Изменение размера окна
— Изменение шрифта
— Добавлении или удалении стилей
— Динамическое изменение, пользователь вводит текст в поле ввода
— Активация CSS псевдо-классов, к примеру, событие: hover
— Манипулирования с атрибутом class
— Сценарии манипулирования с DOM-деревом
— Расчет значений offsetWidth и offsetHeight
— Задание свойств в атрибут style

Полный список, составленный Полом Айришом (Paul Irish), того, что приводит к перерасчету DOM можно ознакомится тут.

Как свести к минимуму влияние перерасчета на производительность:
— Изменение атрибутов класса у элементов, делайте как можно реже (минимум манипуляций в DOM-дереве).
— Избегайте установки нескольких встроенных стилей.
— Применяйте анимацию к элементам, которые имеют фиксированное или абсолютное позиционирование.
— Избегайте табличной разметки.
Даже незначительные изменения в ячейке таблицы вызовут перерасчет на всех остальных узлах таблицы.
— Не используйте регулярные выражения в CSS (только в IE)Примечание:
Потеть над селекторами, используемых в современных браузерах, бесполезно. Большинство методов выборки сейчас настолько быстрые и эффективные, что на это действительно не стоит тратить много времени. Кроме того, есть различия в различных браузерах, и у каждого есть свои медленные селекторы.

Чрезмерные неиспользуемые стили, скорее всего, они будут бить по производительность, чем любые селекторы, которые вы добавили в свой документ. Следует прибираться в своих css-стилях. 3000 строк неиспользуемых или избыточных на странице стилей, в наше время, это не редкость. Если разные стили используются на разных страницах вашего сайта, разбейте ваш один и единственный styles.css на несколько дополнительных, это будет лучшим вариантом.

К прочтению:
Reflows & Repaints: CSS performance making your JavaScript slow?
Writing efficient CSS selectors
Why do browsers match CSS selectors from right to left?
CSS performance revisited: selectors, bloat and expensive styles

7. CSS3 свойства

border-radius:

-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;

Создает закругленные края у элементов. Можно также использовать для создания окружностей.

Помните, поскольку не во всех браузерах реализованы формальные CSS3 правила, вам может понадобиться использовать специальные браузерные префиксы (-webkit-, -moz-, -ms-, -o-) при инициализации css-правил, либо вы можете использовать css-препроцессоры для облегчения написания css-кода.

box-shadow:

-webkit-box-shadow: 1px 1px 3px #292929;
-moz-box-shadow: 1px 1px 3px #292929;
box-shadow: 1px 1px 3px #292929;

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

Так как все остальные браузеры давно поддерживают css3 свойства, мы с вами далее будем упоминать только IE.
Поддержка: IE9+

box-shadow принимает четыре параметра: x-смещение, y-смещение, размытие, цвет тени.

Первое значение задает горизонтальное смещение тени, с положительным значением смещения тени справа от элемента, и отрицательное значение слева.

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

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

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

-webkit-box-shadow: 0 0 20px #333 inset;
-moz-box-shadow: 0 0 20px #333 inset;
box-shadow: 0 0 20px #333 inset;

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

Поддержка: IE9+

text-shadow:

color: #fff;
text-shadow: 0 0 50px #333;

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

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

Как с box-shadow, можно иметь несколько текстовых теней просто разделяя их запятыми. Вот пример, создающий эффект пылающего текста:

text-shadow: 0 0 4px #ccc,
             0 -5px 4px #ff3,
             2px -10px 6px #fd3,
             -2px -15px 11px #f80,
             2px -18px 18px #f20;

Поддержка: IE10+

Градиенты:
Можно объявить фон элемента сплошным цветом, либо вы можете также задать его градиентом. Используя градиенты, объявленные в CSS, лучше использовать файловые изображения, так лучше для контроля и производительности.

Градиент — это, как правило, один цвет, которые плавно переходит в другой, но в CSS вы можете контролировать каждый аспект того, как это все будет происходить, от направления до цветового насыщения.

.gradient {
  /* как запасной вариант */
  background-color: red;

  /* будет верхней позицией, если браузер поддерживает его */
  background-image: linear-gradient(red, orange);

  /* эти свойства сбросят другие свойства, как фон-позиция, браузер поймет, что вы хотите от него */
  background: red;
  background: linear-gradient(red, orange);
}

Поддержка: IE10+

Линейные градиенты:
Пожалуй, самый распространенный и полезный вид градиента. По оси реализация градиента может идти слева-направо, сверху-вниз, или под любым углом, который вы выберите. Если вы не объявляете угол, тогда по умолчанию будет задана ось сверху-вниз. Чтобы задать ось слева-направо, вы должны указать дополнительный параметр в начале линейного градиента, функцию, начинающуюся со слова «to right», указывающий направление, «направо». Слово «to» лишь синтаксическая вставка для определения также углов. Вы не ограничиваете себя только двумя цветами. На самом деле вы можете использовать цветовую палитру. Вы можете также объявить, где вы хотите отобразить тот или иной цвет. Все это называется «color-stops».

.gradient {
  height: 100px;
  background-image:
    linear-gradient(
      to right,
      red,
      yellow 10%
    );
}

Подводные камни:
Мы склонны считать, что градиенты лишь размазывают цвет, но если у вас есть два цвета, остановитесь на них, что же, можно сделать и сплошной цвет, мгновенно изменить его на другой, более чистый цвет.

Существуют три различных синтаксиса, которые браузеры поддерживают:
— Старый: оригинальный движок WebKit и его единственный способ, используем from () и color-stop ()
— Редко используемый: старая система углов, например, ключевое слово «to left»
— Современный: новая система углов, например, ключевое слово «to right»

Кстати старая система градусов работает и сейчас, хотя новый синтаксис немного отличается. По старому способу мы определяем 0deg и слева направо и идет вращение против часовой стрелки, в новой системе (обычно без префикса) способ определяет 0deg как снизу вверх и по часовой стрелке.

Формула: OLD (or TWEENER) = (450 — new) % 360
Или даже проще: NEW = 90 — OLD, OLD = 90 — NEW
Старый синтаксис: linear-gradient (135deg, red, blue)
Новый синтаксис: linear-gradient (315deg, red, blue)

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

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

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

Подводные камни:
Есть опять три различных синтаксиса, которые поддерживают браузеры:
— Старый: оригинальный движок WebKit и его единственный способ, используем from () и color-stop ()
— Редко используемый: ваши значения, которые вы указываете из центра, они могут сломаться в браузерах, которые поддерживают как раз новый синтаксис (с префиксами) и новую систему углов, поэтому нужно отслеживать этот момент.
— Современный: используйте связку, «circle closest-corner at top right»

Рекомендуется использовать autoprefixer как в postcss для обработки префиксов, чтобы не мучится с различными браузерами.

Повторяющиеся градиенты:
Размер градиента определяет окончательный цвет и размер. Если вы указали 20 пикселей, размер градиента (который затем повторяется) будет является 20 от 20 px площади.

.repeat {
  background-image:
    repeating-linear-gradient(
      45deg,
      yellow,
      yellow 10px,
      red 10px,
      red 20px /* определяет размер */
    );
}

Они могут быть использованы вместе с линейным и радиальным вариациями.

К прочтению:
Box-shadow, one of CSS3«s best new features
CSS Almanac: box-shadow
CSS Gradients

8. CSS3 медиа-запросы

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

Существует три способа вызова медиа-запросов (зависимые стили):
— Во-первых, таблицы стилей в HTML или XHTML:

— Во-вторых, в XML:

— И наконец, в css-стилях, с помощью правила import:

@import url("/style.css") all and (color);

— Или с помощью правила media:

@media all and (color) { /* css-код */ }

В настоящее время, существует 13 мультимедийных возможностей контролировать стили, исходя из событий браузера: вы можете отслеживать ширину, высота устройства, ориентацию устройства, изменение размера окна браузера, цвет, цветовой индекс, монохромность, разрешение экрана, развертку и сетки. Все, кроме ориентации, сканирования, и сетки может принимать min — и max — префиксы.

9. Адаптивный web-дизайн

Настройка области просмотра (viewport):

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

Ширина = часть ширины устройства — ширина контента (width=device-width), так мы устанавливает ширину страницы, чтобы использовать всю ширину экрана устройства (которое будет меняться в зависимости от устройства).

Изначальный масштаб равен 1.0, это набор начального уровня масштабирования, когда страница загружается браузером.

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

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

Используйте media-запросы, чтобы применять различные стили для малых и больших экранов. Установка большой ширины для элементов страницы, заставит окно просмотра уменьшить масштаб. Вместо этого, рассмотрите возможность использования относительной ширины значений, например, «width: 100%». Также, будьте осторожны с использованием больших абсолютных значений относительных смещений позиционирования. Ваш элемент может уйти за пределы окна просмотра устройства.

Сетка сайта:
В теории, отзывчивая сетка имеет 12 столбцов, и общую ширину 100%, она будет сжиматься и расширяться при изменении размеров окна браузера.

Сначала убедитесь, что все HTML-элементы имеют box-sizing свойство установленное в border-box. Это гарантирует, что padding и border входят в общую ширину и высоту элементов.

Добавьте следующий код в ваш CSS:

* {
    box-sizing: border-box;
}

Адаптивные изображения:
Изображения будут отзывчивыми и масштабируемыми, если свойство width равняется — 100%. Однако, лучшим вариантом будет набор max-свойств ширины (width) в 100%, поскольку изображение будет масштабироваться (увеличиваться), нам необходимо делать размер больше, а не изменять его масштаб.

Фоновые изображения могут также реагировать на изменение размеров и масштабирования устройства.

Если background-size имеет значение «contain», фоновое изображение б