Новое в CSS3

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

Конический градиент – conic-gradient

С помощью свойства conic-gradient можно создавать круговые диаграммы, конические формы и глянцевые поверхности.

Самый простой градиент background: conic-gradient(white, black);, состоящий из двух цветов, будет иметь резкий переход.

У плавного градиента первый и последний цвета должны совпадать:
background: conic-gradient(white, black, white);

Можно задать начальный угол: background: conic-gradient(from 45deg, white, black, white);

Чтобы сместить центр градиента: background: conic-gradient(from 45deg at 15% 25%, white, black, white);

Для круговой диаграммы с резкими переходами задают точки начала и конца цвета в % или в deg:
background: conic-gradient(red 120deg, green 120deg 240deg, blue 240deg);

Свойство repeating-conic-gradient удобно использовать для повторяющегося градиента:
background: repeating-conic-gradient(red 0 15deg, blue 0 30deg);

Соотношение сторон – aspect-ratio

Задает пропорциональное соотношение между шириной и высотой: aspect-ratio: 16 / 9;

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

Это свойство позволяет зафиксировать пропорции на любом элементе.

Свойство content-visibility

Новое свойство content-visibility повышает скорость отображения веб-страницы. Оно позволяет браузеру пропускать рендеринг элемента до тех пор, пока он не понадобится, т.е. появится в поле зрения. Если большая часть контента сайта находится за пределами экрана, использование этого свойства может значительно сократить время начальной загрузки страницы.

Управление прокруткой

Два новых свойства scroll-snap-type и scroll-snap-align дают возможность реализовывать прокрутку веб-страницы с привязкой к определённым точкам.

Свойство scroll-snap-type задает направление и тип прокрутки. Применяется к самому контейнеру. Направление задается значениями x, y, block inlinr или both. Тип прокрутки mandatory определяет обязательное смещение области видимости к ближайшей точке привязки. При заданном типе proximity смещение происходит только, когда область видимости находится достаточно близко (с точки зрения браузера) к точке привязки.

Свойство scroll-snap-align указывает позицию, к которой будет привязана прокрутка. Применяется к дочерним элементам. Привязка задается значениями start, center или end.

И в заключении...

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