שיפור תאימות הדפדפנים לעיצוב האתר

שיפור תאימות הדפדפנים לעיצוב האתר

  • פרסומת

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

מנועי "פיענוח" של דפדפנים (Rendering engines)

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

מנועי הפעינוח של הדפדפנים השונים
דפדפן מנוע קידומת CSS
IE Trident -msie
Firefox Gecko -moz
Opera Presto -o
Safari & Chrome WebKit -webkit
Konqueror KHTML -khtml

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

דוגמה

עיגול פינות (border-radius)

השתמשו בקוד הבא בשביל ליצור עיגול פינות הנתמך על ידי דפדפנים ישנים. טבלת התמיכה מצורפת למטה.
שימו לב שכל הגרסאות העדכניות של הדפדפנים תומכות ב- border-radius. בשביל לאפשר תאימות לגרסאות הקודמות של הדפדפנים, עלינו להוסיף את הקידומת -moz- בשביל דפדפנים מבית Mozilla (Firefox) ואת הקידומת

-webkit-

בשביל דפדפנים כמו Safari/Chrome.

/* Konqueror */ 
-khtml-border-radius: 12px;

/* Safari 3-4, iOS 1-3.2, Android 1.6- */ 
-webkit-border-radius: 12px; 

/* Firefox 1-3.6 */
-moz-border-radius: 12px; 
  
/* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
border-radius: 12px;

זליגת רקע

לעיתים, כאשר משתמשים בעיגול פינות בשילוב עם צבע רקע כלשהו (background-color), הרקע זולג אל מעבר הפינות. בכדי למנוע זליגה, ניתן להשתמש בקוד הבא:

/* Prevent background color leak outs */
-webkit-background-clip: padding-box; 
-moz-background-clip: padding; 
background-clip: padding-box;

תמיכת דפדפנים

Chrome Safari Firefox Opera IE Android iOS
כל הגרסאות 3+ כל הגרסאות 10.5+ 9+ כל הגרסאות כל הגרסאות
דוגמה

צל אובייקטים (box-shadow)

השתמשו בקוד הבא בכדי ליצור צל לאובייקטים שונים (block-elements). הקוד הראשון עושה שימוש בטכניקת RGB כדי לקבוע את צבע הקוד, והשני ב- HEX (קיצור של Hexadecimal – שש ספרתי):

צל בטכניקת RGB

-khtml-box-shadow: 9px 5px 5px rgba(51, 158, 181, 1);
-webkit-box-shadow: 9px 5px 5px rgba(51, 158, 181, 1);
-moz-box-shadow: 9px 5px 5px rgba(51, 158, 181, 1);
box-shadow:  9px 5px 5px rgba(51, 158, 181, 1);

צל בטכניקת HEX

-khtml-box-shadow: 9px 5px 5px #CCC;
-webkit-box-shadow: 9px 5px 5px #CCC;
-moz-box-shadow: 9px 5px 5px #CCC;
box-shadow: 9px 5px 5px #CCC;

תמיכה ב- Internet Explorer
הוסיפו את הקוד הבא:

filter:progid:DXImageTransform.Microsoft.Shadow(color='#CCCCCC',direction='120',strength='10');

תמיכת דפדפנים

Chrome Safari Firefox Opera IE Android iOS
כל הגרסאות 3+ כל הגרסאות 10.5+ 7+ כל הגרסאות כל הגרסאות
דוגמה

צל טקסט (text-shadow)

הקוד הבא יוצר צל טקסט אשר נתמך בכל הדפדפנים, מלבד Internet Explorer:

text-shadow: #666666 5px 5px 5px;

תמיכה ב- Internet Explorer
הוסיפו את הקוד הבא:

height: 100%; 
filter: shadow(color=#000000,direction=135,strength=3); 
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=135,strength=3)";

תמיכת דפדפנים

Chrome Safari Firefox Opera IE Android iOS
9 5 3.6 10.5+ 7+ כל הגרסאות כל הגרסאות