Несколько полезных фишечек в CSS

csshacks.css

/* С помощью css блок текста ограничивается указанным количеством строк */
/* Остальное скрывается троеточиями */
.text {
  display: -webkit-box;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Если бесит что при скроллинге контейнера с помощью тачпада происходит переход по страницам */
.scroll-area {
  overscroll-behavior-x: contain;
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: touch;
}


/* Класс для считывания контента скринридером, но на экране он не отобразится */
.visually-hidden:not(:focus):not(:active),
input[type="checkbox"].visually-hidden,
input[type="radio"].visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  white-space: nowrap;
  clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}

/* Убирает стрелку у элемента dialog */
summary::-webkit-details-marker {
  display: none;
}

/* Кастомный аккуратный аутлайн при фокусе на элементе, можно использовать
градиентный background или color для большей красившести (следить за производительностью)*/
.element:focus {
  outline-style: dotted;
  outline-width: 2px;
  outline-color: blueviolet;
}

/* Автоматический перенос слов с дефисами (см. can i use) */
.text {
  word-break: break-word;
  hyphens: auto;
}

/* Обрезать лишний текст и вставить в конце многоточие */
.text {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* Стилизация скролла в Chrome, Firefox, IE */
/* -- Mozilla */
.styled-scroll {
  scrollbar-color: #394857 #fff;
}

/* -- Chrome, IE */
.styled-scroll::-webkit-scrollbar {
  width: 4px;
  background-color: #fff;
}

.styled-scroll::-webkit-scrollbar-thumb {
  border-radius: 1px;
  background-color: #394857;
}

.styled-scroll::-webkit-scrollbar-track {
  border-radius: 1px;
  background-color: #fff;
}


/* Изменить цвет каретки в инпуте */
input {
  caret-color: orange;
}

/* Тенюшка по контуру пнг изображения */
.img-png {
  filter: drop-shadow(30px 10px 4px #4444dd);
}

/* Еще один способ центрировать див */
div {
  display: grid;
  height: 100vh;
  margin: 0;
  place-items: center center;
}


/* Отображать ссылки, когда элемент <a> не имеет текстового значения, но атрибут href содержит ссылку */
a[href^="http"]:empty::before {
  content: attr(href);
}

/* UX: Отключать видео при автовоспроизведении и позволять пользователю решать, хотят ли они его слушать */
/* https://dev.to/xenoxdev/css-tips-and-tricks-4j7e */
video[autoplay]:not([muted]) {
  display: none;
}

/* Изменить цвет выделения текста */
::selection {
  background-color: #f8e71c;
  color: #000;
}

/* Цветной бордер который не будет влиять на паддинги */
.bordered {
  box-shadow: 0 0 0 3px red inset;
}


/* Выделяет красной рамкой все img без аттрибута alt на странице и без aria-hidden="true"*/
img:not([alt]):not([aria-hidden="true"]) {
  border: 5px solid red;
}

/* Убирает анимацию при загрузке страницы https://css-tricks.com/transitions-only-after-page-load/ */
.preload * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
}


/* FadeIn FadeOut анимация */
.dropdown {
  position: absolute;
  top: calc(100% + 6px);
  z-index: 5;
  visibility: hidden;
  background-color: white;
  opacity: 0;
  transition: opacity 100ms, transform 100ms, visibility 0ms 200ms;
  transform: translateY(10px);
  
  &_open {
    visibility: visible;
    opacity: 1;
    transition: opacity 200ms, transform 200ms;
    transform: translateY(0);
  }
}

@media screen and (inverted-colors: inverted) {
  /* стили применяются когда в настройках браузера выбрана инверсия цвета пока только в Safari https://developer.mozilla.org/en-US/docs/Web/CSS/@media/inverted-colors#browser_compatibility */
}

@media screen and (prefers-color-scheme: dark) {
  /* стили применяются когда в настройках браузера выбрана темная тема */
}

@media screen and (prefers-reduced-motion: reduce) {
  /* стили применяются когда в настройках браузера стоит сокращение кол-ва анимации, используется чтобы убрать анимацию (для инклюзивности) */
}

/* Свойство применяется только если его поддерживает браузер */
@supports (text-wrap: balance) {
  text-wrap: balance;
}


/* Красивый перенос текста для спана с background-color */
.beauty-break {
  box-decoration-break: clone;
}

/* Отступ сверху для якоря, в отличие от scroll-padding-top работает с scrollIntoView */
.anchor {
  scroll-margin-top: 100px;
}