כיצד להשתמש בעמודות CSS עבור פריסות אתרים מרובות עמודות

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

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

עמודות CSS קיימות כבר כמה שנים, אך חוסר תמיכה בדפדפנים ישנים (בעיקר ישנים יותר) גירסאות של Internet Explorer) מנע מאנשי מקצוע רבים באינטרנט להשתמש בסגנונות אלה בהפקתם עֲבוֹדָה.

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

היסודות של עמודות CSS

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

• ספירת עמודות
• פער העמודים

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

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

הכותרת של המאמר שלך.

דמיין כאן הרבה פסקאות טקסט ...

אם אז כתבת את סגנונות CSS אלה:

. תוכן {
ספירת עמודים-מוז: 3;
-ספירת עמודים ב- webkit: 3;
ספירת עמודות: 3;
פער moz-column: 30px;
-webkit- פער פער: 30 פיקסלים;
פער עמודה: 30 פיקסלים;
}

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

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

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

פריסה עם עמודות CSS

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

הנה כמה דוגמאות ל- HTML:

מהבלוג שלנו.

התוכן יעבור לכאן ...

אירועים קרובים.

התוכן יעבור לכאן ...

CSS להכנת עמודות מרובות אלה מתחיל במה שראית בעבר:

. תוכן {
ספירת עמודים-מוז: 3;
-ספירת עמודים ב- webkit: 3;
ספירת עמודות: 3;
פער moz-column: 30px;
-webkit- פער פער: 30 פיקסלים;
פער עמודה: 30 פיקסלים;
}

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

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

. div דיוונט {
תצוגה: בלוק מוטבע;
}

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

באמצעות רוחב עמודות

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

. תוכן {
רוחב עמוד-מוז: 500 פיקסלים;
-webkit-column-width: 500px;
רוחב העמודה: 500 פיקסלים;
פער moz-column: 30px;
-webkit- פער פער: 30 פיקסלים;
פער עמודה: 30 פיקסלים;
}
. div דיוונט {
תצוגה: בלוק מוטבע;
}

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

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

מאפייני עמודות אחרים

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

הגיע הזמן להתנסות

נכון לעכשיו, פריסת עמודות מרובות של CSS נתמכת היטב. עם קידומות, מעל 94% ממשתמשי האינטרנט יוכלו לראות את הסגנונות הללו, וקבוצה לא נתמכת זו באמת תהיה רק ​​גרסאות ישנות יותר של Internet Explorer אשר ממילא אינן נתמכות יותר.

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