cross browser compatibility n.
Skip this Video
Download Presentation
Cross-Browser Compatibility

Loading in 2 Seconds...

play fullscreen
1 / 19

Cross-Browser Compatibility - PowerPoint PPT Presentation

  • Uploaded on

Cross-Browser Compatibility. Myth or Reality?. There's a long tradition to be overcome Sniffers to look for browser and OS combinations Separate code forks for different browsers Special HTML "tricks" to overcome browser defaults and bugs Proprietary DOM and HTML

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Cross-Browser Compatibility' - shen

Download Now An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
myth or reality
Myth or Reality?
  • There's a long tradition to be overcome
    • Sniffers to look for browser and OS combinations
    • Separate code forks for different browsers
    • Special HTML "tricks" to overcome browser defaults and bugs
    • Proprietary DOM and HTML
  • So can cross-browser compatilibity be real?
the reality
The Reality
  • Yes! Cross-browser compatibility lies within your reach!
    • First, you must do as Yoda says: "Unlearn what you have learned"
    • Second, adjust your thinking for a new reality
    • Third, start coding!
  • Let's look at some common pitfalls and things that must be unlearned
shed the deadweight
Shed the Deadweight
  • Things to give up:
    • Invalid HTML
    • LAYER—it's dead and it's time to move on
    • Proprietary DOMs
      • document.layers died with LAYER itself
      • document.all is still alive, but it's also completely proprietary
    • Code forking
      • Most forking is based around incompatible proprietary DOMs, so give them up and forking is unnecessary
shiny new toys
Shiny New Toys!
  • Try playing with these:
    • Valid HTML
      • Purify your structure and compatibility will follow
    • W3C DOM
      • Both IE5.x+ and NS6 support the W3C DOM, so code written once can run in both with NO FORKING!
  • How can this process be any easier? Let's find out!
validating your html
Validating Your HTML
  • The fastest way to improve your pages
      • Any page that triggers an error is invalid and the problem needs to be fixed
      • If you can get a page to validate with no errors or warnings, you're golden
      • The results will be different depending on what DOCTYPE you use
    • There's a CSS validator too
        • Valid CSS is as important to page layout as valid HTML
doctype issues
  • Do NOT lie about your DOCTYPE!
    • If you have HTML 4.0 Transitional markup, then say so; don't claim XHTML 1.1 Strict!
    • The DOCTYPE you use will trigger one of two layout models in recent browsers
      • Old, missing, or transitional DOCTYPEs will trigger "legacy" layout mode
      • XML, XHTML, and strict DOCTYPEs will trigger "standards" layout mode
legacy vs standards
Legacy vs. Standards
  • What's the difference?
    • Plenty—too much to list here, in fact! Some highlights:
      • 'height' and 'width' do not apply to inline elements
      • 'width' means the content's width, not the aggregate of content + padding + border
      • 'class' and 'id' values are case-sensitive
      • units are required on length measures
      • 'body' and 'html' can be styled separately
common errors
Common Errors
  • We see a lot of recurring problems…
    • Generally poor structure:
      • TD elements outside of TRs
      • Unclosed TABLE elements
      • SPANs wrapped around DIVs
      • Badly-nested inline elements
      • FORMs spread across multiple cells, or wrapped around a few rows or cells of a table
    • Class and ID names treeated as though they're case-insensitive
an example of bad form
An Example of Bad FORM
  • Have you ever done this?
    • <table> <form action="script.cgi" method="put"> <tr>…</tr> </form></table>
      • That construct is invalid and can cause functionality and layout problems
      • Similarly, putting the <form> in one cell and </form> in a different cell is a bad idea
even worse markup
Even Worse Markup
  • Here's a popular one:
    • <span class="someThing"> <div>…</div></span>
      • Yikes! Wrapping an inline element around a block-level element is no good
        • The beginning of a block-level element implicitly terminates any unclosed elements, so the 'span' ends right before the 'div' begins
      • Convert the 'span' to a 'div', adjust your styles and scripts as necessary, and be happy
enjoy the free dom
Enjoy the Free DOM
  • Both IE5+ and NS6 follow the W3C DOM
    • You can manipulate style, structure, even content in a truly cross-browser fashion
    • Any other standards-compliant browser will be able to run the same scripts and get the same results
the proof is in the showing
The Proof Is In The Showing
  • A working example:
    • < sidebar/html401qr/attr.html>
    • The show/hide functionality is all W3C DOM-based and does no browser detection at all
      • Confession: there's an OS detect to set the proper graphic effect for the icons
picking a piece of html
Picking a Piece of HTML
  • There are two basic choices
    • document.getElementById('idname')
      • Lets you manipulate whatever element in the document has that unique 'id' value
    • document.getElementsByTagName('tagname')
      • Lets you manipulate all elements of a given type
    • There isn't a way to select elements by class name, so we'll just have to build one ourselves
  • The source:
    • function getElementsWithClassName(elementName,className) { var allElements = document.getElementsByTagName(elementName); var elemColl = new Array(); for (i = 0; i < allElements.length; i++) { if (allElements[i].className == className) { elemColl[elemColl.length] = allElements[i]; } } return elemColl;}
      • Use notes:
        • To get all elements with a given class call getElementsWithClassName('*','className');
        • Doesn't work with non-standard browsers (including IE4 and NN4.x)
forked source
Forked Source
  • The source:
    • function getElementsWithClassName(elementName,className) { var allElements; = document.getElementsByTagName(elementName); var elemColl = new Array(); if (document.getElementsByTagName) allElements= document.getElementsByTagName(elementName); else if (document.all) { // -=-=- IE4 code fork -=-=- if (elementName=='*') allElements= document.all; else allElements= document.all.tags(elementName); } for (i = 0; i < allElements.length; i++) { if (allElements[i].className == className) { elemColl[elemColl.length] = allElements[i]; } } return elemColl;}
21st century forking
21st Century Forking
  • The past:
    • Forking the script for every browser you want to support
      • Changing the behavior means rescripting in every tine
  • The present:
    • One script, many browsers
      • Changing the behavior is a one-time thing
      • Caveat: support for older browsers still requires forking
        • Of course, you probably already have that code available
if you must detect
If You Must Detect…
  • …do it properly!
    • Detecting on the browser name (navigator.appName) is NOT enough!
      • Both Netscape 4.x and Netscape 6.x will return "Netscape"
      • There needs to be some parsing of the user agent string to see who created the browser and what version it is
        • There are some good practical sniffers on
in summary
In Summary
  • Simple steps for simpler authoring
    • Transition from away from proprietary DOMs and toward the W3C DOM
    • The only code forks you should need are for old browsers that aren't up to standard
    • Validate your markup and CSS, and make sure your DOCTYPE is correct
    • Remember that the DOCTYPE affects which layout mode modern browsers will use