Найти тему
Программист - турист

6 полезных css свойств о которых почти не говорят

Оглавление

All

Если вы когда-либо пользовались css фреймворками, то вам знакомы моменты, когда хотелось сделать некоторые элементы на свой вкус. Обычно для этого используется !important. Но есть ещё один интересный способ: all

Например:
.nav {
all: initial;
}
Код выше установит все свойства как стартовые браузерные.

Writing-mode

У данного свойства слабая поддержка, но оно прекрасно. Я думаю хоть раз, но вы сталкивались с необходимостью перевернуть текст, но transform плохо для этого подходил и приходилось танцевать с бубном.

Background-clip

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

Также позволит нам установить background у текста

User-select

Если у вас есть какой-либо текст на вашем веб-сайте и вы не желаете, чтобы ваши пользователи могли копировать, user-select позволит вам это сделать.

Вот пример, когда текст нельзя будет выделять:

-2

А так мы разрешаем выделение:

-3

White-space

Это свойство полезно при применении text-overflow свойств, поскольку это свойство позволяет вам управлять отображениями пробелов текста элемента.

Он принимает свойства nowrap, pre, pre-wrap, pre-line и normal.

При nowrap пробелы не учитываются, переносы строк в коде HTML игнорируются, весь текст отображается одной строкой; вместе с тем, добавление тега <br> переносит текст на новую строку.

При pre текст показывается с учетом всех пробелов и переносов, как они были добавлены разработчиком в коде HTML. Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки.

При pre-line в тексте пробелы не учитываются, текст автоматически переносится на следующую строку, если он не помещается в заданную область.