טיפ CSS – החלת עיצוב CSS על Chrome בלבד
ידוע שדפדפנים מרנדרים קוד 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, כדי שעבור כרום יפעל העיצוב המסויים הזה. הדפדפנים האחרים יתעלמו מהשורות האלה ויבצעו את העיצוב עבור אלמנט זה כפי שהוגדר בשורות קודמות.
5 תגובות »
פיד RSS לתגובות בפוסט | טראקבק
למיטב ידיעתי זה גם ישפיע על ספארי שהרי כרום וספארי בנויים על אותו קוד.
@מוריס, ייתכן שאתה צודק, האמת שלא בדקתי לגבי ספארי. כיוונתי יותר להפרדה מפיירפוקס, ובמקרה הזה זה עובד..
תודה על ההערה בכל אופן
כל הכבוד.. מאוד שימושי
יש דרך להבדיל בין גרסאות כרום ב- CSS?
ישירות ב-CSS אני לא מכיר דרך כזו.
ייתכן שאפשר להבדיל בין הגרסאות דרך JS בעבזרת User Agent ואז תוכל לבדוק ב-JS ובמידת הצורך לשנות דרכו את ה-CSS.