В этом месяце мы расскажем о состоянии CSS с точки зрения Google I/O, подсказках о специальных возможностях из отчета WebAIM Million за 2022 год, а также о некоторых приемах и методах переноса текста и SVG.
командой инженеров Whitespectre
Состояние CSS
Только что завершилась ежегодная конференция Google I/O, которая снова частично проводится с 2019 года. Помимо анонсов оборудования и Выступления разработчиков, был очень интересный доклад о CSS для разработчиков и дизайнеров в области фронтенда: Состояние CSS.
Мы уже говорили о последних дополнениях CSS и некоторых будущих функциях здесь два месяца назад, таких как встроенная вложенность, новые цветовые пространства, единицы области просмотра и контейнерные запросы, среди прочего. Но Адам Аргайл идет гораздо глубже в удивительной статье, которую он написал во время своего основного доклада.
Мы считаем, что это важный ресурс; исчерпывающий набор функций с хорошими объяснениями, рабочие примеры на CodePen, информация о совместимости браузера и ссылки на соответствующую спецификацию.
Мы не могли выбрать что-то одно, но было очень интересно осознавать, что команды разработчиков браузеров объединяют усилия и собираются вместе, чтобы обсудить функции и приоритеты, над которыми они намерены работать. Именно об этом был Compat 2021 в прошлом году, и это принесло свои плоды. В этом году инициатива называется Interop 2022, и она еще масштабнее. Будущее выглядит многообещающе!
Не пропускайте это и поделитесь с Адамом комплиментом!
Распространенные проблемы доступности
WebAIM, некоммерческая организация, ориентированная на доступность Интернета, только что опубликовала свой последний Годовой отчет WebAIM Million. Это всесторонний анализ, который дает представление о текущем состоянии веб-доступности и тенденциях с течением времени.
Он также устанавливает интересные корреляции между веб-категориями, доменами или технологиями веб-разработки и количеством ошибок доступности. Неудивительно, что домены .gov и .edu имеют лучшие средние показатели ошибок, а самые старые библиотеки веб-разработки, такие как Backbone, имеют худшие показатели.
Что касается проблем доступности, Хидде написал отличную статью, в которой анализируются наиболее распространенные проблемы доступности из отчета и способы их выявления, проверки и исправления в качестве разработчика или дизайнера. Это список главных правонарушителей:
- Низкоконтрастный текст
- Отсутствует замещающий текст в тегах
<image> - Пустые ссылки и кнопки
- Отсутствуют метки формы (for=
”input_id”) - Отсутствует язык (атрибут lang в теге
<html>)
Хорошая новость в том, что их легко исправить! Ознакомьтесь со статьей, чтобы узнать больше о каждом из них.
Объяснение переноса текста
Обычно текст переходит на следующую строку при «мягком переносе», т. е. между словами или после дефисов. Но иногда есть длинные слова или URL-адреса, которые могут вызвать проблемы. Должно ли это слово переполнять контейнер? Если нет, то как браузер должен сломать его?
В Coder’s Block получили ответы и опубликовали интересную статью о переносе текста и разбиении слов.
Комбинируя свойства CSS overflow-wrap, word-break и line-break, вы можете точно настроить поведение браузера при переносе текста и разрыве слов. Вы также можете указать возможности разрыва слов с помощью тега <wbr> или использовать символ Unicode ​.
Перенос также является опцией, как автоматической с помощью свойства дефисов CSS, так и вручную, указав возможности для переноса с помощью символа мягкого дефиса Unicode (­).
И многое другое: Предварительно отформатированный текст, предотвращение переноса текста, неразрывные пробелы… Проверьте!
Причудливые техники SVG
От генеративного SVG-арта до масок SVG, причудливых зернистых градиентов SVG или удобных инструментов SVG — все это вы можете найти в одной из последних статей, опубликованных в журнале Smashing Magazine: Волшебные методы SVG.
Особого упоминания заслуживают Анимированные иллюстрации дебетовых карт в формате SVG и Генеративные разделители горных хребтов.
Кроме того, если вы работаете с SVG, обязательно ознакомьтесь с этой компиляцией инструментов генерации SVG. От генерации фонового градиента до шаблонов, разделителей разделов, аватаров, визуализации данных и многого другого!
Что бы вы хотели добавить? Думаете, чего-то не хватает? Пишите нам в @whitespectrehq или LinkedIn, мы будем рады прочитать ваши отзывы!
И не пропустите наши предыдущие истории:
