От автора: недавно я столкнулся с проблемой, когда текст, содержащийся в созданной мною button, отсутствовал в дереве доступности и, следовательно, не был доступен для программ чтения с экрана. После некоторой отладки я понял, причина в том, что я визуально анимировал текст, изменяя прозрачность и, что более важно, свойство HTML visibility. Я знаю, что это был недосмотр, и ранее я писал ...

От автора: в CSS использование переменных шрифтов расширяет возможности. Типографика в Интернете позволяет дизайнерам выразить свое послание. Веб прошел долгий путь развития типографики: от использования только тех шрифтов, которые установлены на компьютере пользователя, до целого ряда странных гарнитур и забавных шрифтов, доступных в сетях доставки контента. Если вы когда-либо использовали Google Fonts, то могли заметить, что, когда вы добавляете несколько ...

От автора: когда в iPhone X появилась печально известный выступ, то были введены и новые значения safe-area-inset, о которых вы, возможно, слышали, они позволили браузерам определять область экрана, покрытую выступом, и соответствующим образом перемещать содержимое. Недавно эти значения были формализованы как часть новой спецификации CSS переменные среды. Эта спецификация все еще находится в стадии черновика редактора, что означает, что, хотя ...

От автора: недавно вышло несколько статей и рекомендаций о том, как использовать :focus-visible для отображения стилей CSS focus, когда кто-то использует клавиатуру, но игнорировать их, когда пользователь взаимодействует с помощью мыши. Лучшее, что я видел до сих пор, пост Леи Веру: Я собираюсь начать общее добавление следующего правила ко всем таблицам стилей: :focus:not(:focus-visible) { outline: none } Это избавляет от ...

От автора: сегодня речь пойдет о CSS Resets 2018. Все браузеры поставляются с набором стилей по умолчанию, которые применяются к каждой веб-странице в так называемой «таблице стилей агента пользователя». Большинство из этих таблиц стилей имеют открытый исходный код, поэтому вы можете просмотреть их. Таблица стилей Chromium UA — Google Chrome & Opera Таблица стилей Mozilla UA — Firefox Таблица стилей ...

От автора: CSS Shapes позволяют нам создавать интересные и уникальные макеты, определяя геометрические фигуры, изображения и градиенты, вокруг которых может обтекать текстовое содержимое. Узнайте в этом введении, как их использовать. До появления CSS Shapes было почти невозможно разработать макет в стиле журнала со свободно распределенным текстом. Напротив, макеты веб-дизайна традиционно формировались с помощью сеток, прямоугольников и прямых линий. CSS Shapes ...

От автора: если вам нужна стилизация полосы прокрутки CSS прямо сейчас, одним из вариантов является использование набора свойств с префиксом ::webkit. К сожалению, это не очень помогает в Firefox или Edge, или родственной экосистеме браузеров. Но если этого достаточно для того, что вам нужно, вы можете сделать это довольно стильно: На CodePen есть множество примеров. Также неплохо абстрагироваться с помощью ...

От автора: написание правильного CSS часто является сложной задачей, но это то, что в определенный момент может потребоваться любому разработчику. Порядок свойств в CSS является постоянным вопросом, который беспокоит большинство из нас. Важно ли это? Получим ли мы что-то, если уделим этому внимание? Ответ на эти вопросы неоднозначен. Поскольку я читаю все больше и больше на эту тему, я нашел ...

От автора: свойство CSS writing mode устанавливает горизонтальное и вертикальное направление написание текста. Хотя оно предназначено для целей мультиязычности, но может быть использовано для дизайна. Основы Свойство CSS writing-mode устанавливает направление содержимого как по горизонтали, так и по вертикали. writing-mode: horizontal-tb; Допустимые значения: horizontal-tb — Контент размещается горизонтально слева направо, вертикально сверху вниз. Значение по умолчанию. vertical-rl — Контент размещается ...

От автора: на прошлой неделе я закончил раздел слайдов для презентации на конференции Performance.Now(). В нем я рассмотрел шаблоны, которые позволяют браузеру как можно быстрее отображать страницу, включая код с исходным HTML, чтобы браузер имел все необходимое для начала такого процесса, как рендеринг страниц без дополнительных запросов. Два доступных варианта — это встраивание и Server Push, но у каждого есть ...