مفهوم DOCTYPE

مدهای Quirks و Strict دو مد کاری مختلف هستند که مرورگرهای مدرن برای تفسیر کدهای CSS از آنها استفاده می کنند.

لطفا برای دیدن متن به ادامه مقاله بروید.
 
هنگامی که Netscape 4 و اینترنت اکسپلورر ۴ تفسیر قوانین CSS را در مرورگرهای خود تعبیه کردند، پشتیبانی آنها از CSS با استانداردهای W3C مطابقت نداشت. پشتیبانی از کدهای CSS مطابق با استانداردهای W3C در مرورگر نت اسکیپ ۴ بسیار ضعیف بود ولی اینترنت اکسپلورر ۴ توانست تا حدودی خودش را با استانداردهای W3C مطابقت دهد ولی این همخوانی با استانداردها بطور ناقص بود. اگرچه اکسپلورر ۵ توانست مشکلات و باگهای اکسپلورر۴ را تا حدودی برطرف کند ولی خود اکسپلورر ۵ مشکلات جدیدی را بوجود آورد. (مخصوصآ در مدل Box)

برای اینکه طراحان وب مطمئن شوند که وب سایت هایشان به درستی در مرورگرهای مختلف نمایش داده می شود، مجبور بودند که کدهای CSS را مطابق با خواسته ها و استانداردهای تک تک مرورگرها بکار ببرند. استفاده از CSS به این شکل باعث می شد که صفحات وب بطور کامل با استانداردهای W3C مطابقت نداشته باشند.

از اینرو، با مهمتر شدن مسئله پیروی از استانداردها، شرکتهای سازنده مرورگرهای وب، با انتخاب سختی روبرو شدند. آنها باید خودشان را با استانداردها مطابقت می دادند و این مستلزم بکاربردن قوانین استاندارد CSS در مرورگرهایشان بود. از طرف دیگر با تغییر این قوانین در مرورگرهای خود باعث می شد که وبسایتهایی که قبلا مطابق با قوانین قدیمی مرورگرها ساخته شده بودند با مشکل بزرگی مواجه شوند. چرا که مرورگر ها قوانین CSS را به گونه ای دیگر تفسیر می کردند.

بنابراین نزدیک شدن به استانداردهای W3C و تعبیه کردن آنها در مرورگر ها باعث ایجاد مشکلات بزرگی میشد. از طرف دیگر عدم تطابق با استانداردهای W3C باعث چندگانگی در قوانین و سردرگمی طراحان وب گشت.

راه حل:
هر راه حلی که برای این مشکل ارائه می شود باید بتواند:
به طراحان وب امکان انتخاب اینکه مرورگردر چه مدی کار کند را بدهد.
مرورگرها بتوانند صفحات قدیمی را که مططابق با قوانین قدیمی طراحی شده اند را نمایش دهند.

به عبارت دیگر، تمامی مرورگرها باید بتوانند در دو مد مختلف کار کنند. مد Quirks برای قوانین CSS قدیمی و مد Strict برای قوانین CSS استاندارد.
اولین مرورگری که توانست در دو مد مختلف کار کند اکسپلورری بود که در کامپیوتر های Mac نصب بود و اکسپلورر ۶ و Saffari و Opera و Mozilla مرورگرهایی هستند که در دو مد مختلف کار می کنند. اکسپلورر ۵ و مرورگرهای قدیمی نظیر Netscape 4 برای همیشه در مد Quirks کار می کنند و نمی توان مد کاری را در این مرورگر ها تغییر داد.

برای تعیین اینکه مرورگر در چه مدی کاری کند، نیاز به یک تریگر است و این تریگر در DOCTYPE بوجود آمد. طبق استانداردهای W3C ، هر سند XHTML باید یک DOCTYPE داشته باشد که به مرورگر بفهماند در چه مدی کار کند.

صفحات قدیمی که قبل از پدیده استانداردشدن صفحات نوشته شده اند، DOCTYPE ندارند. بنابراین عدم وجود DOCTYPE با این مفهوم است که مرورگر باید در مد Quirks کند. یعنی صفحه وب را باید مطابق با قوانین قدیمی CSS نمایش دهد.

در مقابل، اگر طراح وب به اندازه کافی با DOCTYPE آشنا باشد، بی شک دقیقا می داند که چه کاری دارد انجام می دهد. اکثر DOCTYPE ها مرورگر را در مد Strict قرار می دهند. یعنی نمایش صفحه کاملا مطابق با استاندارد های W3C

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


هر DOCTYPE جدید و ناشناخته ای مرورگر را در مد Strict قرار می دهد.

مشکل دیگری که وجود دارد اینست که برخی از صفحاتی که در مد Quirks نوشته شده اند نیز دارای DOCTYPE هستند. بنابراین هر یک از مرورگرها لیستی از DOCTYPE ها را دارند که مرورگر را در مد Quirks قرار میدهد.

دقت کنید که صفحه شما نیاز ندارد که حتمآ در DOCTYPE تعریف شده Validate شود. بلکه تنها ذکر DOCTYPE برای قرار دادن مرورگر در مد Strict کافی خواهد بود. (قرار گرفتن در مد Strict نیاز به داشتن کد معتبر و Valid نیست)

مشکل بغرنج دیگر: Almost Strict Mode
در آزمایشها و بررسی های اولیه که بر روی مد Strict انجام شد، به این پدیده پی برده شد که تصاویر بکار رفته در صفحه دارای اندکی حاشیه خالی در قسمت پایین تصویر بودند که قابل حذف هم نبود. علت این مسئله در اینجا نهفته بود که در مد کاری Strict، بر چسب <img /> بصورا یک المان درون خطی – Inline Level عمل می کرد و از آنجائیکه برای المانهای درون خطی به علت وجود کاراکترهایی نظیر g,j و q مقداری فضای خالی از سمت پایین رزرو می شود (به علت ادامه دار بودن قسمت پایینی این کاراکترها)، برای برچسب <img /> هم این فضا اختصاص داده می شد.

برای حل این مشکل، برچسب <img /> باید بصورت یک المان Block Level تعریف می شد.

img{display:block;}

با این حال، اکثر سازندگان مرورگرهای وب، مخصوصا شرکت موزیلا، تصور کردند که این مسئله باعث سردرگمی طراحان می شود. برای همین منظور آنها مد کاری جدیدی را تحت عنوان مد Almost Strict را بوجود آوردند. این مد دقیقآ مشابه مد Strict بوده با این تفاوت که برچسب <img /> به صورت یک المان Block Level عمل می کند. لازم به ذکر است که اغلب DOCTYPE ها مرورگر را در مد کاری Almost Strict قرار می دهند.

XML PROLOG مخصوص اکسپلوررهای ویندوز:
در اینترنت اکسپلورر ۶ بر روی سیستم عامل ویندوز، مایکروسافت قانون جدیدی را تعبیه کرد. این قانون بصورت زیر است:
اگر قبل از اعلان DOCTYPE که مرورگر را در مد Strict قرار می دهد، یک XML PROLOG قرار داده شود، صفحه در مد Quirks نمایش داده خواهد شد. این قابلیت به طراحان وب امکان میدهد که صفحه وب Valid داشته و با اینحال در مد Quirks باقی بمانند.

XML PROLOG لازم برای اینکار باید قبل از اعلان DOCTYPE و در اولین سطر از سورس صفحه قرار گیرد.

<?xml version="1.0" encoding=iso-8859-1"?>


توجه کنید که این قابلیت در اینترنت اکسپلورر ۷ حذف شده است.

تفاوتهای مدهای کاری Strict و Quirks در نمایش المان های صفحه:
اول از همه، تمامی امکانات پیشرفته CSS در مرورگر IE 7 فقط در مد Strict کار خواهند کرد. تفاوتهای دیگری نیز وجود دارند که بطور خلاصه ذیلآ با آنها اشاره خواهم کرد.

تفاوت در ارائه مدل BOX:
دو نوع مختلف از BOX Model وجود دارد. نوع قدیمی و نوع W3C . پر واضح است که مدل W3C جزو استاندارد محسوب می شود. در مدل W3C – مقادیر padding و borders در محاسبه width منظور نمی شوند. به عبارت دیگر در مدل استاتدارد، اگر یک BOX با عرض ۳۰۰ پیکسل تعریف کنیم و برای این BOX مشخصات padding و border را به ترتیب برابر ۲۰ و ۵ پیکسل تعریف کنیم، عرض واقعی اشغال شده توسط BOX برابر خواهد بود با:
۳۰۰+۲*۲۰+۲*۵ = ۳۵۰

در اینترنت اکسپلورر، اگر مد کاری را بر روی Quirks قرار داده باشیم، مدل BOX قدیمی بکار برده خواهد شد. یعنی در محاسبه عرض المان مقادیر Borders و Padding منظور خواهد شد. ولی اگر مرورگر در مد Strict قرار گرفته باشد، مدل BOX استاندارد برای نمایش صفحه بکار برده خواهد شد.

پس برای اینکه در اینترنت اکسپلورر ۶ تعیین کنیم ازچه مدلی برای BOX استفاده شود، تنها راه استفاده از DOCTYPE است. (قرار دادن مرورگر در مد Quirks یا Strict)

در مرورگرهای Opera و Mozilla و اکسپلورر MAC می توان با استفاده از ویژگی box-sizing نوع مدل مورد BOX را انتخاب کرد. مرورگر Saffari تنها مدل استاندارد BOX را پشتیبانی می کند.

استثناء: دکمه های HTML در مرورگر های اینترنت اکسپلورر و موزیلا، بر اساس مدل BOX قدیمی نمایش داده می شوند حتی اگر مرورگر در مد Strict باشد.

تفاوت در تفسیر white-space: pre
طبق استاندارد W3C ویژگی white-space: pre باید در همه مرورگرها عمل کند. این ویژگی در مرور
گر اکسپلورر ویندوز تنها در مد Strict کار می کند ولی در بقیه مرورگر ها هم در مد Quirks و هم در مد Strict عمل خواهد کرد.

تفاوت در تفسیر margin: auto و width: auto
طبق استاندارد W3C برای اینکه المانی را در مرکز صفحه قرار دهیم باید از ویژگی margin: 0 auto استفاده کنیم. این ویژگی در اکسپلورر ویندوز تنها در مد Strict عمل می کند.

تفاوت در نحوه تفسیر مقادیر بدون واحد اندازه گیری:
طبق استاندارد W3C ، باید در کنار مقادیر، واحد اندازه گیری آنها نیز ذکر شود و اگر واحد یک مقدار مشخص نباشد، آن مقدار نادیده گرفته می شود. تقریبآ همه مرورگر ها در مد Quirks برای مقادیر بدون واحد از واحد پیکسل استفاده می کنند ولی در مد Strict از استاندارد پیروی می کنند.

تفاوت در نمایش تصاویر و تفسیر برچسب <img />
طبق استاندارد، تصاویر به صورت المانهای Inline Level در نظر گرفته می شوند.بنابراین کمی فضای خالی در قسمت پایین تصاویر صفحه وجود خواهد داشت. (بنا به دلیلی که بالا توضیح داده شد.)
در مد Quirks تصاویر بصورت Block Level در نظر گرفته می شوند. در اینترنت اکسپلورر چه در مد Quirks و چه در مد Strict، تصاویر بصورت المانهای Block Level در نظر گرفته می شوند (از استاندارد پیروی نمی کنند) در بقیه مرورگرها نظیر موزیلا، در مد Almost Strict ، تصاویر بصورت المانهای Block Level در نظر گرفته می شوند و در مد Really Strict بصورت المانهای Inline Level . برای قرار دادن مرورگر در مد Really Strcit از DOCTYPE زیر استفاده می شود.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”>


تفاوت در نحوه تفسیر overflow: visible
طبق استاندارد، اگر شما به یک المان، ارتفاع مشخصی را با استفاده از ویژگی height اختصاص دهید، و ویژگی overflow را برابر با مقدار visible (حالت پیش فرض) قرار دهید، اگر محتویات محصور در المان طولانی باشد به گونه ایکه در آن ابعاد نگنجد، از محدوده تعیین شده برای المان به بیرون سرریز می شود.
اکسپلورر ۶ همواره ارتفاع المان را بطور اتوماتیک به گونه ای تنظیم می کند که محتویات المان به بیرون سرریز نشود. یعنی اکسپلورر ۶ از استاندارد پیروی نمی کند چه در مد Quirks چه در مد Strcit.

در اکسپلورر ۷ و Opera این حالت فقط در مد Quirks اتفاق می افتد. بقیه مرورگر ها چه در مد Quirks و چه در مد Strict از استاندارد پیروی می کنند.

تفاوت در نحوه تفسیر ویژگی width برای المان های Inline Level
طبق استاندارد، المانهای Inline Level نمی توانند ویژگی width داشته باشند.
در مد Quirks اکسپلورر سعی می کند با اختصاص ویژگی display: inline-blobk برای المان های درون خطی، از ویژگی width پشتیبانی نماید.
تفاوت در نحوه تفسیر ابعاد فونت در خانه های جدول:
طبق استاندارد، قانون td { font-size: 80% } مشخص می کند که ابعاد فونت بکار رفته درون سلولهای جدول می بایستی، ۸۰% ابعاد فونت بکار رفته در Body صفحه باشد.
با این وجود در مد Quirks ، منظور از قانون فوق اینست که متن موجود در داخل سلول جدول باید با فونتی به ابعاد ۸۰% سایز فونت تعریف شده بصورت پیش فرض در مرورگر کاربر نمایش داده شود. (سایز پیش فرض غالبا برابر ۱۶ پیکسل است).

منبع: پی سی فا