▫️
object-fit - позволяет подстроить контентное изображение или видео под нужные размеры, не деформируя изображение. Напоминает background-size для фоновых картинок.▫️
pointer-events - управляет реакцией элемента на события мыши и прикосновения к сенсорному экрану. Например, вам нужно, чтобы при наведении мыши на кнопку disabled курсор не менялся.▫️
background-attachment - управляет прокруткой фона элемента: может пригодится, например, для параллакс-эффекта, чтобы элемент прокручивался, а фон - нет.▫️
mix-blend-mode - управляет смешиванием цвета элемента с цветом нижних слоев. Например у элемента несколько фоновых картинок и нужно, чтобы цвета смешивались с затемнением.▫️
content - если оно задано, то содержимое элемента переопределится в соответствии со значением content. Сюда можно передавать мелкие иконки символами для создания псевдоэлементов, ссылки на картинки, значение атрибута, значение css-счетчикаА также о css-функциях ✍️
▫️
calc() - может вычислить значение в зависимости от размеров родителя, например width: calc(100% / 4 - 12px);▫️
repeat() - позволяет повторить определенное значение нужное число раз. Например, у вас grid из 4-х колонок и вы пишете: grid-template-columns: 1fr 1 fr 1fr;, а можете написать: grid-template-columns: repeat(4, 1fr);▫️
min() и max() - выбирает из набора значений минимум и максимум соответственно, например left: max(calc((100% - 1312px) / 2), 64px); - позиционирование слева ширина родителя минус максимальная ширина контента и пополам, но не меньше 64px.▫️
counter() - это css-счетчик. Например, вам нужно сделать блок с цифрами по порядку: вы можете использовать счетчик для подстановки числе в блок. Более того, эти числа можно настраивать, с помощью свойств, которые начинаются на counter: counter-increment, counter-reset и так далее.▫️
attr() - получает значение аттрибута, которое можно использовать, например, в свойстве content, например, content: attr(data-title);#css #верстка