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