Интересные возможности CSS, которые вы должны знать

На прошлой неделе мы говорили о псевдоэлементах и ​​псевдоклассах в CSS. В этом посте мы увидели, как эти функции CSS позволяют нам генерировать более лаконичный, понятный и простой в обслуживании код. Сегодня я хотел бы поделиться с вами некоторыми дополнительными свойствами CSS для создания адаптивных веб-сайтов, учитывающих предпочтения ваших посетителей .

Соотношения сторон с object-fit object-position

object-fit — это свойство CSS, которое позволяет вам установить, как замещающий элемент (например, изображение) должен быть изменен в соответствии с его контейнером. Давайте посмотрим, что это значит на конкретном примере, не так ли?

Предположим, у нас есть следующее вертикальное изображение:

и мы хотим отобразить его в следующей области:

который имеет 15em и занимает 80% доступной ширины. В принципе, вы можете подумать, что все, что нам нужно сделать, это установить определенную width и height для нашего изображения, верно?

 .custom-size { height: 15em; width: 80%; }

Ну, если вы это сделаете, вы увидите, что соотношение сторон изображения испорчено:

Чтобы изображение не искажалось при использовании определенной ширины и высоты, разработчики полагались (а некоторые до сих пор так делают) на CSS-свойство background элемента div . Итак, вместо добавления изображения с помощью тега img мы создали контейнер div :

 <div></div>

установите правильные размеры для указанного div , а затем добавьте фактическое изображение с помощью CSS, используя свойства background-size и background-position :

 #custom-image { background-image: url( …/image.jpg ); background-size: cover; background-position: center; height: 15em; width: 80%; }

И вот вы можете увидеть результат:

Масштабирование и обрезка изображений с использованием свойств background CSS в теге div — плохое решение, потому что вы больше не используете семантически правильный тег HTML: img . Кроме того, теги img включают в себя множество интересных свойств, которые сделают веб-сайты более быстрыми и доступными: свойство alt , описывающее изображение, srcset , чтобы сделать его отзывчивым, loading , чтобы лениво загружать его, и так далее.

Если вы хотите масштабировать и обрезать изображение так, чтобы оно соответствовало определенным размерам, не искажая само изображение, все, что вам нужно сделать, это использовать свойства CSS object-fit и object-position , которые ведут себя как background-size и background-position . делать:

 .custom-size { height: 15em; object-fit: cover; object-position: center; width: 80%; }

Если вы примените предыдущие правила к тегу img :

 <img class="custom-size" src="…/image.jpg" />

это результат, который вы получаете:

это именно то, что вас интересовало, не так ли?

Если вы хотите узнать больше об этом свойстве, вот ссылка со всей необходимой информацией.

Адаптивный дизайн с медиа-запросами

Медиа-запросы — это механизм, который позволяет вам добавлять правила CSS на ваш веб-сайт в зависимости от характеристик устройства или приложения, с помощью которого ваши посетители выходят в Интернет. Я совершенно уверен, что вы немного знакомы с ними, поскольку медиа-запросы являются основой для создания адаптивных веб-сайтов, но вы можете сделать с ними гораздо больше!

Классические медиа-запросы

Использование медиа-запроса в таблице стилей CSS так же просто, как добавление ключевого слова @media с двумя вещами: с одной стороны, условие, которое описывает, когда медиа-запрос активен, и, с другой стороны, набор правил CSS, которые должны загружаться при выполнении условия. Вот почему медиа-запросы являются основой для создания адаптивного дизайна: вы просто применяете тот или иной набор правил в зависимости от width браузера посетителя.

Например, предположим, что вы хотите изменить боковую панель следующего абзаца:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Лев на крыльце мягкий, местами некрасивый, но трепетный наружный элемент. Но необходимость для предпринимателей вызвана тепловым стрессом. Зарезервированная микроволновка, но моя дверь всегда или иногда массовая авторская. Android и Nunc sodales interdum, tincidunt Erat AC, tincidunt elit. Однако ultricies ac, arcu metus Sed congue. Для удобства боязнь лео усилена белком. Это Tellus orci, tempor id egestas nec, по крайней мере, некоторые игроки.

так что он использует все цвета радуги в зависимости от ширины браузера. Вот как вы можете добиться такого поведения с помощью CSS:

 .colored-border { border-left: 0.5em solid red; padding-left: 1em; } @media ( min-width: 400px ) { .colored-border { border-color: orange; } } @media ( min-width: 600px ) { .colored-border { border-color: yellow; } } @media ( min-width: 800px ) { .colored-border { border-color: green; } } @media ( min-width: 1000px ) { .colored-border { border-color: cyan; } } @media ( min-width: 1200px ) { .colored-border { border-color: blue; } } @media ( min-width: 1400px ) { .colored-border { border-color: violet; } }

Довольно легко, правда? Нам просто нужно применять другой цвет каждый раз, когда ширина браузера превышает определенный порог. Обратите внимание, что мы реализуем это, используя подход mobile first, потому что «новые» правила применяются по мере увеличения экрана. Измените ширину окна, и вы увидите результат.

Как реализовать темный режим с помощью CSS

Темные режимы сейчас в моде, как на мобильных устройствах, так и на десктопах. Знаете ли вы, что существует медиа-запрос, чтобы узнать, предпочитают ли пользователи темные режимы? С помощью медиа-запроса prefers-color-scheme вы можете увидеть, предпочитает ли пользователь light цветовую схему или dark . Это означает, что теперь у вас есть возможность создать две версии своего веб-сайта, чтобы он соответствовал предпочтениям всех ваших посетителей.

Например, рассмотрим следующий фрагмент HTML:

 <div class="force-light-theme">Light Theme</div> <div class="force-dark-theme">Dark Theme</div> <br> <div class="theme">Dynamic (based on your settings)</div>

и эти правила CSS:

 .force-light-theme { background: #eee; color: black; } .force-dark-theme { background: #333; color: white; } @media (prefers-color-scheme: light) { .theme { background: #eee; color: black; } } @media (prefers-color-scheme: dark) { .theme { background: #333; color: white; } }

В зависимости от вашей настройки вы увидите, что «Динамическая» часть предыдущего фрагмента HTML выглядит либо как Светлая тема, либо как Темная тема:

Довольно круто, да? И просто!

Другие интересные варианты использования медиа-запросов

Существует множество медиа-запросов, которые вы можете использовать (у вас есть полный список здесь), но я хотел бы сосредоточиться на одном в частности. В частности, я хочу объяснить вам, как применять разные стили в зависимости от того, отображается ли страница в браузере или собирается быть напечатанной. Все, что вам нужно сделать, это использовать ключевое слово print или screen в медиа-запросе следующим образом:

 @media print { … } @media screen { … }

или создайте два отдельных файла CSS, по одному для каждого варианта использования, и включите их в свой HTML, используя свойство media тега link :

 <link media="print" src="…/print.css" /> <link media="screen" src="…/default.css" />

Самое интересное в этом то, что вы можете создать таблицу стилей, которая преобразует ваш сайт в часть контента, предназначенную для печати. Таким образом, например, вы сможете скрыть динамические части Интернета, которые не имеют смысла в печатной версии (например, меню или формы). Или вы даже можете убедиться, что некоторые вещи, которые теряются при печати, становятся видимыми, например, целевой URL-адрес ссылки:

 @media print { .menu { display: none; } .show-links a:after { content: " (" attr(href) ")"; } }

результат которого следующий:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis leo in turpis interdum, at pharetra velit elementum. Nam eget lacus sed lacus dictum scelerisque. Proin porta ligula sed mi semper, vel interdum massa auctor. Pellentesque et massa congue, tincidunt Erat ac, tincidunt elit. Сед ак долор метус. Nam commodo metus sed ligula consectetur interdum. Curabitur odio est, tempor id egestas nec, aliquam at nisl.

CSS-переменные

Наконец, давайте поговорим об еще одной удивительной функции CSS: настраиваемых свойствах CSS (также известных как переменные CSS). Сложные веб-сайты имеют очень большое количество CSS, и довольно часто одно и то же значение повторяется снова и снова. Например, ваша цветовая палитра, границы, отступы и т. д. используются повсеместно. Переменные CSS упрощают эту сложность. И они чрезвычайно полезны для легкой реализации темного режима!

Переменные CSS — это именно то, о чем вы подумали: способ хранения и повторного использования определенного значения CSS под значимым именем. Намного легче понять, что такое --main-text-color , чем #333 , не так ли?

Объявление пользовательского свойства выполняется с использованием имени пользовательского свойства, которое начинается с двойного дефиса ( -- ), и значения свойства, которое может быть любым допустимым значением CSS. Как и любое другое свойство, это записывается в наборе правил, например:

 element { --main-color: red; --main-padding: 2em 1em; }

Селектор, который вы используете в блоке правил, где вы определили переменную CSS, определяет ее область действия. То есть, если вы определяете переменную в правиле div.banner , эта переменная будет доступна только в этой области. Однако наиболее распространенным является создание переменных в глобальной области видимости с использованием псевдокласса :root :

 :root { --main-color: red; --main-padding: 2em 1em; }

Чтобы использовать переменную CSS, вам просто нужно указать ее имя внутри функции var :

 p { color: var(--main-color); padding: var(--main-padding); }

CSS здесь, чтобы помочь вам

HTML-структура веб-страницы подобна фундаменту дома — вам нужен прочный фундамент, если вы хотите построить что-то надежное. При создании веб-страницы убедитесь, что вы используете семантически правильное и чистое HTML-дерево. Это приведет к тому, что страница будет работать во всех браузерах для всех посетителей, а применение трюков CSS поверх нее будет простым и эффективным.

Надеюсь, вам понравился сегодняшний пост. Если да, поделитесь с друзьями

Избранное изображение Уильяма Дайно на Unsplash.