Mahyad Saadat
Mahyad Saadat
خواندن ۳ دقیقه·۳ سال پیش

تفاوت بین Quirks mode و Standards Mode

Quirks mode vs Standards mode
Quirks mode vs Standards mode

در گذشته معمولا صفحات وب رو در دو نسخه می‌نوشن؛ یکی برای Netscape Navigator و دیگری برای Microsoft Internet Explorer. وقتی WC3 استاندارد‌های وب رو تنظیم کرد، مرورگرها نمی‌تونستن بلافاصله اون‌ها رو به کار ببرن؛ چون انجام اینکار باعث میشد اکثر وب‌سایت‌های موجود با مشکل روبرو بشن. بخاطر‌ همین مرورگرها دو حالت(mode) معرفی کردن تا با سایت‌های مطابق با استانداردهای جدید متفاوت از سایت های قدیمی برخورد کنن.

امروزه سه حالت توسط موتورهای چیدمان(layout engine) در مرورگرها مورد استفاده قرار میگیره:

  1. quirks mode
  • تو این حالت، چیدمان صفحه رویکردِ غیر استانداردی رو که تو Navigator 4 و Internet Explorer 5 داشتیم شبیه سازی میکنه. این برای پشتیبانی از سایت‌هایی که قبل از پذیرش گسترده استانداردهای وب ساخته شدن ضروریه.

2. full standards mode

  • تو این حالت، رویکرد همونیه که توسط مشخصات HTML و CSS شرح داده شده.

3. almost standards mode

در حالتِ تقریباً استاندارد، فقط تعداد بسیار محدودی از ویژگی‌های quirks mode بکار گرفته میشه.

مرورگر‌ها چطور تصمیم می‌گیرن از کدوم حالت استفاده کنن؟

برای اسناد HTML، مرورگرها از اعلامیه نوع سند(Document type declaration) برای تعیین اینکه کدوم حالت رو به کار ببرن، استفاده می‌کنن. برای اینکه صفحه با حالت استاندارد کامل رندر بشه، باید از یه اعلان DOCTYPE (اعلان نوع سند) در ابتدای سند استفاده کرد:

<!DOCTYPE html>
<html lang=&quoten&quot>
<head>
<meta charset=UTF-8>
<title>Hello World!</title>
</head>
<body>
</body>
</html>

اعلان <DOCTYPE!> که تو مثال نشون داده شد: <DOCTYPE html!> ساده ترین شکل این اعلانه که توسط HTML5 توصیه شده. ورژن‌های قبلی HTML انواع دیگری رو توصیه می‌کردن که تایپ کردنش برای اکثر افراد سخت بود و برای استفاده کردن ازش دست به دامن کپی/پیست میشدن، اما تمام مرورگر‌های موجود امروزی، حتی IE 6 قدیمی هم از این DOCTYPE برای تعیین حالت استاندارد کامل(full standard) استفاده می‌کنن. هیچ دلیل معتبری برای استفاده از یه DOCTYPE پیچیده تر وجود نداره. اگر از DOCTYPE دیگری استفاده می کنید، خطر انتخاب اعلانی که Quirks mode یا almost standards mode رو فعال می‌کنه وجود داره.

از این موضوع که DOCTYPE درست در ابتدای سند HTML قرار داره اطمینان حاصل کنید. هر چیزی قبل از DOCTYPE، مثل یه کامنت یا اعلان XML، حالت quirks رو تو IE9 و ورژن‌های قدیمی ترش فعال می‌کنه.

تنها هدف DOCTYPE تو HTML5، فعال کردن حالت استاندارد کامله. نسخه‌های قدیمی‌تر HTML معنای بیشتری به DOCTYPE می‌دادن، اما هیچ مرورگری تا حالا از DOCTYPE برای چیزی غیر از جابجایی بین حالت quirks و استاندارد استفاده نکرده است.

چطور متوجه بشیم از کدوم حالت داره استفاده می‌شه؟


راه‌های متعددی برای این کار وجود داره در ادامه دوتاشون رو معرفی می‌کنم.

۱. چک کردن فایل index سایت

برای اینکار باید از DevTools استفاده کنیم که به صورت پیش‌فرض با مرورگر‌ها نصب می‌شه. برای دسترسی بهش F12 رو میزنیم، یا کلیک راست کرده و بعد گزینه Inspect رو انتخاب می‌کنیم.

گزینه Inspect تو مرورگر‌های مختلف
گزینه Inspect تو مرورگر‌های مختلف


حالا تو زبانه Element میتونیم HTML صفحه رو مشاهده کنیم. مثلا تصویر زیر مربوط به سایت ویرگوله:

همونطور که میبینید تو اولین سطر،‌ اعلان <DOCTYPE html!> رو داریم، این یعنی: وبسایت با حالت full standard رندر میشه.

۲. از خودِ سایت پرسید!


با یه دستور javascript ساده میشه از سایت پرسید که داره تو چه حالتی رندر میشه. برای انجام این کار:

۱. کد زیر رو تو قسمت آدرس بار کپی کنید:

window.alert('You are in ' + (document.compatMode==='CSS1Compat'?'Standards':'Quirks') + ' mode.')

۲. عبارت زیر رو در ابتدای کد بنویسید و enter رو بزنید:

javascript

با اینکار پیامی از طرف سایت حالت رندر رو بیان می‌کنه.



  • به عنوان نمونه پیج زیر تو حالت Quirks mode رندر میشه؛ چون از اعلان نوع سند استاندارد استفاده نمی‌کنه.
نمای Devtools مربوط به پیج
نمای Devtools مربوط به پیج


امیدوارم که بدردتون بخور.



منابع

  • https://www.quirksmode.org/css/quirksmode.html
  • https://developer.mozilla.org/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode
  • https://en.wikipedia.org/wiki/Quirks_mode
برنامه نویسیhtmlطراحی سایتcssjavascript
علاقه‌مند به تکنولوژی و هنر
شاید از این پست‌ها خوشتان بیاید