10 שימושי שיטות Fallback עבור CSS ו- Javascript

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

אבל אל תתנו אלה מלכודות להרתיע אותך! במדריך זה יש לי להרכיב חלק הנפוצים ביותר טכניקות עבור מעצבי אתרים המתמקדים ב- CSS ו- JavaScript / jQuery. כאשר כל השאר נכשל אתה רוצה לספק למשתמשים לפחות פונקציונליות הדף הבסיסי. הפשטות שולטת על העליונה בתחום עיצוב חוויית המשתמש.

עיין במדריך שלנו למטה והודע לנו על המחשבות והשאלות שלך בקטע ההערות.

1. פינות מעוגלות עם תמונות

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

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

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

#mainbox -webkit-border-radius: 5px; / * Safari * / -moz-border-radius: 5px; / * Firefox \ Gecko Engine * / -o-border-radius: 5px; / * Opera * / border-radius: 5px;  #mainbox .topc background: url ('corner-tl.png') ללא חזרה למעלה משמאל;  #mainbox .topc span background: url ('corner-tr.png') ללא זכות חזרה למעלה;  #mainbox .btmc background: url ('corner-bl.png') לא לחזור למטה משמאל;  #mainbox .btmc span background: url ('corner-br.png') לא לחזור למטה מימין;  

כדי לשמור על עצמך מפני מתח אני מאוד ממליץ להשתמש App כמו RoundedCornr. זהו יישום אינטרנט בדפדפן אשר מייצר CSS מעוגל CSS באמצעות CSS3 ותמונות. זה יהיה שימושי במיוחד למעצבים שאין להם גישה תוכנות גרפיקה כגון Photoshop או GIMP.

2. מערכת התפריט הנפתח jQuery

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

הבעיה היחידה עם פתרון זה היא כי Internet Explorer 6 אינו תומך אלה בוררים בורר CSS. עם זאת IE7 + עובד נהדר; וכמובן כל הדפדפנים יעבדו בסדר אם JavaScript מופעל מלכתחילה. הקוד מתוך הדרכה זו ב- CSS Plus הוא אחד המשאבים הטובים ביותר שמצאתי. הוא מספק לא רק פתרון עם jQuery אבל גם CSS הדרושים לבעיות IE.

/ * סוג של זרם יתווסף באמצעות jQuery * / #nav li.current> a background: # f7f7f7;  / * CSS fallback * / #nav li: hover> ul.child display: block;  #nav li: hover> ul.grandchild display: block;  

מקור

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

אם אתה לא מרגיש כי Internet Explorer 6 הוא הרבה דאגה אז אפילו לא טורחים עם חלופה זו חלופי. המדריך ואת הקוד הבא אמור להיות מספיק כדי לקבל את תפריט JavaScript טוען גם עם CSS קפדנית בכל הדפדפנים העיקריים.

3. ממוקד Internet Explorer סגנונות

אני בטוח שכולנו יודעים על בעיות עיבוד הנובעות מ- Internet Explorer של מיקרוסופט. אני יכול לתת קצת קרדיט על האחרונה שלהם IE8 ו לקוחות פוטנציאליים עתידיים עם IE9. עם זאת יש עדיין קהל קטן פועל IE6 / IE7 ואתה באמת לא יכול להתעלם מהם עדיין.

(מקור התמונה: github)

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

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

#nav li מיקום: יחסית; רוחב: 150px; / * חייב להגדיר רוחב סופי עבור IE * / #nav li ul / * sub-nav קודים * / display: block; תפקיד מוחלט רוחב you אוטומטי; / * * להגדיר את הרוחב שלך או להגדיר את אלמנט li * / #nav li ul li רוחב: 100%;  

4. מורשת IE אטימות / שקיפות

אחד הבאגים מעצבן רבים עם Internet Explorer הוא להתמודד עם אטימות. ניתן לשנות את הגדרות השקיפות של אלפא ב- CSS3 באמצעות המאפיין 'אטימות'. עם זאת, בדרכה של Microsoft רק Internet Explorer 9 תומך כעת בתכונה זו.

הפתרון הטוב ביותר עבור מיקוד IE6 + היא דרך מסנן, הגדרה קניינית המוכרת רק על ידי IE. עיין בדוגמה של הקוד הקצר להלן:

.mydiv אטימות: 0.55; / * CSS3 * / מסנן: אלפא (אטימות = 55); / * IE6 + * / 

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

-MS-Filter: "progid: DXImageTransform.Microsoft.Alpha (אטימות = 55)"; / * IE8 * / 

5. יצירת לחצני CSS3 עם תמונות Fallback

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

עם זאת אתה לא יכול לסמוך על כל המבקרים שלך יוכלו לעבד את המאפיינים החדשים. בעת בניית עיצוב חזרה עבור לחצנים (או אפילו רכיבי ממשק משתמש דומים) קיימות שתי אפשרויות נפרדות. הראשון הוא לכלול תמונת רקע שתוכננה בדיוק כמו CSS ייראה. זה יכול להיות מושלם בקלות Photoshop. עם זאת, אם אתה לא מומחה התוכנה אז זה עלול להיות בעייתי.

האלטרנטיבה היא חזרה לצבעי רקע פשוטים וסגנונות CSS פשוטים יותר. אני משתמש בכמה דוגמאות קוד מ CSS-Tricks פוסט נהדר על gradients CSS3. כל הדפדפנים העיקריים כולל ספארי, פיירפוקס, כרום, ואפילו אופרה לתמוך בתכונות אלה. האזור שבו תיתקל בבעיות הוא בתמיכתם של דפדפנים מדור קודם: מנועי מוזילה ישנים יותר, IE6 / 7, אולי אפילו ספארי נייד.

.Gradient-bg background-color: # 1a82f7; / * משתמש בצבע מוצק במקרה הגרוע ביותר * / background-image: url ('https://assets.hongkiat.com/uploads/code-fallback-methods/fallback-gradient.png'); background-image: -webkit-gradient (ליניארי, 0% 0%, 0% 100%, מ- (# 2F2727), אל (# 1a82f7)); background-image: -webkit-linear-gradient (למעלה, # 2F2727, # 1a82f7); background-image: -Moz-linear-gradient (למעלה, # 2F2727, # 1a82f7); background-image: -ms-linear-gradient (למעלה, # 2F2727, # 1a82f7); background-image: -o-linear-gradient (למעלה, # 2F2727, # 1a82f7);  

מקור

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

6. בדיקת תוכן לנייד

עוד מגמה ענקית בשנת 2012 היא הפופולריות של גלישה באינטרנט סלולרי. טלפונים חכמים נמצאים בכל מקום ונתונים על גבי 3G / Wi-Fi הופכים ליותר ויותר נגישים. לכן מעצבים רבים יבקשו לספק פריסת גיבוי עבור משתמשים ניידים.

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

קיימות שתי דרכים שבהן תוכל לזהות דפדפנים לנייד ולהציג פריסה חלופית או גיליון סגנונות. הראשון הוא באמצעות JavaScript אשר עובד נהדר ככלי frontend. התסריט שהוספתי להלן הוא פשוט מאוד בודק רק עבור משתמשי iPhone / iPod Touch. זיהוי דפדפנים ניידים הוא אתר פנטסטי אשר מציע סקריפט מפורט יותר אתה יכול לרוץ במקום.

/ / + הפונקציה הפונקציה iPhone / iPod Touch isiPhone () return ((navigator.platform.indexOf (= iPhone) = = -1) | (navigator.platform.indexOf ("iPod") = = -1);  אם (isiPhone ()) window.location = "m.yourdomain.com";  

עכשיו האלטרנטיבה השנייה היא לבדוק דרך שפה backend כגון PHP. אתה יכול לבדוק את המשתנה המכונה HTTP_USER_AGENT. עשרות אתרי אינטרנט יופיע אם גוגל תנאים אלה. עם זאת אני עדיין ממליץ על זיהוי דפדפני נייד הקישור הוספתי בפסקה הקודמת.

באתר יש סקריפטים להורדה בחינם לניתוח לא רק ב- PHP, אלא גם טונות של שפות backend פופולריים אחרים. אלה כוללים ASP.NET, ColdFusion, Rails, Perl, Python ואפילו קוד מבוסס שרת כגון IIS ו- Apache.

7. Slicebox המחוון עם חיוור

המועדפים שלי CSS3 freebie מ 2011 כנראה צריך להיות Slicebox 3D תמונה Slider שפורסמו על ידי Codrops. הוא משתמש במעברי אנימציה יפים של CSS בדפדפנים שתומכים בהם, כרגע ב- Google Chrome ובאחרונה ב- Safari. זה מוזר כי אפילו את פיירפוקס האחרון או IE9 לשחרר עדיין לא יכול להשתמש במעברים אלה.

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

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

8. jQuery סקריפט CDN Failsafe שיטה

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

יש אולי מאות אלפי מפתחים להסתמך על ספקים אלה. מה יקרה אם כל הקישורים היו שבורים מסיבה כלשהי או השרתים לא מחובר? זה יהיה רעיון טוב לארח עותק מקומי וליישם את זה רק אם אתה צריך את זה. ובכן זה קטע קוד גדול fallback מ CSS-Tricks מאפשר לך לעשות בדיוק את זה!

מקור

9. ייחודיות תיבות סימון HTML5

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

אני רץ לתוך זה נפלא CSS / jQuery הדרכה פורסם בחזרה בתחילת האביב 2011. הוא מציע שיטה פשוטה של ​​יצירת מתגים בסגנון Apple עבור תיבות הסימון שלך אשר להשפיל בחינניות בדפדפנים ישנים. הקוד משתמש בתמונות רקע כדי להחליף את סגנונות ההפעלה / כיבוי בין אינטראקציות המשתמש.

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

בהנחה ש- JavaScript כבוי או שאינו נתמך בדפדפנים ישנים, הסקריפט יהיה ברירת המחדל לתשומות HTML רגילות. פעולה זו גם תשבית את CSS עבור סגנונות תיבת הסימון החדשים יותר, כך שיופיע כאילו דבר לא השתנה. התסריט מתנהג יותר כמו אסתטי מול רץ עם fallback נקי מכל דבר אחר. אבל אלה המחוונים נראים פנטסטי, ואת אותן טכניקות ניתן להחיל על שדות אחרים טופס קלט כגון תפריטים נבחרים וכפתורי רדיו.

10. HTML5 נתמך וידאו

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

מוזילה פיירפוקס בדרך כלל תומך. וידאו אשר ניתן להשתמש VLC כממיר. Google Chrome & Safari מחפש קובצי MP4 או H.264 מקודדים. MOV. בגלל הבדלים אלה אתה בדרך כלל צריך לכלול שלוש וידאו בפורמטים שונים - שני המפורטים לעיל יחד עם. FLV fallback.

למרבה המזל כמה חבר 'ה ממש חכם להרכיב ספריה בשם VideoJS. זהו מבנה JavaScript קטן במיוחד המאפשר יישום יחיד של Flash ו- HTML5 וידאו בתג אחד. זה בחינם כדי להוריד קוד פתוח, כך מפתחים מוזמנים לתרום גם כן. הן Flash ו- HTML5 נגני וידאו מותאמים להיות זהים כך שלכל המשתמשים תהיה אותה חוויה. בדוק את קוד HTML5 וידאו embed למשל:

מקור

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

סיכום

אני מקווה מדריך זה שימושי השיטות fallback יגיע שימושי עבור מפתחי אינטרנט ברחבי העולם. זה יכול להיות קשה לבנות אתרי אינטרנט להסתגל למגוון רחב של מפרט תוכנה. הדבר נכון במיוחד כאשר אתה עובד עם שפות רבות ושונות כגון CSS ו- JavaScript.

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