Создание количественных запросов CSS «на лету»

Как создать прилипающее меню с помощью CSS или JQuery

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

Примером может послужить панель навигации, в которой каждый блок занимает 25% ширины при условии, что доступно четыре блока; при пяти блоках, ширина уменьшается до 20%. Это общая проблема для фреймворков динамических сайтов, таких как WordPress или Ghost. Администратор сайта может и не догадываться о таких сложностях. К примеру, если добавить еще один пункт меню, но в CSS данное условие не прописано, и блок не вписывается в размеры. Теперь вы можете с легкостью справиться с такой проблемой с помощью Flexbox (и от многих других проблем). А что насчет умного фоллбэка для браузеров, не поддерживающих Flexbox – предпочтителен только CSS даже без связки с JavaScript? В идеале, нам бы использовать @supports – однако вы можете догадаться, что не все браузеры поддерживают это свойство.

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

В некоторых случаях даже Flexbox может не справиться. Что если вам необходимо создать галерею с нечетным числом картинок, и вы бы хотели подсветить центральное изображение без отслеживания в JavaScript количества изображений на экране? Или таблица, отдельные столбцы в которой вам необходимо стилизовать по-другому в зависимости от количества столбцов, которые вмещаются при текущем разрешении экрана – например, при выборе авиакомпании или бронировании билетов в кино?

Все это распространяется и на другие модули, которые могут пострадать при динамическом добавлении или удалении элементов. Сможете ли вы не прибегать к чрезмерному количеству медиа запросов и обходным функциям на JavaScript?

Конечно, сможете. При таком раскладе лучше всего использовать количественные запросы. Если достаточно творчески подойти к созданию селекторов CSS, мы можем посчитать количество смежных элементов и применить стили к определенным из них, попадающим под условия. Используя эти запросы, мы готовим наш дизайн и проект в целом на будущее развитие и создаем условия для изящного роста.

Пример Количественных Запросов

Используя nth-last-child(), last-child и ~, мы можем создать селектор, удовлетворяющий нашим условиям. Если вас интересует подробный разбор работы данных селекторов, то Lea Verou, Heydon Pickering и Я написали статьи по данной теме. Ниже приведен пример количественного запроса, который сработает в том случае, если смежных элементов не меньше 5.

Можно пойти дальше и изменить запрос так, чтобы выбрать все элементы вплоть до определенного количества:

Еще дальше, мы можем установить границы применения стилей, если элементы находятся в определенном диапазоне.

Готовые решения для написания количественных запросов

Как видно по примерам выше, количественные запросы могут быть немного длинные и сложные. Именно поэтому я создал QuantityQueries.com: инструмент, который был мне нужен для помощи в создании и демонстрации количественных запросов для своих собственных проектов.

Написанный как эксперимент с библиотекой React, проект превратился в динамический инструмент для нашего сообщества веб-дизайнеров. Он помогает нам лучше понять, как лучше всего писать эти количественные запросы.

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

«Но мне необходимо поддерживать Браузер Х…»

Количественные запросы созданы с использованием современных свойств. Они будут работать во всех современных браузерах (и десктопные, и мобильные, включая Opera Mini 8) вплоть до IE9. Такие селекторы как nth-last-child(), ~ и last-child были представлены в спецификации CSS3, а first-child в CSS2.1. То есть вы можете смело использовать их в методике прогрессивного улучшения, но если вы вынуждены поддерживать старые браузеры, то обратитесь к библиотекам Selectivizr и Modernizr.

Применение на практике

Не стесняйтесь и добавляйте сайт в закладки и держите данную статью под рукой. Для каждого проекта существуют различные требования, и необходимо подстраиваться под потребности заказчика. И данный инструмент может пригодиться, когда вам необходимо создать достаточно сложный селектор и нет желания разбираться во всей его математике. Также вы можете воспользоваться тестером селекторов на структурных псевдоклассах CSS от Lea Verou, :nth tester и nth-test от CSS Tricks.

Если у вас есть желание улучшить данный инструмент или вы заметили какие-либо ошибки, вы можете помочь веб-приложению или сообщить о проблемах. Надеюсь, данный инструментарий будет полезен в ваших проектах!

Автор: Drew Minns

Источник: //www.smashingmagazine.com/

Редакция: Команда webformyself.

Метки: ,

Похожие статьи:

Комментарии Вконтакте: