צור CSS שאילתות כמות עם בונה QQ
כמה מפתחים יודעים או משתמשים שאילתות כמות CSS באתרי האינטרנט שלהם. זוהי תכונה מורכבת למדי, אבל גם שימושי כאשר אתה יש פריטים משתנים במיכל.
שאילתת כמות יכולה שינוי / עדכון CSS מאפיינים מבוסס על גבולות מוגדרים מראש עבור רכיבי ילדים. לדוגמה, אם יש לך יותר משלושה פריטים ברשימה אתה יכול להפוך את הגופן קטן יותר כדי לשמור מקום. דוגמה נוספת היא עדכון רוחב הקישור מבוסס על ה מספר קישורים בתפריט ניווט.
משימות כאלה יכולות להסתבך מהר אבל בזכות כמות שאילתה בונה אתה לא צריך לשנן כל תחביר מבלבל.
יישום אינטרנט זה מייצר את כל הקוד בשבילך לחסוך זמן. אתה צריך בחר מתוך שלושה תפריטים נפתחים אשר להתאים אישית את השאילתה כמות. הם עובדים כך:
- בורר - איזה אלמנט ילדים יש לספור
- סוג שאילתה - לבחור בין “הכי הרבה”, “לפחות”, או משולבת של “הכי הרבה” & “לפחות”
- כמות - סך כל הפריטים לסנן
זה נראה מבלבל בקוד אבל זה רעיון פשוט. שאילתות כמות מאפשרות לך להחיל מאפייני CSS בהתבסס על המספר הכולל של מרכיבי הילד.
אז אתה יכול הוסף סגנונות CSS מסוימים כשיש, למשל, לפחות 4 אלמנטים של הילד (4 או יותר). או, אתה יכול הוסף סגנונות רק מתי יש הכי הרבה 4 אלמנטים של הילד (0-4 ילדים).
בורר הבחירה מאפשר להגדיר בדיוק כמה ילדים מינימום ומקסימום יש צורך להציג מאפיינים מסוימים CSS.
בדוגמה שבצילום המסך למעלה, הגדרתי את סך הכל “הכי הרבה” פריטים 2. זה אומר כאשר יש לי 0, 1, או 2 ילדים הבלוקים הם אדומים. אם אני מוסיף עוד אחד כדי לקבל 3 ילדים אז כל אבני להפוך כחול.
אם אין לך מושג מה קורה אתה יכול לחץ על תיבת המידע הקטנה בסרגל הצד. זה יביא חלון מודאלי עם עובדות ותחביר המסביר את תכונת השאילתה כמות.
זהו כלי שימושי מאוד עבור הן למתחילים והן למפתחים מנוסים. זה יהיה לחסוך הרבה זמן בטווח הארוך וזה יעזור לך ליצור אתרים דינמיים יותר.
כדי להתחיל, בקר באתר בונה QQ ו התחל להתאים אישית את התכונות שלך. אתה יכול צעצוע עם התוצאות ו לבדוק את התצוגה המקדימה בחלונית השמאלית כדי ללמוד כיצד השינויים משפיעים על האלמנטים של הילד.
פרויקט זה הוא גם זמין ב- GitHub אז אתה חופשי לבדוק את קוד המקור או אפילו הורד עותק מקומי - -. ואם אתה אוהב את האפליקציה הזאת או שיש לך שאלות / הצעות עבור היוצר דרו מינס אתה יכול לירות בו ציוץ @ drewisthe מהירה.
