Генерация количественных запросов CSS с помощью QQ Builder

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

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

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Читайте также: Используйте количественные запросы, чтобы сделать CSS ориентированным на количество

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

  • Селектор – какой дочерний элемент (элементы) должен учитываться
  • Тип запроса – выберите «максимум», «минимум» или сочетание «максимум» и «минимум»
  • Сумма – общее количество элементов для фильтрации

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

Таким образом, вы можете добавить определенные стили CSS, когда, скажем, по крайней мере 4 дочерних элемента (4 или более). Или вы можете добавлять стили только тогда, когда есть в большинстве 4 дочерних элемента (0-4 детей).

Комбинированный селектор позволяет вам точно определить, сколько минимальных и максимальных дочерних элементов необходимо для отображения определенных свойств CSS.
окно запросовВ примере на снимке экрана выше я установил общее «максимум» элементов равным 2. Это означает, что когда у меня 0, 1 или 2 дочерних элемента, блоки красного цвета. Если я добавлю еще одного, чтобы получить 3 детей, тогда все блоки станут синими.

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

Чтобы начать, посетите Сайт QQ Builder и начните настраивать свои функции. Вы можете поиграть с результатами и проверить предварительный просмотр на правой панели, чтобы узнать, как ваши изменения влияют на дочерние элементы.

Этот проект также доступен на GitHub так что вы можете проверить исходный код или даже скачать копию локально. И если вам нравится это приложение или у вас есть какие-либо вопросы / предложения для создателя Дрю Миннса, вы можете написать ему быстрый твит @drewisthe,

Читайте также: Полное руководство по псевдоклассам CSS

            <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *