This media is not supported in your browser
VIEW IN TELEGRAM
#фишка дня
Тут Jh3y опять по красоте исполняет. Итак, поступил вопрос из аудитории: «Как сделать эффект подсвеченной стеклянной фаски, как на новых иконках в iOS?»
Ответ интереснее и одновременно проще, чем может показаться: https://codepen.io/jh3y/pen/WbwyGBb
Весь секрет в наложении маски в виде градиента под элемент:
И всё, дальше просто вращаем по желанию. Техника не нова, даже блендинг не нужен. Ну а весь JS-код — он просто для обработки позиции курсора и для фирменного эффекта взрыв-диаграммы, ставшей визитной карточкой Джея.
Работает, кстати, во всех современных браузерах.
#css #gradient #mask
Тут Jh3y опять по красоте исполняет. Итак, поступил вопрос из аудитории: «Как сделать эффект подсвеченной стеклянной фаски, как на новых иконках в iOS?»
Ответ интереснее и одновременно проще, чем может показаться: https://codepen.io/jh3y/pen/WbwyGBb
Весь секрет в наложении маски в виде градиента под элемент:
&::after {
mask: linear-gradient(calc(var(--pointer-angle) * 1deg), #ffffff80, #ffffff30 30% 60%, #fff);
}
И всё, дальше просто вращаем по желанию. Техника не нова, даже блендинг не нужен. Ну а весь JS-код — он просто для обработки позиции курсора и для фирменного эффекта взрыв-диаграммы, ставшей визитной карточкой Джея.
Работает, кстати, во всех современных браузерах.
#css #gradient #mask
❤21
#статья дня
Ну что же, пора просыпаться от зимней спячки, котаны! Салаты съедены, сериалы отсмотрены. Плавно готовимся к неизбежному.
В моей предыдущей компании были очень популярны турниры по настольному футболу, aka foosball. Не до драк, конечно, но со своим лором, правилами и даже традициями. Например, проигравший увековечивал своё имя под столом.
Так вот, к чему это я.
Помню, мы использовали какой-то сервис для составления турнирных таблиц. Я какое-то время даже планировал его склонировать, но руки не дошли. А тут наткнулся на интересную реализацию деревьев диаграмм. Ну или блок-схем, если хотите. Как раз похожих на турнирные таблицы.
Как вам такое: отрисовка дерева с помощью... списков!
Вот, глядите: https://codepen.io/alinaki/pen/ZYOOWOL
Не, ну буквально. У автора четыре статьи, от горизонтальных и вертикальных деревьев до более сложных конструкций вроде центрально-ориентированной диаграммы (вот то, что на иллюстрации, к таким как раз относится) и прочих экспериментов.
Начало тут: https://fractaledmind.com/2018/03/05/css-tree/
Ну что, будем таки писать такой сервис? Или максимально гибкая отрисовка на холсте наше всё?
#css #html #tree #list
Ну что же, пора просыпаться от зимней спячки, котаны! Салаты съедены, сериалы отсмотрены. Плавно готовимся к неизбежному.
В моей предыдущей компании были очень популярны турниры по настольному футболу, aka foosball. Не до драк, конечно, но со своим лором, правилами и даже традициями. Например, проигравший увековечивал своё имя под столом.
Так вот, к чему это я.
Помню, мы использовали какой-то сервис для составления турнирных таблиц. Я какое-то время даже планировал его склонировать, но руки не дошли. А тут наткнулся на интересную реализацию деревьев диаграмм. Ну или блок-схем, если хотите. Как раз похожих на турнирные таблицы.
Как вам такое: отрисовка дерева с помощью... списков!
Вот, глядите: https://codepen.io/alinaki/pen/ZYOOWOL
Не, ну буквально. У автора четыре статьи, от горизонтальных и вертикальных деревьев до более сложных конструкций вроде центрально-ориентированной диаграммы (вот то, что на иллюстрации, к таким как раз относится) и прочих экспериментов.
Начало тут: https://fractaledmind.com/2018/03/05/css-tree/
Ну что, будем таки писать такой сервис? Или максимально гибкая отрисовка на холсте наше всё?
#css #html #tree #list
❤6
#заметка дня
Вот то самое откровение, которое я обещал в новости о jQuery 4.0.
В Chrome 145 будет изменено поведение 100vw. Браузер будет учитывать ширину скроллбара, исключая горизонтальную прокрутку.
Ссылка: https://www.bram.us/2026/01/15/100vw-horizontal-overflow-no-more/
И да, это будет ломающее изменение.
Хотя, если честно, я не очень понимаю людей, которым вообще нужно было значение 100vw, это же дефолт блочных структур.
Старое поведение по факту годами создавало баг, с которым разработчики либо мирились, либо прятали его костылями — через
Самый показательный момент — реальные цифры.
Через HTTP Archive было проанализировано 12 089 606 корневых страниц. Из них 324 866 сайтов, то есть примерно 2.7%, в принципе использовали
Вот комментарий в PR спеки: https://github.com/w3c/csswg-drafts/issues/6026#issuecomment-1919428550
Это хорошо показывает реальную картину: подавляющее большинство разработчиков никогда не «считали скроллбар». Они либо избегали 100vw, либо жили с лишним горизонтальным скроллом, либо просто добавляли overflow-x: hidden. То есть проблема была массовой, а осознанно решали её — доли процента.
Именно поэтому браузеры и пошли на ломающее изменение. Старое поведение не было полезной фичей, это была историческая особенность, которая порождала баги чаще, чем решала реальные задачи. В итоге решили сломать редкие кейсы ради того, чтобы 100vw наконец означал то, что от него ожидают почти все.
Хороший пример того, сколько инженерной работы уходит на полировку вещей, которые пользователи, возможно, и не заметят напрямую, но которые годами раздражали фронтендеров.
И хороший вопрос, какой процент разработчиков морочится с чем-то менее видным, если даже на возможные скроллбары всем пофигу...
#css #scroll
Вот то самое откровение, которое я обещал в новости о jQuery 4.0.
В Chrome 145 будет изменено поведение 100vw. Браузер будет учитывать ширину скроллбара, исключая горизонтальную прокрутку.
Ссылка: https://www.bram.us/2026/01/15/100vw-horizontal-overflow-no-more/
И да, это будет ломающее изменение.
Хотя, если честно, я не очень понимаю людей, которым вообще нужно было значение 100vw, это же дефолт блочных структур.
Старое поведение по факту годами создавало баг, с которым разработчики либо мирились, либо прятали его костылями — через
calc. Самый показательный момент — реальные цифры.
Через HTTP Archive было проанализировано 12 089 606 корневых страниц. Из них 324 866 сайтов, то есть примерно 2.7%, в принципе использовали
calc() рядом с 100vw. При этом явные попытки компенсировать ширину скроллбара встречаются крайне редко: порядка 4 000 сайтов принудительно задают overflow: scroll на <html>, и всего несколько десятков страниц используют calc(100vw - …) именно для учёта скроллбара.Вот комментарий в PR спеки: https://github.com/w3c/csswg-drafts/issues/6026#issuecomment-1919428550
Это хорошо показывает реальную картину: подавляющее большинство разработчиков никогда не «считали скроллбар». Они либо избегали 100vw, либо жили с лишним горизонтальным скроллом, либо просто добавляли overflow-x: hidden. То есть проблема была массовой, а осознанно решали её — доли процента.
Именно поэтому браузеры и пошли на ломающее изменение. Старое поведение не было полезной фичей, это была историческая особенность, которая порождала баги чаще, чем решала реальные задачи. В итоге решили сломать редкие кейсы ради того, чтобы 100vw наконец означал то, что от него ожидают почти все.
Хороший пример того, сколько инженерной работы уходит на полировку вещей, которые пользователи, возможно, и не заметят напрямую, но которые годами раздражали фронтендеров.
И хороший вопрос, какой процент разработчиков морочится с чем-то менее видным, если даже на возможные скроллбары всем пофигу...
#css #scroll
👍18❤6
Media is too big
VIEW IN TELEGRAM
#фишка дня
Использование
А что если можно было бы обращаться к элементам прилипшего родителя и что-то странное с ними вытворять?
Так можно! Для этого у нас буквально не так давно появились скролл-запросы, как часть контейнерных запросов. Так и называются: Container scroll-state queries.
Например, хотите сделать картинку в картинке? Ну, чтобы, например, не блокировать чтение статьи?
Или, наоборот, не прерывать просмотр рекламы? :)
Запросто: https://codepen.io/alinaki/pen/WbvMOPB
Обратите внимание,
А для браузеров, которые в скролл-запросы пока не умеют, всегда можно написать короткий IntersectionObserver (он, кстати, есть в примере).
#css #scroll #state #бородач
Использование
position: sticky уже так-то стало обыденностью.А что если можно было бы обращаться к элементам прилипшего родителя и что-то странное с ними вытворять?
Так можно! Для этого у нас буквально не так давно появились скролл-запросы, как часть контейнерных запросов. Так и называются: Container scroll-state queries.
Например, хотите сделать картинку в картинке? Ну, чтобы, например, не блокировать чтение статьи?
Или, наоборот, не прерывать просмотр рекламы? :)
Запросто: https://codepen.io/alinaki/pen/WbvMOPB
@container scroll-state(stuck: top) {
.pip {
width: 200px;
transform: translate(-50%, 0%)
translate(calc(50vw - (50% + 1rem)), calc(100vh - (100% + 1rem)));
}
}
Обратите внимание,
translate можно складывать, получая интересную математику в итоге :)А для браузеров, которые в скролл-запросы пока не умеют, всегда можно написать короткий IntersectionObserver (он, кстати, есть в примере).
#css #scroll #state #бородач
❤16👍7🤩5
#статья дня
Тут Google недавно внедрил в Chrome насколько давно напрашивающийся, настолько же пока что неудобно реализованный режим разделённого просмотра. Split view, если по-русски.
Если добавят оверлейные кнопки — станет, конечно, чуть удобнее.
И всё бы ничего, но вот вскрыл он одну интересную проблему. И проблему эту в своей новой статье Ахмад Шадид обозначил как ранний брейкпоинт.
Статья вот: https://ishadeed.com/article/too-early-breakpoint/
И суть-то проблемы довольно ясна: мобильная вёрстка — очевидно, будучи удобной не только для мобильных устройств, не должна вставать между пользователем и контентом. В качестве примера — журнал Time.
Заняли половину экрана сайтом — и уже непонятно, что и почему происходит.
Ну и, конечно, это всё не имело бы смысла, не приведи Шадид несколько чуть более разумных примеров адаптивности.
P. S. Кто-то использует Notepad++? Их сервер был атакован и пребывал скомпрометированным до декабря 2025. Разработчик теперь заверяет в том, что проблема устранена, и призывает обновиться до последней версии. Будьте внимательны!
https://notepad-plus-plus.org/news/hijacked-incident-info-update/
#css #media #adaptive
Тут Google недавно внедрил в Chrome насколько давно напрашивающийся, настолько же пока что неудобно реализованный режим разделённого просмотра. Split view, если по-русски.
Если добавят оверлейные кнопки — станет, конечно, чуть удобнее.
И всё бы ничего, но вот вскрыл он одну интересную проблему. И проблему эту в своей новой статье Ахмад Шадид обозначил как ранний брейкпоинт.
Статья вот: https://ishadeed.com/article/too-early-breakpoint/
И суть-то проблемы довольно ясна: мобильная вёрстка — очевидно, будучи удобной не только для мобильных устройств, не должна вставать между пользователем и контентом. В качестве примера — журнал Time.
Заняли половину экрана сайтом — и уже непонятно, что и почему происходит.
Ну и, конечно, это всё не имело бы смысла, не приведи Шадид несколько чуть более разумных примеров адаптивности.
P. S. Кто-то использует Notepad++? Их сервер был атакован и пребывал скомпрометированным до декабря 2025. Разработчик теперь заверяет в том, что проблема устранена, и призывает обновиться до последней версии. Будьте внимательны!
https://notepad-plus-plus.org/news/hijacked-incident-info-update/
#css #media #adaptive
👍8❤3
#статья дня
Прекрасный материал от Ван Дамма. Брамуса. Того самого, который нам много рассказывает про CSS Scroll Timeline API.
Те, кто в вёрстке давно, могут помнить баталии на тему что же такое календарь: список или таблица? Я был приверженцем второго варианта, потому что привычный календарь – он ходит как таблица, ест как таблица и крякает как таблица (надеюсь, отсылку вы поймёте 🧐)
Так вот, Брамус заявляет: “Календарь – это сетка!”.
Семантически календарь это список дней, но для представления максимально логично использовать возможности CSS Grid.
https://www.bram.us/2020/12/08/a-calendar-in-three-lines-of-css/
На всё про всё буквально три значащих строчки. Хочется, чтобы неделя начиналась с воскресенья? Нет проблем, сдвигаем начало сетки!
В общем, на этом войне календарей должен быть положен конец.
#css #grid #calendar #бородач
Прекрасный материал от Ван Дамма. Брамуса. Того самого, который нам много рассказывает про CSS Scroll Timeline API.
Те, кто в вёрстке давно, могут помнить баталии на тему что же такое календарь: список или таблица? Я был приверженцем второго варианта, потому что привычный календарь – он ходит как таблица, ест как таблица и крякает как таблица (надеюсь, отсылку вы поймёте 🧐)
Так вот, Брамус заявляет: “Календарь – это сетка!”.
Семантически календарь это список дней, но для представления максимально логично использовать возможности CSS Grid.
https://www.bram.us/2020/12/08/a-calendar-in-three-lines-of-css/
На всё про всё буквально три значащих строчки. Хочется, чтобы неделя начиналась с воскресенья? Нет проблем, сдвигаем начало сетки!
В общем, на этом войне календарей должен быть положен конец.
#css #grid #calendar #бородач
Bram.us
A Calendar in Three Lines of CSS
Here’s a little CSS Grid use case where a list of days is transformed into a calendar: See the Pen Simple Calendar With CSS Grid by Calendar Tricks (@calendartricks) on CodePen. My choice for this CSS calendar tutorial is a list. Why? Because it’s the easiest…
👍16
#cтатья дня
Почти три года назад у меня неплохо так бомбануло на тему недоделанности фишек в современном вебе.
Да, мне не очень нравятся статьи и посты на тему того, как скоро всем будет хорошо, надо лишь немножечко подождать. В итоге, нет, не немножечко. Ну, может, на срезе 20 лет... (спойлер: тоже не факт).
Ладно, сегодня я конкретно хочу поговорить о состоянии
Я тут немного пропустил, но в Chrome 133 состояние
Да, понятие контейнер было мной упомянуто не просто так — эта красота теперь часть контейнерных запросов. И с этим меня познакомила прекрасная статья от Брехта де Рёйте: https://utilitybend.com/blog/is-it-scrolled-is-it-not-lets-find-out-with-css-container-scroll-state-queries/
Так вот, суть-то в том, что в свежем Chrome 144 появилась и поддержка состояния
Ну это ли не чудо? А если указать
Кстати, есть и статья на MDN.
Да, очень грустно, что Safari и Firefox пока не шевелятся, но это в принципе можно решить полифиллами. Главное, что направление задано.
Но бомбить от недоделанности новых фишек пока не перестало.
#css #scroll #state
Почти три года назад у меня неплохо так бомбануло на тему недоделанности фишек в современном вебе.
Да, мне не очень нравятся статьи и посты на тему того, как скоро всем будет хорошо, надо лишь немножечко подождать. В итоге, нет, не немножечко. Ну, может, на срезе 20 лет... (спойлер: тоже не факт).
Ладно, сегодня я конкретно хочу поговорить о состоянии
scrolled и stuck для контейнеров. Очевидно, scrolled — это когда мы прокрутили в какую-то сторону, а stuck — это когда при использовании position: sticky мы можем определить, закрепился элемент, или нет.Я тут немного пропустил, но в Chrome 133 состояние
stuck таки появилось:
.scroll-ancestor {
container-type: scroll-state;
}
@container scroll-state(stuck: top) {
.child-of-scroll-parent {
/* Magic happens here! */
}
}
Да, понятие контейнер было мной упомянуто не просто так — эта красота теперь часть контейнерных запросов. И с этим меня познакомила прекрасная статья от Брехта де Рёйте: https://utilitybend.com/blog/is-it-scrolled-is-it-not-lets-find-out-with-css-container-scroll-state-queries/
Так вот, суть-то в том, что в свежем Chrome 144 появилась и поддержка состояния
scrolled, да-да, с указанием направления!
/* If the last scroll was UP, show the header */
@container scroll-state(scrolled: top) {
.main-header {
transform: translateY(0);
}
}
Ну это ли не чудо? А если указать
inline или block, можно скрыть/показать индикаторы возможности скролла вообще. То же касается и индивидуальных направлений.Кстати, есть и статья на MDN.
Да, очень грустно, что Safari и Firefox пока не шевелятся, но это в принципе можно решить полифиллами. Главное, что направление задано.
Но бомбить от недоделанности новых фишек пока не перестало.
#css #scroll #state
1❤9🤩2👍1
This media is not supported in your browser
VIEW IN TELEGRAM
#фишка дня
Не так давно мы на работе обсуждали, как показывать и обрезать разного рода id, файловые пути и названия файлов вообще.
Ведь очень часто получается так, что значащая информация — она в самом начале и самом конце (корневой каталог и название файла), а
Так вот, эта тема на самом деле сейчас весьма в тренде. Многие сталкиваются с похожей задачей и приходят к различным решениям. Не все, правда, делятся. Вот иллюстрацию к посту я взял у пользователя X — azlandotgg. Но кодом он не поделился!
Зато uixmat кодом поделился. Точнее, как, поделился... дал ссылку на чат v0 🙈
И хотя там довольно интересно посмотреть ход мыслей, давайте всё же повторим это в Codepen: https://codepen.io/alinaki/pen/azZPPad?editors=1100
Итак, суть идеи:
1. Дублируем строку в атрибуты контейнера и элемента
2. При помощи контейнерных запросов и RTL-направления текста, просто включаем псевдоэлементы с контентом из атрибутов в нужный момент
3. Ну, собственно, всё :)
Другим вариантом может стать флексбокс на трёх элементах. Но мне было лениво выгребать код из видео разного рода инфлюенсеров, оставлю на потом.
Не знаю, лучше ли это простого подсчёта символов, или нет, но весьма забавно.
#css #truncate #middle #cq
Не так давно мы на работе обсуждали, как показывать и обрезать разного рода 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
1❤17
#ссылка дня
Apple славится не только тем, что достаточно медленно развивает Safari в угоду (?) производительности на ватт и безопасности, но и тем, что добавляет в движок очень много фишек, делающих интеграцию WebView в приложения на macOS и iOS проще. Часть, казалось бы, нативных Apple Music, Apple Maps и так далее — это WebView, а вы и не догадывались.
И вот одной из таких фишек стало добавление атрибута
Поспольку остальные браузеры не спешат это добавлять (как раз по причине того, что это, ну, разные же элементы, атрибут выглядит странно), Томас Стайнер реализовал полифилл: https://blog.tomayac.com/2026/01/12/a-polyfill-for-the-html-switch-element/
Демонстрацию можно посмотреть там же.
Ссылка на репо: https://github.com/whatwg/html/pull/9546
Как считаете, пора делать переключатели базовыми инструментами форм, или нет?
#css #switch #safari
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
❤6👍2🫡1
This media is not supported in your browser
VIEW IN TELEGRAM
#заметка дня
В чат прилетел вопрос: "Как добавить иконку в поле ввода так, чтобы она была видна только когда виден плейсхолдер и исчезла при вводе текста?"
Отвечаем: конечно же добавить её в контейнер label, а потом использовать псевдо-класс :placeholder-shown на поле ввода!
Он очень давно и хорошо поддерживается, так что почему бы и нет.
Оставим за пределами этого обсуждения тот факт, что плейсхолдеры не должны заменять реальные метки. Это всё равно уже стало де-факто стандартом индустрии... но постарайтесь так не делать.
И, конечно, пример:
https://codepen.io/alinaki/pen/xxMpgLK?editors=1100
Там заодно используются SVG-спрайты, потому что мне лениво подключать профессиональный аккаунт на кодпене и грузить туда картинки. Так что заодно можно посмотреть, как работать со спрайтами. Пригодится!
Всем бу, котаны!
#css #placeholder #svg #sprite #бородач
В чат прилетел вопрос: "Как добавить иконку в поле ввода так, чтобы она была видна только когда виден плейсхолдер и исчезла при вводе текста?"
Отвечаем: конечно же добавить её в контейнер label, а потом использовать псевдо-класс :placeholder-shown на поле ввода!
Он очень давно и хорошо поддерживается, так что почему бы и нет.
Оставим за пределами этого обсуждения тот факт, что плейсхолдеры не должны заменять реальные метки. Это всё равно уже стало де-факто стандартом индустрии... но постарайтесь так не делать.
И, конечно, пример:
https://codepen.io/alinaki/pen/xxMpgLK?editors=1100
Там заодно используются SVG-спрайты, потому что мне лениво подключать профессиональный аккаунт на кодпене и грузить туда картинки. Так что заодно можно посмотреть, как работать со спрайтами. Пригодится!
Всем бу, котаны!
#css #placeholder #svg #sprite #бородач
👍9