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

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

Как объединить функции цветов SASS и CSS-переменные

От автора: новый метод, поддерживаемый во всех браузерах, для сохранения в CSS-переменных цветов и изменения их с помощью функций SASS. Переменные CSS великолепны. Мы все это знаем. Значения цветов HSL лучшие. Согласна! Функции цветов SASS потрясающи. Да, естественно. Но как совместить все эти вещи и использовать их СЕГОДНЯ? Способ есть! Мы разработали новый метод для нашего фреймворка, который сочетает в ...

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

CSS-in-JS и статический рендеринг

От автора: CSS-in-JS может предоставить огромные преимущества для удобства обслуживания. Но для больших статически визуализируемых веб-сайтов использование простого CSS все еще имеет смысл. Все больше и больше разработчиков переходят на CSS-in-JS, включая такие громкие имена, как Microsoft, Atlassian и … конкурс песни Евровидение! И хотя я не всегда был большим поклонником CSS-in-JS, даже я признаю его преимущества: Это позволяет вам ...

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

CSS и производительность сети

Перевод статьи CSS and Network Performance с сайта csswizardry.com, опубликовано на css-live.ru с разрешения автора — Гарри Робертса. Несмотря на то, что сайт уже больше десяти лет называется «CSS-волшебство», за последнее время на нём не было ни одной статьи, связанной с CSS. Давайте я это исправлю, совместив две мои любимые темы: CSS и производительность. CSS критически важен для отображения страницы — браузер не начнет рендеринг, пока ...

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

Быстрая проверка CSS и общие замечания о системах дизайна

От автора: в последнее время мной была выполнена проверка 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 ...

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