Привет, Хабр. Я продолжаю рассказывать про неизвестные широкому кругу разработчиков CSS-фишки. Я отбираю их так, чтобы они были полезны в разного рода проектах. Неважно, верстаете ли вы сайт для малого бизнеса или создаёте супермодное React-приложение. Они поддерживаются большинством браузеров. Отдельно отмечу, что я не считаю IE11 современным браузером. По этой причине я не учитывал его.


Сегодня мы рассмотрим:



загрузку фоновых изображений для экранов с повышенной плотностью пикселя с помощью функции image-set();

как с помощью неё же ускорить загрузку страницы;

можно ли использовать нестандартный шрифт без его загрузки;

чем полезен псевдо-класс :focus-within при вёрстке кастомных чекбоксов;

мой любимый лайфхак на основе пользовательских CSS-свойств.

Больше не буду затягивать. Давайте посмотрим, что я вам подготовил.

Читать дальше →
Неизвестно полезный CSS

CSS не отстаёт от JavaScript. Постоянно развивается. Классно же. Мне особенно радостно видеть, как старые задачи,...

Подробнее
Картинки в вебе 2019

Проблема с отображением картинок возникла с момента появления адаптивности в интернете. Мы хотим, чтобы сайт хорошо...

Подробнее
Новые форматы графики в CSS с помощью обновлённой функции image-set

CSS функция image-set поддерживается в браузерах на основе Chromium с 2012 года, а в Safari начиная с версии 6. Недавно...

Подробнее
[Перевод] Понимание CSS Grid: Создание Grid-контейнера

Перевод «Understanding CSS Grid: Creating A Grid Container» Рейчел Эндрю Хотя технология CSS Grid стала поддерживаться...

Подробнее
Веб компоненты без Shadow DOM

Привет, Хабр! За последнее время я заметил целый ряд статей с разного рода критикой веб-компонентов. Порой, эта критика...

Подробнее
[Из песочницы] Центрирование изображений на странице

Вступление Люблю решать интересные задачи по верстке, а с учетом моего опыта в этой сфере, чуть больше 5 лет, такие...

Подробнее

💬 Комментарии

В связи с новыми требованиями законодательства РФ (ФЗ-152, ФЗ «О рекламе») и ужесточением контроля со стороны РКН, мы отключили систему комментариев на сайте.

🔒 Важно Теперь мы не собираем и не храним ваши персональные данные — даже если очень захотим.

💡 Хотите обсудить материал?

Присоединяйтесь к нашему Telegram-каналу:

https://t.me/tcsecms/

Нажмите кнопку ниже — и вы сразу попадёте в чат с комментариями