קיימות מספר דרכים שבהן ניתן להחיל סגנונות CSS על דף אינטרנט, כולל דפי סגנון חיצוניים או אפילו סגנונות מוטבעים. אם אתה משתמש בגיליון סגנונות חיצוני, שהוא הדרך המומלצת להכתיב את המראה והתחושה של מסמך HTML, גישה אחת היא להשתמש
@import.
ה
@import הכלל מאפשר לך גיליונות סגנון חיצוני חשוב במסמך שלך - או לתוך דף HTML או אפילו לתוך מסמכי CSS אחרים. שוברים הרבה סגנונות למספר קבצים קטנים וממוקדים (אחד עבור פריסה, אחד עבור טיפוגרפיה, אחד עבור תמונות, וכו ') לפעמים יכול להקל על ניהול קבצים אלה ואת הסגנון השונים שהם מכילים. אם אתה רוצה ליהנות כי תועלת, ולאחר מכן ייבוא אלה קבצים שונים הוא מה שאתה צריך לעשות כדי לקבל את כל העבודה עבור התצוגה של דף האינטרנט שלך.
ייבוא לתוך HTML
כדי להשתמש
@import כלל ב- HTML שלך, תוסיף את הפריטים הבאים ל-
של המסמך:
:
קוד זה יביא כעת גיליון סגנונות זה לשימוש בדף HTML זה ותוכל לנהל את כל הסגנונות שלך בקובץ אחד. החיסרון לגליונות סגנונות חשובים בדרך זו היא ששיטה זו אינה מאפשרת הורדות מקבילות. הדף חייב להוריד גיליון סגנונות שלם לפני שהוא עובר לשאר הדף, כולל כל קבצי CSS אחרים שאתה מייבא בשיטה זו. זה יהיה בעל השפעה שלילית על מהירות הדף שלך ולהוריד ביצועים. בהתחשב עד כמה חשוב ביצועי הדף היא הצלחה באתר, זה החיסרון לבד יכול להיות סיבה מדוע אתה רוצה להימנע משימוש @ import.
גישה אלטרנטיבית
כחלופה לשימוש
@import ב- HTML שלך, תוכל לקשר לקובץ CSS כזה:
זה פועל באופן דומה מאוד
@import בכך שהוא מאפשר לך לנהל את כל ה- CSS שלך ממקום מרכזי אחד / קובץ, אבל שיטה זו עדיפה מנקודת מבט להורדה. אם אתה עדיין רוצה לפלח סוגים שונים של סגנונות לקבצים נפרדים, תוכל להמשיך לעשות זאת ולהשתמש בפונקציונליות @import בתוך קובץ ה- CSS הראשי שלך. משמעות הדבר היא כי קבצי CSS החיצוניים שלך עדיין יכול להיות מנוהל בנפרד, אבל מאז כולם לייבא אחד CSS הראשי, הביצועים הוא השתפר.
ייבוא לתוך CSS
משתמש ב
דוגמת קוד לעיל תביא את הקובץ "default.css" לשימוש בדף ה- HTML שלך. בתוך קובץ CSS זה, יהיו לך סגנונות הדף השונים שלך. אתה יכול לקבל את כל סגנונות אלה מפורטים בדף זה, או שאתה יכול להשתמש @ import כדי לשבור אותם בנפרד לניהול קל יותר. שוב, נניח שאנחנו משתמשים ב 4 קובצי CSS נפרדים - אחד עבור פריסה, אחד לטיפוגרפיה ואחד לתמונות. הקובץ הרביעי הוא קובץ "המאסטר" שלנו, שהוא מה שהדף שלנו מקשר אליו (לדוגמה, זה "default.css"). בחלקו העליון של קובץ ה- CSS הראשי אנו יכולים להוסיף את הכללים המוצגים להלן:
כתובת אתר של @import ('/ styles / layout.css'); @ url לייבא ('/ styles / type.css'); @ url יבוא ('/ styles / images.css');
שים לב לכללים אלה צריך להיות לפני כל תוכן אחר בקובץ ה- CSS שלך כדי שיוכלו לעבוד. לא ניתן לקבל סגנון CSS אחר לפני כללי הייבוא.
מתחת לכללי הייבוא האלה, באפשרותך להוסיף סגנונות CSS אחרים שברצונך לקבל בגיליון ברירת המחדל. כאשר זה קובץ CSS הראשי נטען, זה יהיה הראשון לייבא את הקבצים הנפרדים האלה ולהוסיף סגנונות שלהם על החלק העליון של גיליון סגנונות. לאחר מכן יש את כל הסגנונות האחרים שלך מתחת אלה מיובאים, יצירת קובץ CSS מלא דפדפן האינטרנט ישתמש כדי להציג את האתר שלך. אתה מקבל את היתרון של ניהול קטן יותר, קבצים ממוקדים יותר, תוך עדיין גליון סגנונות אחד מקושר ב- HTML זה.
באמצעות @ import עבור שאילתות מדיה
דבר אחד אתה יכול לשקול לעשות את זה מפריד בין שאילתות האתר של האתר שלך עבור סגנונות אתר תגובה לתוך קובץ נפרד. בגלל סגנונות תגובה אלה יכול להיות מבלבל כאשר רואים לצד כללי האתר שלך בסגנון אחר, נתקל אותם בעצמם בקובץ אחר עשוי להיות אטרקטיבי. דאגה אחת עם גישה זו היא, כי שלך
@import הכללים חייבים להיות הראשונים, פירוש הדבר ששאילתות המדיה שלך ייטענו לפני שאר סגנונות האתר שלך. בעת יצירת אתר עם יכולת תגובה לנייד, המביא בחשבון ביצועים, סביר להניח שזו בעיה. מסיבה זו, מומלץ לא לפרק את הסגנונות המותאמים לאתר שלך בנפרד ולהשתמש בהם
@import כדי להביא אותם לאתר שלך. כן, נראה כי יש יתרונות לעשות זאת, אבל החסרונות עולים על היתרונות הללו.
האם אני צריך להשתמש @ import?
לא אתה לא. אתרים רבים פשוט להציג את כל הסגנונות העיקריים שלהם בתוך קובץ אחד, כמו גדול כמו קובץ זה עשוי להיות, הוא הצליח ככה (ככה אני עושה את זה בעבודה שלי). אם אתה מוצא
@import מועיל, אז זה יכול להיות חלק זרימת העבודה שלך. אחרת, תוכל לבנות דפי אינטרנט באופן בטוח גיליון סגנונות יחיד של כל כללי CSS שלך.
תמיכה בדפדפן
מאוד, דפדפנים ישנים מאוד מתקשים להתמודד עם חלק מחוקי @import אלה, אך סביר להניח שדפדפנים אלה אינם מהווים בעיה עבורך בימים אלה. זה נכון במיוחד עכשיו כי סוף החיים המועד האחרון עבור גירסאות ישנות יותר של Internet Explorer עבר. בסופו של דבר, אם תחליט להשתמש
@import כללים ב- HTML או CSS שלך, אתה לא צריך להיתקל בבעיות עם גירסאות ישנות של דפדפני אינטרנט, אלא אם יש לך קצת מוזר צריך לתמוך גירסאות ישנות להפליא של IE.
בעריכת ג'רמי ג'יררד
