תכונה פריצה פנימהמגדיר את העקרונות לסידור מעברי עמודים ועמודות בתוך האלמנט הנוכחי. כברירת מחדל, מעברי עמוד או עמודות ממוקמים באופן אוטומטי ואינם עוברים בירושה מאלמנטים אב. ערך ההימנעות מעמוד משמש רק בעת עיצוב מסמכים עם דפים, כגון בעת הדפסה, ומתעלמים ממנו עבור תצוגות ללא דפי, כגון כשהן מוצגות בדפדפן. הערך הימנעות מעמודה משמש לטקסט מרובה עמודות.
ערכים חוקיים
- CSS2 CSS3 אוטומטי- מעבר עמוד או עמודה אוטומטי לפני הרכיב הנוכחי (ברירת מחדל)
- CSS2 CSS3 לְהִמָנַע
- CSS3 הימנעות-דף- בטל מעבר עמוד בתוך האלמנט הנוכחי
- CSS3 הימנעות-עמודה- ביטול הפסקת העמודות בתוך האלמנט הנוכחי
דוגמאות לשימוש
פריצה פנימה: אוטומטי; - התפלגות אחידה
חלוקה אחידה של תוכן בין עמודות, שבה הפסקות ממוקמות אוטומטית במקומות המתאימים ביותר בתוך או בין אלמנטים כלשהם. בהתפלגות שווה, גובה העמודות זהה בערך עם צפיפות טקסט אחידה פחות או יותר.
סגנון (ספירת עמודות: 3; פער עמודות: 2em; כלל עמודות: 1px מוצק #666; )
טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט
פריצה פנימה: למנוע-עמודה; - בטל מעברי עמודות
סגנון (ספירת עמודות: 3; עמודה-פער: 2em; עמודה-כלל: 1px מוצק #666; ) .style div ( פריצה: avoid-column; )
בלוק 1טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט
בלוק 2טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט
בלוק 3טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט טקסט
מאפיין הפריצה מוגדר במפרט מודול פריסת עמודות מרובות של CSS 3, חל על אלמנטים ברמת הבלוק, והוא תקף בכל מדיית העמוד, הערך שלו אינו עובר בירושה מאלמנט אב בהיררכיית המסמכים, וברירת המחדל היא אוטומטי. הנכס נתמך כרגע בכל הדפדפנים הגדולים.
ראה גם:
- break-after - כללים להגדרת מעבר עמודה או מעבר עמוד לאחר אלמנט
- break-before - כללים להגדרת מעבר עמודה או מעבר עמוד לפני אלמנט
- -webkit-column-break-after - כללים להגדרת מעבר עמודה לאחר אלמנט
- -webkit-column-break-before - כללים להגדרת מעבר עמודה לפני אלמנט
- -webkit-column-break-inside - כללים להגדרת מעבר עמודה בתוך אלמנט
מודול עמודות CSS3מתאר פריסה מרובת עמודות המאפשרת לך לארגן תוכן כך שיתפרש על פני מספר מיכלים אנכיים, בדומה לעיתון או מגזין. עמודות יכולות להכיל כותרות, טקסט, טבלאות, תמונות וכל אלמנט מוטבע אחר.
דגם רב עמודים
תמיכה בדפדפן
כְּלוֹמַר: 10
קָצֶה: 12
פיירפוקס: 52, 2 -מוז
Chrome: 50, 4 -webkit-
ספארי: 9, 3.1 -webkit-
אוֹפֵּרָה: 37, 11.5 -webkit-
iOS Safari: 9, 3.2 -webkit-
דפדפן UC עבור אנדרואיד: 11.8
Chrome עבור אנדרואיד: 73
אינטרנט סמסונג: 5, 4 -webkit-
הפוסט הישן
24 בנובמבר 2012
15 הערים הקטנות והמקסימות ביותר באנגליה
1. ברוויק-על-טוויד
ברוויק נוסדה כיישוב אנגלו-סכסי בתקופת ממלכת נורת'ומבריה, שסופחה לאנגליה במאה ה-10. האזור היה במשך יותר מ-400 שנה מרכזי במלחמות הגבול ההיסטוריות בין ממלכות אנגליה וסקוטלנד, וכמה פעמים החזקה של ברוויק החליפה ידיים בין שתי הממלכות. הפעם האחרונה בה החליף ידיים הייתה כאשר ריצ'רד מגלוסטר לקח אותו מחדש עבור אנגליה בשנת 1482. עד היום רבים מתושבי ברוויק חשים זיקה קרובה לסקוטלנד.
כיום, ברוויק-אפון-טוויד זוכה לביקורים רבים בשל ההיסטוריה הנראית לעין: חומות עיר מימי הביניים, חומות אליזבתניות, חורבות טירה מהמאה ה-13, 'הגשר הישן' מהמאה ה-17, בית העירייה, צריף הצבא הקדום ביותר בבריטניה, המלון הצפוני ביותר באנגליה, בין היתר. .
2. שיפון
שיפון עתיק הוא כולו רחובות מרוצפי אבן ושורות נפילות של בתים ליד הים. במקור חלק מקונפדרציית נמלי סינק, חמש ערים אסטרטגיות החשובות למטרות מסחר וצבא בימי הביניים, כיום שיפון הוא למעשה מוזיאון חי. טירת שיפון, הידועה בכינויו מגדל איפר, נבנתה בשנת 1249 על ידי הנרי השלישי כדי להגן מפני פשיטות תכופות של הצרפתים; ישן עוד יותר, St. כנסיית מרי משקיפה על העיר. Rye נמצא גם במרחק של דקות ספורות בלבד מאחד החופים המפורסמים ביותר של אנגליה, Camber Sands, מגרש משחקים באורך שני מיילים לגולשי עפיפונים וחובבי חוף.
איור 1. דוגמה לפריסה מרובת עמודות
1. מספר ורוחב העמודות
קביעת מספר ורוחב העמודות היא בסיסית בעת בניית פריסה מרובת עמודות. המאפיינים ספירת עמודות ורוחב עמודות משמשים לקביעת מספר ורוחב העמודות.
המאפיין השלישי, עמודות, הוא מאפיין קיצור שקובע את הרוחב ומספר העמודות בבת אחת.
גורמים אחרים, כגון מעברי עמודות מפורשים, תוכן והגבלות גובה, יכולים להשפיע על המספר והרוחב של העמודות בפועל.
1.1. רוחב עמודה: מאפיין רוחב עמודה
המאפיין column-width מציין את הרוחב המינימלי שכל עמודה צריכה לתפוס.
הנכס אינו עובר בירושה.
תחביר
רוחב עמודה: אוטומטי; רוחב עמודה: 100 פיקסלים; רוחב עמודה: 10em; רוחב עמודה: 3.3vw; רוחב העמודה: ירושה; רוחב העמודה: ראשוני;
1.2. מספר עמודות: מאפיין ספירת עמודות
המאפיין ספירת עמודות מתאר את מספר העמודות, והרוחב שלהן יחושב על סמך רוחב השטח הפנוי. אם רוחב העמודות מצוין במקביל לספירת העמודות , אזי ספירת העמודות תיחשב כמספר העמודות המרבי.
הנכס אינו עובר בירושה.
תחביר
ספירת עמודות: אוטומטי; ספירת עמודות: 2; ספירת עמודות: ירושה; ספירת עמודות: ראשונית;
1.3. הגדרת עמודות באמצעות מאפיין עמודות בודדות
מאפיין העמודות הוא מאפיין קיצור להגדרת רוחב העמודות וספירת העמודות . ערכים שהושמטו מוגדרים לערכים ההתחלתיים שלהם.
הנכס אינו עובר בירושה.
תחביר
עמודות: 12em; /*-עמודה-רוחב: 12em; ספירת עמודות: אוטומטי */ עמודות: אוטומטי 12em; /*-עמודה-רוחב: 12em; ספירת עמודות: אוטומטי */ עמודות: 2; /*-עמודה-רוחב: אוטומטי; ספירת עמודות: 2 */ עמודות: 2 אוטומטי; /*-עמודה-רוחב: אוטומטי; ספירת עמודות: 2 */ עמודות: אוטומטי; /*-עמודה-רוחב: אוטומטי; ספירת עמודות: אוטומטי */ עמודות: אוטומטי אוטומטי; /*-עמודה-רוחב: אוטומטי; ספירת עמודות: אוטומטי */ עמודות: ירושה; עמודות: ראשונית;
2. רווחים בין עמודים וקווי הפרדה
רווחי עמודות וקווי הפרדה ממוקמים בין עמודים במיכל רב עמודים אחד. אורך הרווחים והמפרידים שווה לגובה העמודה. פערים בעמודות תופסים מקום, כלומר, הם דוחקים תוכן בעמודות סמוכות.
קו ההפרדה מצויר באמצע הרווח שבין העמודים, לא תופס מקום. כלומר, הנוכחות או העובי של קו ההפרדה לא ישנו את המיקום של שום דבר אחר.
הקווים צבועים ממש מעל גבול האלמנט הרב-עמודי. אם לרכיב יש אזור שניתן לגלול, קווי ההפרדה גוללים יחד עם העמודות. קווי הפרדה מופיעים רק בין שתי עמודות שיש בהן תוכן.
2.1. פערים בין עמודות: מאפיין עמודות-פער
המאפיין column-gap מגדיר את הפער בין העמודות. אם תגדיר קו הפרדה לעמודות באמצעות המאפיין column-rule, אז קו זה ימוקם באמצע הפער, והרוחב שלו לא ישנה את הרוחב הכללי.
הנכס אינו עובר בירושה.
תחביר
פער עמודות: רגיל; עמודה-פער: 3 פיקסלים; פער עמודות: 2.5em; פער עמודות: 3%; עמודה-פער: ירושה; column-gap: ראשוני;
2.2. צבע קו מפריד: מאפיין עמודה-כלל-צבע
המאפיין column-rule-color מציין את הצבע של קו ההפרדה.
הנכס אינו עובר בירושה.
תחביר
עמודה-כלל-צבע: ורוד; column-rule-color: #D71C3B; עמודה-כלל-צבע: rgb(192, 56, 78); עמודה-כלל-צבע: שקוף; column-rule-color: hsla(0, 100%, 50%, 0.6); עמודה-כלל-צבע: ירושה; עמודה-כלל-צבע: ראשוני;
2.3. סגנון קו מפריד: מאפיין בסגנון עמודות כלל
המאפיין סגנון עמודה כלל קובע את הסגנון של קו ההפרדה.
הנכס אינו עובר בירושה.
| סגנון עמודה כלל | |
|---|---|
| ערכים: | |
| אף אחד | הערך מוערך ל-0. ערך ברירת מחדל. |
| מוּסתָר | זהה לערך none , השורה מוסתרת. |
| מְנוּקָד | מציג קו כקבוצה של נקודות מרובעות. |
| מקווקו | מציג קו כרצף של מקפים. |
| מוצק | קו רגיל. |
| לְהַכפִּיל | מציג את קו ההפרדה בצורה של שני קווים דקים מקבילים הממוקמים במרחק מסוים זה מזה. רוחב הקו המפריד אינו מצוין, אך סכום השורות והמרווח ביניהם שווה לערך רוחב כלל העמודה. |
| חָרִיץ | מציג קו נפחי שנלחץ לתוך הקנבס. זה מושג על ידי יצירת צל של שני צבעים, אחד כהה ואחד בהיר יותר. |
| רֶכֶס | מציג את קו ההפרדה של עוצמת הקול, כלומר. האפקט ההפוך לחריץ. |
| הַבלָעָה | מציג קו אחיד בצבע כהה יותר מצבע הקו שצוין. |
| רֵאשִׁית | מציג קו אחיד עם הצבע שצוין במאפיין column-rule-color. |
| התחלתי | מגדיר את ערך המאפיין לערך ברירת המחדל. |
| לָרֶשֶׁת | יורש את ערך המאפיין מאלמנט האב. |
תחביר
סגנון עמודה כלל: אין; סגנון עמודה כלל: מוסתר; סגנון עמודה כלל: מנוקד; סגנון עמודה כלל: מקווקו; סגנון עמודה: מוצק; סגנון עמודה כלל: כפול; סגנון עמודה כלל: חריץ; סגנון עמודה: רכס; סגנון עמודה כלל: הוספה; column-rule-style:outset; סגנון עמודה כלל: ירושה; סגנון עמודה כלל: ראשוני;
2.4. רוחב קו מפריד: מאפיין עמודה-כלל-רוחב
המאפיין עמודה-כלל-רוחב מגדיר את רוחב קו ההפרדה. ערכים שליליים אינם מותרים. לא עובד בלי המאפיין בסגנון כלל עמודות.
הנכס אינו עובר בירושה.
תחביר
עמודה-כלל-רוחב: דק; עמודה-כלל-רוחב: בינוני; טור-כלל-רוחב: עבה; עמודה-כלל-רוחב: 1px; עמודה-כלל-רוחב: 2.5em; עמודה-כלל-רוחב: ירושה; column-rule-width: ראשוני;
2.5. סיכום מהיר של מאפייני קו הפרדה: מאפיין עמודה-כלל
המאפיין column-rule הוא קיצור של המאפיין column-rule-width column-rule-style column-rule-color.
הנכס אינו עובר בירושה.
תחביר
עמודה-כלל: מנוקד; עמודה-כלל: מוצק 8px; כלל-עמודה: כחול מלא; כלל-עמודה: כחול שיבוץ עבה; עמודה-כלל: ירושה; עמודה-כלל: ראשונית;
3. מעברי עמודות
כאשר תוכן ממוקם במספר עמודות, על הדפדפן לקבוע היכן ממוקמים מעברי העמודות. הבעיה של פירוק תוכן לעמודות דומה לפירוק תוכן לדפים. כדי לטפל בבעיה זו, הוצגו שלושה מאפיינים חדשים המאפשרים לתאר מעברי עמודות באותם מאפיינים כמו מעברי עמוד: break-before , break-after ו-break-inside .
4. אורך עמודות: מאפיין טווח עמודות
המאפיין טווח עמודות מאפשר לרכיב לחצות עמודות מרובות. זה מצוין לא עבור בלוק המכולה, אלא עבור אלמנט מסוים בפנים, למשל, עבור כותרת.
בעתיד ניתן יהיה לציין את מספר העמודות ל-span, בדומה לתכונת colspan שניתן להחיל על תא טבלה, אך למפרט CSS3 יש רק שני ערכים אפשריים: none and all.
המאפיין אינו פועל כברירת מחדל בפיירפוקס. על המשתמש להפעיל את התכונה באופן מפורש, layout.css.column-span.enabled חייב להיות מוגדר כ-true . כדי לשנות הגדרות בפיירפוקס, עבור אל about:config.
הנכס אינו עובר בירושה.
תחביר
טווח עמודות: אין; column-span: all; column-span: inherit; column-span: ראשוני;
5. מילוי עמודות בתוכן: מאפיין מילוי העמודות
מאפיין מילוי העמודות שולט כיצד עמודות מתמלאות בתוכן. ישנן שתי אסטרטגיות למילוי עמודות: עמודות יכולות להיות מיושרות לגובה או לא. אם עמודות מיושרות, דפדפנים צריכים לנסות למזער שינויים בגובה העמודות, תוך התחשבות בהפסקות כפויות, אלמנות, יתומים ומאפיינים אחרים שעשויים להשפיע על גובה העמודה. אם העמודות אינן מיושרות, הן מתמלאות ברצף, חלקן עשויות להתמלא חלקית או לא להתמלא כלל.
הנכס אינו עובר בירושה.
תחביר
מילוי עמודות: אוטומטי; מילוי עמודה: איזון; עמודה-מילוי: איזון-הכל; מילוי עמודה: ירושה; מילוי עמודה: ראשוני;
6. הצפה
6.1. גלישה בתוך מיכלים מרובי עמודים
אלא במקום שיגרום לשבירת עמוד, תוכן היוצא מגבולות העמוד יוצא מגבולותיו ואינו מנותק. זה חל בעיקר על תמונות. כדי לפתור בעיה זו, עליך להגדיר את המאפיינים הבאים עבור תמונות:
Img ( הצג: בלוק; /*הסר את הריפוד התחתון מתחת לתמונה*/ רוחב: 100%; /*מתח את התמונה לכל רוחב בלוק המכולה*/ )
6.2. עימוד והצפה מחוץ למכולות מרובות עמודות
קווי תוכן וקווי הפרדה המשתרעים מעבר לעמודות בקצוות של מיכל מרובה עמודות נגזרות בהתאם למאפיין הגלישה.
מיכל מרובה עמודות עשוי לכלול יותר עמודות ממה שיש לו מקום להן, עקב אילוצי גובה עמודות (למשל באמצעות גובה או גובה מקסימלי) ומעברי עמודות מפורשים. במקרה זה, עמודות נוספות נוצרות בכיוון השורה, עוברות לדפים הבאים.
ה מודול פריסת CSS מרובה עמודותמרחיב את מצב פריסת בלוקכדי לאפשר הגדרה קלה של עמודות טקסט מרובות.אנשים מתקשים לקרוא טקסט אם השורות ארוכות מדי; אם לוקח לעיניים יותר מדי זמן לעבור מסוף קו אחד לתחילת הקו הבא, הם מאבדים את הדעת על איזה קו הם היו. לכן, כדי לעשות שימוש מרבי במסך גדול, מחברים צריכים להציב עמודות טקסט ברוחב מוגבל זה לצד זה, בדיוק כפי שעיתונים עושים.
למרבה הצער, אי אפשר לעשות זאת עם CSS ו-HTML מבלי לאלץ מעברי עמודות במיקומים קבועים, או להגביל באופן חמור את הסימון המותר בטקסט, או להשתמש בסקריפט הרואי. מגבלה זו נפתרת על ידי הוספת מאפייני CSS חדשים כדי להרחיב את מצב פריסת הבלוק המסורתי.
שימוש בעמודות
ספירת עמודות ורוחב
שני מאפייני CSS קובעים אם וכמה עמודות יופיעו: ספירת עמודות ורוחב עמודות.
המאפיין ספירת עמודות מגדיר את מספר העמודות למספר מסוים. לְמָשָׁל.,
דוגמה 1
HTML
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
CSS
#col (ספירת עמודות: 2; )תוֹצָאָה
יציג את התוכן בשתי עמודות (אם אתה משתמש בדפדפן תואם מרובה עמודות):
המאפיין רוחב עמודה מגדיר את רוחב העמודה המינימלי הרצוי. אם לא מוגדרת גם ספירת עמודות, הדפדפן ייצור אוטומטית כמה עמודות שיתאימו ברוחב הזמין.
דוגמה 2
HTML
CSS
#wid ( רוחב העמודה: 100px; )תוֹצָאָה
בבלוק מרובה עמודות, תוכן מוזרם אוטומטית מעמודה אחת לאחרת לפי הצורך. כל הפונקציונליות של HTML, CSS ו-DOM נתמכת בתוך עמודות, כמו גם עריכה והדפסה.
הקיצור של העמודות
לרוב, מעצב אינטרנט ישתמש באחד משני מאפייני ה-CSS: ספירת עמודות או רוחב עמודות. מכיוון שערכים עבור מאפיינים אלה אינם חופפים, לעתים קרובות נוח להשתמש בעמודות הקיצור . לְמָשָׁל.
ניתן להחליף את הצהרת ה-CSS ברוחב העמודה: 12em בעמודות: 12em .
דוגמה 3
HTML
CSS
#col_short ( עמודות: 12em; )ניתן להחליף את הצהרת ה-CSS ספירת עמודות: 4 בעמודות: 4 .
דוגמה 4
HTML
CSS
#columns_4 ( עמודות: 4; )תוֹצָאָה
ניתן להחליף את שתי הצהרות ה-CSS ברוחב העמודה: 8em וספירת העמודות: 12 בעמודות: 12 8em .
דוגמה 5
HTML
CSS
#columns_12 ( עמודות: 12 8em; )תוֹצָאָה
איזון גובה
מפרט CSS3 Column מחייב את גבהי העמודות להיות מאוזנים: כלומר, הדפדפן מגדיר אוטומטית את גובה העמודות המקסימלי כך שגבהים של התוכן בכל עמודה יהיו שווים בערך. פיירפוקס עושה את זה.
עם זאת, במצבים מסוימים כדאי גם להגדיר את הגובה המקסימלי של העמודות בצורה מפורשת, ולאחר מכן לפרוס תוכן החל מהעמודה הראשונה וליצור כמה עמודות שצריך, אולי על גדותיו ימינה. לכן, אם הגובה מוגבל, על ידי קביעת מאפייני גובה ה-CSS או הגובה המקסימלי על בלוק מרובה עמודות, כל עמודה רשאית לגדול לגובה זה ולא יותר לפני הוספת עמודה חדשה. מצב זה גם הרבה יותר יעיל לפריסה.
פערי עמודות
יש פער בין העמודות. ברירת המחדל המומלצת היא 1em. ניתן לשנות גודל זה על ידי החלת המאפיין עמודות-פער על הבלוק מרובה עמודות:
דוגמה 6
HTML
CSS
#column_gap ( ספירת עמודות: 5; עמודה-פער: 2em; )תוֹצָאָה
השפלה חיננית
מאפייני העמודות פשוט יתעלמו על ידי דפדפנים שאינם תומכים בעמודות. לכן קל יחסית ליצור פריסה שתוצג בעמודה אחת באותם דפדפנים ולהשתמש במספר עמודות בדפדפנים תומכים.
סיכום
עמודות CSS3 הן פרימיטיביות פרימיטיביות שיסייעו למפתחי אינטרנט לעשות את השימוש הטוב ביותר בנכסי מסך. מפתחים בעלי דמיון עשויים למצוא להם שימושים רבים, במיוחד עם תכונת איזון הגובה האוטומטי.
כיצד לסדר טקסט בעמוד במספר עמודות? והאם זה יכול להיעשות אוטומטית? אין ספק, רבים מכם שעוסקים או היו מעורבים בפיתוח אתרים נתקלו בבעיה זו - ולעתים קרובות נתקלו בפתרונות מורכבים הדורשים סגנונות מסובכים או שימוש בספריות JavaScript נוספות (ראו, למשל, תוסף Columnizer עבור jQuery).
פריסת תוכן מרובת עמודות (לא להתבלבל עם המשימה של פריסת עמודים מרובת עמודים כללית, שקרובה למדי לבעיית סידור בלוקים על רשת) עושה את דרכה בעולם תקני האינטרנט כבר זמן רב. ולבסוף, לא רק הגיע לסטטוס המלצת מועמד בצורה של ה-CSS3 Multi Module-Layout המקביל, אלא גם קיבל תמיכה רחבה למדי בדפדפנים: איפשהו עם קידומות (-moz- או -webkit-) ואיפשהו ב- הנוכחי (אופרה 11.1+) וגרסאות מתוכננות (IE10+), ומיד ללא קידומות.
תגובה
במקרה של Internet Explorer 10, זה אומר באופן אוטומטי שאתה יכול להשתמש ב-CSS3 Multi-column בעת פיתוח יישומים בסגנון Metro עבור Windows 8 באמצעות HTML/CSS/JS.
למטרות מאמר זה, לא אשתמש בקידומות דפדפן כדי לבלבל את הקוד, אבל בשימוש בחיים האמיתיים, אל תשכח להוסיף תמיכה בקידומת עבור Firefox, Safari וכרום.
הרשו לי מיד לציין שני פרטים חשובים נוספים.
ראשית, ברוב המקרים, השימוש בפריסה מרובת עמודות לטקסט יכול להיחשב כפיתוח של תצוגת תוכן האתר לאורך הנתיב לשיפור מתקדם, שבתוכו משתמשים באתרים מודרניים יותר יקבלו יותר טוב:
שנית, תצוגה מרובה עמודות עובדת היטב עם היכולות של Media Queries (ורעיונות עיצוב רספונסיבי, ), לדוגמה, בגדלי מסך שונים, אתה יכול לעצב טקסט למספר שונה של עמודות:
והדבר האחרון שהייתי רוצה לציין בהקדמה, כדי לא להתעכב על זה יותר ולהמשיך במצפון נקי לפרטים טכניים: כשמשתמשים בפריסת טקסט מרובה עמודות, יש לזכור שסידור כזה מרמז גם על סדר קריאה מסוים (עבור שפות אירופאיות משמאל לימין). לכן, חשוב שכדי להעביר את המבט מעמודה אחת לאחרת, יש צורך לבצע כמה שפחות פעולות נוספות, במיוחד עבור מגילות אנכיות:
במובן זה, האופי האופקי של העמודות משולב טוב יותר עם גלילה אופקית (כפי שהיא משמשת ביישומים רבים עבור Win8 - למשל, זה נראה בבירור באפליקציית USA Today):
באופן כללי, רמקולים מעולים, אבל אל תשכחו את חווית המשתמש. ועכשיו לקרב!
עמודות
אז יש לנו טקסט (תוכן) שאנחנו רוצים למקם בכמה עמודות. איפה להתחיל?
כדי להפוך אלמנט כזה לאלמנט מרובה עמודות, עליך להגדיר אחד מהמאפיינים הבאים באמצעות סגנונות CSS: רוחב העמודהאוֹ ספירת עמודותלמשמעות אחרת מאשר אוטומטי. לדוגמה,
כדי לפצל את הטקסט לשתי עמודות, פשוט עשה זאת:
מאמר (ספירת עמודות: 2; )
הדפדפן יעשה את השאר: 
נכס חלופי - רוחב העמודה- מאפשר לך להגדיר את רוחב העמודה האופטימלי:
מאמר (רוחב עמודה: 150 פיקסלים; )
במקרה זה, הדפדפן עצמו מפרק את התוכן למספר העמודות הנדרש כדי למלא את המיכל החיצוני, תוך התאמה לרוחב העמודה שצוין. הנקודה החשובה היא ש הרוחב בפועל עשוי להיות שונה מהרוחב שצויןלמעלה או למטה: בתמונה למעלה, הפס האפור הוא ברוחב של 150 פיקסלים בדיוק - וכפי שאתה יכול לראות, הוא קטן יותר מהרוחב האמיתי של העמודה.
התנהגות זו מוגדרת על ידי המפרט ומאפשרת (אוטומטית) גמישות רבה יותר בעת פיתוח סימון רספונסיבי:
לדוגמה, אם יש לך מיכל ברוחב 100 פיקסלים ואתה מגדיר את העמודות לרוחב של 45 פיקסלים, הדפדפן ישקול שרק שתי עמודות יתאימו, וכדי למלא את כל החלל, הוא יגדיל את הגודל של כל אחת ל-50 פיקסלים. (זה לוקח בחשבון גם את הרווח בין העמודות, עליו נדון בחלק הבא).
במובן מסוים, ניתן לראות זאת כאלטרנטיבה לציון מספר שונה של עמודות באמצעות Media Queries בהתאם לגודל החלון וחישוב אוטומטי של רוחבי העמודות:
@media (min-width:400px) ( מאמר ( ספירת עמודות: 2; ) ) @media (min-width:600px) ( מאמר ( ספירת עמודות: 3; ) ) ...
זו הפעם השנייה שאני מדבר על אלטרנטיבה - והנה הסיבה.
ספירה לעומת רוֹחַב
כפי שאמור להיות ברור מהתיאור למעלה, המפרט מספק שתי דרכים להגדיר את מספר ורוחב העמודות (אגב, זה זהה לכל העמודות!):- ספירת עמודותמאפשרת לציין את מספר העמודות אליהן תרצו לחלק את התוכן, כאשר רוחב העמודות נקבע על ידי הדפדפן, תוך התחשבות בשטח הפנוי.
- רוחב העמודהמגיע מאחור: מציין מה העמודות אמורות להיות בערך, עם זאת, משאיר את חישוב מספרן לשיקול דעתו של הדפדפן.
עמודות: 12em; /*-עמודה-רוחב: 12em; ספירת עמודות: אוטומטי; */ עמודות: 2; /*-עמודה-רוחב: אוטומטי; ספירת עמודות: 2; */עמודות: אוטומטי; /*-עמודה-רוחב: אוטומטי; ספירת עמודות: אוטומטי; */ עמודות: אוטומטי 12em; /*-עמודה-רוחב: 12em; ספירת עמודות: אוטומטי; */ עמודות: 2 אוטומטי; /*-עמודה-רוחב: אוטומטי; ספירת עמודות: 2; */
מה קורה אם אתה מציין גם את מספר העמודות וגם את הרוחב האופטימלי? לפי המפרט, במקרה זה ספירת עמודותמגדיר את המספר המרבי של עמודות:
מאמר (עמודות: 150 פיקסלים 3; /* רוחב העמודה: 150 פיקסלים; ספירת העמודות: 3; */ )
למעשה, בעקבות התפתחות תקני האינטרנט, כולל כמה מהמאמרים שלי על CSS3 (ראו למשל), אני מקווה שתסתכלו על האפשרויות הנפתחות למפתחי אתרים עם לא פחות השראה. כלי ניהול תוכן רספונסיביים, גמישים וחזקים מתקרבים יותר ויותר. ופתרון בעיות מורכבות נעשה קל יותר.
אינטראקטיבי
אתה יכול לשחק עם איך CSS3 Multi-column עובד ב-ietestdrive.com:
נסה את זה, נסה. דווח על באגים למפתחי דפדפן. ואל תשכחו לחשוב מה יראו המשתמשים בדפדפנים ישנים יותר (ולכאורה מודרניים, אך עדיין לא לגמרי תואמים לתקן) – למשל, תוכלו להשתמש בתוסף jQuery Columnizer. זכרו יכולת הסתגלות וצופים במסכים קטנים וגדולים.
כיצד לסדר טקסט בעמוד במספר עמודות? והאם זה יכול להיעשות אוטומטית? אין ספק, רבים מכם שעוסקים או היו מעורבים בפיתוח אתרים נתקלו בבעיה זו - ולעתים קרובות נתקלו בפתרונות מורכבים הדורשים סגנונות מסובכים או שימוש בספריות JavaScript נוספות (ראו, למשל, תוסף Columnizer עבור jQuery).
פריסת תוכן מרובת עמודות (לא להתבלבל עם המשימה של פריסת עמודים מרובת עמודים כללית, שקרובה למדי לבעיית סידור בלוקים על רשת) עושה את דרכה בעולם תקני האינטרנט כבר זמן רב. ולבסוף, לא רק הגיע לסטטוס המלצת מועמד בצורה של ה-CSS3 Multi Module-Layout המקביל, אלא גם קיבל תמיכה רחבה למדי בדפדפנים: איפשהו עם קידומות (-moz- או -webkit-) ואיפשהו ב- הנוכחי (אופרה 11.1+) וגרסאות מתוכננות (IE10+), ומיד ללא קידומות.
תגובה
במקרה של Internet Explorer 10, זה אומר באופן אוטומטי שאתה יכול להשתמש ב-CSS3 Multi-column בעת פיתוח יישומים בסגנון Metro עבור Windows 8 באמצעות HTML/CSS/JS.
למטרות מאמר זה, לא אשתמש בקידומות דפדפן כדי לבלבל את הקוד, אבל בשימוש בחיים האמיתיים, אל תשכח להוסיף תמיכה בקידומת עבור Firefox, Safari וכרום.
הרשו לי מיד לציין שני פרטים חשובים נוספים.
ראשית, ברוב המקרים, השימוש בפריסה מרובת עמודות לטקסט יכול להיחשב כפיתוח של תצוגת תוכן האתר לאורך הנתיב לשיפור מתקדם, שבתוכו משתמשים באתרים מודרניים יותר יקבלו יותר טוב:
שנית, תצוגה מרובה עמודות עובדת היטב עם היכולות של Media Queries (ורעיונות עיצוב רספונסיבי, ), לדוגמה, בגדלי מסך שונים, אתה יכול לעצב טקסט למספר שונה של עמודות:
והדבר האחרון שהייתי רוצה לציין בהקדמה, כדי לא להתעכב על זה יותר ולהמשיך במצפון נקי לפרטים טכניים: כשמשתמשים בפריסת טקסט מרובה עמודות, יש לזכור שסידור כזה מרמז גם על סדר קריאה מסוים (עבור שפות אירופאיות משמאל לימין). לכן, חשוב שכדי להעביר את המבט מעמודה אחת לאחרת, יש צורך לבצע כמה שפחות פעולות נוספות, במיוחד עבור מגילות אנכיות:
במובן זה, האופי האופקי של העמודות משולב טוב יותר עם גלילה אופקית (כפי שהיא משמשת ביישומים רבים עבור Win8 - למשל, זה נראה בבירור באפליקציית USA Today):
באופן כללי, רמקולים מעולים, אבל אל תשכחו את חווית המשתמש. ועכשיו לקרב!
עמודות
אז יש לנו טקסט (תוכן) שאנחנו רוצים למקם בכמה עמודות. איפה להתחיל?
כדי להפוך אלמנט כזה לאלמנט מרובה עמודות, עליך להגדיר אחד מהמאפיינים הבאים באמצעות סגנונות CSS: רוחב העמודהאוֹ ספירת עמודותלמשמעות אחרת מאשר אוטומטי. לדוגמה,
כדי לפצל את הטקסט לשתי עמודות, פשוט עשה זאת:
מאמר (ספירת עמודות: 2; )
הדפדפן יעשה את השאר:
נכס חלופי - רוחב העמודה- מאפשר לך להגדיר את רוחב העמודה האופטימלי:
מאמר (רוחב עמודה: 150 פיקסלים; )
במקרה זה, הדפדפן עצמו מפרק את התוכן למספר העמודות הנדרש כדי למלא את המיכל החיצוני, תוך התאמה לרוחב העמודה שצוין. הנקודה החשובה היא ש הרוחב בפועל עשוי להיות שונה מהרוחב שצויןלמעלה או למטה: בתמונה למעלה, הפס האפור הוא ברוחב של 150 פיקסלים בדיוק - וכפי שאתה יכול לראות, הוא קטן יותר מהרוחב האמיתי של העמודה.
התנהגות זו מוגדרת על ידי המפרט ומאפשרת (אוטומטית) גמישות רבה יותר בעת פיתוח סימון רספונסיבי:
לדוגמה, אם יש לך מיכל ברוחב 100 פיקסלים ואתה מגדיר את העמודות לרוחב של 45 פיקסלים, הדפדפן ישקול שרק שתי עמודות יתאימו, וכדי למלא את כל החלל, הוא יגדיל את הגודל של כל אחת ל-50 פיקסלים. (זה לוקח בחשבון גם את הרווח בין העמודות, עליו נדון בחלק הבא).
במובן מסוים, ניתן לראות זאת כאלטרנטיבה לציון מספר שונה של עמודות באמצעות Media Queries בהתאם לגודל החלון וחישוב אוטומטי של רוחבי העמודות:
@media (min-width:400px) ( מאמר ( ספירת עמודות: 2; ) ) @media (min-width:600px) ( מאמר ( ספירת עמודות: 3; ) ) ...
זו הפעם השנייה שאני מדבר על אלטרנטיבה - והנה הסיבה.
ספירה לעומת רוֹחַב
כפי שאמור להיות ברור מהתיאור למעלה, המפרט מספק שתי דרכים להגדיר את מספר ורוחב העמודות (אגב, זה זהה לכל העמודות!):- ספירת עמודותמאפשרת לציין את מספר העמודות אליהן תרצו לחלק את התוכן, כאשר רוחב העמודות נקבע על ידי הדפדפן, תוך התחשבות בשטח הפנוי.
- רוחב העמודהמגיע מאחור: מציין מה העמודות אמורות להיות בערך, עם זאת, משאיר את חישוב מספרן לשיקול דעתו של הדפדפן.
עמודות: 12em; /*-עמודה-רוחב: 12em; ספירת עמודות: אוטומטי; */ עמודות: 2; /*-עמודה-רוחב: אוטומטי; ספירת עמודות: 2; */עמודות: אוטומטי; /*-עמודה-רוחב: אוטומטי; ספירת עמודות: אוטומטי; */ עמודות: אוטומטי 12em; /*-עמודה-רוחב: 12em; ספירת עמודות: אוטומטי; */ עמודות: 2 אוטומטי; /*-עמודה-רוחב: אוטומטי; ספירת עמודות: 2; */
מה קורה אם אתה מציין גם את מספר העמודות וגם את הרוחב האופטימלי? לפי המפרט, במקרה זה ספירת עמודותמגדיר את המספר המרבי של עמודות:
מאמר (עמודות: 150 פיקסלים 3; /* רוחב העמודה: 150 פיקסלים; ספירת העמודות: 3; */ )
למעשה, בעקבות התפתחות תקני האינטרנט, כולל כמה מהמאמרים שלי על CSS3 (ראו למשל), אני מקווה שתסתכלו על האפשרויות הנפתחות למפתחי אתרים עם לא פחות השראה. כלי ניהול תוכן רספונסיביים, גמישים וחזקים מתקרבים יותר ויותר. ופתרון בעיות מורכבות נעשה קל יותר.
אינטראקטיבי
אתה יכול לשחק עם איך CSS3 Multi-column עובד ב-ietestdrive.com:
נסה את זה, נסה. דווח על באגים למפתחי דפדפן. ואל תשכחו לחשוב מה יראו המשתמשים בדפדפנים ישנים יותר (ולכאורה מודרניים, אך עדיין לא לגמרי תואמים לתקן) – למשל, תוכלו להשתמש בתוסף jQuery Columnizer. זכרו יכולת הסתגלות וצופים במסכים קטנים וגדולים.