Полезный сайт, на котором есть различные инструменты для веб разработки

Например, для создания CSS анимаций или флексбокс генератор

#tool #css

Про Container size queries уже все знают. но про Container style queries еще далеко не все

Целью их является стилизация элементов в зависимости от контекста родительского контейнера.

Они позволяют создавать правила, которые применяются только при выполнении определенных условий относительно стиля контейнера.

Это дает возможность создавать более адаптивные и контекстно-зависимые стили и стилизовать компоненты в зависимости от их окружения.

.card {
  /* ...стили для карточки... */
}

@container style(--background-color: #333) {
  .card {
    /* Стили для карточки, когда у ее родителя темный фон */
    color: white; 
  }
}

В планах поддержка проверки функцией style() не только CSS custom properties, но и простых - style(color: green).

Caniuse везде, кроме Firefox

#css

Почему CSS кастомные свойства (CSS custom properties типа --color-text-1) нельзя называть "CSS переменными"?

Потому что одно и то же свойство может одновременно иметь одно значение в одном компоненте, другое во втором, и третье - в третьем.

Переменные так не умеют.

#css #learning

Как отключить scroll страницы, когда показываешь модальный диалог через <dialog>?

body:has(dialog[open]) {
  overflow: hidden;
}

Размыть фон/overlay?

dialog::backdrop {
  backdrop-filter: blur(2px);
}

#css #tip #scroll

Интересная опен-сорсная дизайн система для вдохновения

open-props

#css

CSS свойство clamp() позволяет создавать адаптивные элементы, которые масштабируются в зависимости от размера экрана, но при этом не выходят за заданные границы.

h1 {
  font-size: clamp(24px, 4vw, 48px);
}

.container {
  width: clamp(300px, 50%, 900px);
}

.element {
  padding: clamp(10px, 2vw, 1.5rem);
}

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

#css

Интересное решение на CSS определить, что содержимое блока не помещается в нем и сделать что-то - через определение появления скролла и установку CSS кастомного свойства

https://codepen.io/robinrendle/pen/MWRxNJr

#css

Если работаете с CSS properties в VS Code, то вот полезное расширение

CSS Variable Autocomplete

#css #tip

CSS свойства transform, opacity, filter и некоторые другие используют GPU компьютера для рендеринга.

Проверяйте в browser devtols, что им хватает ресурсов, они не грузят процессор и нет отброшенных фреймов

Свойство will-change используется чтобы явно включить GPU оптимизацию на элементе

#css #tip

Варианты анимации кнопок для вдохновения с кодом

#css

ESLint теперь официально поддерживает линтинг CSS

#eslint #css

Псевдокласс CSS :empty свидетельствует, что в элементе пусто.

Полезен при необходимости, например, обнулять padding и margin пустого элемента, либо делать что-то еще

#css #tip

Ответ к вопросу в прошлом посте

Реализация tour:

1. Находим абсолютные координаты target element.
2. Создаем прозрачный модальный элемент с такими же абсолютными координатными.
3. Ставим ему... boxShadow: 0 0 0 9999px rgba(0, 0, 0, 0.7)

Это первая половина гениальности. Вторая состоит в том, что теперь анимация перехода подсветки это тоже одна CSS строка: transition.

Ну и копирование исходного border-radius даст в большинстве случаев ту же самую форму.

В итоге весь визуал туринга занимает меньше 20 строк по сути, и можно сосредоточиться на логике.

На таких велосипедах я готов всю жизнь кататься. А антивелосипедисты могут использовать VueUse, svg маски и прочие достижения контемпорари фронтенда.

#tour #css

Хорошая статья про CSS тени

box-shadow, drop-shadow, text-shadow, neumorphic shadows и лучшие практики работы с ними

#css

Дожили

В Chrome 135 появилась возможность стилизовать нативный <select>

Теперь сайт Аэроэкспреса пофиксят...

#chrome #css

В CSS есть @scope функция, ограничивающая область применения стилей:

<template>
  <div class="box">
    <button class="button">Click me</button>
  </div>
</template>

<style>
  @scope (.box) {
    .button {
      color: red;
    }
  }
</style>

Однако полной замены Vue scoped она не может дать. Например, потому, что если компонент выше вывести списком, то во Vue у каждого будет свой data атрибут и своя область видимости стилей, а у @scope всё смешается

Но для ванильных случаев это полезное нововведение

#css

Контейнерные запросы (Container Queries) — это инструмент в CSS, который позволяет стилизовать элементы на основе размеров их родительского контейнера, а не всего окна браузера. В Chrome 133 появилась новая фича — scroll states для контейнерных запросов, которая добавляет ещё больше контроля над поведением элементов.

Что такое Scroll States?

scrollable, stuck и snapped - это новые условия свойства scroll-state, которые можно использовать внутри @container, чтобы применять стили в зависимости от состояния прокрутки контейнера:


Пример:

.stuck-top {
  container-type: scroll-state;
  position: sticky;
  top: 0px;

  > nav {
    @container scroll-state(stuck: top) {
      background: _Highlight;
      color: _HighlightText;
    }
  }
}

Где это можно использовать?

- Индикация прокрутки — визуально показывать, что есть ещё контент ниже
- "Липкие" заголовки — автоматически делать заголовки sticky при прокрутке
- Изменение навигации — например, показывать кнопку "Наверх" при прокрутке
- Оптимизация интерфейса — скрывать второстепенные элементы при прокрутке

Документация

#chrome #css

В последних версиях Vite активно доделывают поддержку lightningcss

Сейчас для процессинга CSS используется ESBuild, но с переходом на Rolldown нужно что-то другое.
Экспериментально lightningcss был в Vite с 4 версии.

#vite #css

:hover > :not(:hover)

hover обычно используется, чтобы выделить какой-то элемент. Но иногда красивей что-то сделать с остальными

ul {
  @media (hover) and (prefers-reduced-motion: no-preference) {
    & > li {
      transform-origin: left center;
      transition: transform 1s var(--ease-spring-3), opacity 0.3s var(--ease-3);
    }

    &:hover > li:not(:hover) {
      opacity: 0.25;
      transform: scale(0.8);
    }
  }
}

#css #tip