מה זה שיפור פרוגרסיבי?

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

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

איך עובד שיפור מתקדם?

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

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

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

גישה מתקדמת לסטיילינג

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

קחו למשל שורת תפריטים; אתה יכול לבנות את זה כך:

<nav>
<a href="/register">הירשם</א>
<a href="/login">התחברות</א>
<a href="/about">עלינו</א>
<a href="/contact">איש קשר</א>
</nav>

כדי להציג תפריט אופקי, כאשר כל קישור נראה קצת כמו כפתור, תוכל לעצב אותו באמצעות ה-CSS הזה:

nav a {
קישוט טקסט: אין;
תצוגה: בלוק מוטבע;
ריפוד: 0.5em 1em;
גבול: 1px מוצק;
border-radius: 8px;
שוליים-ימין: 1em;
}

כאשר הדפדפן מציג זאת במלואו, הוא אמור להיראות כך:

עם זאת, אם CSS אינו זמין, התפריט יוצג כך:

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

אתה יכול להשתמש במבנה חלופי כדי להפוך את העיצוב לחזק יותר:

<nav>
<ul>
<לי><a href="/register">הירשם</א></li>
<לי><a href="/login">התחברות</א></li>
<לי><a href="/about">עלינו</א></li>
<לי><a href="/contact">איש קשר</א></li>
</ul>
</nav>

מכיוון שהסימון הזה משתמש ברכיב רשימה לא מסודר, הוא הרבה יותר שמיש בהיעדר CSS:

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

navלי { לְהַצִיג: בשורה; }

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

הצגת פונקציונליות בהדרגה

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

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

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

<גוּף>
<!--... -->
<כפתור onclick="load_more();">
לִטעוֹן יותר
</button>
<!--... -->
</body>

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

<גוּף>
<!--... -->
<id="p2" href="/page/2">עמוד 2</א>

<תַסרִיט>
פוּנקצִיָהטען_עוד() { לְנַחֵם.עֵץ("!"); }

/* החלף קישור בכפתור */
var קישור = מסמך.getElementById("p2");
var כפתור = מסמך.createElement("button");
button.innerText = "טען עוד";
button.addEventListener("נְקִישָׁה", load_more);
מסמך.גוּף.insertBefore(לַחְצָן, קישור);
קישור.parentNode.removeChild(קישור);
</script>
</body>

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

האם באמת יש צורך בשיפור פרוגרסיבי?

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

1. ראשית, לא כל מי שמבקר באתר שלך משתמש בדפדפן. חלק מהמבקרים יהיו בוטים, כמו אינדקס מנוע חיפוש, וייתכן שאלו לא יבינו כלל CSS או JavaScript.
2. שנית, לא כל אדם שמבקר באתר שלך ישתמש בדפדפן עם CSS ו-JavaScript. חלק מהמבקרים עשויים להשתמש בדפדפן מבוסס מסוף, המציג טקסט רגיל עם עיצוב מינימלי. אחרים עשויים להשתמש בקורא מסך.
3. שלישית, גם אם דפדפן תומך ב-CSS וב-JavaScript, דברים משתבשים. קישור שבור או חיבור רשת לא תקין עלולים לגרום לקובץ .css או .js חסר. באג ב-JavaScript עלול לגרום לקוד אחר לא לפעול כלל.
4. לבסוף, חלק מהמבקרים עשויים להחליט באופן פעיל להשבית CSS או JavaScript. הם עשויים לעשות זאת מתוך דאגות פרטיות או בגלל שהם נמצאים בחיבור איטי או בתשלום לפי שימוש.

חשיבה מתקדמת עושה פלאים

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

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