השאירו את Doctype לשים דפדפנים לתוך מצב מוזרים
אם אתה כבר בעיצוב דפי אינטרנט במשך יותר מכמה חודשים, סביר להניח שאתה מודע לקושי בכתיבת דף זה נראה אותו בכל הדפדפנים . למעשה, זה בלתי אפשרי. דפדפנים רבים נכתבו עם תכונות מיוחדות שרק הם יכלו להתמודד. או שיש להם דרכים מיוחדות להתמודד עם דברים שונים מאופן דפדפנים אחרים לטפל בהם. לדוגמה:
- שכבות נוצרו לשימוש בדפדפני נטסקייפ. הם לא עובדים בכל דפדפן אחר, ולמעשה כבר הוצא משימוש ב- Netscape 6.x +.
- מסגרות מוטבעות נוצרו במקור עבור Internet Explorer בלבד, ומאז הפכו לחלק ממפרט ה- HTML.
- Internet Explorer 6.0 מוסיף רווח נוסף (כמו a
), אלא אם כן אתה כותב את התוכן של ה- div על קו אחד (ארוך). (IE 6 יש quirks הרבה יותר, כמו גם את זה.) - Netscpe 4.7 לא יציג טבלאות שאינן נכתבות ב- HTML נכון - הוא מציג דף ריק במקום זאת. זה היה קבוע ב- Netscape 6.
הבעיה עבור מפתחי הדפדפן היא שהם צריכים ליצור דפדפני אינטרנט כי הם תואמים לאחור עם דפי אינטרנט בנוי עבור דפדפנים ישנים יותר. כדי להתמודד עם בעיה זו, יצרני הדפדפן יצרו מצבים עבור הדפדפנים לפעול בו מצבים אלה מוגדרים על ידי נוכחות או היעדר של רכיב DOCTYPE ומה זה קורא DOCTYPE.
DOCTYPE מיתוג ו "מצב Quirks"
אם תשים את ה- DOCTYPE הבא בדף האינטרנט שלך:
דפדפנים מודרניים (Android 1+, Chrome 1+, IE 6+, iOS 1+, Firefox 1+, Netscape 6+, Opera 6+, Safari 1+) יפרשו זאת באופן הבא:
- מכיוון שקיים DOCTYPE כתוב כהלכה, פעולה זו מפעילה מצב סטנדרטים.
- זה מסמך HTML HTML 4.01
- מכיוון שזה במצב סטנדרטים, רוב הדפדפנים יעניקו את התוכן תואם (או בעיקר תואם) עם HTML 4.01 Transitional
ואם תשים את DOCTYPE במסמך שלך:
זה אומר דפדפנים מודרניים שאתה רוצה להציג את דף HTML 4.01 ב קפדנית תאימות עם DTD.
דפדפנים אלה יכנסו למצב "קפדני" או "סטנדרטים" ויעבדו את הדף בהתאם לתקנים. (לכן, עבור מסמך זה, תגים כגון הדפדפן עלול להתעלם מהם לחלוטין, שכן רכיב ה- FONT הוצא משימוש ב- HTML 4.01 קפדני).
אם אתה משאיר את DOCTYPE לחלוטין, הדפדפנים הם בעט באופן אוטומטי למצב "quirks".
הטבלה הבאה מציגה את הדפדפנים הנפוצים בעת הצגת הצהרות DOCTYPE משותפות שונות.
מיקרוסופט עושה את זה יותר קשה
Internet Explorer 6 יש גם את התכונה שאם אתה שם משהו בכלל מעל הצהרת DOCTYPE, הם יכנסו למצב quirks. לכן, שתי הדוגמאות הללו יכניסו את IE 6 למצב Quirks, למרות שההצהרות של DOCTYPE מציינות את מצב הסטנדרטים הקפדניים:
ואת XHTML 1.1 DOCTYPE:
בנוסף, אם אתה מקבל בעבר IE6, אז יש לך את "תכונה" כי מיקרוסופט הוסיף IE8 ו IE9: META אלמנט מיתוג אתר רשימה שחורה. למעשה, אלה שתי גירסאות הדפדפן עכשיו יש עד שבעה (!) מצבים שונים:
- IE 5.5 quirks מצב (IE 8 ו - 9)
- IE 7 סטנדרטים מצב (IE 8 ו - 9)
- IE 8 כמעט סטנדרטים מצב (IE 8 ו - 9)
- IE 8 סטנדרטים מצב (IE 8 ו - 9)
- IE 9 מצב סטנדרטים כמעט (IE 9)
- IE 9 מצב סטנדרטים (IE 9)
- מצב XML (IE 9)
IE 8 גם הציג "מצב תאימות" שבו המשתמש יכול לבחור לשנות את מודל טיוח בחזרה למצב IE 7. כך שגם אם אתה מגדיר את המצב שאתה רוצה להגדיר באמצעות DOCTYPE וגם אלמנטים META, הדף שלך עדיין יכול להיות דחף בחזרה למצב פחות סטנדרטים תואמים.
מהו מצב קווירקס?
מצב Quirks נוצר כדי לעזור להתמודד עם כל עיבוד מוזר שאינם תואמים דפדפן תמיכה ו hacks כי מעצבי אינטרנט היו משתמשים כדי להתמודד עם הדברים האלה. הדאגה של יצרני הדפדפנים היתה שאם הם יעבירו את הדפדפנים שלהם לתאימות מלאה של מפרטים, מעצבי אתרים יישארו מאחור.
על ידי הגדרת DOCTYPE מיתוג ו "Quirks מצב" זה מותר מעצבי אינטרנט לבחור איך הם רצו דפדפנים כדי לעבד את ה- HTML שלהם.
אפקטים מצב משונה
ישנן מספר אפקטים כי רוב הדפדפנים להשתמש במצב Quirks:
- בדפדפנים מסוימים, מודל הקופסאות משתנה לגרסת IE 5.5 של דגם התיבה במצב quirks.
- דפדפנים מסוימים אינם יורשים סגנונות לטבלאות
- מצב Quirks משפיע על ניתוח CSS ו CSS פריסה באופן דרמטי, אם אתה ממיר דפים למצב סטנדרטים מ quirks מצב, הקפד לבדוק את פריסת CSS ו לנתח בהרחבה.
- צפה בשינויים בסקריפטים כאשר במצב Quirks. פיירפוקס משנה את הדרך שבה התכונה id פועלת, לדוגמה. IE8 ו IE9 יש שינויים דרמטיים מאוד scripting במצב quirks.
יש גם הבדל "כמעט סטנדרטים מצב:"
- גובה תאי השולחן עם תמונות בלבד בתוך מחושב באופן שונה ממצב סטנדרטים.
כיצד לבחור DOCTYPE
אני נכנס לפרטים נוספים ברשימה DOCTYPE המאמר שלי, אבל הנה כמה כללי אצבע:
- בחר תמיד מצב סטנדרטים תחילה. והסטנדרט הנוכחי שעליך להשתמש בו הוא HTML5: אלא אם כן יש לך סיבה ספציפית להימנע משימוש ב- HTML5 DOCTYPE, זה מה שאתה צריך להשתמש.
- עבור HTML קפדנית 4.01 אם אתה צריך לאמת אלמנטים מדור קודם או רוצה למנוע תכונות חדשות מסיבה כלשהי:
- אם יש לך תמונות פרוסות בטבלה ולא רוצה לתקן אותם, עבור אל מעבר HTML 4.01:
- אל תכתוב דפים בכוונה במצב quirks. השתמש תמיד ב- DOCTYPE. זה יחסוך לך על זמן הפיתוח בעתיד, ובאמת אין תועלת. IE6 הוא במהירות לאבד את הפופולריות ועל ידי עיצוב עבור דפדפן זה (שהוא בעצם מה עיצוב במצב quirks) אתה מגביל את עצמך, הקוראים שלך, ואת הדפים שלך. אם אתה חייב לכתוב עבור IE 6 או 7, ולאחר מכן להשתמש הערות מותנה לתמוך בהם, ולא לאלץ דפדפנים מודרניים למצב quirks.
מדוע להשתמש ב- DOCTYPE
ברגע שאתה מודע לסוג זה של מיתוג DOCTYPE, אתה יכול להשפיע על דפי האינטרנט שלך באופן ישיר יותר באמצעות DOCTYPE המציין מה הדפדפן יכול לצפות מהדף שלך. כמו כן, לאחר שתתחיל להשתמש ב- DOCTYPE, תכתוב HTML שקרוב יותר להיות תקף (אתה עדיין צריך לאמת אותו). ובכתיבת XHTML חוקי, אתה מעודד את יצרני הדפדפנים לבנות דפדפנים תואמים לתקנים.
גרסאות דפדפן ומצבים מוזרים
DOCTYPE | דְמוּי אָדָם Chrome אתר IE 8+ iOS אופרה 7.5+ ספארי | IE 6 IE 7 אופרה 7 | נטסקייפ 6 |
---|---|---|---|
אף אחד | מצב מוזרות | מצב מוזרות | מצב מוזרות |
HTML 3.2 | |||
מצב מוזרות | מצב מוזרות | מצב מוזרות | |
HTML 4.01 | |||
מָעֳבָר | מצב סטנדרטים * | מצב סטנדרטים * | מצב סטנדרטים |
מָעֳבָר | מצב מוזרות | מצב מוזרות | מצב מוזרות |
קַפְּדָנִי | מצב סטנדרטים | מצב סטנדרטים * | מצב סטנדרטים |
קַפְּדָנִי | מצב סטנדרטים | מצב סטנדרטים * | מצב סטנדרטים |
HTML5 | |||
מצב סטנדרטים | מצב סטנדרטים * | מצב מוזרות | |
* עם DOCTYPE זה, הדפדפנים קרובים לסטנדרטים תואמים, אבל יש כמה בעיות - הקפד לבדוק. זה ידוע גם בשם "מצב כמעט סטנדרטים." |