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 ноября в Москве и онлайн.
Смотри подробную программу на сайте и регистрируйся — количество мест ограничено.

Opening a Details Element from the URL

#почитать

Say you’ve got a page with a bunch of <details> elements on it.

Your goal is to be able to send someone to that page with one particular details element open.

I was doing just this recently, and my first thought was to do it server-side. If the URL was like website.com/#faq-1 I’d see if faq-1 matches an ID of the details element and I’d put the open attribute on it like <details id="faq-1" open>. But no, you don’t get to have the #hash as part of the URL server side (for whatever reason 🤷‍♀️).

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

Замена YouTube Kids

#почитать

Что делать, когда твой ребёнок признаёт только это приложение? Вот не хочет пользоваться аналогами, и всё тут! Как убрать недостатки в такой ситуации и добавить достоинств? Об этом и поговорим.

Какие недостатки YouTube Kids я хотел бы убрать?

Невозможно сделать раздачу исключительно русскоязычной. Это может быть особенно плохо, например, для детей с аутизмом, у которых спец-интерес после просмотра мультиков может проявиться в английском (или любом другом) языке, с нежеланием говорить по-русски.

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

«Замедление» работы сервиса в России. Этот пункт обсуждать я не буду.

Казалось бы, можно было бы пользоваться аналогичными сервисами. Но их авторы вместо того, чтобы скопировать в точности интерфейс предшественника, почему-то решают проявить творческие способности там, где они не требуется. И в результате хороший интерфейс превращается в камень преткновения: некоторые дети отказываются им пользоваться.

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