صفحه اصلي طراحي وب مدهاي كاري مرورگرهاي وب و مفهوم DOCTYPE

مدهاي كاري مرورگرهاي وب و مفهوم DOCTYPE

نوشته شده توسط رضا فرشباف   
پنجشنبه, 14 August 2008 11:56

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

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

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

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

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

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

به عبارت ديگر، تمامي مرورگرها بايد بتوانند در دو مد مختلف كار كنند. مد Quirks براي قوانين CSS قديمي و مد Strict براي قوانين CSS استاندارد.
اولين مرورگري كه توانست در دو مد مختلف كار كند اكسپلورري بود كه در كامپيوتر هاي Mac نصب بود و اكسپلورر 6 و Saffari و Opera و Mozilla مرورگرهايي هستند كه در دو مد مختلف كار مي كنند. اكسپلورر 5 و مرورگرهاي قديمي نظير 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 مخصوص اكسپلوررهاي ويندوز:
در اينترنت اكسپلورر 6 بر روي سيستم عامل ويندوز، مايكروسافت قانون جديدي را تعبيه كرد. اين قانون بصورت زير است:
اگر قبل از اعلان DOCTYPE كه مرورگر را در مد Strict قرار مي دهد، يك XML PROLOG قرار داده شود، صفحه در مد Quirks نمايش داده خواهد شد. اين قابليت به طراحان وب امكان ميدهد كه صفحه وب Valid داشته و با اينحال در مد Quirks باقي بمانند.

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

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

توجه كنيد كه اين قابليت در اينترنت اكسپلورر 7 حذف شده است.

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

تفاوت در ارائه مدل BOX:
دو نوع مختلف از BOX Model وجود دارد. نوع قديمي و نوع W3C . پر واضح است كه مدل W3C جزو استاندارد محسوب مي شود. در مدل W3C - مقادير padding و borders در محاسبه width منظور نمي شوند. به عبارت ديگر در مدل استاتدارد، اگر يك BOX با عرض 300 پيكسل تعريف كنيم و براي اين BOX مشخصات padding و border را به ترتيب برابر 20 و 5 پيكسل تعريف كنيم، عرض واقعي اشغال شده توسط BOX برابر خواهد بود با:

300+2*20+2*5 = 350

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

پس براي اينكه در اينترنت اكسپلورر 6 تعيين كنيم ازچه مدلي براي 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 (حالت پيش فرض) قرار دهيد، اگر محتويات محصور در المان طولاني باشد به گونه ايكه در آن ابعاد نگنجد، از محدوده تعيين شده براي المان به بيرون سرريز مي شود.
اكسپلورر 6 همواره ارتفاع المان را بطور اتوماتيك به گونه اي تنظيم مي كند كه محتويات المان به بيرون سرريز نشود. يعني اكسپلورر 6 از استاندارد پيروي نمي كند چه در مد Quirks چه در مد Strcit.

در اكسپلورر 7 و Opera اين حالت فقط در مد Quirks اتفاق مي افتد. بقيه مرورگر ها چه در مد Quirks و چه در مد Strict از استاندارد پيروي مي كنند.

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


نظرات (0)Add Comment

نظر بدهيد
quote
bold
italicize
underline
strike
url
image
quote
quote
smile
wink
laugh
grin
angry
sad
shocked
cool
tongue
kiss
cry
كوچكتر | بزرگ تر

busy
آخرین بروزرسانی ( پنجشنبه, 14 August 2008 12:53 )
 
RocketTheme Joomla Templates