במשך שנים רבות, צף CSS כבר מרכיב דקיק, אך הכרחי, ביצירת פריסות אתר. אם העיצוב שלך נקרא עמודות מרובות, אתה פנה צף . הבעיה עם שיטה זו היא, כי למרות המצאה מדהימה כי מעצבי אינטרנט / מפתחים הראו ביצירת פריסות האתר מורכבים, צף CSS מעולם לא התכוון באמת לשמש בדרך זו.
בעוד צפים ו CSS מיקום הם בטוח יש מקום בעיצוב אתרים במשך שנים רבות, טכניקות פריסה חדש יותר כולל CSS רשת ו Flexbox עכשיו נותן מעצבי אינטרנט דרכים חדשות ליצור פריסות האתר שלהם. עוד טכניקה חדשה פריסה המציג הרבה פוטנציאל הוא CSS עמודות מרובות.
CSS עמודות כבר בסביבה כבר כמה שנים, אבל חוסר תמיכה בדפדפנים ישנים (בעיקר גרסאות ישנות יותר של Internet Explorer) שמרה הרבה אנשי מקצוע באינטרנט באמצעות סגנונות אלה בעבודתם הייצור.
עם סיום התמיכה באותן גירסאות ישנות יותר של IE, מעצבי אתרים אחדים מתנסים כעת באפשרויות פריסת CSS חדשות, עמודות CSS כלולות, ומגלים שיש להם שליטה רבה יותר בגישות חדשות אלה מאשר עם צפים.
היסודות של עמודות CSS
כפי שהשם מרמז, CSS מרובים עמודות (הידוע גם בשם CSS3 רב טור פריסה) מאפשר לך לפצל תוכן למספר מוגדר של עמודות. המאפיינים הבסיסיים ביותר של CSS שבהם תשתמש הם:
- ספירת עמודות
- פער עמודות
עבור ספירת עמודות, אתה מציין את מספר העמודות הרצוי. פער העמודות יהיה המרזבים או המרווחים בין עמודות אלה. הדפדפן ייקח ערכים אלה ויפצל את התוכן באופן שווה למספר העמודות שתציין.
דוגמה נפוצה של עמודות CSS מרובות בפועל היא לפצל בלוק של תוכן טקסט למספר עמודות, בדומה למה שתראה במאמר בעיתון. נניח שיש לך את סימון ה- HTML הבא (שים לב שלמטרות לדוגמה, אני רק מתחיל את תחילתו של פסקה אחת, בעוד שבפועל סביר להניח שיהיו מספר פסקאות של תוכן בסימון זה):
כותרת המאמר שלך
תארו לעצמכם הרבה סעיפים של טקסט כאן ...
אם כתבת אז סגנונות CSS אלה:
.content {-moz-column-count: 3; -webkit-column-count: 3; ספירת עמודות: 3; -Moz-column-gap: 30px; -webkit-column-gap: 30px; column-gap: 30px; }כלל CSS זה יפצל את "תוכן" החלוקה לשלוש עמודות שוות עם פער של 30 פיקסלים ביניהם. אם אתה רוצה שתי עמודות במקום 3, אתה פשוט לשנות את הערך ואת הדפדפן היה לחשב את רוחב חדש של עמודות אלה כדי לפצל את התוכן באופן שווה. שימו לב כי אנו עושים שימוש קודם, קודם כל את ההצהרות שאינם מקודדים.
קל כמו זה, השימוש בו בדרך זו מוטלת בספק עבור השימוש באתר. כן, אתה יכול לפצל חבורה של תוכן לתוך מספר עמודות, אבל זה לא יכול להיות חוויית הקריאה הטובה ביותר עבור האינטרנט, במיוחד אם גובה של עמודות אלה נופל מתחת לקפל את המסך.
הקוראים יצטרכו לגלול מעלה ומטה כדי לקרוא את התוכן המלא. עם זאת, מנהל עמודות CSS הוא קל כפי שאתה רואה כאן, והוא יכול לשמש כדי לעשות זאת הרבה יותר מאשר לפצל את התוכן של כמה פסקאות - זה יכול, אכן, לשמש פריסה.
פריסה עם עמודות CSS
נניח שיש לך דף אינטרנט עם אזור תוכן הכולל 3 עמודות של תוכן. זהו פריסת אתר אופיינית מאוד, וכדי להשיג אותם 3 עמודות, אתה בדרך כלל לצוף את החטיבות כי הם פנימה עם CSS מספר עמודות, זה כל כך הרבה יותר קל.
הנה כמה דוגמאות HTML:
חדשות אחרונות
התוכן יגיע לכאן ...
תוכן יגיע לכאן ...
אירועים קרובים
התוכן ילך לכאן ...
p>
ה- CSS כדי ליצור עמודות מרובות אלה מתחיל במה שראית בעבר:
.content {-moz-column-count: 3; -webkit-column-count: 3; ספירת עמודות: 3; -Moz-column-gap: 30px; -webkit-column-gap: 30px; column-gap: 30px; }עכשיו, האתגר כאן הוא, שכן הדפדפן רוצה לפצל תוכן זה באופן שווה, כך שאם אורך התוכן של חטיבות אלה הוא שונה, כי הדפדפן יהיה למעשה לפצל את התוכן של חלוקה בודדת, הוספת תחילתו של אותו עמודה אחת ו ולאחר מכן להמשיך לתוך אחר (אתה יכול לראות את זה באמצעות קוד זה כדי להפעיל ניסוי ולהוסיף אורכים שונים של תוכן בתוך כל חלוקה)!
זה לא מה שאתה רוצה. אתה רוצה כל אחד מחלוקות אלה ליצור עמוד נפרד, לא משנה כמה גדול או קטן התוכן של הדיוויזיה הפרטית עשויה להיות, אתה לא רוצה את זה לפצל. ניתן להשיג זאת על ידי הוספת שורה נוספת זו של CSS:
.content div {display: inline-block; }זה יאלץ אותם חטיבות כי הם בתוך "תוכן" להישאר שלם גם כאשר הדפדפן מחלק את זה לתוך מספר עמודות. אפילו יותר טוב, כי אנחנו לא נותנים שום דבר כאן רוחב קבוע, עמודות אלה באופן אוטומטי גודל כמו הדפדפן גודל, מה שהופך אותם יישום אידיאלי עבור אתרי אינטרנט תגובה . עם זה "inline-block" סגנון במקום, כל אחד 3 חטיבות יהיה עמודה נפרדת של תוכן.
שימוש בעמודה-רוחב
יש עוד נכס מלבד "טור לספור", כי אתה יכול להשתמש, בהתאם לצרכים הפריסה שלך, זה עשוי להיות בחירה טובה יותר עבור האתר שלך. זהו "רוחב העמודה". באמצעות אותו סימון HTML כפי שמוצג קודם לכן, נוכל לעשות זאת בעזרת CSS שלנו:
.content {-moz-column-width: 500px; -webkit-column-width: 500px; column-width: 500px; -Moz-column-gap: 30px; -webkit-column-gap: 30px; column-gap: 30px; } .content div {display: inline-block; }הדרך שבה זה עובד היא כי הדפדפן משתמש "רוחב העמודה" כמו הערך המרבי של עמודה זו. אז אם חלון הדפדפן הוא פחות מ 500 פיקסלים רחב, אלה 3 חטיבות יופיע בעמודה אחת, אחד העליון של אחר. זהו פריסה אופיינית המשמשת לפריסות של מסך נייד / קטן.
ככל שרוחב הדפדפן יגדל ויהיה גדול מספיק כדי להתאים 2 עמודות יחד עם הפערים בעמודה שצוינו, הדפדפן יעבור באופן אוטומטי מפריסת עמודות אחת לשני עמודות. לשמור על הגדלת רוחב המסך ובסופו של דבר, תקבל עיצוב 3 עמודה, עם כל אחד משלוש חטיבות שלנו מוצג בעמודה שלהם. שוב, זוהי דרך נהדרת לקבל כמה פריסות ידידותיות לשימוש , מרובות מכשירים , ואתה אפילו לא צריך להשתמש בשאילתות מדיה כדי לשנות את סגנונות הפריסה!
תכונות עמודות אחרות
בנוסף למאפיינים הכלולים כאן, יש גם מאפיינים עבור "כלל עמודה", כולל ערכי צבע, סגנון ורוחב המאפשרים לך ליצור כללים בין העמודות שלך. אלה יהיו בשימוש במקום גבולות אם אתה רוצה להיות כמה שורות המפרידות בין העמודות שלך.
זמן לניסוי
נכון לעכשיו, CSS מרובים פריסת עמודה נתמך היטב. עם תחיליות, למעלה מ -94% ממשתמשי האינטרנט יוכלו לראות את הסגנונות האלה, ואותה קבוצה לא נתמכת תהיה בגירסאות ישנות בהרבה של Internet Explorer אשר ייתכן שאינך תומך בהן בכל מקרה.
עם רמה זו של תמיכה עכשיו במקום, אין סיבה לא להתחיל ניסויים עם עמודות CSS ו פריסת סגנונות אלה באתרי הייצור מוכן. תוכל להתחיל את הניסויים שלך באמצעות HTML ו- CSS המוצגים במאמר זה ולשחק עם ערכים שונים כדי לראות מה יעבוד בצורה הטובה ביותר עבור צורכי הפריסה של האתר שלך.