💡👩‍💻 Совет по CSS: Используйте табличные цифры для отображения таймеров

Cвойство font-variant-numeric определяет, как будут отображаться числа. При значении 'tabular-nums' числа будут представлены с одинаковой шириной, что позволит им идеально выстраиваться в ряд

✔️ #tip by Shripal Soni

➡️ @FrontendPortal | #CSS

💡 Предотвращение цепной прокрутки с помощью overscroll-behavior

Если мы попытаемся выполнить прокрутку, когда граница скроллинга достигнута, то прокрутка будет выполнена в ближайшей родительской области скроллинга, что называется цепочкой прокрутки(scroll chaining)

Мы можем предотвратить цепочку прокрутки, установив для свойства overscroll-behaviour значение contain или none

🔜 Подробнее
🔜 Поиграть можно здесь

✔️ #tip by Shripal Soni

➡️ @FrontendPortal | #CSS

💡 Упрощение группировки данных в JavaScript с помощью Object.groupBy() или Map.groupBy(): на заметку фронтендеру

✔️ #tip by Shripal Soni

➡️ @FrontendPortal | #js

Свойство scroll-padding

Позволяет остановить прокрутку на определённом расстоянии от края контейнера

Можно воспользоваться сокращённым свойством scroll-padding или альтернативными ему более конкретными свойствами scroll-padding-*

➡️ @FrontendPortal | #CSS

CSS table-layout

Свойство предназначено для управления режимом формирования ширины столбцов в таблице

/*Для корректной работы fixed обязательно должна быть задана ширина таблицы */
table {
  table-layout: fixed;  
  width: 100%;
}
/* обрезаем текст, не влезающий в ячейку */
td {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Основное различие между значениями auto(по умолч.) и fixed заключается в том, как браузер распределяет ширину столбцов в таблице. auto определяет ширину столбцов на основе их содержимого, тогда как fixed определяет их на основе ширины самой таблицы и заданных ширин столбцов

🔜 Подробнее — статья

➡️ @FrontendPortal | #CSS

Ограничиваем текст заданным числом строк c помощью CSS-свойства line-clamp

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

.text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient:vertical;  
  overflow: hidden;
}

🔜 Поддержка свойства составляет 96.31%

➡️ @FrontendPortal | #CSS

🌟 Идеальное центрирование, margin: auto у flex-контейнера

➡️ @FrontendPortal | #CSS