c ross browser همخوانی وب سایت در مرور گرهای مختلف محقق :...
TRANSCRIPT
CROSS BROWSERگرهای مرور در سایت وب همخوانی
مختلف
محقق : آرمان طوسی
استادیار: مهندس احمد جنتی فرد
قرار بحث مورد تکنیک قالب در پروژه این در که موضوعاتیمیگیرد :
World Wide Web Consortium
Validation سایت اعتبار آزمایش
Browser Compatibility Test
W3C standard
CROSS-BROWSER
Cross-browser refers to the ability for a website, web application, HTML construct or client-side script to support all the web browsers. The term cross-browser is often confused with multi-browser. Multi-browser means something works with several web browsers. Cross-browser means something works with all versions of all browsers to have existed since the web began.
CROSS-BROWSERExample of cross-browser coding
To follow this example, you must have basic knowledge of HTML and JavaScript. Consider this snippet of HTML code:
<div id="sample" style="position: absolute; top: 100px; left: 100px;">some text</div>
Software Testing portal
The code describes a block of text, which should be displayed 100 pixels from the top and to the right from the top-left corner of the browser window. In a Netscape Navigator 4 -series browser, you would move it right with the following JavaScript code:
document.layers['sample'].left = 200;
However, to accomplish the same thing in Internet Explorer 4 you need to do this:
document.all['sample'].style.left = 200;
CROSS-BROWSERIn order for the code to work in both browsers and thus be
cross-browser compatible, it could be written like this:
if (document.all)
document.all['sample'].style.left = 200;
else if (document.layers)
document.layers['sample'].left = 200;
The following code that uses W3C standard DOM method works in Mozilla browsers, recent versions of Internet Explorer and various other recent browsers that comply with the W3C standard:
document.getElementById('sample').style.left = '200px';
برای برنامه نویسان ضروری CROSS BROWSERچرا دانستن است؟
یکی از اصول اولیه طراحی وب سایت اطمینان از نمایش صحیح و یکسانآن در مرورگرهای مختلف است. چون تالش طراح سایت، پوشش دادن هر
چه بیشتر بازدیدکنندگان احتمالی که از مرورگرهای مختلف استفاده می کنند است.
در واقع هر Browser ) یک استاندارد دارد Browser (Compatible web Design
یکی از کارهای بسیار Validationآزمایش معتبر بودن یک سایت یا همان مهمی است که هر طراح و برنامه نویس وب باید آنرا در نظر داشته باشد.
Validationچیست ؟
Validation روند آزمایش کردن یک صفحه وب در برابر استانداردهای برای W3Cیا همان World Wide Web Consortiumکنسرسیوم وب
می باشد.XML و HTMLسندهای
کنیم ؟VALIDATEچرا باید سندهایمان را
یک دلیل بسیار مهم و ساده این است که سندهایی که بر مبنای نمی باشند وابسته به غلط گیری مرورگری هستند که W3Cاستانداردهای
در آن در حال نمایش می باشند و این عامل باعث می شود که اینگونه صفحه ها بر روی مرورگرهای مختلف نمایش های مختلفی داشته باشند و یا
اینکه به درستی نشان داده نشوند.
سایت های بزرگ خارجی و بزرگ و کوچک داخلی؟!
) ممکن است خیلی از سایتها، حتی سایتهای بسیار معروفyahoo , (google , Wikipedia را ببینید که Validate نمی شوند، این سایتها
معموال به خاطر نام و شهرتشان است که زیاد توجهی به این مساله نمی کنند.
سایتهای عادی قادر به انجام این کار نیستند و نمی توانند برای خود شهرتایجاد کنند.
کمتر سایت داخلی را پیدا می کنید کهValidate! بشود
کنید، بسیار مهم است، آنرا جدی VALIDATEحتما اسناد خود را در وب بگیرید!
این سرویس رایگان است!!!!
:http//validato. 3.r w
org
برای آزمایش Valida
te بودن
SUPPORTED DOCUMENT TYPES
the HTML (through HTML 4.01) and XHTML (1.0 and 1.1) family, MathML, SMIL and SVG(1.0 and 1.1, including the mobile profiles). The Markup Validator can also validate Web documents written with an SGML or XML DTD, provided they use a proper document type declaration.This validator is also An HTML validating system conforming to International Standard ISO/IEC 15445—HyperText Markup Language, and International Standard ISO 8879—Standard Generalized Markup Language (SGML) – which basically means that in addition to W3C recommendations, it can validate according to these ISO standards.
نکات قابل توجه
میباشد چکW3C ای را که در css یا html, xhtmlبرنامه نویسان باید کد
) Validate کنند تا از استاندارد بودن ان اطمینان پیدا کنند، ولی نکته ی (
حائز اهمیت در همین تگ های استاندارد اینه که مقدار
Default Value برای Propertyها در مرورگرهای مختلف متفاوت است
توجه قابل نکات
تعریف doctype.مناسب در باالی صفحه
!>DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd<"
داشتن یک سند خوش ترکیب(یعنی روابط پدر فرزندی المنت ها بخوبیرعایت شده باشد و تگ های باز شده حتما بسته شوند و...)
جهت قالب بندی سایت حتما از مقادیر درصد استفاده شده و از بکار بردن موقعیت دهی مطلق به شدت اجتناب شود.
نکات قابل توجه
باید همیشه برای یک تگ Image مقدار Border قرار دهیم چون 0 را برابر است1 و در بعضی 0 ها Browser آن در بعضی DefaultValueمقدار
تگq معموال در /IEدرست کار نمیکند
تگbgSound فقط در /IEکار میکند
TOOLTIPS:
altدر مرور گرهای قدیمی این امکان وجود دارد که برای لینکها با استفاده از ویژگی title برا این منظور ویژگی W3C ایجاد کنیم. در حالی که در استاندارد ToolTipیک
در نظر گرفته شده است.
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 SHEEتفاوت در کد های (
CSS در ارسال فایلهای Mimetypesضرورت صحیح بودن ممکن است به یک فایل مستقیما لینک نداشته CSSبرخی تعریف های
باشند و در عوض به یک صفحه وب که برای آن محتویات رو ایجاد میکند (با استفاده از این Mimetypeلینک داشته باشد. در این صورت باید حتما
تعریف نوع محتویات ارسالی تعیین می شود که آیا متن است یا تصویر یا باشد. در غیر این صورت text/cssاطالعات و ..) باید کامال صحیح و برابر
نادیده گرفته می شود.مثال مانند زیر:
کد:
>>link rel="stylesheet" type="text/css" href="GetCSS.aspx"
رعایت واحد های اعداد
بسیاری از صفحات وب واحد های اعداد به کار رفته را ثبت نمی کنند که این یک مشکل شناخته می شود. برای مثال در تعریف طول یک مقدار حتما باید W3Cدر استاندارد
واحد طول آن باید مشخص باشد که عبارتند از px بر حسب Pixelpt برحسب 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<
JAVASCRIPT در CSSبه کارگیری
style می توان به طور مستقیم به خصوصیات و w3Cبا استفاده از استاندارد ها دسترسی پیدا کرد:
کد:
>div id="myDiv" style="border: 1px solid black;"> Text </div> <script> var myElm = document.getElementById("myDiv");
myElm.style.width = "40px"; </script<
بودن فعال هنگام ها لینک رنگ تغییر((LINK HOVER
Internet Explorerمدلی که برای تغییر رنگ لینک ها در اکثر سایت ها استفاده می شود از مدل تبعیت می کند. در حالی که این اشتباه است.
این IE برای تغییر رنگ لینک ها استفاده می کنند. در این a:hoverطراحان معموال از ویژگی ) بر a این ویژگی عالوه بر لینک ها (تگ W3Cویژگی فقط بر لینک ها اثر میکند در حالی که در
Bookmark.ها هم اثر میکند ( حرف اول A) با استفاده از تگ Bookmarkاین به این علت است هر دوی اینها (لینک و
Anchor.معرفی می شوند ( امتحان کنید تا به تفاوت پی ببرید:FireFox و IEمثال صفحه بعد را در هر دو مرور گر
کد:
>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:link:hover از ویژگی a:hover*- به جای ویژگی ها قبل از آغاز متن آن، تگ را ببندید:Bookmark*- و یا اینکه در
کد:
>a name="anchor-name" /></a<
روش های تست سازگاری سایت با مرورگرهای مختلف
:برای تست سازگاری سه راه داریم- استفاده از خدمات آنالین سایت های خاص 1
- استفاده از نرم افزارها 2
- نصب مرورگرها3
معرفی روش هایی که در برگیرنده این امکان هستند
سایتهایی که خدمات آنالین سازگاری می دهند
1- Browsershots
Browsershots is one of the best web-based tool to check cross=browser compatibility issues for a website. You just need to feed the website address and select the appropriate options from the many available and you will get screenshots for the in-test website. When submitting a new website, it will be placed in a queue and you will have to wait until your request is processed. You can bookmark the result page to come check if the screenshots are ready later. After the screenshots have been generated, you can download all the screenshots at once in a zip file. Browsershots supports the following browsers among others: Epiphany, Firefox, Konqueror, Opera on Linux and Firefox, MSIE, Opera, Safari, on Windows and Firefox and Safari on Mac OS and more.
2 -BROWSERCAMP
BrowserCamp provides free screenshots for the Safari browser only on MAC OS. You can get screenshots of your website at different resolutions and in either PNG or JPG format. However, if you want to test for other browsers, you need to pay for it. It then enables you to get screenshots for the Firefox, Safari, Shiira, Camino, iCab, SeaMonkey, Demeter, Flock, Sunrise, Netscape Navigator, Opera and Internet Explorer browsers.
3- XENOCODE BROWSER SANDBOX
Xenocode Browser Sandbox is a web-based tool which allows you to test your website for cross-browser compatibility issues in different browsers like Microsoft Internet Explorer 8, Internet Explorer 7, and Internet Explorer 6, Mozilla Firefox 3 and Firefox 2, Google Chrome, Opera, and Apple Safari. You need to download the browser plugin for it to work.
4-CROSSBROWSERTESTING
CrossBrowserTesting.com is a commercial tool, with limited free access for 5 minutes, which allows you to test your website on different browsers and different operating systems. You can many different configurations options for the environment you want to test out your website within. You can check out the demo to get a better idea of how CrossBrowserTesting.com works.
5-NETRENDERER
netrenderer is another web-based tool which allows its users to test website in different versions of Internet Explorer. At the time of writing, Internet Explorer 5.5, 6, 7, 8 were supported. netrenderer allows you to render a website in one browser version at a time.
6-LITMUS
Litmus provides free and paid plans for cross-browser testing solutions. With the free plan, upto 50 tests can be made monthly and only Internet Explorer 7 and Firefox 2 are supported. However, with the paid solution, 24 browsers are available for testing with unlimited monthly tests.
7-IETESTER
IETester is a free Windows application which allows you to test your website in different versions of Internet Explorer. You can have these configurations: IE8, IE7 IE 6 and IE5.5 on Windows 7, Vista and XP, 7. The download package is of 24MB in size
– - ADOBE BROWSER LABS CROSS BROWSER TESTIN / /G TOOL SUITE SERVICE
Adobe Browser Labs is a commercial web-based tool from Adobe which allows you to get cross-browser screenshots for your website. You can test your website on these following configurations: Firefox 2.X and 3.X (Windows XP and Mac OS X), Internet Explorer 6.X and 7.X (Windows XP) and Safari 3.X (Mac OS X). At the time of writing of this post, Adobe was providing free limited accounts for testing purposes only.
CSS ناهماهنگی مرورگرها در رندر مقادیر پیش فرض
همانطور که دیدید هر مرورگری تگ ها را براساس الگوریتم پیش فرض موتور خود رندر می کند و این سرآغازی است بر مشکلی بنام
دیده شدن صفحات سایت شما بصورت متفاوت در مرورگرهای در border و padding، margin مختلف، بعنوان مثال مقادیر
مرورگرهای مختلف بصورت پیش فرض فرق می کند که این، یکی از مهمترین مشکالتی خواهد بود برای طراحی یک صفحه – سایت
میباشد.
Cross-Browser یکی از بهترین از راه حل ها میباشد استفاده از . و CSSتکنیکی است بنام راه اندازی مجدد خصوصیات پیش فرض
CSS کردن استایل های Resetبه تعبیری قابل فهم تر
CSS RESETAnother great way to ensure your site is cross browser compatible is to always reset your CSS before working on a
project. There are many different global CSS resets, but Eric Meyer’s one and Yahoo’s one are considered to be the most correct ones:
Eric Meyer’s Reset Reloaded
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
YUI’s CSS Reset
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;}
Either include thet CSS reset styling at the top of your stylesheet, or have Yahoo host it and simply link to it in your HTML-documents, right before your own stylesheet:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css">
CROSS BROWSER IN JAVA SCRIPT
شامل:JavaScriptتفاوت ها در
تفاوت تاریخ درJavaScript تفاوت در به کارگیریJavaScript تفاوت فراخوانی رویداد ها درavaScript) ) حالت های رندر صفحه در مرورگرهاDOCTYPE تفاوت در به کارگیریRich textها
در تاریخ JAVASCRIPTتفاوت
است.getYearتنها تفاوت موجود در تابع new سازگاری ندارد با اجرای دستور2000 که با مشکل سال ECMAScriptدر نسخه قدیمی تر
Date().getYear()
کم می شود 1900 برگردانده می شود. در این حالت سال کنونی از عدد 104 مقدار 2004در سال بدست می اید.104 عدد 2004 ولی برای 98 بدست می آید 1998که مثال برای
به کار گرفته getFullYear این نقیصه رفع شد و تابع جدیدی به نام 3 نسخه ECMAScriptدر کار کند.getFullYear اصالح شد تا همانند getYear هم تابع InternetExplorerمی شود. در
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در جاوا اسکریپت برای دسترسی به پارامترهای صفحه و رویداد از شی میکنند.
توسط پارامتر به رویداد ارسال می شود. این در event استاندارد این شی W3Cدر window.event از شی IE در 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.است
)دمدمی مزاج! - quirks صفحات را در حالت Internet Explorer 4مرورگرهای قدیمی مانند - View به منوی FireFoxپراشکال) رندر می کنند. برای دیدن وضعیت رندر صفحه می توانید در
> Page.بروید
.Mozillaمرورگرهای میکنند پشتیبانی را حالت سه
Standards mode
Almost standards mode
Quirks mode
STANDARDS MODE
به طور سختگیرانه ای رعایت می CSS و W3Cدر این حالت تمام ویژگی های شوند
این نوع رندر زمانی فعال می شود که ارسال شود.text/xml که mimetype* صفحه با نوع از نوع سیستم به صورت DocType* برای هر نوع
>DOCTYPE HTML SYSTEM> !
مثالکد:
!>DOCTYPE HTML SYSTEM "http://www.w3.org/TR/REC-html40/strict.dtd<"
های نامعلوم.doctype* برای نوع
ALMOST STANDARDS MODE . از بعد که است کوچکی شکافهای حل برای مدل این است کرده معرفی علت یک به را مدل این
. آید می پیش کوچک تصاویربرای مدل :looseهای doctypeاین شود می شناسایی
کد:
<!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 _ysterious Gaps
QUIRKS MODE
غیر و است اشکال از پر های کد با وب صفحات از پر اینترنت حاظر حال در. است استاندارد
طراحی آنها صحیح نمایش قدیمی های سایت با همخوانی برای حالت این. است شده
با ها سایت :DOCTYPEاین شوند می شناسایی زیر های: کد*
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
تعریف * doctypeبدون
. شد خواهد مطرح ادامه در که مباحثیکارگیری به در Rich teتفاوت
VALIDATION سایتBLOGFA
10 CROSS-BROWSER CSS PROPERTIES YOU’VE PROBABLY FORGOTTEN
1. Overflow
I know what you’re thinking: Nobody’s forgotten about the overflow property. It’s used all the time on <div> elements when you want them to scroll.
That is certainly the most well-known use of the overflow property, but I personally find that this property comes in quite handy when you want to give “auto height”, or natural vertical expansion, to a block level element that you don’t want to float.
This problem usually occurs in Firefox; the element is essentially “collapsed” — unless you float it. But floating often brings about other layout issues, and using float in this manner goes against the purpose of the float property.
So, use overflow: hidden to allow a block level element (usually a <div> that does not have a set height) to expand vertically with the content it contains, even when it contains floated elements
2 .VISIBILITY
Using visibility: hidden is easily confused with display: none, but the difference between them is very important. 99% of the time, when you want to hide an element on your page, you’ll use display: none. Using display: none will ensure that the space occupied by the “invisible” element disappears along with the element itself. But there are some rare instances when you don’t want this to happen. Instead, you want the space that the element occupies to remain exactly the same (possibly because it’s being replaced by another element that was previously invisible). So in this case, the correct CSS would be visibility: hidden.
Thus, display: none affects the flow of the document; visibility: hidden doesn’t
3 .WHITE-SPACE
Any time you want to keep an inline element from breaking onto a second line, simply apply white-space: nowrap.
While this property comes in handy for short anchor text and span elements, it should be used with caution, since it can potentially cause an element to become larger in width than the element that contains it.
4 .FONT-VARIANT
The text-transform property is used quite often, and is highly recommended for controlling the case of text. It offers values of capitalize (also called “title case”), uppercase, and lowercase. But only the font-variant property allows us to set text to “small-caps”.
5 .LETTER-SPACING
In almost 10 years of web development, I think I’ve used letter-spacing twice, but it provides a very simple, yet practical, effect, and it does exactly what it says — it adjusts the space between letters. The only thing to keep in mind is that the space set by letter-spacing is not absolute space, but rather, it is relative to the space that already exists by default. So, the letter-spacing property legally accepts negative values. Therefore, using letter-spacing: -1px will decrease the space between elements by 1 pixel. And letter-spacing: 3px will increase any already existing space.
6 .Z-INDEX
I think z-index is one of a few CSS properties that has caused the most head-scratching in the web development world. You would think that, since it sets the stacking order of the element to which it’s applied, then it should be quite simple: If you set the z-index to a high value, it will stack the element on top of everything; if you set it to a low value, it will stack the element below everything.
But, unfortunately, it’s not that simple. First, the element that has a z-index value must have its position property set to either relative, absolute, or fixed. In addition, in order to cause the specified element to actually override the page’s default stacking order (which is the order in which the elements appear in the XHTML), the other elements must also have a specified z-index and a specified position of one of the three values mentioned above.
In short: z-index only works on positioned elements, and only restacks in relation to other positioned and z-indexed elements.
z-index is probably not a “forgotten” property — but it’s most certainly a constantly abandoned one.
7 .BORDER-COLLAPSE
Tables are not dead. They have their place in standards-compliant, accessible web pages, and they should still be used — just not for layouts. When they are used, they most often have a visible border, so be sure to use border-collapse: collapse to make sure the borders aren’t doubled.
8 .BACKGROUND-ATTACHMENT
If you want to see this one in action, visit the css Zen Garden. I haven’t used this property much lately, but it always serves a practical purpose when it is needed. background-attachment allows you to force a background image to be “fixed” in relation to the viewport, preventing it from scrolling with the rest of the document. With some creativity, you can make some neat effects. Here is one of my favourite examples.
9 .TEXT-INDENT
You would think the only reason this property was created was to allow text to be pushed completely off the page when using image replacement techniques on titles or navigation bars. That is definitely the most common reason for using text-indent. But don’t forget it’s actual purpose: To indent the first line of text in a paragraph, similar to what you see in print media.
10 .FONT-WEIGHT / FONT-STYLE
Although these are different properties, and could easily be numbers 10 and 11 on this list, I’m putting them together because what is “forgotten” about them is exactly the same: They replace something that you could just as easily accomplish via markup.
Usually the font-weight property is set to “bold” and font-style is set to “italic”. But why not just use <strong> and <em>? Well, it depends on what you’re using them for.
Basically, if you want the “bold” or “italic” text to be emphasized for keyword optimization, then you should apply the change via markup, so search engines will see the marked up words and give them more weight. On the other hand, if you want to add visual emphasis to specific words or phrases for the reader’s sake, but don’t want search engines to give more weight to those words, then use font-weight: bold or font-style: italic instead.
RESOURCES http://www.nukelearn.com/index.php
http://www.my-debugbar.com/wiki/IETester/HomePage
http://litmusapp.com/
http://browsershots.org/
http://www.browsercamp.com/
http://spoon.net/browsers/
http://crossbrowsertesting.com/
https://barnamenevis.org/forum/showthread.php?t=54639
http://www.w3.org/
http://validator.w3.org/
http://blog.datisdesign.com/persian/?p=37
hhttp://ipinfo.info/netrenderer/ttp://www.nukelearn.com/index.php
http://developer.practicalecommerce.com/articles/2111-Three-Techniques-for-Cross-Browser-CSS-Gradients
http://www.workingwith.me.uk/articles/css/cross-browser-drop-shadows
http://www.noupe.com/tools/the-importance-of-cross-browser-compatibity-tips-and-resources.html
http://developer.practicalecommerce.com/articles/2111-Three-Techniques-for-Cross-Browser-CSS-Gradients
http://webdeveloperplus.com/css/15-ways-to-improve-css-techniques-using-jquery
http://www.bestdesigntuts.com/50-css-techniques-designers-should-know/
http://www.aarongloege.com/blog/web-development/css/cross-browser-techniques/
http://www.impressivewebs.com/10-cross-browser-css-properties-youve-probably-forgotten/
میتوانید وبالگ این در را دیگر مقاالت و مقاله این درباره بیشتر اطالعاتکنید : پیدا
-Cyber .space blogfa
پایا با تشکر از توجه شمان