Générer des requêtes de quantité CSS avec QQ Builder
Peu de développeurs connaissent ou utilisent Requêtes de quantité CSS sur leurs sites Web. C'est une fonctionnalité assez complexe mais utile aussi lorsque vous avoir divers articles dans un conteneur.
Une requête de quantité peut changer / mettre à jour les propriétés CSS basé sur limites prédéfinies pour les éléments enfants. Par exemple, si vous avez plus de trois articles dans une liste, vous pouvez réduire la taille de la police pour économiser de la place. Un autre exemple est mettre à jour la largeur d'un lien basé sur nombre de liens dans un menu de navigation.
Des tâches comme celles-ci peuvent se compliquer rapidement mais grâce à la Générateur de requêtes quantitatives vous n'avez pas besoin de mémoriser une syntaxe déroutante.
Cette application web génère tout le code pour vous gagner du temps. Tu dois choisir parmi trois menus déroulants qui personnalise votre requête de quantité. Ils travaillent comme ça:
- Sélecteur - quels éléments enfants doivent être comptés
- Type de requête - choisir entre “au plus”, “au moins”, ou un combo de “au plus” Et “au moins”
- Montant - nombre total d'éléments à filtrer
Cela semble déroutant dans le code mais c'est un concept très simple. Les requêtes de quantité vous permettent d'appliquer des propriétés CSS basé sur le nombre total d'éléments enfants.
Afin que vous puissiez ajouter certains styles CSS quand il y a, dis, au moins 4 éléments enfants (4 ou plus). Ou vous pourriez ajouter des styles uniquement lorsque il y a au plus 4 éléments enfants (0 à 4 enfants).
Le sélecteur de liste déroulante vous permet de définir exactement combien d'enfants minimum et maximum sont nécessaires pour afficher certaines propriétés CSS.
Dans l'exemple de la capture d'écran ci-dessus, j'ai défini le paramètre total “au plus” articles à 2. Cela signifie que lorsque j'ai 0, 1 ou 2 enfants, les blocs sont rouges. Si j'en ajoute un de plus pour avoir 3 enfants, tous les blocs deviennent bleus.
Si vous ne savez pas ce qui se passe, vous pouvez cliquez sur la petite boîte d'information dans la barre latérale. Ça va élever un fenêtre modale avec faits et syntaxe expliquer la fonctionnalité de requête de quantité.
C’est un outil très pratique pour développeurs débutants et expérimentés. Ça va gagner beaucoup de temps à long terme et ça va vous aider créer des sites web plus dynamiques.
Pour commencer, visitez le site Web QQ Builder et commencez à personnaliser vos fonctionnalités. Vous pouvez jouet avec les résultats et vérifier l'aperçu en direct dans le volet de droite pour savoir comment vos modifications affectent les éléments enfants.
Ce projet est aussi disponible sur GitHub alors vous êtes libre de vérifier le code source ou même télécharger une copie localement. Et si vous aimez cette application ou si vous avez des questions / suggestions pour le créateur Drew Minns, vous pouvez lui envoyer un tweet rapide @drewisthe.
