Presentation is loading. Please wait.

Presentation is loading. Please wait.

C ROSS BROWSER همخوانی وب سایت در مرور گرهای مختلف محقق : آرمان طوسی استادیار: مهندس احمد جنتی فرد.

Similar presentations


Presentation on theme: "C ROSS BROWSER همخوانی وب سایت در مرور گرهای مختلف محقق : آرمان طوسی استادیار: مهندس احمد جنتی فرد."— Presentation transcript:

1

2 C ROSS BROWSER همخوانی وب سایت در مرور گرهای مختلف محقق : آرمان طوسی استادیار: مهندس احمد جنتی فرد

3 World Wide Web Consortium Validation آزمایش اعتبار سایت Browser Compatibility Test W3C standard

4 C ROSS - 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.websiteweb applicationHTMLclient-side scriptweb browsers

5 C ROSS - BROWSER Example of cross-browser coding To follow this example, you must have basic knowledge of HTML and JavaScript. Consider this snippet of HTML code:JavaScript some text 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;

6 C ROSS - BROWSER In 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:W3CDOM MozillaInternet Explorer document.getElementById('sample').style.left = '200px';

7 یکی از اصول اولیه طراحی وب سایت اطمینان از نمایش صحیح و یکسان آن در مرورگرهای مختلف است. چون تلاش طراح سایت، پوشش دادن هر چه بیشتر بازدیدکنندگان احتمالی که از مرورگرهای مختلف استفاده می کنند است. در واقع هر Browser یک استاندارد دارد ( Browser (Compatible web Design

8 آزمایش معتبر بودن یک سایت یا همان Validation یکی از کارهای بسیار مهمی است که هر طراح و برنامه نویس وب باید آنرا در نظر داشته باشد. Validation چیست ؟ Validation روند آزمایش کردن یک صفحه وب در برابر استانداردهای کنسرسیوم وب World Wide Web Consortium یا همان W3C برای سندهای HTML و XML می باشد.World Wide Web Consortium

9 چرا باید سندهایمان را V ALIDATE کنیم ؟ یک دلیل بسیار مهم و ساده این است که سندهایی که بر مبنای استانداردهای W3C نمی باشند وابسته به غلط گیری مرورگری هستند که در آن در حال نمایش می باشند و این عامل باعث می شود که اینگونه صفحه ها بر روی مرورگرهای مختلف نمایش های مختلفی داشته باشند و یا اینکه به درستی نشان داده نشوند.

10 ممکن است خیلی از سایتها، حتی سایتهای بسیار معروف (yahoo, (google, Wikipedia را ببینید که Validate نمی شوند، این سایتها معمولا به خاطر نام و شهرتشان است که زیاد توجهی به این مساله نمی کنند. سایتهای عادی قادر به انجام این کار نیستند و نمی توانند برای خود شهرت ایجاد کنند. کمتر سایت داخلی را پیدا می کنید که Validate بشود !

11 http://validator.w3.org برای آزمایش Validate بودن

12 S UPPORTED 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.SGML or XML DTD 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.

13 نکات قابل توجه برنامه نویسان باید کد html, xhtml یا css ای را که در W3C میباشد چک (Validate) کنند تا از استاندارد بودن ان اطمینان پیدا کنند، ولی نکته ی حائز اهمیت در همین تگ های استاندارد اینه که مقدار Default Value برای Property ها در مرورگرهای مختلف متفاوت است

14 نکات قابل توجه تعریف doctype مناسب در بالای صفحه. داشتن یک سند خوش ترکیب(یعنی روابط پدر فرزندی المنت ها بخوبی رعایت شده باشد و تگ های باز شده حتما بسته شوند و...) جهت قالب بندی سایت حتما از مقادیر درصد استفاده شده و از بکار بردن موقعیت دهی مطلق به شدت اجتناب شود.

15 نکات قابل توجه باید همیشه برای یک تگ Image مقدار Border را برابر 0 قرار دهیم چون مقدار DefaultValue آن در بعضی Browser ها 0 و در بعضی 1 است تگ q/ معمولا در IE درست کار نمیکند تگ bgSound/ فقط در IE کار میکند

16 T OOLTIPS : در مرور گرهای قدیمی این امکان وجود دارد که برای لینکها با استفاده از ویژگی alt یک ToolTip ایجاد کنیم. در حالی که در استاندارد W3C برا این منظور ویژگی title در نظر گرفته شده است. Old browsers: کد : HyperLink W3C standard: کد : HyperLink

17 تگ های جایگزین: زبان Html دارای تعدادی کدهای جایگزین برای برخی کاراکترها می باشد که در آدرس http://www.w3.org/TR/REC-html40/sgml/entities.html تعریف شده اند. این کدها معمولا به نقطه ویرگول(;) ختم می شوند.http://www.w3.org/TR/REC-html40/sgml/entities.html مشکل مرورگر های قدیمی اینجاست این کد ها را بدون نقطه ویرگول هم قبول میکنند. Old Browsers:کد: &nbsp Foo &nbsp&nbsp Foo WSC standard:کد: Foo Foo

18 تفاوت در کد های ( CSS (C ASCADE STYLE SHEE ضرورت صحیح بودن Mimetypes در ارسال فایلهای CSS برخی تعریف های CSS ممکن است به یک فایل مستقیما لینک نداشته باشند و در عوض به یک صفحه وب که برای آن محتویات رو ایجاد میکند لینک داشته باشد. در این صورت باید حتما Mimetype (با استفاده از این تعریف نوع محتویات ارسالی تعیین می شود که آیا متن است یا تصویر یا اطلاعات و..) باید کاملا صحیح و برابر text/css باشد. در غیر این صورت نادیده گرفته می شود. مثلا مانند زیر: کد: <<link rel="stylesheet" type="text/css" href="GetCSS.aspx"

19 رعایت واحد های اعداد بسیاری از صفحات وب واحد های اعداد به کار رفته را ثبت نمی کنند که این یک مشکل در استاندارد W3C شناخته می شود. برای مثال در تعریف طول یک مقدار حتما باید واحد طول آن باید مشخص باشد که عبارتند از px بر حسب Pixel pt برحسب Point کد : CSS and units example // works in strict mode Text // will fail in strict mode Text

20 به کارگیری CSS در J AVA S CRIPT با استفاده از استاندارد w3C می توان به طور مستقیم به خصوصیات و style ها دسترسی پیدا کرد: کد : Text var myElm = document.getElementById("myDiv"); myElm. style.width = "40px";

21 تغییر رنگ لینک ها هنگام فعال بودن ((L INK H OVER مدلی که برای تغییر رنگ لینک ها در اکثر سایت ها استفاده می شود از مدل Internet Explorer تبعیت می کند. در حالی که این اشتباه است. طراحان معمولا از ویژگی a:hover برای تغییر رنگ لینک ها استفاده می کنند. در این IE این ویژگی فقط بر لینک ها اثر میکند در حالی که در W3C این ویژگی علاوه بر لینک ها (تگ a) بر Bookmark ها هم اثر میکند. این به این علت است هر دوی اینها (لینک و Bookmark) با استفاده از تگ A ( حرف اول Anchor) معرفی می شوند. مثال صفحه بعد را در هر دو مرور گر IE و FireFox امتحان کنید تا به تفاوت پی ببرید:

22 کد: a:hover {color: green;} This text should turn green when you hover over it. This text should change color when hovered over, but doesn't in Internet Explorer. اگر از این وضع راضی نیستید و می خواهید لینک ها رو همانند IE نمایش دهید *- به جای ویژگی a:hover از ویژگی a:link:hover استفاده کنید. *- و یا اینکه در Bookmark ها قبل از آغاز متن آن، تگ را ببندید: کد:

23 برای تست سازگاری سه راه داریم : 1- استفاده از خدمات آنلاین سایت های خاص 2- استفاده از نرم افزارها 3- نصب مرورگرها معرفی روش هایی که در برگیرنده این امکان هستند

24 1- BrowsershotsBrowsershots 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.EpiphanyFirefoxKonquerorOperaLinuxSafari WindowsMac OS

25 2- B ROWSERCAMPB ROWSERCAMP 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.

26 3- X ENOCODE B ROWSER S ANDBOXX ENOCODE B ROWSER S ANDBOX 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.

27 4-C ROSS B ROWSER T ESTINGC ROSS B ROWSER T ESTING 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.many different configurationsdemo

28 5-N ET R ENDERERN ET R ENDERER 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.

29 6-L ITMUSL ITMUS 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.

30 7-IET ESTERIET ESTER 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

31 A DOBE B ROWSER L ABS – C ROSS -B ROWSER T ESTING T OOL /S UITE /S ERVICE 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.

32 همانطور که دیدید هر مرورگری تگ ها را براساس الگوریتم پیش فرض موتور خود رندر می کند و این سرآغازی است بر مشکلی بنام دیده شدن صفحات سایت شما بصورت متفاوت در مرورگرهای مختلف، بعنوان مثال مقادیر padding، margin و border در مرورگرهای مختلف بصورت پیش فرض فرق می کند که این، یکی از مهمترین مشکلاتی خواهد بود برای طراحی یک صفحه – سایت میباشد. Cross-Browser یکی از بهترین از راه حل ها میباشد استفاده از تکنیکی است بنام راه اندازی مجدد خصوصیات پیش فرض CSS. و به تعبیری قابل فهم تر Reset کردن استایل های CSS

33 CSS R ESET Another 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;

34 } /* remember to define focus styles! */ :focus { outline: 0; } body { line-height: 1; color: black; background: white; } ol, ul { list-style: none; }

35 /* 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: "" ""; }

36 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; }

37 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:

38 C ROSS BROWSER IN JAVA SCRIPT تفاوت ها در JavaScript شامل: تفاوت تاریخ در JavaScript تفاوت در به کارگیری JavaScript تفاوت فراخوانی رویداد ها در avaScript حالت های رندر صفحه در مرورگرها ( (DOCTYPE تفاوت در به کارگیری Rich text ها

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

40 برای مثال کد زیر در نظر می گیرد که تگ D IV از قبل رندر شده است و آماده است: کد : Loading... document.getElementById("foo").innerHTML = "Done."; این کد قابل اطمینان نیست زیرا ممکن است تعریف تگ بعد از بلوک scipt باشد که در این صورت جاوا اسکریپت با اشکال مواجه خواهد شد. کد زیر توصیه می شود : Loading... function doFinish() { var element = document.getElementById("foo"); element.innerHTML = "Done."; }

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

42 تفاوت فراخوانی رویداد ها در J AVA S CRIPT در جاوا اسکریپت برای دسترسی به پارامترهای صفحه و رویداد از شی event استفاده میکنند. در W3C استاندارد این شی event توسط پارامتر به رویداد ارسال می شود. این در حالی است که برای دسترسی به شی Event در IE از شی window.event استفاده میکنند. برای ارسال پارامتر event به رویداد، رویداد را اینگونه تعریف میکنند. Click me! برای حل مشکل دسترسی به این شی در مرورگرهای مختلف می توانید از کد زیر استفاده کنید: Click me! function handleEvent(aEvent) { var myEvent = window.event ? window.event : aEvent; }

43 پراپرتی هایی که این ابجکت فراهم می کند متفاوت است : Internet Explorer Mozilla altKey cancelBubble stopPropagation() clientX clientX clientY ctrlKey fromElement relatedTarget keyCode keyCode returnValue preventDefault() screenX screenY screenY shiftKey shiftKey srcElement target toElement currentTarget type type

44 حالت های رندر صفحه در مرورگرها ( (DOCTYPE نوع رندر شدن صفحه با توجه به نوع docType تعیین می شود: کد: بخش "-//W3C//DTD HTML 4.01 Transitional//EN" معرف عمومی است و بخش "http://www.w3.org/TR/html4/loose.dtd" معرف نوع است که یک URL است. مرورگرهای قدیمی مانند Internet Explorer 4 صفحات را در حالت quirks )دمدمی مزاج! - پراشکال) رندر می کنند. برای دیدن وضعیت رندر صفحه می توانید در FireFox به منوی View -> Page بروید.

45 Standards mode Almost standards mode Quirks mode

46 S TANDARDS MODE در این حالت تمام ویژگی های W3C و CSS به طور سختگیرانه ای رعایت می شوند این نوع رندر زمانی فعال می شود که * صفحه با نوع mimetype که text/xml ارسال شود. * برای هر نوع DocType از نوع سیستم به صورت < DOCTYPE HTML SYSTEM! < مثلا کد: * برای نوع doctype های نامعلوم.

47 A LMOST STANDARDS MODE این مدل را به یک علت معرفی کرده است. این مدل برای حل شکافهای کوچکی است که بعد از تصاویر کوچک پیش می آید. این مدل برای doctype های loose شناسایی می شود : کد : کد : کد : مرجع این مشکل http://developer.mozilla.org/en/docs...ysterious_Gapshttp://developer.mozilla.org/en/docs...ysterious_Gaps

48 Q UIRKS MODE در حال حاظر اینترنت پر از صفحات وب با کد های پر از اشکال است و غیر استاندارد است. این حالت برای همخوانی با سایت های قدیمی نمایش صحیح آنها طراحی شده است. این سایت ها با DOCTYPE های زیر شناسایی می شوند : * کد : * بدون تعریف doctype مباحثی که در ادامه مطرح خواهد شد. تفاوت در به کارگیری Rich te

49 V ALIDATION سایت BLOGFA

50

51

52

53

54

55 10 C ROSS -B ROWSER CSS P ROPERTIES Y OU ’ VE P ROBABLY F ORGOTTEN 1. Overflow I know what you’re thinking: Nobody’s forgotten about the overflow property. It’s used all the time on 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 that does not have a set height) to expand vertically with the content it contains, even when it contains floated elements

56 2. V ISIBILITY 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

57 3. W HITE -S PACE 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.

58 4. F ONT -V ARIANT 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”.

59 5. L ETTER -S PACING 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.

60 6. Z-I NDEX 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.

61 7. B ORDER -C OLLAPSE 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.

62 8. B ACKGROUND -A TTACHMENT 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.css Zen Garden Here is one of my favourite examples

63 9. T EXT -I NDENT 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.

64 10. F ONT -W EIGHT / F ONT -S TYLE 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 and ? 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.

65 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/

66 اطلاعات بیشتر درباره این مقاله و مقالات دیگر را در این وبلاگ میتوانید پیدا کنید : Cyber-space.blogfa

67 با تشکر از توجه شما


Download ppt "C ROSS BROWSER همخوانی وب سایت در مرور گرهای مختلف محقق : آرمان طوسی استادیار: مهندس احمد جنتی فرد."

Similar presentations


Ads by Google