Источник: WebForMyself.com
Сегодня я хотел бы рассказать вам о нескольких свойствах, секретах и значениях CSS, которые редко упоминаются в технической литературе, но, на мой взгляд, представляют особый интерес для повышения скорости и качества разработки веб-интерфейсов.
Многие из обсуждаемых свойств являются экспериментальными. Большинство из них поддерживаются всеми современными браузерами. Итак, вы готовы к небольшому путешествию в удивительный и почти безграничный мир CSS? Давайте начнем!
grid + place-items
Этот метод позволяет выравнивать элементы по горизонтали и вертикали всего двумя строками кода.
place-items является сокращенным свойством для justify-items и align-items. Это свойство можно применить сразу к одной или нескольким (дочерним) ячейкам.
flex + margin
Еще один современный способ выровнять элементы по горизонтали и вертикали — использовать комбинацию display:flex и margin:auto.
Было бы справедливо сказать, что то же самое можно сделать с помощью следующего фрагмента:
flex + gap
Раз уж мы говорим о Flexbox, стоит упомянуть, что у нас наконец-то появилась возможность устанавливать промежутки между элементами с помощью свойства gap (нам это действительно нужно):
inline-flex
Это свойство позволяет создавать встроенные элементы, у которых есть функции Flexbox. Пример стоит многих слов:
columns
Этот метод позволяет разбивать текст на столбцы. Сolumn-count определяет количество столбцов, column-gap устанавливает размер зазора между колоннами, и column-rule задает стиль вертикальной линии между столбцами.
Columns является сокращенным свойством для column-count и column-width.
background-repeat
Background-repeat устанавливает порядок, в котором фон заполняется с указанным изображением. Круглое значение равномерно распределяет изображения по всей ширине контейнера, а значение пробела добавляет небольшое количество отступов между изображениями:
background-blend-mode
Background-blend-mode устанавливает порядок, в котором фоновое изображение и цвет (или несколько фоновых изображений /цветов) следует смешивать друг с другом. Возможные значения:
- color
- color-burn
- color-dodge
- darken
- difference
- exclusion
- hard-light
- hue
- lighten
- luminosity
- multiply
- overlay
- saturation
- screen
- soft-light
Вы когда-нибудь работали с фотошопом? Тогда я думаю, вы понимаете, о чем речь. Предположим, у нас есть черно-белое изображение, которое мы хотим использовать в качестве фона. Но в то же время мы хотим, чтобы оно было цветным. Как мы можем этого добиться?
background-clip
Свойство background-clip определяет, как далеко цвет фона или фоновое изображение должно выходить за рамки заполнения элемента. На мой взгляд, text самое интересное значение этого свойства:
filter
Свойство filter позволяет применить некоторые визуальные эффекты к элементам. Возможные значения функции:
- url()
- blur()
- brightness()
- contrast()
- drop-shadow()
- grayscale()
- hue-rotate()
- invert()
- opacity()
- saturate()
- sepia()
Изменение цветовых тем (или схем) сайта:
В CSSgram вы найдете пример использования filter для Instagram.
drop-shadow
Установленное значение drop-shadow() для свойства filter, в отличие от свойства box-shadow, позволяет добавлять тень к самому изображению (в формате PNG), а не к блоку, в котором оно находится.
object-fit
Свойство object-fit управляет соотношением сторон замещаемых элементов, такими, как img и video, если они имеют ширину или высоту, а также к ним применяется масштабирование. Например, значение scale-down позволяет сохранить соотношение сторон изображения независимо от размера блока:
Свойство object-position, позволяет сохранить пропорции изображения, независимо от размера контейнера.
cursor
Знаете ли вы, что в дополнение к значкам курсора, предоставляемым браузером (например, cursor:pointer), мы также можем определять наши собственные изображения и SVG?
scroll-behavior
Установив значение scroll-behavior равным smooth, мы имеем возможность легко осуществить плавный скроллинг между разделами страницы:
text-overflow
Свойство text-overflow равное ellipsis позволяет добавлять «…» в конец текста, когда он выходит за пределы контейнера.
caret-color
Свойство caret-color устанавливает цвет каретки видимого маркера(|), указывающий, где будет вставлен следующий введенный символ.
@supports
Правило @supports позволяет проверить, поддерживает ли браузер свойства (или комбинацию свойства /значения) перед их использованием.
var()
Функция var() позволяет использовать значения пользовательских переменных в качестве значений свойств. Второй необязательный параметр этой функции – это резервное значение.
calc()
Функция calc() используется для определения расчетного значения свойств, размера использования, угла, времени или чисел в качестве значений. Это позволяет устанавливать значения на основе сложения или вычитания различных единиц.
Обычно позиционированный элемент выравнивается по горизонтали и вертикали следующим образом:
Если мы знаем размеры такого элемента, мы можем сделать следующее:
attr()
С помощью функции attr() вы можете получить значение атрибута выбранного элемента и использовать его в стилях. Создание всплывающих подсказок с помощью CSS:
:target
Псевдо-класс :target позволяет создавать модальности, которые работают без JavaScript:
::marker
Раньше мы удаляли маркеры списков с помощью list-style:none и добавляли свои собственные с помощью псевдоэлементов ::before или ::after. Теперь есть более простой способ сделать это — мы можем использовать псевдоэлемент ::marker.
::selection
Псевдо-элемент ::selection позволяет стилизовать выбор текста.
Спасибо за уделенное время и хорошего дня!
Автор: Alexey Shepelev
Источник: betterprogramming.pub