CSS трансформации и матрица

#почитать

Глубокое погружение в матрицу CSS трансформаций, её взаимосвязь с отдельными свойствами CSS трансформаций, взгляд на скрытые возможности форм функций.

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

Гидратация в React 19: новые подходы и секреты оптимизации

#почитать

До выхода React 19 процесс гидратации был далеко не идеален: проблемы с производительностью, избыточное выполнение JavaScript и задержки в интерактивности мешали разработчикам создавать быстрые и отзывчивые приложения. В React 19 были введены важные улучшения, которые значительно повышают эффективность гидратации и снижают время загрузки страниц. Разбираем новые подходы на практических примерах.

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

Всё самое важное о псевдоклассе :default

#почитать

Псевдокласс :default — это способ стилизации элемента формы, выбранного по умолчанию. Он особенно полезен при работе с группами радиокнопок, чекбоксов или выпадающих списков, где важно визуально выделить стартовый (предустановленный) вариант. Такой подход делает интерфейс понятнее и помогает пользователю быстрее ориентироваться в выборе.

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

Как сделать первую букву абзаца большой — буквица через ::first-letter

#почитать

Если сегодня мы воспринимаем веб как что-то само собой разумеющееся, то в начале 90-х годов страницы выглядели очень аскетично: просто текст, иногда ссылки, никаких визуальных изысков. Когда появился CSS, разработчики впервые получили возможность влиять на то, как отображается текст. Одной из первых «красивых» фич стал псевдоэлемент ::first-letter, появившийся ещё в спецификации CSS1 в 1996 году.

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

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

CSS if(): новая функция условной логики доступна в Chrome 137+

#почитать

CSS с каждым днём превращается в настоящий «язык программирования». С появлением новых возможностей, таких как CSS переменные, функция calc(), псевдоклассы :has() и :is(), а также универсальные @media запросы, CSS упрощает создание сложных стилей и макетов.

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

Как размыть фон под элементом с помощью backrop-filter

#почитать

В сентябре 2024 в Baseline в статусе Widely-available вошло CSS-свойство backdrop-filter. Оно делает красивое: позволяет применить фильтры (размытие, контраст, яркость, и прочее) к фону за элементом. Не к самому элементу, а именно к тому, что за ним — это важно.
То есть если у вас есть модальное с полупрозрачным фоном, вы можете сделать так, чтобы то, что под ней, красиво размывалось, как в macOS или на айфоне. Это и есть главное применение backdrop-filter.

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

Scroll-Driven Animations Inside a CSS Carousel

#почитать

Недавно я размышлял над тем, что узнал о CSS-каруселях. Они многое могут делать прямо из коробки (и кое-что не могут), как только вы определите контейнер прокрутки и скроете переполнение.
Нет ли еще одной довольно новой функции CSS, которая работает с областями прокрутки? Ах да, это анимация, управляемая прокруткой. Разве это не означает, что мы можем запускать анимацию при прокрутке элементов в CSS-карусели?

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

Функция image() в CSS: цветовые плашки, вырезки из спрайтов и bidi-изображения

#почитать

Функция image() из модуля CSS Images Level 4 — это «умная» альтернатива url(), которая умеет больше: задавать направленность изображения (для языков слева-направо и справа-налево), вырезать фрагмент по медиасегменту #xywh и даже рисовать однотонную плашку как самостоятельный слой изображения. Звучит как швейцарский нож для бэкграундов — и так и есть. Но есть важная оговорка: на сегодня поддержка в браузерах минимальна, поэтому ниже мы покажем, как писать код «по-новому» и какие фолбэки использовать уже сейчас.

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

What We Know (So Far) About CSS Reading Order

#почитать

Предлагаемые CSS-свойства reading-flow и reading-order предназначены для указания исходного порядка элементов HTML в дереве DOM, или, проще говоря, как инструменты доступности определяют порядок элементов. Вы будете использовать их для того, чтобы порядок фокусировки фокусируемых элементов соответствовал визуальному порядку, как указано в Руководстве по доступности веб-контента (WCAG 2.2).

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

Плавность как фича: сравниваем фреймворки по анимации UI на реальных кейсах

#почитать

UI-анимации — это не только про красоту, но и про восприятие, структуру и даже скорость. В этой статье рассматриваются популярные фреймворки для создания анимаций в интерфейсах: CSS, Framer Motion, GSAP и Motion One. Сравнение проводится на реальных кейсах с кодом, примерами и субъективным мнением, где каждый инструмент показывает свои сильные и слабые стороны. В конце — небольшие выводы и неожиданные результаты.

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

Улучшаем тексты в вебе при помощи text-wrap: pretty

#почитать

В новом Safari Technology Preview реализовано значение text-wrap: pretty, обеспечивающее беспрецедентный уровень чёткости типографики в вебе. Давайте рассмотрим возможности WebKit-версии pretty, а затем сравним её с balance и другими значениями text-wrap, чтобы лучше понять, когда какие следует выбирать.
Идеи о том, что «хорошо» для типографики произрастают из эпохи, когда набор производился вручную при помощи металла, дерева и чернил. Наборщики тщательно выбирали, где должно находится слово: в конце строки, в начале другой или его нужно разбить дефисом. Их усилия повышали понятность текстов, снижали напряжение глаз и просто увеличивали удовольствие от чтения. Хотя восприятие красоты может быть субъективным, в мире существуют и глубоко укоренившиеся типографские традиции для разных языков и написаний. Эти традиции через века несут человеческую культуру от поколения к поколению.
В цифровой типографике все слова располагает компьютер, а не человек. Веб-дизайнеры или разработчики часто создают шаблон, заполняемый различными версиями контента. Типографика в вебе не настраивается вручную, особенно в случае гибкой структуры текста, меняющейся в зависимости от формы и размеров экрана. Что же мы можем сделать, чтобы приблизиться к качеству традиционной типографики, сохранив при этом возможность механизации, привносимую современными компьютерами?
Одним из решений может стать text-wrap:pretty. Оно предназначено для обеспечения нового уровня качества типографики в вебе благодаря использованию учитывающих абзацы алгоритмов.

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

Optimizing PWAs For Different Display Modes

#почитать

Progressive Web Apps (PWAs) are a great way to make apps built for the web feel native, but in moving away from a browser environment, we can introduce usability issues. Declan covers how we can modify our app depending on what display mode is applied to mitigate these issues.

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

Bounce Rate в веб-дизайне: как удержать пользователей на сайте

#почитать

Вы замечали, что посетители быстро покидают ваш сайт, едва заглянув на него? Это может быть связано с высоким bounce rate (показателем отказов) — процентом пользователей, которые ушли, не совершив никаких действий. Разберём, почему это происходит и как улучшить ситуацию через грамотный дизайн. В данной статье разберем:

- Что такое bounce rate и как его рассчитывают?
- Основные причины высокого bounce rate
- Влияние bounce rate на SEO
- Мифы о bounce rate
- Инструменты для отслеживания и анализа bounce rate

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

CSS-селекторы. Шпаргалка для новичков

#почитать

Селекторы — это шаблоны, которые используются для привязки стилевых свойств к элементам в документе. Вы можете задать стиль для всех элементов или сократить выбор с помощью определённого селектора.

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

Дизайн для ленивых: как интерфейсы учатся думать за пользователя

#почитать

Современные пользователи цифровых продуктов подсознательно стремятся к минимальным когнитивным затратам. Это порождает новый тренд — «ленивый UX», где система берет на себя рутинные решения.

В этой статье разберем:
- Как алгоритмы упрощают взаимодействие
- Примеры удачных и провальных предугадываний
- Грань между удобством и навязчивостью

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

Lottie — новый стандарт векторной анимации

#почитать

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

В то же время за последние годы набрал большую популярность Lottie — новый формат векторной анимации, легковесная альтернатива анимированным GIF и APNG. Он основан на JSON и содержит текстовые описания элементов объектов и движений, с поддержкой растровых картинок, динамических скриптов и интерактивных элементов.

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

Если увлекаешься технологиями, не пропусти True Tech Champ 21 ноября — масштабный ИТ-фест от МТС 🔥

В программе:

📝 доклады о технологиях будущего от экспертов в ИИ, включая руководителя фундаментальных исследований MWS AI Валентина Малых;
🛻 шоу-битва роботов со спецэффектами и сюжетной линией;
📝 воркшоп по работе с ИИ-агентами от канадского разработчика и автора книги AI Agents in Action Майкла Ланэма, кодинг-практикум с MWS AI и интеллектуальный спарринг с искусственным интеллектом;
◻️ 20+ площадок с активностями: IT-Родео, робофайтинг, лазерный лабиринт и многое другое.
🔴 А в завершение дня — афтепати со звездным хедлайнером.

Фестиваль бесплатный, он пройдет 21 ноября в Москве и онлайн.
Смотри подробную программу на сайте и регистрируйся — количество мест ограничено.