Генерация количественных запросов CSS с помощью QQ Builder
Мало кто из разработчиков знает или использует Количество запросов CSS на своих сайтах. Это довольно сложная функция, но также полезная, когда вы есть разные предметы в контейнере.
Запрос количества может изменить / обновить свойства CSS основанный на предопределенные ограничения для дочерних элементов. Например, если у вас есть более трех предметов в списке вы можете уменьшить шрифт, чтобы сэкономить место. Другой пример обновление ширины ссылки на основе количество ссылок в меню навигации.
Задачи, подобные этим, могут быстро усложняются но благодаря Построитель количественных запросов Вам не нужно запоминать какой-либо запутанный синтаксис.
Это веб-приложение генерирует весь код для вас экономить время. Вам нужно выбрать из трех выпадающих меню которые настраивают ваш запрос количества. Они работают так:
- селектор - какой дочерний элемент (элементы) должен учитываться
- Тип запроса - выберите между “в большинстве”, “по крайней мере”, или комбо из “в большинстве” & “по крайней мере”
- Количество - общее количество элементов для фильтрации
Это кажется странным в коде, но это действительно простая концепция. Количество запросов позволяет применять свойства CSS на основе общего количества дочерних элементов.
Так что вы можете добавить определенные стили CSS когда есть, скажем, по крайней мере 4 дочерних элемента (4 или более). Или вы могли бы добавлять стили только когда есть в большинстве 4 дочерних элемента (0-4 детей).
Комбинированный селектор позволяет вам определить сколько именно минимальных и максимальных детей необходимы для отображения определенных свойств CSS.
В примере на скриншоте выше, я установил Всего “в большинстве” Предметы к 2. Это означает, что когда у меня 0, 1 или 2 дочерних элемента, блоки красного цвета. Если я добавлю еще одного, чтобы получить 3 детей, тогда все блоки станут синими.
Если вы не знаете, что происходит, вы можете нажмите на маленькое информационное окно в боковой панели. Это поднимет модальное окно с фактами и синтаксисом объясняя функцию количественного запроса.
Это очень удобный инструмент для как начинающие, так и опытные разработчики. Это будет сэкономить много времени в конце концов, и это поможет вам создавать более динамичные сайты.
Чтобы начать, посетите веб-сайт QQ Builder и начать настраивать свои функции. Вы можете игрушка с результатами а также проверить предварительный просмотр в реальном времени на правой панели, чтобы узнать, как ваши изменения влияют на дочерние элементы.
Этот проект также доступно на GitHub так что вы можете проверить исходный код или даже скачать копию локально. И если вам нравится это приложение или у вас есть какие-либо вопросы / предложения для создателя Дрю Миннса, вы можете застрелить его быстрым твитом @drewisthe.
