Standards-compliant cross-compatibility
I've been working on the problem of absolute compatibility for a while now. I've never found a simple, straight-forward tutorial to do this (though I haven't really looked; the challenge keeps me entertained :P), so for any curious or ambitious webdesigners I'll give a few pointers I've discovered.
Fixing IE for Windows
First, Internet Explorer. It's evil. Pure evil. If you forget about it, cross compatibility is easy. Unfortunately, W3School statistics estimate that 75.1% of users browse with Internet Explorer 5.5 or 6. Considering that IE for Windows interprets the box model (among other things) differently than other browsers, this can be a little problematic. Fortunately, it's so evil that even Microsoft had to notice eventually, and there is a conditional 'comment' that works with Internet Explorer 5+.
The above code is on my (experimental) website and is used to fix a problem in which Internet Explorer will render text partially outside it's paragraph container and refuse to display it under certain conditions. The important parts are the first and last lines. All other browsers will see the and see it as a comment, thus will ignore it entirely. This can contain any code (PHP, text, HTML, CSS, etc). However, since the conditional statement is HTML, it can't be inserted anywhere HTML can't be inserted; a CSS stylesheet, for example. The solution is usually to put it in the HTML file itself (as in the first example), and perhaps use server-side includes to insert it easily into multiple pages.Code:<!--[if IE]> <style type="text/CSS"> .ie-topboxfix { margin-top: .6em; } </style> <![endif]-->
Since CSS is, by definition, cascading, you can use this feature to supercede the proper code with the IE code. For example, you can use CSS to position your boxes one way, then follow the proper code with this conditional statement that gives IE it's dose of quirkiness. The biggest benefit of this is that it is not a hack; it doesn't rely on a bug to fix a bug, and thus can't produce undesirable effects in other browsers or in a hypothetical future version of the browser it's intended to fix. A secondary benefit is that since it's technically a comment, it's standards-compliant; it validates as proper XHTML Strict (or whichever version of HTML you use).
Relative text
There are many ways to be cross-resolution compatible (shortened to CRC because I'm lazy), but nearly all of them involve either having multiple versions of something or other, or using scripts. Multiples versions of anything are an unnecessary hassle, and scripts require either than the user have or allow that script (as in the case of javascript) or that your server be compatible with or allow that script (as in the case of PHP). There's a (debatably) easier way to do it. The key, when you think about it, is relativity. There are only two relative units, and these are percentages and ems. Guess which units you should use?
An em is equal to the default font size of the user's browser. In most browsers, that is 16px, so 1em=16px. Font size can be easily rendered CRC by using ems, especially if you use CSS. For example, consider the following hypothetical code (off the top of my head, please correct me if you see errors):
This will result in the section title being twice the default font-size, the subtitle 1.6 times the default font-size, et cetera. You can combine this with other CSS properties like text-decoration to achieve the results you want. This is important because (a) the default font-size is generally the optimal reading size for that browser and operating system, and (b) this type of unit can be resized in all browsers. Go ahead, try it; you'll notice most of the font on this forum can't be resized (unless you use a standards-compliant browser like Firefox).Code:<style type="text/CSS"> h1 {font-size: 2em;} h2 {font-size: 1.6em;} h3 {font-size: 1.2em;} h4 {font-size: 1em;} h5 {font-size: .6em;} </style> (...) <div class="blah"> <h1>Some Section Title</h1> <h2>Some Subtitle</h2> <h3>Some important text.</h3> <h4>Normal text.</h4> <h5>Footnote... or something.</h5>
Relative boxes
Boxes, in this case, refers to any block element (paragraphs, divs, spans, images, et cetera). As you may have guessed, the unit you'll be using here is percentages. The important detail about this is that they (should) be relative to their container (example later). Let us say you want two columns on your screen with a margin on the edges and between them. You want these two columns to look exactly the same on any resolution, from the 1280x1020 insane person to whatever resolution those cell phones have. To do this, you can use code somewhat like this:
This code should make each column precisely 45% of the window width (you can see this by resizing your window), with a 3% outer margin and 4% inner margin (improper terms, but you know what I mean -.-). The percentages are relative to the window, since only the body and HTML tags contain them. If you were to create div elements within those div elements (nest them), their sizes would be relative to their parent div elements.Code:<style type="text/CSS"> .column-left { float: left; margin-left: 3%; width: 45%; } .column-right { float: right; margin-right: 3%; width: 45%; } </style> <div class="column-left">Blah.</div> <div class="column-right">Blah.</div>
And that's about it. Just experiment with those three concepts (screwy IE fix, relative text, and relative boxes) and you should be able to design a completely fluid, cross-browser design. The only problem with this design (inevitably) is that it's only compatible with browsers beginning around 1999 to 2000. This shouldn't be a problem; people are slow to update, but not (usually) that slow.
I'm designing my new website using all the above points as well as several others, and it'll include a section for webdesign tutorials and a forum for help with those tutorials. Feel free to ask questions, point out mistakes, make suggestions, et cetera; in the spirit of open source, everyone can contribute and will be fully credited in the tutorial. I'll correct this tutorial as improvements are brought up. :)
Reply With Quote
Originally Posted by Pathoschild
Bookmarks