Понимание CSS corner-shape и сила суперэллипса

#почитать

Свойство CSS corner-shape — это одно из самых захватывающих нововведений в геометрический инструментарий веб-дизайна за последние годы. Оно расширяет наши возможности по управлению внешним видом углов, выходя за рамки привычных скруглений с помощью border-radius. Это на первый взгляд небольшое дополнение открывает целый мир новых возможностей, которые раньше требовали сложных реализаций на основе SVG или решений с использованием изображений.

⏱Читать статью

Как анимировать CSS Grids без JavaScript

#почитать

Grid Layout — одна из самых зрелых технологий в CSS. Он давно решает задачи макета гораздо лучше, чем float, flex и position. Но долгое время у него была одна неочевидная граница: анимация размеров сетки.
Да, grid-template-columns и grid-template-rows существовали с самого начала появления гридов. Да, они были мощными. Но плавно менять их было нельзя — браузеры просто прыгали между состояниями. Анимация сетки оставалась мечтой.
Ситуация изменилась c 27 апреля 2025 года. Анимация grid-template-columns и grid-template-rows вошла в baseline — это означает, что теперь она официально поддерживается всеми современными браузерами. Без флагов. Без хака с display: contents. Просто работает.

⏱Читать статью

Три гуру веб-дизайна 90-х

#почитать

С ростом популярности в 1997 году технологий Flash и CSS возникло три философии веб-дизайна. Дэвид Сигел продвигал «хаки», Джейкоб Нильсен стремился к простоте, а Джеффри Зельдман комбинировал элегантность с удобством пользования.

Как и многие из первой волны веб-дизайнеров, Джеффри Зельдман, которому в начале 1997 года исполнилось 42 года, начинал свою карьеру в совершенно другой профессии. Изначально он был автором художественных книг, недолго поработал журналистом, пробовал себя в качестве разъездного музыканта, а потом десять лет посвятил рекламному бизнесу. «Сочинение текстов билбордов с цепляющей графикой — хорошая практика для веба, потому что в нём нужно доносить информацию мгновенно», — рассказывал он позже в интервью.

Творческих людей наподобие Зельдмана привлекло в веб развитие мультимедиа; сам он создал свой первый веб-сайт в 1995 году. «Благодаря гипертексту появился веб, благодаря графике он стал игровой площадкой для потребителей», — писал он на своём личном веб-сайте в конце 1996 года.

⏱Читать статью

Что такое инкрементальная гидратация в Angular

#почитать

Если вы когда-либо запускали SSR в Angular, вы наверняка сталкивались с этим парадоксом: страница вроде бы загружается молниеносно, но ощущается медленной. Контент есть, кнопки на месте — а кликаешь по ним, и в ответ тишина. Почему? Потому что браузер всё ещё «оживляет» интерфейс — запускает JavaScript, подключает обработчики, восстанавливает состояние. Это и есть гидратация, и в классическом исполнении она не так уж и быстра.

⏱Читать статью

В чём разница между <p> и <br>

#почитать

Чтобы разметить текст, нужно понимать, какие использовать теги. Для создания новой строки в тексте есть несколько способов. В статье мы расскажем, как ими пользоваться.

⏱Читать статью

CSS-градиенты в oklch

#почитать

Градиент — это плавный переход между двумя или более цветами, создаваемый с помощью функций linear-gradient() или radial-gradient(). Его используют в вебе для фонов, кнопок, рамок, декоративных элементов и даже в интерактивных эффектах при наведении.

Классические градиенты в CSS описываются в sRGB — привычном цветовом пространстве браузеров. Но у sRGB есть ограничения: некоторые переходы выглядят тусклыми или неравномерными, особенно если использовать яркие и сложные оттенки.

Чтобы добиться более естественного восприятия цвета, в CSS можно использовать современные цветовые модели, например oklch. Эта модель разработана с учётом особенностей человеческого зрения: яркость, насыщенность и оттенок регулируются отдельно, а сами переходы кажутся глазу равномерными.

⏱Читать статью

document.open(), write(), writeln(), close() в браузере: когда можно и когда нельзя

#почитать

Эти методы управляют потоковой записью HTML прямо в документ. Они удобны во время парсинга страницы, но опасны после загрузки: могут стереть текущее содержимое, блокируют поток, ухудшают производительность и плохо сочетаются с современными практиками. Ниже — безопасные сценарии, риски и актуальные альтернативы.

⏱Читать статью

Как скачать JSON на JavaScript: метод fetch()

#почитать

Метод fetch() — это один из ключевых инструментов веб-разработки. Он появился как альтернатива устаревшему XMLHttpRequest и сразу изменил привычный подход к работе с данными в браузере. Сегодня трудно представить приложение без динамической подгрузки: комментарии в соцсетях, бесконечные ленты новостей, онлайн-магазины с фильтрацией товаров — всё это работает благодаря запросам к серверу, которые обрабатываются без перезагрузки страницы.

⏱Читать статью

Как я сделал игру для Яндекс Игр

#почитать

Вчера я выпустил свою первую публичную игру «Дом до небес». Это простая в которой нужно ставить блоки этажей, чем ровнее тем лучше, этому мешает раскачивающийся крюк, и шатающееся здание. Игра похожая на ту, в которую я играл в детстве, когда телефоны ещё были кнопочными.

⏱Читать статью

Введение в управляемую прокруткой CSS анимацию - Прогресс просмотра

#почитать

Прошло 10 лет с тех пор, как в спецификации были представлены анимации, управляемые прокруткой, и после пяти лет разработки мы наконец-то начинаем видеть их на веб-сайтах. Есть рассказываемые истории и игры-лабиринты, а также трехмерные интерфейсы, как в iTunes, и 3D-вращение… Но что именно здесь нового? Не то чтобы мы раньше не видели анимаций, работающих от прокрутки, но то, что мы имеем сейчас, не требует ни JavaScript, ни сторонних библиотек - только чистый CSS. И при том эти анимации запускаются в основном потоке, обеспечивая плавную работу с высокой производительностью и ускорением на графическом процессоре.
Начиная с декабря 2024 года вы можете безопасно использовать анимацию, работающую при прокрутке, в браузерах Chrome. Firefox тоже поддерживает её, но вам нужно будет установить соответствующий флаг. А как Safari? Пока нет, но не волнуйтесь - вы всё равно можете обеспечить бесперебойную работу такой анимации во всех браузерах с помощью полифилла. Просто имейте в виду, что для работы полифилла требуется библиотека JavaScript, поэтому у вас не будет все работать также быстро.
В этой статье мы рассмотрим последнюю опубликованную спецификацию W3C и изучим два типа анимаций, работающих от прокрутки, - анимация прокрутки и анимация просмотра. К концу статьи я надеюсь, что вы будете знакомы с обеими типами анимаций и сможете не только отличать их друг от друга, но и уверенно использовать в своей работе.

⏱Читать статью

Делаем фронтенд-сборку для верстки HTML-писем на MJML

#почитать

В одном из проектов мы столкнулись с необходимостью упростить процесс верстки и тестирования HTML-писем. В итоге решили вынести шаблоны в отдельный репозиторий и собирать их с помощью MJML.

В статье разберём два ключевых этапа: сначала создадим репозиторий для верстки писем, а затем настроим локальную тестовую отправку через SMTP.

⏱Читать статью

От CSS до Canvas и звука: анимируем что угодно с GSAP

#почитать

GSAP – одна из самых популярных JavaScript-библиотек для создания анимаций. Её используют как новички, так и опытные front-end-разработчики. В этой статье я хочу рассмотреть несколько примеров ее применения – от самых простых до менее очевидных.

⏱Читать статью

Infinite Pixels

#почитать

By which I mean, if I hand a browser values that are effectively infinite by way of theinfinity keyword, it will necessarily end up clamping to something finite, thus revealing how far it’s able or willing to go for that property.

⏱Читать статью

Типографика в дизайне: как текст может сделать ваш сайт эффективным

#почитать

Текст — это не просто набор букв. Это мощный инструмент, который влияет на восприятие дизайна, удобство чтения и даже доверие пользователей. Хотите, чтобы ваш сайт или печатные материалы выглядели профессионально? Тогда давайте разберём основы типографики простыми словами.

В данной статье разберем:

- Важность подбора правильного шрифта
- Как выбрать шрифты?
- Где искать шрифты?
- Размер и расстояние – основа удобства
- Контраст и цвет текста
- Ошибки, которые портят типографику и как их избежать

⏱Читать статью

CSS функция min() и адаптивность сайта

#почитать

Что было во всем этом интересного конкретно для нас, так это то, как в этой статье демонстрируется сложность определения размера разных вещей. В CSS мы ограничены абсолютными и относительными единицами измерения, поэтому мы либо придерживаемся определенного размера (например, px), либо вычисляем размер на основе размера, объявленного для другого элемента (например, %, em, rem, vw, vh и так далее). И то, и другое сопряжено с компромиссами, так что не похоже, что существует "правильный" способ действий - все зависит от контекста элемента, - и уклон в какую-либо одну сторону этого не исправит.
В связи с этим мы решили провести собственный эксперимент, но вместо контейнерных единиц измерения мы взяли CSS функцию min(). Почему? Во-первых, мы можем задать функции в качестве аргумента любой нужный нам тип единицы измерения, что делает подход более гибким, чем работа только с одним типом единиц измерения. Но настоящая причина была в том, что нам было интересно изучить этот вопрос.

⏱Читать статью

Обходим CSP nonce через дисковый кеш браузера

#почитать

Эта статья описывает изощренную технику обхода Content Security Policy (CSP) на основе nonce-значений через эксплуатацию механизмов кеширования браузера. Автор демонстрирует, как комбинация CSS-инъекций, CSRF-атак и особенностей работы bfcache и дискового кеша может привести к выполнению произвольного JavaScript-кода даже при наличии строгой CSP.

⏱Читать статью

<details name>: эксклюзивные аккордеоны на чистом HTML (+ стили через :has())

#почитать

За последний год HTML получил деталь, которая меняет привычные «аккордеоны». У <details> появился атрибут name, и этим всё сказано: теперь эксклюзивные аккордеоны можно сделать без строчек JavaScript, а стили и поведение дочистить через :has(). Поддержка стала широкой, а старые практики на дивчиках и ролях можно оставить для случаев, когда действительно нужна сложная логика.

В HTML у нас давно есть пара <details>/<summary>. Браузер сам рисует disclosure-виджет, умеет разворачивать содержимое, бережно обращается с фокусом и клавиатурой. Сейчас поверх этого добавился name, который превращает набор из нескольких <details> в группу, открываешь одно и закрываются остальные из той же группы. Если в группе вы отметили несколько элементов open в исходнике, браузер оставит открытым первый по порядку.

⏱Читать статью

«Великолепный» CSS. Коллекция странностей CSS, на которые я потратил кучу времени

#почитать

CSS часто преподносит сюрпризы, способные запутать даже опытных разработчиков. Я понимаю их раздражение. Тут всё закономерно.

Однако, несмотря на потраченные нервы, мне нравится CSS. Именно поэтому мне хочется, чтобы разработчики тратили меньше времени на борьбу с ним. С этой целью я собрал ряд не самых очевидных моментов, которые в своё время ставили в тупик меня и моих коллег.

⏱Читать статью