מרובות עמודות פריסה (מגזין כאחד) עם CSS3
באופן כללי, אנשים יאבדו את המסלול בעת קריאת תוכן ארוך מאוד. לכן, בתקשורת הכתובה כמו מגזינים ועיתונים, התוכן מחולק למספר עמודות לקריאה קלה.
יצירת עמודה באינטרנט היא סיפור אחר לגמרי. זה די קשה. למעשה, לא לפני זמן רב ייתכן שיהיה עליך לחלק את התוכן באופן ידני לחלק divs ו לצוף אותו ימינה או שמאלה, ולאחר מכן לציין את רוחב, ריפוד, שולי, גבולות וכן הלאה.
אבל, עכשיו דברים הרבה יותר פשוט עם מודול CSS רב. כפי שהשם מרמז בבירור, מודול זה מאפשר לנו לחלק תוכן לתוך הפריסה העמודה שאנו רואים בעיתונים או מגזינים.
תמיכה בדפדפן
עמודות מרובות נתמכות כעת בכל הדפדפנים - Firefox 2+, Chrome 4+, Safari 3.1+ ו- Opera 11.1 - למעט, כפי שצפוי, Internet Explorer, אך נראה כי הגירסה הבאה, IE10, החלה לספק תמיכה למודול זה.
עבור שאר הדפדפנים, כדי שזה יעבוד, Firefox עדיין צריך את -moz- קידומת, בעוד Chrome ו- Safari צריך את -WebKit- קידומת. האופרה אינה דורשת שום קידומות, לכן אנו יכולים פשוט להשתמש בתכונות הרשמיות.
מקור: מתי ניתן להשתמש בפריסת עמודות CSS3 מרובות?
יצירת עמודה מרובה
לפני שאנחנו יוצרים את העמודות, הכנו כמה פסקאות טקסט עבור ההפגנה, עטוף בתוך HTML5 תג, כמו בצע;
לורם ipsum dolor לשבת amet, consectetur adipiscing elit. Nunc libero magna, venenatis quis aliquet et, rutrum in augue. דון. פורטה. ללא שם: Suspendisse ללא nulla טורט. Quisque commodo ornare mi, לשבת amet aliquet justo bibendum לא. מספר שלם או יותר. //וכן הלאה
... וציין את הרוחב עבור 600px מגיליון הסגנון, זהו.
עכשיו, נתחיל ליצור את העמודות.
בדוגמה הבאה, נחלק את התוכן שתי עמודות עם ה ספירת עמודות נכס. תכונה זו תאפשר לדפדפן להציג את התוכן בעמודות לפי המספר שצוין, ותאפשר לדפדפן לקבוע את הרוחב המתאים לכל עמודה.
מאמר -webkit-column-count: 2; -moz-column-count: 2; טור-ספירה: 2;
מלבד היותו מוגדר על ידי ספירה, עמודות ניתן ליצור על ידי ציון רוחב באמצעות רוחב העמודה רכוש ולהשאיר את הדפדפן כדי להחליט כמה עמודות צריך להיות שנוצר במקום.
בדוגמה זו, אנו מציינים את רוחב העמודה 150px, אשר הביא את התוכן להיות מחולק לשלוש עמודות.
מאמר -moz-column-width: 150px; -webkit-column-width: 150px; column-width: 150px;
כאמור מפרט. הרוחב בפועל של העמודה עשוי להיות רחב יותר או צר יותר מ רוחב העמודה שצוין, בהתאם לשטח הזמין. כמו כן, אם ערך הרוחב אינו מצוין במפורש, “אוטומטי” יילקח כברירת מחדל, אשר יכול גם אומר “אין עמודה”.
פער טור
פער טור להגדיר את החללים המפרידים כל עמודה. ניתן לציין את ערך הפער em או px, אבל כאמור מפרט הערך אינו יכול להיות שלילי. בדוגמה הבאה אנו מציינים את הפער עבור 30px, כך שהרווחים בין העמודים נראים קצת יותר רחבים.
מאמר -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px;
כלל טור
אם ברצונך להוסיף גבולות בין העמודה, תוכל להשתמש בה כלל טור רכוש, אשר עובד מאוד דומה גבול נכס. אז, נניח, אם אנחנו רוצים לשים גבול מנוקד בין הטור, אנחנו יכולים לכתוב;
מאמר -moz-column-rule: 1px dotted #ccc; -webkit-column-rule: 1px dotted #ccc; כלל עמודה: 1px dotted #ccc;
טור טור
נכס זה עובד די דומה קולספן in שולחן תג. היישום הנפוץ של נכס זה הוא להקיף את כותרת התוכן בכל העמודות. הנה דוגמה.
article h1 -webkit-column-span: all; Per-span you all;
בדוגמה לעיל הגדרנו את h1 כדי להקיף את כל העמודות, ואם טווח העמודים מצוין, 1 יילקח כברירת המחדל. למרבה הצער, נכס זה, בזמן כתיבת שורות אלה, פועל רק ב- Opera וב- Chrome.
מילים סופיות
זה הכל לעת עתה, באנו דרך כל הדברים החיוניים כדי ליצור מספר עמודות עם CSS3, וכפי שהזכרנו בהתחלה, מודול זה עובד טוב מאוד בדפדפנים המודרניים אבל זה עדיין לא עובד ב- Internet Explorer.
בסופו של דבר, אנו מקווים כי כעת יש לך הבנה טובה למדי על איך ליצור עמודות עם CSS3, ואם יש לך זמן ניסויים, אל תהסס לשתף את השיטות שלך ואת התוצאות בתיבת ההערה להלן. תודה על קריאת הודעה זו וליהנות.
- הדגמה
- הורד מקור
