מתקדם תיבת סימון עם סגנון CSS רשת

ה מודול פריסת רשת יכול לא רק לפתור ממותה של בעיה הפריסה, אלא גם כמה בעיות טובות הישן הישן שאנחנו כבר התמודדות עם זמן רב, כמו עיצוב תווית תיבת סימון.

אמנם יש שיטה פשוטה יחסית כדי לסמן את התווית כאשר היא מופיעה לאחר את תיבת הסימון, זה לא כל כך קל כאשר התווית מופיעה לפני זה.

עיצוב תיבת סימון ללא רשת CSS

עיצוב תווית לאחר תיבת סימון היא משהו שאנחנו מפתחים עושים מאז שקראנו על זה איפשהו. טכניקה זו היא אחת הדוגמאות הראשיות והוותיקות של הדינמיקה החזקה שיכולה CSS להחזיק.

הנה הקוד שאתה כבר מכיר, כי מסמן תווית לאחר תיבת סימון מסומנתYou

  תווית עבור תיבת הסימון 

 קלט: מסומן + תווית / * style me * / 

א תווית מנוסח לאחר תיבת סימון עשוי להיראות כך (עם זאת, אתה יכול להשתמש בכללים סגנון אחרים גם כן):

קוד CSS לעיל משתמש אחים קרובים מסומן על ידי + מפתח. כאשר תיבת סימון נמצאת ב : מסומנת מדינה, יסוד לאחר זה (בדרך כלל תווית) יכול להיות מנוסח בשיטה זו.

כזה טכניקה פשוטה ויעילה! מה יכול אולי להשתבש עם זה? שום דבר - עד שאתה רוצה להציג את התווית לפני תיבת הסימון.

אחותו הקרובה בוחר את האלמנט הבא; זה אומר התווית חייבת לבוא לאחר תיבת הסימון בקוד המקור של HTML.

אז, כדי להפוך את התווית להופיע לפני תיבת הסימון השייכות על המסך, אנחנו לא יכולים פשוט להעביר אותו לפני תיבת הסימון בקוד המקור, כמו בורר לשעבר לא קיים ב- CSS.

מה שמשאיר רק אפשרות אחת: מיקום מחדש של תיבת הסימון והתווית באמצעות שינוי צורה או עמדה או שולים או נכס CSS אחר עם איזשהו כוח telekinetic, כך התווית מופיע בצד שמאל של תיבת הסימון על המסך.

בעיות בשיטה המסורתית

אין כלום בעיקר לא בסדר עם הטכניקה הנ"ל אבל זה יכול להיות לא יעיל במקרים מסוימים. אני מתכוון המקרים שבהם עמדות מחדש של תיבת הסימון ואת התווית לא עובד יותר.

חשוב להגיב, לדוגמה. ייתכן שיהיה עליך לשנות את הגודל או למקם מחדש את תיבת הסימון בהתאם להתקן שבו הוא מוצג. כאשר זה יקרה, תוכל צריך למקם מחדש את התווית גם כן, כיוון שלא תתבצע התאמה אוטומטית לתווית בתגובה למיצוב / שינוי גודל תיבת הסימון.

אנחנו יכולים לחסל את החסרון הזה אם רק נוכל לספק כמה פריסה מוצק עבור תיבת הסימון ואת התווית, במקום למקם אותם על הדף.

אבל, כמעט כל מערכות הפריסה, כגון טבלאות או עמודות, דורשים ממך הוסף את התווית לפני תיבת הסימון בקוד המקור כדי להפוך אותו להופיע באותו אופן על המסך. זה משהו שאנחנו לא רוצים לעשות כי הבא בורר רכיב על התווית יפסיק לעבוד.

CSS רשת, לעומת זאת, היא מערכת הפריסה כי הוא לא תלוי במיקום / סדר האלמנטים בקוד המקור.

היכולות reordering של פריסת הרשת להשפיע במכוון רק עיבוד חזותי, עוזב את סדר הדיבור ואת הניווט על פי צו המקור. זה מאפשר למחברים לתפעל את המצגת החזותית תוך השארת סדר המקור שלם ... - CSS מודול פריסת רשת רמה 1, W3C

לפיכך, רשת CSS הוא פתרון אידיאלי סגנון התווית שמופיעה לפני תיבת הסימון.

עיצוב תיבת סימון עם רשת CSS

נתחיל עם קוד HTML. סדר תיבת הסימון והתווית יישאר כפי שהיה קודם. אנחנו רק להוסיף את שניהם לרשת.

 
  תווית עבור תיבת הסימון 
 

להלן CSS:

 #cbgrid display: grid; grid-template-areas: "left right"; רוחב: 150px;  קלט [type = checkbox] grid-area: right;  תווית grid-area: left;  

אני לא אלך לעומק על איך רשת ה- CSS עובד, כפי שכבר כתבתי מאמר מפורט בנושא, כי אתה יכול לקרוא כאן. כמה יסודות, עם זאת: לתצוגה: רשת הרכיב הופך רכיב למכל רשת, אזור רשת מזהה את אזור הרשת שאלמנט שייך אליו רשת-תבנית-אזורים טפסים פריסת רשת, המורכב מאזורי רשת שונים.

בקוד לעיל, יש שני שטחי רשתYou "שמאלה" ו "ימין". הם ממציאים שתי עמודות של שורת רשת. תיבת הסימון שייכת ל "ימין" אזור ואת התווית "שמאלה". הנה איך הם נראים על המסךYou

מכיוון שלא שינינו את המיקום היחסי של תיבת הסימון ואת התווית בקוד המקור, אנו יכולים עדיין להשתמש compinator אח צמודYou

 קלט: מסומן + תווית / * style me * / 

שים לב כי פריט רשת הוא תמיד חסומים; הוא מופיע עם תיבת סביב המכונה רשת ברמת הרשת. אם אתה לא רוצה את זה, למשל עבור תווית, לשים עטיפה על פריט זה (לעטוף אותו אלמנט אחר) ו להפוך את העטיפה לתוך אזור הרשת.

זהו זה, אנשים. רשת CSS מקווה לעזור לך מסמר את הפריסות של תיבות אלה חצוף.