נגישות       נגישות
שינוי גודל טקסט:
א א א
שינוי צבעי האתר:
? מקשי קיצור:

לחיצה חוזרת ונשנית על המקש Tab תעביר אתכם בין הקישורים והאזורים השונים בעמוד.

הפעלת מקשי הקיצור תלויה בדפדפן שבו אתם משתמשים.

Internet Explorer, Chrome ובגרסאות ישנות של Firefox: לחצו על מקש Alt ועל מקש המספר או האות על-פי הרשימה. ב Firefox 3 ומעלה: לחצו על המקשים Alt + Shift + המספר או האות.

S - עבור לתוכן הדף
L - חיפוש
1- עמוד הבית
2 - פרוייקטים
3 - מדריכים
4 - אודות
5 - צרו קשר
6 - הצהרת נגישות
 

קובץ CSS חיצוני לפי דפדפן

מחבר:
בתאריך:

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

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

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

<?php
$user_agent = $_SERVER['HTTP_USER_AGENT'];
 

$style_sheet = "";
 
if(preg_match('/AppleWebKit/i',$user_agent) && !preg_match('/Chrome/i',$user_agent)){     $style_sheet = "safari.css";

}elseif(preg_match('/Chrome/i',$user_agent)){
    $style_sheet = "chrome.css";

}elseif(preg_match('/Firefox/i',$user_agent)){
    $style_sheet = "firefox.css";
 
} elseif (preg_match('/msie 8/i',$user_agent)){
    $style_sheet = "explorer8.css";

} elseif (preg_match('/msie 9/i',$user_agent)){
    $style_sheet = "explorer9.css";

}elseif(preg_match('/msie/i',$user_agent)){
    $style_sheet = "explorer10.css";
}
elseif(preg_match('/Gecko/i',$user_agent)){
    $style_sheet = "explorer11.css";
}
 
?>
<html>
<head>
<link rel = "stylesheet"  type = "text/css" href = "style.css" >
<link rel = "stylesheet"  type = "text/css" href = "<?php echo $style_sheet; ?>" >
</head>
<body>

['SERVER['HTTP_USER_AGENT_$ - דולה מידע על הדפדפן שאתו גולשים באתר, לתוך המשתנה user_agent$.

(preg_match('/Chrome/i',$user_agent - מחפש התאמה לשמות הדפדפנים בתוך המשתנה user_agent$, כשהמשמעות של i, שההתאמה יכולה להיות לאותיות קטנות או גדולות.

ולבסוף, בין התגיות <head>, בתוך הקישור לקובץ ה-CSS החיצוני, מדפיסים את המשתנה לפי הדפדפן המתאים (href). שימו לב, שהקובץ שמיועד לדפדפנים השונים דורס את הקובץ הרגיל שמהווה את ברירת המחדל.

ה-useragent ששמשו אותי הם הבאים, כשחלקי המחרוזות ששמשו אותי באבחנה בין הדפדפנים מודגשים:

//Safari
Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.57.2 (KHTML, like Gecko) Version/5.1.7 Safari/534.57.2
//Chrome
Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.28 Safari/537.36
//Firefox
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:23.0) Gecko/20100101 Firefox/23.0
Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 7.1; Trident/5.0)
//IE9
Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 7.1; Trident/5.0)
//IE10
Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident/6.0; chromeframe/30.0.1599.28)
//IE11
Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) like Gecko

למי שרוצה להרחיב בנושא הביטויים הרגולריים, ועל זה אני מאוד ממליץ, כתבתי את המדריך הבא: ביטויים רגולריים ו-PHP

לכל מדריכי ה-CSS

 

 

הוסף תגובה חדשה

 

= 7 + 7