#фишка дня

Не так давно мы на работе обсуждали, как показывать и обрезать разного рода id, файловые пути и названия файлов вообще.

Ведь очень часто получается так, что значащая информация — она в самом начале и самом конце (корневой каталог и название файла), а text-overflow: ellipsis просто обрезает концовку.

Так вот, эта тема на самом деле сейчас весьма в тренде. Многие сталкиваются с похожей задачей и приходят к различным решениям. Не все, правда, делятся. Вот иллюстрацию к посту я взял у пользователя X — azlandotgg. Но кодом он не поделился!

Зато uixmat кодом поделился. Точнее, как, поделился... дал ссылку на чат v0 🙈

И хотя там довольно интересно посмотреть ход мыслей, давайте всё же повторим это в Codepen: https://codepen.io/alinaki/pen/azZPPad?editors=1100

Итак, суть идеи:
1. Дублируем строку в атрибуты контейнера и элемента
2. При помощи контейнерных запросов и RTL-направления текста, просто включаем псевдоэлементы с контентом из атрибутов в нужный момент
3. Ну, собственно, всё :)

Другим вариантом может стать флексбокс на трёх элементах. Но мне было лениво выгребать код из видео разного рода инфлюенсеров, оставлю на потом.

Не знаю, лучше ли это простого подсчёта символов, или нет, но весьма забавно.

#css #truncate #middle #cq

#ссылка дня

Apple славится не только тем, что достаточно медленно развивает Safari в угоду (?) производительности на ватт и безопасности, но и тем, что добавляет в движок очень много фишек, делающих интеграцию WebView в приложения на macOS и iOS проще. Часть, казалось бы, нативных Apple Music, Apple Maps и так далее — это WebView, а вы и не догадывались.

И вот одной из таких фишек стало добавление атрибута switch к обычным чекбоксам. Очевидно, превращающим галочки в переключатели. Да, семантика выходит иная.

Поспольку остальные браузеры не спешат это добавлять (как раз по причине того, что это, ну, разные же элементы, атрибут выглядит странно), Томас Стайнер реализовал полифилл: https://blog.tomayac.com/2026/01/12/a-polyfill-for-the-html-switch-element/

Демонстрацию можно посмотреть там же.

Ссылка на репо: https://github.com/whatwg/html/pull/9546

Как считаете, пора делать переключатели базовыми инструментами форм, или нет?

#css #switch #safari

#заметка дня

В чат прилетел вопрос: "Как добавить иконку в поле ввода так, чтобы она была видна только когда виден плейсхолдер и исчезла при вводе текста?"

Отвечаем: конечно же добавить её в контейнер label, а потом использовать псевдо-класс :placeholder-shown на поле ввода!

Он очень давно и хорошо поддерживается, так что почему бы и нет.

Оставим за пределами этого обсуждения тот факт, что плейсхолдеры не должны заменять реальные метки. Это всё равно уже стало де-факто стандартом индустрии... но постарайтесь так не делать.

И, конечно, пример:
https://codepen.io/alinaki/pen/xxMpgLK?editors=1100

Там заодно используются SVG-спрайты, потому что мне лениво подключать профессиональный аккаунт на кодпене и грузить туда картинки. Так что заодно можно посмотреть, как работать со спрайтами. Пригодится!

Всем бу, котаны!

#css #placeholder #svg #sprite #бородач

#фишка дня

CSS anchor positioning aka якоря могут реально поменять то, как мы с вами реализуем интерфейсы, требующие графового представления: CJM, майндмапы, блок-схемы, пайплайны...

Темани Афиф недавно сделал пример, соединив круги стрелками и набросив немного JS для drag&drop: https://css-tip.com/connected-circles/

Потом немного улучшил: https://css-tip.com/connected-circles-2/

И пару дней назад пошёл ва-банк и представил буквально реализацию поиска кратчайшего пути в графе: https://css-tip.com/graph-theory/

Выглядит, конечно, весьма сложно. Но следующим шагом, видимо, будет транспиляция Mermaid в CSS... Зато самому алгоритм стрелок реализовывать не придётся! 😂️️️️️️

#css #anchor #graph

#ссылка дня

Дамы и господа, мы зашли слишком далеко.

Нужна виртуалка на Intel, а у тебя мак? Не вопрос, давай напишем эмулятор на CSS!

Проект X86CSS — это эмулятор x86-ассемблера без JavaScript. Вообще. Всё состояние процессора — через CSS-переменные. Исполнение — через

«Процессорный цикл» — это просто тик анимации. Пять герц в эквиваленте.

ПЯТЬ. Не гигагерц, а герц.

Идея выросла из статьи The CPU Hack на dev.to: современные возможности CSS позволяют организовать пошаговое изменение состояния. Если состояние можно хранить, менять и пересчитывать, а изменения можно повторять — система становится тьюринг-полной.

Как это выглядит в упрощённом виде.

Тик процессора:

@property --ip {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}

@property --tick {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}

.cpu {
  animation: clock 0.1s steps(1) infinite;
}

@keyframes clock {
  to {
    --tick: calc(var(--tick) + 1);
  }
}

.cpu {
  --ip: calc(var(--ip) + var(--tick));
}

Анимация создаёт шаг. На каждом шаге меняется состояние.
От состояния зависит, какие инструкции сработают дальше.

Ввод — тоже без JS. Например, зажатая кнопка:

.key:active ~ .cpu {
  --running: 1;
}

.cpu {
  --running: 0;
  --ip: calc(var(--ip) + var(--running));
}

Пока кнопка нажата — переменная меняется и влияет на вычисления.

В реальном проекте вместо двух переменных — регистры, память, флаги и декодирование инструкций. Сотни их.

Практической пользы — ну, нет.

Но сам факт, что CSS можно довести до уровня полноценной вычислительной модели и запустить на нём x86 — выглядит как интересная точка в эволюции фронтенда.

Ах, да. Работает только на Chrome, потому что — какая внезапность — использует условный оператор (if), который появился совсем недавно. И вот это — это вполне себе имеет практическое применение.

Просто пойдите и поиграйте в это. Ощущения невероятные, хрен с ней, с применимостью на практике, честное слово. Это целый компьютер! Вы можете даже программы для него компилировать с C на x86asm. Буквально.

#css #cpu #x86 #hack

#фишка дня

Многие недооценивают css variables, особенно при небольшой поддержке javascript.

Думали динамически можно изменять только цвет/типографику и что-то еще такое же очевидное?
А вот и нет, управлять можно даже текстом (ну ладно, еще немного математикой).

Идея для использования - динамический брендинг.
Задали название продукта/компании/клиента в одном свойстве --client-id и изменили один раз для шапки/подвала/сайдбара.

Пример кода показывает насколько это легко понять и использовать.
https://codepen.io/glebcha/pen/gbpwbob

#css #var #бородач

#событие дня

Я понятия не имею, как я пропустил! Итак, соревнование March MadCSS!

16 лучших фронтенд-разработчиков схлестнутся в жаркой битве по вёрстке интерфейсов.

Ну, я надеюсь, вам что-то говорят имена Josh Cameau, Wes Bos, Kyle Cook, Chris Coyier... если нет — очень зря!

Первый раунд был неделю назад и его можно посмотреть на YouTube: https://www.youtube.com/watch?v=nuxSFTjXrhI

А второй как раз будет сегодня.

И да, даже лучшие верстальщики мира гуглят, как выровнять текст.

Сайт ивента с турнирной таблицей и мерчом: https://madcss.com/

Смотрим?

#css #dev #battle

#статья дня

Страница грузится 7 секунд.
Причина — один эмодзи ❤️

Иногда проблемы с производительностью оказываются совсем не там, где их ищешь. В статье Аллена Пайка «A Broken Heart» он разбирает случай, когда страница внезапно начала грузиться по 7 секунд, хотя сервер, сеть и JavaScript работали нормально. В профайлере оказалось, что почти всё время Safari тратит на layout — причём один проход занимал больше секунды.

Дальше — обычный путь: постепенно вырезать куски интерфейса и смотреть, когда станет быстрее. В какой-то момент выяснилось, что всё упирается в один эмодзи в кнопке. Убираешь его — всё работает мгновенно. Возвращаешь — снова тормоза.

Причина оказалась в том, как Safari работает со шрифтами. Если указать Noto Color Emoji как основной шрифт, он используется даже для обычного текста, хотя покрывает только эмодзи. Для всех остальных символов браузер каждый раз ищет подходящий fallback-шрифт. В процессе layout он пересчитывает размеры текста, переносы строк и позиции элементов, и делает это много раз подряд.

В норме такие пересчёты почти ничего не стоят, но в Safari здесь есть просадка, из-за которой всё резко замедляется. В итоге одна строка с emoji-шрифтом может увеличить время layout в десятки или даже сотни раз.

Минимальный пример:

<link href="https://fonts.googleapis.com/css2?family=Noto+Color+Emoji" rel="stylesheet">

<style>
  body {
    font-family: "Noto Color Emoji";
  }
</style>

<button>Click ❤️</button>

Если не ставить emoji-шрифт основным, а оставить его только в конце списка как fallback, проблема исчезает. В оригинальной статье есть ещё детали про поиск причины и минимизацию примера — стоит почитать: https://allenpike.com/2026/a-broken-heart/

Ну и официальный issue: https://bugs.webkit.org/show_bug.cgi?id=305636

Потрясающая хрень, конечно. На пустом месте.

#css #emoji #svg #performance

#статья дня

А ну, сходу ответьте, чем отличается :has(:not()) от :not(:has())?

На самом деле, если тупо воспользоваться логикой английского языка — легко ошибиться.

Разработчики браузера для, простите, разработчиков —Polypane — ведут свой блог с разными мелкими фишками, и сегодня — вот такая, как раз об этом.

📌 :has(:not())

Выбирает элементы, которые содержат определённые дочерние элементы, но не содержащие другие.

.card:has(:not(img)) {
  background: lightblue;
}

🔹 Выберет .card, если внутри есть любой элемент, кроме <img>.

📌 :not(:has())

Выбирает элементы, не содержащие определённый дочерний элемент.

.card:not(:has(img)) {
  background: lightcoral;
}

🔹 Выберет .card, если внутри вообще нет <img>.

🏁 Итого:

:has(:not(img)) проверяет, есть ли что-то, кроме <img>.
:not(:has(img)) проверяет, что <img> вообще нет.

Ну а в статье всё то же самое, только чуть подробнее.

Не ошибайтесь, котаны.

#css #has #not #бородач

#видео дня

Оказывается, у блога Chrome for Developers есть свой собственный YouTube-канал: https://www.youtube.com/@ChromeDevs

Формат, правда, довольно странный. Основу канала составляют видео по 1-3 минуты, и нет, даже не все из них шортсы. Впрочем, есть и подкасты.

Ладно, это я к чему. Они выкатили очень пафосное видео о том, как в Pinterest пересмотрели свои методы создания CSS-каруселей и — как утверждается — избавились от кучи джаваскрипта, перейдя на нативные View Transitions и свежие API для скролла: https://youtu.be/oWJPu3yvfp8

Но, конечно, невозможно в две с половиной минуты уместить все идеи проекта. Потому действительная польза — в описании! А что там у нас?

А, собственно, ресурсы для повторения:

Доступные карусели → https://goo.gle/4aTpGtc
Карусели на CSS → https://goo.gle/3YuWhOv
Локальные View Transitions → https://goo.gle/3XuZMUX
View Transition API → https://goo.gle/3MzVngY

Другой вопрос, конечно, в том, что половина этих API толком недоступна не то что в других браузерах, а даже в самом Chrome без флага, это они аккуратно обходят стороной.

Впрочем, никого ещё обычный скролл и отсутствие переходов вместо красивых транзишенов не убивало.

#chrome #css #carousel