שימוש ב-Modernizr ו-CSS3 Pie כדי להפוך את כל האתרים שלך למוכנים ל-CSS3

מאמר זה עוסק בשימוש בקוד הנפלא של ג'ייסון ג'ונסטון שנקרא CSS3 Pie, ובספריית Modernizr JS (Faruk Ates, Paul Irish ואלכס Sexton) כדי ליישם תכונות CSS3 כגון רדיוס גבול, צל-קופסה, תמונת גבול ו- תמונות רקע מרובות, מבלי להוסיף תקורה נוספת למי שמשתמש בדפדפנים מודרניים בעלי יכולת CSS3.

אוקיי, הייתי מתחיל את המאמר הזה עם המנטרה האופיינית ל-bash-internet-explorer שלך, אבל מכיוון שכולנו מודעים עד כאב לחסרונות של IE בעבר, בוא נהיה אסירי תודה על כך ש-IE9 מתעצבת להיות מהדורה די טובה ונמשיך הלאה.

עם זאת, דבר אחד שאנחנו לא יכולים להמשיך ממנו (עדיין), היא העובדה ש(נכון לכתיבת מאמר זה) 40-50% ממשתמשי האינטרנט עדיין משתמשים ב-IE8 או פחות. זה פשוט שוק גדול מכדי שנוכל להתעלם ממנו. בנוסף, ie9 זמין רק למשתמשי Vista ו-Windows 7, בעוד שמשתמשי XP עדיין מהווים כ-50% מנתח השוק של מערכת ההפעלה. המשמעות היא ש-50% ממשתמשי IE (כ-25% מנתח השוק הכולל של הדפדפנים) לא יוכלו לשדרג ל-IE9. יש לי הרגשה שזה יגרום לצמיחה של IE9 לבוא הרבה יותר איטית מאשר מהדורות קודמות של Internet Explorer, ולכן נצטרך להתמודד עם 25-40% מנתח השוק האלה כראוי (ולא, להציף אותם בחלונות קופצים ' עידוד' אותם לשדרג הוא בדרך כלל לא פתרון הולם).

אנחנו יכולים, כפי שעושים רבים, פשוט לבנות את האתרים שלנו ולהשתמש בתכונות CSS3 כדי לשפר ולשדרג את החוויה עבור אלה המשתמשים בדפדפנים מודרניים, ולהשאיר אתר הרבה יותר פשוט להנאת משתמשי IE.

נוכל גם להשתמש בתמונות או בספריות javascript כדי ליישם את תכונות ה-CSS3 החדשות והחדישות הללו.

הפתרונות האלה לא היו מספיק טובים בשבילי.

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

הזן CSS3 PIE. CSS3 PIE משתמש במאפיין behaviour() המיושם בגרסה של Internet Explorer של css כדי לאפשר לך ליישם מאפייני CSS3 במחלקות שלך מבלי להשתמש בתמונות מבולגנות, גיליונות סגנונות נוספים או קבצי js חיצוניים. הנה דוגמה:

#divname

{

border-radius: 10px;

התנהגות: url(../css/PIE.htc);

}

הערה* – ודא שהנתיב שלך לקובץ PIE.htc הוא ביחס לקובץ HTML שקורא לקובץ css, לא לקובץ css עצמו!

כל שעליך לעשות הוא להוסיף את הקובץ pie.htc (קישור למטה) לתיקיית ה-CSS שלך ואתה מוכן. רק שורת סימון נוספת אחת בקבצי ה-CSS שלך, וכבונוס, רק IE מעבד את התג "behavior:"; כך שדפדפנים אחרים ידלגו מעליו והמשתמשים שלך המשתמשים בדפדפנים מודרניים לא יחוו עלות הורדה נוספת.

זה כשלעצמו הוא פתרון די טוב לבעיה שלנו. אבל יש חיסרון אחד. משתמשי IE9 יצטרכו להוריד גם את הקובץ PIE.htc (בערך 30kb).

נוכל לתקן זאת באמצעות גיליון סגנונות מותנה:

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

היכנסו ל-Modernizr.

Modernizr הוא פתרון מצוין לבעיה זו (הוא נחמד במיוחד אם כבר טענת את הספרייה למטרות אחרות, אבל הקובץ הוא פחות מ-3 kb ב-gzip משני הצדדים).

כל שעליך לעשות הוא לטעון את הסקריפט modernizr.js לדף האינטרנט שלך והוא מוכן, אין צורך בקידוד JS:

Modernizr, אם אינך מכיר אותו, מזהה תמיכה ברוב תכונות ה-CSS3 ומוסיף אוטומטית שיעורים תג המבוסס על האם התכונות האלה קיימות או לא. דוגמא:

קוד:

התוצאה פשוטה: היכולת לבצע הצהרות if ב-CSS שלך על סמך מוסכמות שמות, למשל:

קוד:

.multiplebgs div {

/* מאפיינים עבור דפדפנים כי

תומך במספר רקעים */

}

.no-multiplebgs div {

/*נכסים

עבור דפדפנים שלא */

}

אז, עם עוגת CSS3, זה ייראה בערך כך:

קוד:

#divname

{

border-radius: 10px;

}

.no-borderradius #divname

{

border-radius: 10px;

התנהגות: url(../css/PIE.htc);

}

המחלקה השנייה משפיעה רק (ולכן רק טוענת את קובץ ה-HTC) על משתמשים שאין להם את תכונת הגבול-רדיוס זמינה בדפדפן שלהם.

היתרונות של זה הם רבים. עבורי, ההקלה הגדולה ביותר היא שסגנונות Internet Explorer שלי נמצאים ליד עמיתיהם הדפדפנים המודרניים. בעיני זה פתרון יפהפה שהוא הרבה יותר אלגנטי משימוש בגיליונות סגנונות נפרדים שנקראים מקובץ ה-html שלך. זה גם עוקב אחר עקרונות המבנה, ההצגה וההתנהגות קצת יותר טוב מפתרונות אחרים. קבצי ה-js שלך עדיין ישמשו להתנהגות (לא כדי לפצות על היעדר יכולות מצגת בדפדפנים ישנים יותר). ה-html שלך יכיל יותר סימון ופחות תנאים של IE, וה-CSS שלך נמצא כעת ביחד במקום אחד וקל יותר לניווט.

דבר נחמד נוסף ב-Modernizr הוא שאם הדפדפן לא תומך בפיצ'ר כלשהו, ​​הוא יחיל את המחלקה החלופית לא משנה באיזה דפדפן מדובר (בניגוד להערות מותנות עבור IE, שעוזרות רק למשתמשי IE עם דפדפנים חסרים). אם המשתמש שלך משתמש ב-Firefox 1, הוא או היא ייהנו גם מהסגנונות החלופיים שלך.

השאלה שלי כשהתחלתי את המסע הזה הייתה האם דפדפן יטען קובץ לתוך המטמון עבור מחלקות css שאינן בשימוש בקובץ ה-html שלך. לדוגמה, מחלקה (כמו our.no-borderradius #divname class) שהוכרזה אך לא נקראת לשימוש עבור אותו דף.

מסתבר (למרבה המזל) שהתשובה היא לא. (לִרְאוֹת http://stackoverflow.com/questions/1299478/does-every-image-in-a-css-file-load-when-the-file-is-loaded). קובץ htc לא ייטען למטמון אלא אם (במקרה זה) תכונת הגבול-רדיוס לא קיימת עבור הדפדפן הזה. עשיתי כמה בדיקות נוספות עם כלי מפתחי IE כדי לאשר זאת, ואכן, קובץ ה-HTC אינו נטען אלא אם המחלקה הזו נקראת במיוחד לשימוש.

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

CSS3 PIE נמצא ב http://www.CSS3pie.com


Source by Joe Edgar

About admin

Check Also

עצור רמאי – למד את הדבר היחיד שיכול למנוע מהם להתקרר (זה קל כמו פאי)

כדי לעצור רמאי אתה חייב להיות קשוח. תפסיק את התהייה והניחוש השני בעצמך. אתה לא …

כתיבת תגובה

האימייל לא יוצג באתר.

Recent Comments

אין תגובות להציג.