Створення запитів кількості CSS з QQ Builder
Небагато розробників знають або використовують Кількість запитів CSS на своїх веб-сайтах. Це досить складна функція, але також корисна, коли ви мають різні елементи в контейнері.
Кількість запитів може змінити / оновити властивості CSS на основі попередньо визначені межі для дочірніх елементів. Наприклад, якщо у вас є більше трьох пунктів у списку ви можете зробити шрифт меншим, щоб зберегти кімнату. Інший приклад оновлення ширини посилання на основі кількість посилань у навігаційному меню.
Завдання подібні можуть швидко ускладнюється але завдяки Конструктор кількості запитів Вам не потрібно запам'ятовувати будь-який заплутаний синтаксис.
Ця веб-програма генерує весь код для вас щоб заощадити час. Тобі потрібно виберіть з трьох випадаючих меню які налаштовують кількість запитів. Вони працюють так:
- Селектор - який дочірній елемент (и) слід враховувати
- Тип запиту - вибрати між ними “максимум”, “принаймні”, або комбо “максимум” & “принаймні”
- Сума - Загальна кількість елементів для фільтрації
Це здається заплутаним в коді, але це дуже проста концепція. Кількість запитів дозволяє застосовувати властивості CSS на основі загальної кількості дочірніх елементів.
Так що ви можете додати певні стилі CSS коли є, скажімо, принаймні 4 дочірні елементи (4 або більше). Або, ви могли б додавати стилі лише тоді, коли є максимум 4 дочірні елементи (0-4 дітей).
Комбо селектор дозволяє визначити точно, скільки мінімальних і максимальних дітей необхідні для відображення певних властивостей CSS.
У прикладі на скріншоті вище, я встановив всього “максимум” елементів 2. Це означає, що у мене 0, 1 або 2 дітей блоки червоного кольору. Якщо я додам ще одного, щоб отримати 3 дітей, то всі блоки стануть синіми.
Якщо ви не знаєте, що відбувається, ви можете клацніть маленьке вікно інформації на бічній панелі. Це викличе модальне вікно з фактами та синтаксисом пояснення функції запиту кількості.
Це дуже зручний інструмент для як початківців, так і досвідчених розробників. Це буде економити багато часу у довгостроковій перспективі, і це допоможе вам створювати більш динамічні веб-сайти.
Щоб розпочати роботу, відвідайте веб-сайт будівельника QQ і розпочати налаштування функцій. Ти можеш іграшка з результатами і перевірте попередній перегляд у прямому ефірі на правій панелі, щоб дізнатися, як ваші зміни впливають на дочірні елементи.
Цей проект також є доступні на GitHub так що ви вільні перевірте вихідний код або навіть завантажити копію локально. І якщо ви любите це додаток або є які-небудь питання / пропозиції для творця Дрю Мінна, ви можете стріляти в нього швидким твіт @ drewisthe.
