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

Отключаем возможность выбора текста

Свойство user-select в сочетании со значением none отключает возможность выбора содержимого заданного элемента:

element {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10+ and Edge */
  user-select: none; /* Standard syntax */
}

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

Меняем фон выделенного текста

Для решения этой проблемы нам потребуется псевдо-класс ::selection:

::selection {
  color: #ececec;
  background: #222831;
}

Не забывайте выбирать цвет, хорошо контрастирующий с основным фоном сайта.

Разбиваем текст на строки без br

А такой трюк мы проделаем с помощью свойства white-space и значений pre-wrap или pre-line:

element {
  white-space: pre-wrap; /* текст разбивается по символам новой строки, последовательности пробелов сохраняются */
  white-space: pre-line; /* текст разбивается по символам новой строки, последовательности пробелов объединяются в один пробел */
}

Увеличиваем пробелы между словами

Пространство между словами можно изменять с помощью свойства word-spacing:

element {
  word-spacing: 6px;
}

Скрываем скроллбар браузера

Вероятно, многие начинающие разработчики не знают, что такое возможно:

/* Chrome, Opera, Safari */
html::-webkit-scrollbar {
  display: none;
}

Следует обратить внимание на то, что такой синтаксис будет актуален только в отношении бразуеров Chrome, Opera и Safari.

Спасибо за внимание.