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

Фича 1. Функция max() в CSS

Функция max() принимает одно или несколько значений, разделённых запятыми, и возвращает наибольшее из них. Эту функцию используют для того, чтобы зафиксировать минимальное значение, которое может принимать CSS-свойство.

В следующем примере нам нужно, чтобы ширина элемента составляла бы как минимум 500px.

.element {
    width: max(50%, 500px);
}

Если 50% ширины области просмотра больше 500px — для настройки ширины элемента будет использовано именно это значение

Браузеру нужно выбрать максимальное значение из 50% и 500px. Выбор зависит от ширины области просмотра. Если 50% ширины области просмотра — это меньше, чем 500px, браузер это значение проигнорирует и использует значение 500px.

Если же 50% ширины области просмотра больше 500px, тогда ширина элемента будет установлена равной этому значению.

#Фичи #CSS

Фича 2. Свойство place-items в CSS Grid

Свойство place-items позволяет центрировать элемент по горизонтали и по вертикали, обходясь при этом минимальным объёмом CSS-кода.

Пример кода:
.box{
    display: grid;
    place-items: center;
}

Свойство place-items представляет собой сокращение, используемое для настройки свойств justify-items и align-items.

#Фичи #CSS

Фича 3. Гибкая настройка border-radius

При помощи свойства border-radius можно закруглять углы рамок. Однако, мало кому известно о возможности задавать значения закругления отдельно по оси X и Y.

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

.wrapper { border-radius: 30px 30px 30px 30px / 50px 50px 50px 50px; }

#Фичи #CSS

Фича 4. Свойство background

На сколько вы хорошо знаете свойство background? Это свойство может принимать сразу несколько значений.

background-image - устанавливает одно или несколько фоновых изображений для элемента.

background-position - задает начальное положение фонового изображения.

background-size -  позволяет задавать размер фонового изображения.

background-repeat - устанавливает, как фоновые изображения будет повторяться. Они могут повторяться по горизонтальной и вертикальной оси или не повторяться вовсе.

background-attachment - определяет, является ли позиция этого изображения фиксированной в области просмотра, или прокручивается вместе с содержащим его блоком.

background-origin - определяет область позиционирования фонового рисунка.

background-clip - определяет как цвет фона или фоновое изображение будут выводиться под границами блока.

background-color - определяет цвет фона элемента.

#Фичи #CSS

Фича 5. Свойство font-style: oblique

Практически каждый раз, когда вы видите свойство font-style, оно используется в значении «normal» или «italic». Но оно также можете иметь значение «oblique».

Слово «oblique» типографский термин и представляет собой наклонный шрифт, но это не курсив.
В связи с тем, как CSS обрабатывает наклонный шрифт, он может быть взаимозаменяем с курсивом, если используемый шрифт не имеет наклонного типа.

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

Пример на Codepen

#фичи #css

Фича 6. Свойство background-image: image-set

Давненько не рассматривали фичи. Наверстываем упущенное!

CSS-свойство image-set, которое позволяет динамично подставлять бэкграунд картинки в зависимости от плотности пикселей, либо от поддержки тем или иным браузером формата картинки. Очень часто используется в профессиональной верстке. Вашу плотность пикселей можно узнать с помощью js-функции window.devicePixelRatio. К примеру, на обычном мониторе этот коэффициент будет равен одному, а на ретине макбука или смартфоне, около 2-3

#фичи #css