5 כלים שיתנו לאתר שלכם את ה Edge

12 בנובמבר 2015

תגיות: ,
אין תגובות

 

Windows 10, מערכת ההפעלה החדשה מבית Microsoft הושקה לפני כשלושה חודשים והיא כבר מותקנת במעל ל 110 מיליון מכשירים ברחבי העולם!!!

מאחר והשדרוג ל Windows 10 הינו ללא עלות (*), עבור מכשירים עם Windows 7 או 8.1 Windows וכחלק מהשדרוג ל Windows 10 יתחדשו המשתמשים גם בדפדפן החדש Microsoft Edge, ישנם מספר דגשים מומלצים שכל בעל אתר ירצה ליישם אם ברצונו לספק לגולשים שלו את החוויה הטובה ביותר:

1. Edge Website Scan Tool – כלי שימושי שבאמצעותו תוכלו לסרוק את האתר שלכם. הכניסו את ה-URL לתוך תיבת הטקסט ולאחר הסריקה, האורכת מספר שניות בלבד, תקבלו דוח מפורט עם כל ההתאמות השונות שעליכם לבצע, וכיצד תוכל ליישם אותן. לחץ כאן

2. עדכנו את ספריות ה JavaScript ובעיקר את ספריית ה jQuery לגרסה העדכנית ביותר – לחץ כאן. ספריות אלו מתעדכנות בתדירות גבוהה, כשהעדכונים כוללים תיקוני באגים ותמיכה בגרסאות עדכניות של מספר דפדפנים.

3. הימנעו משימוש ב Browser Detection – ישנם אתרים אשר מזהים תחילה את סוג הדפדפן כדי לקבוע כיצד לרנדר את האתר.

if (navigator.userAgent.indexOf(‘MSIE’) > 0)
{
//serve up an old version of your site
//make your IE users sad
//give IE a bad reputation
}

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

להלן דוגמה שבה ה Framework מוסיף מספר כלי CSS ל HTML , כולל תמיכה/חוסר תמיכה ביכולת מסוימת. במידה ויכולת מסויימת איננה נתמכת אנו נקבל ‘no-‘ . כך לדוגמה, יתקבל ‘no- opacity’ כאשר אין תמיכה בשקיפות.

<style>
/*set the opacity if we can*/
.btn-lg {
opacity: 0.5;
}
/*if opacity is not supported, set the background color to a light shade of blue*/
.no-opacity .btn-lg {
background-color: lightblue;
border-color: lightblue;
}
</style>
<div class="btn-lg"/>

ישנן מספר ספריות JavaScript אשר מבצעות Feature Detection , כגון Modernizr. אפשרות נוספת היא להשתמש ב Polyfills, אשר מאפשר להשתמש ביכולות מסוימות גם בדפדפנים אשר אינם תומכים ביכולות אלו. מידע נוסף ניתן למצוא במאמר זה.

4. השתחררו מ Plug-ins – דפדפן Edge אינו תומך ב Plug-ins כדוגמת Flash ו/או Silverlight (ל flash יש תמיכה מובנת ב Edge אשר מפותחת בשיתוף עם Adobe).

ל Edge יש גם תמיכה מובנת ב DASH, MSE, EME & CENC אשר מאפשר לבנות יישומי מדיה בHTML5 ללא שימוש ב Plug-ins.

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

5. הימנעו מקידומות CSS – קידומות CSS נמצאות בשימוש כאשר אנו רוצים לבדוק מאפיינים חדשים בCSS אשר עדיין לא קיבלו אישור תקן סופי מ W3C, למשל: -ms-hyphens: auto; שימוש בקידומות אלו הוא נפוץ ביותר ומונע מ Edge לרנדר את האתר בצורה מדויקת.

# במידה ואין לכם Windows 10 ואתם מעוניינים לבדוק כיצד האתר שלכם מגיב ונראה בEdge, ניתן להתקין מכונה וירטואלית (VM) עם Windows 10 בענן ולקבל יתרת זכות של $200

o לפתיחת חשבון חינם בAzure – לחץ כאן ($200 קרדיט)

o כיצד להתקין מכונה וירטואלית עם Windows 10 ב Azure – לחץ כאן

o התקנה מקומית של VM עם Windows 10 – לחץ כאן

# כעת שהאתר שלכם תומך בEdge תוכלו להנות גם מהDeveloper tools החדשים המגיעים כסט כלים מובנה (F12) שיעזור לכם :

  • DOM Explorer tool – מציג את מבנה האתר בזמן אמת תוך כדי רינדור
  • Debugger tool – חדש ועדכני.
  • Network tool – מציג את כל הבקשות המגיעות לאתר כולל ניתור רוחב פס, בקשות AJAX וכ"ו ועוד כלים רבים.

* לפרטים מלאים על השדרוג חינם לחץ כאן

 

כותב הפוסט הוא עידו וולף  Technical Evangelist @ Microsoft

הוסף תגובה
facebook linkedin twitter email

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *