Кодер. Стандартный CSS3
Что вообще за CSS3? Чем он отличается от CSS2.
То, чем мы давно привыкли пользоваться для стилизации приложений было не всегда.
Что нового принёсла 3 версия CSS? Пробежимся по фичам.
Отметим, что стандарт CSS3 предполагает разделение СSS на модули. Новые фичи - это отдельные модули.
Селекторы аттрибутов:
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
Новые селекторы позволяют более гибко и просто выбирать и стилизовать элементы.
Подробнее и с примерами по ссылке.
Задавать значения цвета кроме как в шестнадцатеричной форме #FFFFFF можно через HSL, HSLA, и RGBA.
HSL - hue, saturation, and lightness - цветовая модель, в которой цветовыми координатами являются тон, насыщенность и светлота. hsl принимает значения от 0 до 359.
Считается, что преимуществом цветовой схемы HSL перед RGB являются более природные естественные цвета, так как формат RGB был создан специально для электроннолучевых трубок.
HLSA и RGBA добавляют альфа-канал, который отвечает за настройку прозрачности. Принимает значения от 0 до 1.
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.
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 тут, тут и тут.
- Режим написания
Позволяет настроить горизонтальное или вертикальное положение текста, а также направление блока (слева направо, снизу вверх и т.д.).
Каскадирование предполагает, что элементы вложены друг в друга и дочерние элементы наследуют свойства родителей.
Данный модуль позволяет устанавливать значения свойств, наследуя их от родительского элемента с помощью 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");
}
Также модуль позволяет выставить бессчетные параметры настройки шрифтов.
Модуль решает задачу разбивки и отображения контента в нескольких колонках, как в журнале или газете. Раньше это было очень сложной задачей, но с появлением этого модуля все стало гораздо проще.
Можно настроить число колонок для отображения текста при помощи свойства column-count, а ширину - column-width.
[Подробнее](https://habr.com/ru/company/microsoft/blog/143158/)
Модуль позволяет задавать значения свойтсв в следующих велечинах:
- 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!