30
בדצמבר
2009

טיפ CSS – החלת עיצוב CSS על Chrome בלבד

מאת: מאור ברזני | תגובות: 5 | נושאים: אינטרנט,טכנולוגיה
תגיות: , , , , , , |

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

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

אמנם אקספלורר 8 עובד בצורה הרבה יותר טובה מאשר אקספלורר 7 (אני לא מדבר בכלל על גרסה 6), אבל עדיין לא בדיוק אותו הדבר.

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

עד לא מזמן אפשר היה להשתמש בקובץ ה-CSS שלנו בקוד מהצורה:

1
body:nth-of-type(1) .your_selector{style:propery;}

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

איך נחיל בכל זאת עיצוב CSS רק על גוגל כרום?

כדי לזהות את כרום ולהחיל עיצוב CSS רק עבורו, נשתמש בקובץ ה-CSS שלנו בקריאה הזו:

1
2
3
4
5
@media screen and (-webkit-min-device-pixel-ratio:0)
{
 .selector
 {margin: 0; }
}

במקרה הזה, האלמנט עם ה-class בשם selector יקבל שוליים 0, וזה יקרה רק בדפדפן כרום.

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

שתפו גם אחרים:
  • email
  • Print
  • RSS
  • Facebook
  • Twitter
  • LinkedIn
  • Google Bookmarks
  • Live
  • PDF
  • MySpace
  • del.icio.us
  • Digg
  • Technorati
  • Yahoo! Bookmarks
  • Yahoo! Buzz
  • Add to favorites

5 תגובות »

פיד RSS לתגובות בפוסט | טראקבק


הוסף תגובה

You can add images to your comment by clicking here.

TechnoCraft - פתרונות אינטרנט


אֶקְסְפֶּרִימֶנְט דוֹט אֶפֶס - וורדפרס, תוכן, טכנולוגיה ועוד כמה דברים - מופעל באמצעות WordPress | פתרונות אינטרנט