Кодер. Стандартный CSS3

Jem -

Что вообще за CSS3? Чем он отличается от CSS2.
То, чем мы давно привыкли пользоваться для стилизации приложений было не всегда.

Что нового принёсла 3 версия CSS? Пробежимся по фичам.

Отметим, что стандарт CSS3 предполагает разделение СSS на модули. Новые фичи - это отдельные модули.

  1. Селекторы

Селекторы аттрибутов:
element[foo^="bar"] - селектор для аттрибута, значение которого начинается с bar
element[foo$="bar"] - селектор для аттрибута со значением bar
element[foo*="bar"] - селектор для аттрибута со значением, содержащим bar

Селекторы псевдо-элементов:
:root - корневой элемент
:nth-child(n) - селектор дочерних элементов (n - 1, 2, 3...)
:nth-last-child(n) - :nth-child(n) с конца
:nth-of-type(n) - селектор элемента по типу (n - 1, 2, 3...)
:empty - элемент без children
:target - целевой элемент URL (например http://www.url.com#content - элемент #content)
:enabled (:disabled) - элемент который в состоянии enabled (disabled)
:not(selector) - элемент который не матчится с селектором selector

Новые селекторы позволяют более гибко и просто выбирать и стилизовать элементы.
Подробнее и с примерами по ссылке.

  1. Цвета

Задавать значения цвета кроме как в шестнадцатеричной форме #FFFFFF можно через HSL, HSLA, и RGBA.

HSL - hue, saturation, and lightness - цветовая модель, в которой цветовыми координатами являются тон, насыщенность и светлота. hsl принимает значения от 0 до 359.

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

HLSA и RGBA добавляют альфа-канал, который отвечает за настройку прозрачности. Принимает значения от 0 до 1.

Подробнее

  1. Рамки и background

CSS3 позволяет скруглять элементы через border-radius, а также настраивать скругление для каждого из углов, например border-top-left-radius. А еще можно задавть изображение для рамок через border-image.

Настройка изображений заднего фона через
background-clip - распределение фона в границах элемента
background-origin- область позиционирования фонового рисунка
background-size - размер заднего фона
background-repeat - настройка повторения фонового изображения
background-attachment - возможность скрола изображения вместе со скролом элемента
background - комплексаная настройка фона
background-image: url(firstImage.jpg), url(secondImage.gif), url(thirdImage.png); - пример задания нескольких фоновых изображений

Можно использовать градиент в качестве фона: линейный и радиальный.

background: linear-gradient(direction, color-stop1, color-stop2, ...); - настройка линейного градиента.

background: radial-gradient(shape size at position, start-color, ..., last-color); - радиальный градиент.

Подробнее о background и border.

  1. Медиа запросы

Media queries позволяются задавать различные стили, которые применяются к элементам в зависимости от типа и размеров экрана. На основе этого можно создавать отзывчивый дизайн.

Типы устройств:
- all - все
- print - принтеры
- screen - экраны компов, планшетов, смартфонов
- speech - скринридеры

Задать условие можно через самые популярные параметры min-width, max-width, а также многие другие (можно найти в дополнительных ссылках далее).

Также можно задать вид орментации через orientation: tablet/phone, landscape или portrait.

Пример:

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

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

Подробнее о media queries тут, тут и тут.

  1. Режим написания
    Позволяет настроить горизонтальное или вертикальное положение текста, а также направление блока (слева направо, снизу вверх и т.д.).

Подробнее

  1. Каскадирование и наследование

Каскадирование предполагает, что элементы вложены друг в друга и дочерние элементы наследуют свойства родителей.

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

Подробнее

7.Шрифты

С помощью @font-face можно установить значени шрифтов для отображения или загрузки (либо с сервака через url() либо с локальной машины через local())

Например

@font-face {
 font-family: "Open Sans";
 src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
        url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}

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

Подробнее

  1. Колоночная разметка

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

Можно настроить число колонок для отображения текста при помощи свойства column-count, а ширину - column-width.

[Подробнее](https://habr.com/ru/company/microsoft/blog/143158/)
  1. Значения и единицы

Модуль позволяет задавать значения свойтсв в следующих велечинах:
- rem, ch, em, ex - значения относительны корневого элемента (rem, ch) или шрифта (em, ex)
- vw, vh, vmax, and vmin - относительно vewport'a
- mm, cm, px, pt, pc - абсолютные значения

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

Подробнее тут, тут и тут.
10. Гибкие макеты

Новое значение свойства display: flex - позволяет создавать гибкие макеты, которые позволяют избавиться от большинства костылей, которые применялись для расположение нескольких элементов в нужной последовательности. Можно завать направление flex-direction, соотношение размеров flex-grow, flex-basis, flex-shrink, правила переноса для элементов flex-wrap и многое другое.

Подробнее можно почитать в предыдущей статье

Это наиболее значимые нововведения (как по мне), что принес нам CSS3. Общий список можно найти тут.

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

Оглавление

Присоединяйтесь к нашим каналам FrontEndDev и Web Stack в Telegram, чтобы не пропустить самое интересное из мира Web!