SalarSoft
چهارشنبه 26 مهر 1385, 17:47 عصر
ار اونجایی که مرورگر InternetExplorer از استاندارهای وضع شده(W3C) برای طراحی صفحات وب به طور کامل تبعیت نمیکند، سایتهایی که با توجه به آن نوشته شده اند در سایر مرورگر ها به هم ریخته دیده می شوند. (IE is a legacy browser)
با این مقدمه سعی خواهم داشت تا تفاوت ها را به زبانی ساده برای دوستان تشریح کنم و در صورت امکان استانداردها مورد بررسی قرار بگیرد.
از دوستان احل فن هم انتظار همیاری دارم!
مطالب زیر مربوط به مقاله Migrate apps from Internet Explorer to Mozilla از سایت Mozilla است:
http://developer.mozilla.org/en/docs/index.php?title=Migrate_apps_from_Internet_Explore r_to_Mozilla
قبل از آغاز مبحث یاداور می شوم که اکثر موارد زیر زمانی صحیح است که صفحه وبـتان را با DocType زیر معرفی کرده باشید:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Tooltips:
در مرور گرهای قدیمی این امکان وجود دارد که برای لینکها با استفاده از ویزگی alt یک ToolTip ایجاد کنیم. در حالی که در استاندارد W3C برا این منظور ویزگی title در نظر گرفته شده است.
Old browsers:
<a href="some.htm" alt="toolTip" >HyperLink</a>
W3C standard:
<a href="some.htm" title="toolTip" >HyperLink</a>
تگ ها جایگزین:
زبان Html دارای تعدادی کدهای جایگزین برای برخی کاراکترها می باشد که در آدرس http://www.w3.org/TR/REC-html40/sgml/entities.html تعریف شده اند. این کدها معمولا به نقطه ویرگول(;) ختم می شوند.
مشکل مرورگر های قدیمی اینجاست این کد ها را بدون نقطه ویرگول هم قبول میکنند.
Old Browsers:
  Foo
   Foo
WSC standard:
Foo
Foo
تفاوت در کد های ( CSS (Cascade style sheet
ضرورت صحیح بودن Mimetypes در ارسال فایلهای CSS
برخی تعریف های CSS ممکن است به یک فایل مستقیما لینک نداشته باشند و در عوض به یک صفحه وب که برای آن محتویات رو ایجاد میکند لینک داشته باشد. در اسن صورت باید حتما Mimetype (با استفاده از این تعریف نوع محتویات ارسالی تعیین می شود که آیا متن است یا تصویر یا اطلاعات و ..) باید کاملا صحیح و برابر text/css باشد. در غیر این صورت نادیده گرفته می شود.
مثلا مانند زیر:
<link rel="stylesheet" type="text/css" href="GetCSS.aspx">
رعایت واحد های اعداد
بسیاری از صفحات وب واحد های اعداد به کار رفته را ثبت نمی کنند که این یک مشکل در استاندارد W3C شناخته می شود. برای مثال در تعریف طول یک مقدار حتما باید واحد طول آن باید مشخص باشد که عبارتند از
px بر حسب Pixel
pt برحسب Point
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>CSS and units example</title>
</head>
<body>
// works in strict mode
<div style="width: 40px; border: 1px solid black;">
Text
</div>
// will fail in strict mode
<div style="width: 40; border: 1px solid black;">
Text
</div>
</body>
</html>
به کارگیری CSS در JavaScript
با استفاده از استاندارد w3C می توان به طور مستقیم به خصوصیات و style ها دسترسی پیدا کرد:
<div id="myDiv" style="border: 1px solid black;">
Text
</div>
<script>
var myElm = document.getElementById("myDiv");
myElm.style.width = "40px";
</script>
بر روی هم قرار گیری اشیا این قسمت مشکل اکثر طراحان سایت ایرانی است پس به آن دقت کنید:
در CSS این امکان را فراهم شده است که اشیا بتوانند از محدوده خود خارج شده و بر روی هم قرار گیرند.
برای مثال زمانی که طول محتویات یک تگ DIV بزرگتر از طول تعیین شده آن باشد؛ در این صورت در حالت استاندارد CSS محتویات تگ Div بر روی سایر محتویات سایت قرار خواهند گرفت.( مشکل اکثر طراحان ایرانی). این در حالی است که Internet Explorer این اجازه را می دهد که سایر محتویات کنار رفته و جا برای تگ div جهت تغییر اندازه پدید بیاید.
نمونه ای از این رویداد:
http://developer.mozilla.org/wiki-images/en/3/3f/migrationguide-overflow.jpg
تغییر رنگ لینک ها هنگام فعال بودن (Link Hover)
مدلی که برای تغییر رنگ لینک ها در اکثر سایت ها استفاده می شود از مدل Internet Explorer تبعیت می کند. در حالی که این اشتباه است.
طراحان معمولا از ویژگی a:hover برای تغییر رنگ لینک ها استفاده می کنند. در این IE این ویژگی فقط بر لینک ها اثر میکند در حالی که در W3C این ویژگی علاوه بر لینک ها (تگ a) بر Bookmark ها هم اثر میکند.
این به این علت است هر دوی اینها (لینک و Bookmark) با استفاده از تگ A ( حرف اول Anchor) معرفی می شوند.
مثال زیر را در هر دو مرور گر IE و FireFox امتحان کنید تا به تفاوت پی ببرید:
<style type="text/css">
a:hover {color: green;}
</style>
<a href="foo.com">This text should turn green when you hover over it.</a>
<a name="anchor-name">
This text should change color when hovered over, but doesn't
in Internet Explorer.
</a>
اگر از این وضع راضی نیستید و می خواهید لینک ها رو همانند IE نمایش دهید
*- به جای ویژگی a:hover از ویژگی a:link:hover استفاده کنید.
*- و یا اینکه در Bookmark ها قبل از آغاز متن آن، تگ را ببندید:
<a name="anchor-name" /></a>
مباحثی که مطرح خواهد شد.
تفاوت ها در JavaScript شامل:
تفاوت تاریخ در JavaScript
تفاوت در به کارگیری JavaScript
تفاوت فراخوانی رویداد ها در JavaScript
حالت های رندر صفحه در مرورگرها (DOCTYPE)
تفاوت در به کارگیری Rich text ها
با این مقدمه سعی خواهم داشت تا تفاوت ها را به زبانی ساده برای دوستان تشریح کنم و در صورت امکان استانداردها مورد بررسی قرار بگیرد.
از دوستان احل فن هم انتظار همیاری دارم!
مطالب زیر مربوط به مقاله Migrate apps from Internet Explorer to Mozilla از سایت Mozilla است:
http://developer.mozilla.org/en/docs/index.php?title=Migrate_apps_from_Internet_Explore r_to_Mozilla
قبل از آغاز مبحث یاداور می شوم که اکثر موارد زیر زمانی صحیح است که صفحه وبـتان را با DocType زیر معرفی کرده باشید:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Tooltips:
در مرور گرهای قدیمی این امکان وجود دارد که برای لینکها با استفاده از ویزگی alt یک ToolTip ایجاد کنیم. در حالی که در استاندارد W3C برا این منظور ویزگی title در نظر گرفته شده است.
Old browsers:
<a href="some.htm" alt="toolTip" >HyperLink</a>
W3C standard:
<a href="some.htm" title="toolTip" >HyperLink</a>
تگ ها جایگزین:
زبان Html دارای تعدادی کدهای جایگزین برای برخی کاراکترها می باشد که در آدرس http://www.w3.org/TR/REC-html40/sgml/entities.html تعریف شده اند. این کدها معمولا به نقطه ویرگول(;) ختم می شوند.
مشکل مرورگر های قدیمی اینجاست این کد ها را بدون نقطه ویرگول هم قبول میکنند.
Old Browsers:
  Foo
   Foo
WSC standard:
Foo
Foo
تفاوت در کد های ( CSS (Cascade style sheet
ضرورت صحیح بودن Mimetypes در ارسال فایلهای CSS
برخی تعریف های CSS ممکن است به یک فایل مستقیما لینک نداشته باشند و در عوض به یک صفحه وب که برای آن محتویات رو ایجاد میکند لینک داشته باشد. در اسن صورت باید حتما Mimetype (با استفاده از این تعریف نوع محتویات ارسالی تعیین می شود که آیا متن است یا تصویر یا اطلاعات و ..) باید کاملا صحیح و برابر text/css باشد. در غیر این صورت نادیده گرفته می شود.
مثلا مانند زیر:
<link rel="stylesheet" type="text/css" href="GetCSS.aspx">
رعایت واحد های اعداد
بسیاری از صفحات وب واحد های اعداد به کار رفته را ثبت نمی کنند که این یک مشکل در استاندارد W3C شناخته می شود. برای مثال در تعریف طول یک مقدار حتما باید واحد طول آن باید مشخص باشد که عبارتند از
px بر حسب Pixel
pt برحسب Point
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>CSS and units example</title>
</head>
<body>
// works in strict mode
<div style="width: 40px; border: 1px solid black;">
Text
</div>
// will fail in strict mode
<div style="width: 40; border: 1px solid black;">
Text
</div>
</body>
</html>
به کارگیری CSS در JavaScript
با استفاده از استاندارد w3C می توان به طور مستقیم به خصوصیات و style ها دسترسی پیدا کرد:
<div id="myDiv" style="border: 1px solid black;">
Text
</div>
<script>
var myElm = document.getElementById("myDiv");
myElm.style.width = "40px";
</script>
بر روی هم قرار گیری اشیا این قسمت مشکل اکثر طراحان سایت ایرانی است پس به آن دقت کنید:
در CSS این امکان را فراهم شده است که اشیا بتوانند از محدوده خود خارج شده و بر روی هم قرار گیرند.
برای مثال زمانی که طول محتویات یک تگ DIV بزرگتر از طول تعیین شده آن باشد؛ در این صورت در حالت استاندارد CSS محتویات تگ Div بر روی سایر محتویات سایت قرار خواهند گرفت.( مشکل اکثر طراحان ایرانی). این در حالی است که Internet Explorer این اجازه را می دهد که سایر محتویات کنار رفته و جا برای تگ div جهت تغییر اندازه پدید بیاید.
نمونه ای از این رویداد:
http://developer.mozilla.org/wiki-images/en/3/3f/migrationguide-overflow.jpg
تغییر رنگ لینک ها هنگام فعال بودن (Link Hover)
مدلی که برای تغییر رنگ لینک ها در اکثر سایت ها استفاده می شود از مدل Internet Explorer تبعیت می کند. در حالی که این اشتباه است.
طراحان معمولا از ویژگی a:hover برای تغییر رنگ لینک ها استفاده می کنند. در این IE این ویژگی فقط بر لینک ها اثر میکند در حالی که در W3C این ویژگی علاوه بر لینک ها (تگ a) بر Bookmark ها هم اثر میکند.
این به این علت است هر دوی اینها (لینک و Bookmark) با استفاده از تگ A ( حرف اول Anchor) معرفی می شوند.
مثال زیر را در هر دو مرور گر IE و FireFox امتحان کنید تا به تفاوت پی ببرید:
<style type="text/css">
a:hover {color: green;}
</style>
<a href="foo.com">This text should turn green when you hover over it.</a>
<a name="anchor-name">
This text should change color when hovered over, but doesn't
in Internet Explorer.
</a>
اگر از این وضع راضی نیستید و می خواهید لینک ها رو همانند IE نمایش دهید
*- به جای ویژگی a:hover از ویژگی a:link:hover استفاده کنید.
*- و یا اینکه در Bookmark ها قبل از آغاز متن آن، تگ را ببندید:
<a name="anchor-name" /></a>
مباحثی که مطرح خواهد شد.
تفاوت ها در JavaScript شامل:
تفاوت تاریخ در JavaScript
تفاوت در به کارگیری JavaScript
تفاوت فراخوانی رویداد ها در JavaScript
حالت های رندر صفحه در مرورگرها (DOCTYPE)
تفاوت در به کارگیری Rich text ها