box-sizing: content-box vs border-box
При помощи свойства box-sizing можно изменить то, как браузер будет рассчитывать размеры элемента.
content-box – значение по умолчанию. Финальная ширина = ширина + правый внутренний отступ + левый внутренний отступ + правая рамка + левая рамка.
border-box – значение width и height являются финальными размерами элемента. Финальная ширина = ширина.
Функция-псевдокласс :is()
В качестве аргумента принимает список селекторов и выбирает только те элементы, которые могут быть выбраны из переданного списка
:is() похож на :where() по своей механике, различие заключается в специфичности: у :where() она нулевая, а у :is() равна наиболее специфичному из переданных селекторов
Псевдоклассы :where() и :is() относятся к «прощающему списку селекторов». Невалидный селектор в списке аргументов не приведёт к игнорированию валидных селекторов.
Стили ниже применятся к <span>, а нерабочий селектор :unsupported будет проигнорирован:
:is(span, :unsupported) {
color: red;
}А вот если указать неподдерживаемое свойство :unsupported в перечислении, то всё сломается, не сработает ни один из селекторов:
span,
:unsupported {
color: red;
}Разница border-radius
Когда вы применяете border-radius для двух вложенных элементов, может возникнуть соблазн применить одно и то же значение, но это не самый приятный с визуальной точки зрения вариант!
Вместо этого используйте эту формулу для расчета внешнего радиуса: внутренний радиус + padding.
Можно использовать кастомные свойства, чтобы определить радиус вложенности элементов:
.parent {
--nested-radius: calc(var(--radius) - var(--padding));
}
.nested {
border-radius: var(--nested-radius);
}Цвет каретки
CSS-свойство caret-color задаёт цвет текстового курсора(каретки), который отображается в текстовых полях формы (<input>, <textarea>), а также для элементов с атрибутом contenteditable.
Свойство является наследуемым, поэтому его можно указать глобально или для формы, и не указывать каждому полю ввода отдельно.
input {
caret-color: yellow;
}background-repeat
Чаще всего для свойства background-repeat используется значение repeat. А знаете ли вы, что существуют и другие возможные значения?
round: изображение повторяется так, чтобы заполнить весь элемент. Но картинка не обрезается, повторяется целое количество раз. Если это не удаётся, то картинка масштабируется.
space: аналогично round, но вместо растягивания изображений создает пустое пространство между элементами, когда это необходимо.
scroll-padding
Свойство scroll-padding позволяет остановить прокрутку на определённом расстоянии от края контейнера. Можно воспользоваться сокращённым свойством scroll-padding или альтернативными ему более конкретными свойствами scroll-padding-*.
shape-outside
Определяет форму, вокруг которой должно обтекаться соседнее встроенное содержимое. Обычно это делается для того, чтобы текст мог перерисовываться по такой фигуре, как круг, эллипс или многоугольник.
.column--left .shape {
float: right;
shape-outside: circle(100px at 100% 50%);
}Интерактивный конструктор border-radius
Сайт, где можно поэкспериментировать с border-radius и скопировать готовые значения в свой CSS-код. Генерируются сразу 8 значений для border-radius.
Липкий заголовок в СSS
Блоки с «липким» позиционированием ведут себя как position: relative и position: fixed одновременно. Пока блок не достиг указанного расстояния от края окна браузера, он ведёт себя как относительно спозиционированный. Когда блок достигнет этой точки, то станет вести себя, как будто мы указали position: fixed. Когда таких заголовков несколько, они накладываются друг на друга, и пользователю виден последний из них.
Градиентная заливка к тексту в CSS
Задаем тексту фоновый рисунок с помощью свойства background-clip с значением text. Чтобы эффект был виден, установите цвет текста элемента прозрачным color: transparent;
Суффиксы -block и -inline в CSS?
Они относятся к «логическим» свойствам, которые противопоставляются привычным «физическим» свойствам и лучше подходят для интерфейсов на разных языках – ведь не все пишутся слева направо и сверху вниз
Например, арабский читается справа налево. И если ты делаешь UI с мультиязычной поддержкой, тебе пришлось бы вручную менять все свойства с *-left на *-right 🤕
Логические свойства решают эту проблему, автоматически подстраиваясь под направление письма текущего языка:
- block-start – аналог top
- block-end – аналог bottom
- inline-start – аналог left
- inline-end – аналог right
Их можно использовать с padding, margin и border. Например: margin-block-end, padding-inline-start. Есть и приятный бонус: логические свойства дают удобные шорткаты для выбора сразу двух сторон: левой+правой или верхней+нижней.
Нужно применить паддинги и к верху, и к низу? Используй padding-block
Нужно применить паддинги и к левой, и к правой стороне? Используй padding-inline
Готовые CSS анимации
Аккуратная подборка готовых CSS-анимаций, разложенных по категориям. Просто копируешь код в один клик и используешь в своём веб-проекте.
Cквирклы
Хотя border-radius используется повсюду, выглядит это немного неестественно в месте, где окружность встречается с прямой линией. Эту проблему решают сквирклы, которые можно увидеть во многих лаунчерах мобильных приложений, включая список приложений в iOS.
Теперь сквирклы наконец приходят в веб! Свойство corner-shape довольно мощное, с его помощью можно задавать кастомные формы для border-radius. Одним из значений как раз является squircle. Самое классное – это в целом обратно совместимо: если браузер не поддерживает это, сквиркл будет отображён как квадрат с дефолтным border-radius.
Стиль выделения текста
Прокачай стиль выделения текста с помощью ::selection. Псевдоэлемент применяет стиль к выделенному пользователем тексту. В правилах стилей допускается использовать следующие свойства: color, background-color, cursor, caret-color, outline, text-decoration, text-emphasis-color, text-shadow. Это не работает в Safari на iOS.
Цветовая коллекция
Огромная библиотека классных цветовых палитр для твоих проектов. Всё чётко отсортировано, можно искать по трендам и категориям.
Визуальный редактор разметки
Визуальный редактор разметки на гридах и флексах. Выбираешь шаблон, подгоняешь под себя, сразу правишь и HTML, и CSS. Всё интерактивно: с превью и подсказками по свойствам.
Библиотека фонов
PatternСraft – библиотека фонов с градиентами и геометрическими узорами. Каждый фон можно посмотреть в деле, а затем скопировать его CSS для своих проектов.
Отступ у текста
У текста всегда странный лишний отступ: сверху над заглавными буквами и снизу под базовой линией. Фикс в одну строку CSS:
text-box: trim-both cap alphabetic;Идеально обрезает текстовый бокс по реальным границам глифов. Больше никаких костылей с паддингами.