CSS имеет некоторые менее известные, но полезные функции. Мы рассмотрим некоторые из них.

1. Свойство CSS Scroll-Snap-Type и свойство Scroll-Snap-Stop.

прокрутка-привязка-стоп

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

Gif :

Пример :

Ценить :

• Нормальный: это значение по умолчанию. Прокрутка — это поведение по умолчанию

• Всегда: после быстрого пролистывания по сенсорной панели или сенсорному экрану прокрутка останавливается и фокус переходит к следующему элементу.

свойство типа прокрутки-привязки

Перетащите ползунок по горизонтали, отпустите его, и вы увидите эффект.
Эффект возникает, когда вы нажимаете на поле, а затем перемещаетесь с помощью клавиш со стрелками влево и вправо

Gif :

Пример :

Ценить :

• Нет : это значение по умолчанию

• X : эффект устанавливается по оси X

• Y : эффект устанавливается по оси Y

• Оба : эффект устанавливается по осям X и Y

• Обязательно : после завершения прокрутки прокрутка автоматически перемещается к точке захвата

2. Свойство Css Place-Items

Значение, установленное для свойства Place-items, будет применено как к свойствам align-items, так и к свойствам justify-items.

Пример :

Ценить :

• Начало: Выравнивание элементов в начале ячейки сетки

• Конец : Выровнять элементы по концу ячейки сетки

• Центр: Выравнивание элементов по центру ячейки сетки

3. CSS для всех свойств

Изменяет все свойства, примененные к элементу или его родительскому элементу, на их первоначальные значения

Пример :

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ценить :

• Unset: изменяет все свойства, примененные к элементу или родительскому элементу, на их родительское значение, если они наследуются, или на их начальное значение, если нет

4. Свойство выбора пользователем CSS

Запрещает пользователям выбирать текст

Пример:

The text of this div element cannot be selected.

5. Свойство Css caret-color

Изменяет цвет курсора (каретки) в полях ввода текста.

6. Свойство CSS text-decoration-skip-ink

Свойство CSS text-decoration-skip-ink определяет, как рисуются надчеркивание и подчеркивание при прохождении глифа через линии и подчеркивания.

Ценить :

• Никто:

Пример :

text-decoration-skip-ink: none;

• Авто:

Пример :

text-decoration-skip-ink: auto;

7. Свойство CSS-указателей-событий

Свойство pointer-events определяет, реагирует ли элемент на события указателя.

Пример :

Google


 Google

Ценить:

• Нет: по умолчанию

• Авто: элемент не реагирует на события указателя

Заключение

Мы рассмотрели малоизвестные особенности CSS. Мы узнали, какие функции будут полезны в ваших приложениях.