PDA

View Full Version : طراحی سایت به صورت Cross Browser


SalarSoft
چهارشنبه 26 مهر 1385, 16: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:

&nbsp Foo
&nbsp&nbsp Foo

WSC standard:

&nbsp; Foo
&nbsp;&nbsp; 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 ها
SalarSoft
جمعه 28 مهر 1385, 08:30 صبح
تفاوت تاریخ در JavaScript

تنها تفاوت موجود در تابع getYear است.
در نسخه قدیمی تر ECMAScript که با مشکل سال 2000 سازگاری ندارد با اجرای دستور new Date().getYear() در سال 2004 مقدار 104 برگردانده می شود. در این حالت سال کنونی از عدد 1900 کم می شود که مثلا برای 1998 بدست می آید 98 ولی برای 2004 عدد 104 بدست می اید.
در ECMAScript نسخه 3 این نقیصه رفع شد و تابع جدیدی به نام getFullYear به کار گرفته می شود. در InternetExplorer هم تابع getYear اصلاح شد تا همانند getFullYear کار کند.


تفاوت در به کارگیری JavaScript
مرورگرهای مختلف کد های جاوااسکریپت را به گونه های مختلفی اجرا می کنند.
برای مثال کد زیر در نظر می گیرد که تگ Div از قبل رندر شده است و آماده است:

<div id="foo">Loading...</div>

<script>
document.getElementById("foo").innerHTML = "Done.";
</script>
این کد قابل اطمینان نیست زیرا ممکن است تعریف تگ بعد از بلوک scipt باشد که در این صورت جاوا اسکریپت با اشکال مواجه خواهد شد.
کد زیر توصیه می شود:

<body onload="doFinish();">

<div id="foo">Loading...</div>

<script>
function doFinish() {
var element = document.getElementById("foo");
element.innerHTML = "Done.";
}
</script>

مشکل دیگر که ممکن است پدید آید مربوط به کامپیوتر های کند است.
مثال زیر باز شدن یک صفحه جدید را نشان می دهد.

<script>
function doOpenWindow(){
var myWindow = window.open("about:blank");
myWindow.location.href = "http://www.ibm.com";
}
</script>
با توجه به این که باز شدن صفحه جدید ممکن است کمی طول بکشد. اما کد جاوا اسکریپت بعد از window.open بلافاصله اجرا خواهد شد. در این صورت چون هنوز پنجره ای آماده نیست جاوا اسکریپت با اشکال مواجه خواهد شد.
را حل این مشکل به کار گیری رویداد OnLoad مربوط به پنجره جدید است تا کارهای لازم را در آن رویداد بر آن انجام دهید.



تفاوت فراخوانی رویداد ها در JavaScript
در جاوا اسکریپت برای دسترسی به پارامترهای صفحه و رویداد از شی event استفاده میکنند.
در W3C استاندارد این شی event توسط پارامتر به رویداد ارسال می شود. این در حالی است که برای دسترسی به شعی Event در IE از شی window.event استفاده میکنند.
برای ارسال پارامتر event به رویداد رویداد را اینگونه تعریف میکنند.

<div onclick="handleEvent(event);">Click me!</div>
برای حل مشکل دسترسی به این شی در مرورگرهای مختلف می توانید از کد زیر استفاده کنید:


<div onclick="handleEvent(event);">Click me!</div>

<script>
function handleEvent(aEvent) {
var myEvent = window.event ? window.event : aEvent;
}
</script>
پراپرتی هایی که این ابجکت فراهم می کند متفاوت است:


Internet Explorer Mozilla
altKey altKey
cancelBubble stopPropagation()
clientX clientX
clientY clientY
ctrlKey ctrlKey
fromElement relatedTarget
keyCode keyCode
returnValue preventDefault()
screenX screenX
screenY screenY
shiftKey shiftKey
srcElement target
toElement currentTarget
type type

حالت های رندر صفحه در مرورگرها (DOCTYPE)
نوع رندر شدن صفحه با توجه به نوع docType تعیین می شود:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
بخش "-//W3C//DTD HTML 4.01 Transitional//EN" معرف عمومی است و بخش "http://www.w3.org/TR/html4/loose.dtd" معرف نوع است که یک URL است.

مرورگرهای قدیمی مانند Internet Explorer 4 صفحات را در حالت quirks (دمدمی مزاج! - پراشکال) رندر می کنند. برای دیدن وضعیت رندر صفحه می توانید در FireFox به منوی View -> Page بروید.
مرورگرهای Mozilla سه حالت را پشتیبانی میکنند.
Standards mode
Almost standards mode
Quirks mode

Standards mode
در این حالت تمام ویژگی های W3C و CSS به طور سختگیرانه ای رعایت می شوند
این نوع رندر زمانی فعال می شود که
* صفحه با نوع (mimetype) که text/xml ارسال شود.
* برای هر نوع DocType از نوع سیستم به صورت <!DOCTYPE HTML SYSTEM مثلا

<!DOCTYPE HTML SYSTEM "http://www.w3.org/TR/REC-html40/strict.dtd">
* برای نوع doctype های نامعلوم.

Almost standards mode
Mozillaاین مدل را به یک علت معرفی کرده است. این مدل برای حل شکافهای کوچکی است که بعد از تصاویر کوچک پیش می آید.
این مدل برای doctype های loose شناسایی می شود:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE html SYSTEM "http://www.ibm.com/data/dtd/v11/ibmxhtml1-transitional.dtd">
مرجع این مشکل http://developer.mozilla.org/en/docs/Images%2C_Tables%2C_and_Mysterious_Gaps

Quirks mode
در حال حاظر اینترنت پر از صفحات وب با کد های پر از اشکال است و غیر استاندارد است.
این حالت برای همخوانی با سایت های قدیمی نمایش صحیح آنها طراحی شده است.
این سایت ها با DOCTYPE های زیر شناسایی می شوند:
*
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
* بدون تعریف doctype

مباحثی که در ادامه مطرح خواهد شد.
تفاوت در به کارگیری Rich text ها
soroush_vs
جمعه 12 آبان 1385, 11:17 صبح
با تشکر از اطلاعات آقای SalarSoft برای اطلا عات مفیدشون
برای راهنمایی یک IDE برای Html , JavaScript , ColdFusion,ASP هست که قابلیت CrossBrowser رو تقریبا برای 5 مرورگر چک میکنه و اطلاع میده
اسم این IDE هست HomeSite .
این IDE با استفاده از Delphi توسعه داده شده.
با تشکر
scorpion_man
پنج شنبه 20 دی 1386, 00:30 صبح
با سلام به دوست عزیز
ممنون از راهنمایی های مفیدتون
ولی به قول شما مشکل بیشتر رو همون تفاوت render تگهای div تو browser هاست که اصلا راه حلشو اشاره نکردید و فقط به بیان مشکل بسنده کردید
کدها رو تگهای div تو browser های firefox و explorer کار میکنه ولی تو opera میفته رو تگ کناری
حالا من میخوام این اتفاق نیفته و جا برای محتوا باز بشه و نیفته رو تگ بغلی چکار باید کرد؟
ممنون میشم اگه راهنمایی بکنید
با تشکر