Forwarded from The Devs
Forwarded from The Devs
Forwarded from Павленко + дизайн
Forwarded from Defront — про фронтенд-разработку и не только (Alexander Myshov)
Автоматическая тёмная тема в Chrome
В Origin Trial Chrome 96 на Android появится поддержка автоматической тёмной темы — "Auto Dark Theme".
Автоматическая тёмная тема — это автоматическая адаптация цвета фона страницы и текста под тёмную тему операционной системы без вмешательства разработчика.
Сейчас автотема находится на этапе эксперимента, поэтому при её использовании есть неудобства. Для тонкого управления цветами отдельных элементов нужно с помощью JavaScript определить поддержку автотемы, выставить класс на корневом элементе и использовать его в CSS-правилах.
Есть возможность отказа от автотемы с помощью метатега
#ux #chrome
https://developer.chrome.com/blog/auto-dark-theme/
В Origin Trial Chrome 96 на Android появится поддержка автоматической тёмной темы — "Auto Dark Theme".
Автоматическая тёмная тема — это автоматическая адаптация цвета фона страницы и текста под тёмную тему операционной системы без вмешательства разработчика.
Сейчас автотема находится на этапе эксперимента, поэтому при её использовании есть неудобства. Для тонкого управления цветами отдельных элементов нужно с помощью JavaScript определить поддержку автотемы, выставить класс на корневом элементе и использовать его в CSS-правилах.
Есть возможность отказа от автотемы с помощью метатега
<meta name="color-scheme" content="only light">. Также для отключения автотемы на всей странице или отдельных её элементах можно использовать CSS-декларацию color-scheme: only light.#ux #chrome
https://developer.chrome.com/blog/auto-dark-theme/
Chrome for Developers
Auto Dark Theme | Blog | Chrome for Developers
Autogenerating a dark theme for light-themed sites.
Forwarded from Defront — про фронтенд-разработку и не только (Alexander Myshov)
В поиске лучшего способа балансировки переносов слов
Попробовал сегодня по-быстрому сделать удобочитаемые переносы слов заголовков статей на сайте defront. Оказалось, что не всё так просто.
Зачем нужна балансировка переносов. Браузеры не заботятся о читаемости текста при переносе слов, поэтому в блогах зачастую можно встретить такие переносы заголовков статей:
хотелось бы, чтобы текст выглядел так:
В последнем варианте текст сбалансирован и не отвлекает внимание.
Для решения этой проблемы можно воспользоваться готовыми балансировщиками переноса слов. Есть две популярные реализации: от New York Times и от Adobe. Реализация от Adobe для меня слишком тяжёлая, реализация от New York Times полегче, но она хорошо работает только с небольшими объёмами текста.
Реализация New York Times для небольших заголовков подходит идеально также она работает быстрее балансировщика Adobe благодаря использованию простого алгоритма на базе бинарного поиска. Но у неё есть проблема с видимым сдвигом позиции слов. Дениэл Александерсен в статье про форк балансеровщика от New York Times предлагает скрывать текст заголовка до тех пор, пока не сработает балансировка, но мне это кажется очень хрупким решением. Если по каким-то причинам скрипт окажется сломан, то пользователь не увидит заголовка статьи. Также есть сомнения, что все скринридеры будут хорошо интерпретировать появляющийся из ниоткуда заголовок статьи.
Ещё можно сделать автоматическую вставку
Также в стандарте CSS Text Level 4 есть упоминание CSS-свойства
Сначала хотел использовать форк балансировщика New York Times, но его недостатки перевешивают все преимущества. Возможно, что потом попробую покопать в сторону варианта с
#html #ux #a11y
https://defront.ru/posts/2022/01-january/11-in-search-of-best-line-wrap-balance/
Попробовал сегодня по-быстрому сделать удобочитаемые переносы слов заголовков статей на сайте defront. Оказалось, что не всё так просто.
Зачем нужна балансировка переносов. Браузеры не заботятся о читаемости текста при переносе слов, поэтому в блогах зачастую можно встретить такие переносы заголовков статей:
Причины отсутствия поддержки AVIF в
Safari
хотелось бы, чтобы текст выглядел так:
Причины отсутствия
поддержки AVIF в Safari
В последнем варианте текст сбалансирован и не отвлекает внимание.
Для решения этой проблемы можно воспользоваться готовыми балансировщиками переноса слов. Есть две популярные реализации: от New York Times и от Adobe. Реализация от Adobe для меня слишком тяжёлая, реализация от New York Times полегче, но она хорошо работает только с небольшими объёмами текста.
Реализация New York Times для небольших заголовков подходит идеально также она работает быстрее балансировщика Adobe благодаря использованию простого алгоритма на базе бинарного поиска. Но у неё есть проблема с видимым сдвигом позиции слов. Дениэл Александерсен в статье про форк балансеровщика от New York Times предлагает скрывать текст заголовка до тех пор, пока не сработает балансировка, но мне это кажется очень хрупким решением. Если по каким-то причинам скрипт окажется сломан, то пользователь не увидит заголовка статьи. Также есть сомнения, что все скринридеры будут хорошо интерпретировать появляющийся из ниоткуда заголовок статьи.
Ещё можно сделать автоматическую вставку
<br> в нужном месте разрыва заголовка. На больших экранах заголовки будут выглядеть хорошо, на маленьких экранах в редких случаях перенос будет выглядеть странно:
Использование
SomeNewApi
и
OtherNewApi
в Node.js
Также в стандарте CSS Text Level 4 есть упоминание CSS-свойства
text-wrap: balance. Оно было предложено Adobe в 2013 году, и его поддержки до сих пор нет ни в одном браузере.Сначала хотел использовать форк балансировщика New York Times, но его недостатки перевешивают все преимущества. Возможно, что потом попробую покопать в сторону варианта с
<br>, но пока оставлю всё без изменений. Балансировка переноса слов — это коварная штука. #html #ux #a11y
https://defront.ru/posts/2022/01-january/11-in-search-of-best-line-wrap-balance/
www.ctrl.blog
Improving the New York Times’ line wrap balancer
Web browsers don’t yet support (text-wrap: balance). Adobe and the NY Times have offer free JavaScript alternatives. I improved the latter to suit my needs.
Forwarded from The Devs
Forwarded from Дизайн-Телега 🔥
Job Stories vs. User Stories vs. User Story Mapping: Что выбрать?
Три подхода к описанию задач пользователей – Job Stories, User Stories и User Story Mapping. Как они помогают понять потребности пользователей? Узнайте больше! 🚀#UX #Продуктоведение #JobStories
Читать на дизайнерс | #статья
Три подхода к описанию задач пользователей – Job Stories, User Stories и User Story Mapping. Как они помогают понять потребности пользователей? Узнайте больше! 🚀#UX #Продуктоведение #JobStories
Читать на дизайнерс | #статья
Forwarded from PSD | Дизайн-пространство
Job Stories vs. User Stories vs. User Story Mapping: Что выбрать?
Три подхода к описанию задач пользователей – Job Stories, User Stories и User Story Mapping. Как они помогают понять потребности пользователей? Узнайте больше! 🚀#UX #Продуктоведение #JobStories
Читать на дизайнерс | #статья
Три подхода к описанию задач пользователей – Job Stories, User Stories и User Story Mapping. Как они помогают понять потребности пользователей? Узнайте больше! 🚀#UX #Продуктоведение #JobStories
Читать на дизайнерс | #статья