Главная » Архив меток: CSS

Архив меток: CSS

Свойство visibility — это не только видимость

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

Читать далее »

Как начать работать с переменными шрифтами в CSS: основы использования

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

Читать далее »

Все о переменных среды CSS

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

Читать далее »

Просто используйте стили CSS :focus, черт побери

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

Читать далее »

Обзор CSS Resets в 2018 году

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

Читать далее »

Введение в CSS Shapes

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

Читать далее »

Текущее состояние дел со стилизацией полосы прокрутки CSS

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

Читать далее »

Еще раз, порядок свойств CSS

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

Читать далее »

Вложение или кеширование? Кратко о рендеринге страниц

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

Читать далее »

Элементы исключений в CSS и цель их применения

От автора: в CSS исключение (которое в настоящее время находится в «рабочем проекте» спецификации) похоже на float в том, что оно позволяет встраивать контент, чтобы обернуть элемент. Но не совсем, как float. Чен Хуэй Цзин приводит отличное пояснение: Элемент исключения — это элемент уровня блока, который не является плавающим, а генерирует поле исключения. Элемент исключения устанавливает новый контекст форматирования блока. ...

Читать далее »