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

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

#css

В Chrome Canary уже тестируются CSS custom functions

@function --negate(--value) {
    result: calc(-1 * var(--value));
}

:root {
  padding: --negate(1px);    /* = -1px */
}

Пользовательскую функцию можно рассматривать как расширенное пользовательское свойство, которое вместо замены одним фиксированным значением вычисляет значение замены на основе параметров функции и значений пользовательских свойств в момент ее вызова.

Интересно, что внутрь тела этих функций можно ставить, например, @media

Через три года в GitLub-е опять будут переписывать свою дизайн систему. Хочешь снизить прибыль компании и обеспечить фронтендеров большой зарплатой на много лет вперёд - используй Atomic CSS.

#css #chrome #gitlab

Если работаете с 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

По совету в комментариях к посту про Lissa Health решил добавить Tour на сайт.
Но не готовой библиотекой, а свой. Ну, потому что свой всегда лучше - и роутинг можно задействовать, и кастомный контент тултипов, и ветвистые пути туров.
Делал не сам, конечно, с AI помощником.

Сгенерил он что-то приличное раза с пятого. Только оверлей на весь экран, не подсвечивается целевой элемент.

Я его прошу доделать, и даю ссылки на код driverjs для примера. Он отвечает:

I've implemented a much better approach for the tour overlay that's similar to driverjs.

Ничего себе, какой самонадеянный Sonnet попался, думаю. Когда я свой onboarding делал, много помучился с этим вырезанием дырки в оверлее, особенно не прямоугольной (в driverjs это на svg масках реализовано).

Ну, ладно, говорю, показывай своё "мач беттер".

Показывает. И ведь реально гениально!

Вопрос: как он это сделал?

#lissa #css

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

Реализация 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

Самые значимые обновления CSS в 2024 года:

- Анимация height : auto + calc-size
- @starting-style: решает проблему, когда добавление элементов в DOM ломает анимацию
- Scroll-driven animations: эта функция добавляет в CSS анимации, запускаемые скроллом.
- Popover API: Позволяет создавать всплывающие подсказки и окна на чистом CSS
- Document view transitions: позволяет анимировать переходы между HTML-документами.

#css

В крайнем Chrome (137) появился if для CSS

div {
  color: var(--color);
  background-color: if(style(--color: white): black; else: white);
}

.dark { --color: black; }
.light { --color: white; }

#chrome #css

10 вопросов проверить свою CSS грамотность

Ответы тут

#css

CSS продолжает развиваться в сторону языка программирования

Начиная с Chrome 140 и Safari 18.2 стала возможна арифметика с разными единицами размерности

Источник

.container {
  position: relative;
  
  i {
    --angle: calc(sibling-index() * 10deg);
    --distance: calc(var(--angle) / 360deg * 180px);
    
    position: absolute;
    inset: -0.5em;
    background-color: #fff;
    border-radius: 50%;
    transform: rotate(var(--angle)) translateX(var(--distance));
  }
}

<div class="container">
  <i></i>
...
  <i></i>
</div>

#css

В media queries нельзя использовать CSS свойства, но есть обходные пути через container queries

@property --inline-size-s {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 100vi;
}

:root {
  --breakpoint-s: 48em;
  --inline-size-s: min(var(--breakpoint-s), 100vi);
}

body {
  background-color: var(--bg-color);

  --bg-color: oklch(0.94 0.01 99);
  
  @container style(--inline-size-s: var(--breakpoint-s)) {
    --bg-color: oklch(0.87 0.21 95.82);
  }
}

#css