דפדפני אינטרנט כבר סביב כל עוד יש אתרי אינטרנט. למעשה, דפדפנים הם מרכיב חיוני בחוויה או אנשים שצופים באתר שלך - אך לא כל הדפדפנים נוצרים באופן שווה. זה אפשרי לחלוטין (ולמעשה סביר למדי) יש ללקוחות צפייה דפי האינטרנט שלך בדפדפנים כי הם זקנים מאוד חסר את התכונות שנמצאות בדפדפנים מודרניים יותר. זה יכול להוות בעיות משמעותיות כפי שאתה שואף לפתח אתרי אינטרנט לנצל את ההתקדמות האחרונה בעיצוב האתר ופיתוח . אם מישהו מגיע לאתר שלך באמצעות אחד מאותם דפדפנים antiqued, ואת הטכניקות המתקדמות האחרונה שלך לא עובד בשבילם, אתה יכול להיות מתן חוויה ירודה הכוללת. שיפור פרוגרסיבי הוא אסטרטגיה של טיפול בעיצוב דפי אינטרנט עבור דפדפנים שונים, כלומר אלה דפדפנים ישנים כי הם חסרים תמיכה מודרנית.
שיפור פרוגרסיבי הוא דרך לעיצוב דפי אינטרנט, כך תכונות יותר סוכן משתמש תומך, תכונות יותר את דף האינטרנט יהיה. זה ההפך של אסטרטגיית העיצוב המכונה השפלה חיננית . אסטרטגיה זו בונה עמודים עבור הדפדפנים המודרניים הראשונים ולאחר מכן מבטיחה כי הם גם עובדים בצורה סבירה עם דפדפנים פחות פונקציונליים - כי החוויה "מבזה בחן". שיפור מתקדמות מתחיל עם פחות דפדפנים מסוגל קודם בונה חוויה למעלה משם.
כיצד להשתמש שיפור פרוגרסיבי
כאשר אתה יוצר עיצוב אתרים באמצעות שיפור פרוגרסיבי, הדבר הראשון שתעשה הוא ליצור עיצוב שעובד עבור המכנה המשותף הנמוך ביותר של דפדפני אינטרנט. בליבה, שיפור פרוגרסיבי אומר כי התוכן שלך צריך להיות זמין לכל דפדפני האינטרנט, לא רק תת להגדיר.זה למה אתה מתחיל על ידי תמיכה אלה הישן, מיושן, פחות מסוגל הדפדפנים.אם אתה יוצר אתר שעובד טוב עבורם, אתה יודע שיצרת בסיס זה אמור לספק לפחות חוויה שמיש לכל המבקרים.
כאשר מתחילים עם הדפדפנים לפחות מסוגל, אתה רוצה לוודא שכל HTML שלך צריך להיות תקף נכונה סמנטית. זה יעזור להבטיח כי מגוון רחב ביותר של סוכני משתמש יכולים להציג את הדף ולהציג אותו במדויק.
זכור שסגנונות העיצוב החזותי ופריסת הדף הכוללת נוספו באמצעות גיליונות סגנונות חיצוניים . זה באמת המקום שבו שיפור פרוגרסיבי קורה. אתה משתמש בגיליון הסגנון כדי ליצור עיצוב אתר שעובד עבור כל המבקרים. לאחר מכן תוכל להוסיף סגנונות נוספים כדי לשפר את הדף כאשר סוכני המשתמש מקבלים פונקציונליות. כולם מקבלים את הסגנונות הבסיסיים, אבל עבור כל דפדפנים חדשות שיכולים לתמוך סגנונות מתקדמים יותר המודרנית, הם מקבלים קצת תוספת. אתה "פרוגרסיבי לשפר" את הדף עבור דפדפנים שיכולים לתמוך סגנונות אלה.
ישנן מספר דרכים בהן ניתן להחיל שיפור פרוגרסיבי. ראשית, אתה צריך לשקול מה הדפדפן עושה אם זה לא מבין שורה של CSS - זה מתעלם! זה בעצם עובד לטובתך. אם תיצור ערכת סגנונות בסיסית שכל הדפדפנים מבינים, תוכל להוסיף סגנונות נוספים לדפדפנים חדשים. אם הם תומכים סגנונות, הם יחולו אותם. אם לא, הם יתעלמו מהם פשוט להשתמש בסגנונות הבסיסיים. דוגמה פשוטה של שיפור פרוגרסיבי ניתן לראות ב- CSS זה:
.תוכן עיקרי {
רקע: # 999;
רקע: rgba (153,153,153, .75);
}
סגנון זה קובע תחילה את הרקע לצבע אפרפר. הכלל השני משתמש בערכי צבע RGBA כדי לקבוע רמת שקיפות. אם דפדפן תומך RGBA, זה יהיה לעקוף את הסגנון הראשון עם השני. אם זה לא, רק הראשון יושם. הגדרת צבע הבסיס ולאחר מכן הוסיף סגנונות נוספים עבור דפדפנים מודרניים יותר.
שימוש בשאילתות תכונות
דרך נוספת ניתן להחיל שיפור פרוגרסיבי היא להשתמש במה שמכונה "שאילתות תכונה". אלה דומים שאילתות מדיה , שהם חלק חיוני של עיצובים לאתר בעיצוב דינמי . בעוד שמדיה שואלת טקסט עבור גדלי מסך מסוימים, שאילתות תכונות יבדקו אם תכונה מסוימת נתמכת או לא. התחביר שבו תשתמש הוא:
@supports (display: flex) {}כל הסגנונות שהוספת בתוך כלל זה יפעלו רק אם דפדפן זה תומך ב- "Flex", שהוא הסגנונות עבור Flexbox. תוכל להגדיר קבוצה אחת של כללים ולאחר מכן להשתמש בשאילתות תכונות כדי להוסיף תוספת עבור דפדפנים נבחרים בלבד.
מאמר מקורי מאת ג'ניפר קרינין. בעריכת ג'רמי ג'ירארד ב -13 / 13/16.