Bài rất hay về thiết kế website sử dụng cho tất cả các trình duyệt

Xem <a href="http://www.tjkdesign.com/articles/branching.asp">chi tiết ở đây</a>
<h3>
The issue with hacks inside styles sheets</h3>
Embedding <acronym title="Cascading Styles Sheet">CSS</acronym> filters within a styles sheet may:
<dl>
<dt>- invalidate the sheet:</dt>
<dd>some hacks are "safe", but the validator chokes on more than a few.
</dd>
<dt>- create unecessary declarations:</dt>
<dd>a declaration that targets a <i>single</i> browser is served to <i>all</i> <acronym title="User Agent">UA</acronym>s.
</dd>
<dt>- create redundant declarations:</dt>
<dd>a same attribute is used more than once with <i> different values</i> (see below).
</dd>
<dt>- create cryptic declarations and rules:</dt>
<dd>For example, the <a class="outlink" href="http://www.tantek.com/CSS/Examples/boxmodelhack.html" title="Visual representation">Box Model Hack</a> looks like this:
<pre><code>div.content {
width:400px;
voice-family: "\"}\"";
voice-family:inherit;
width:300px;
}
html>body .content {
width:300px;
}</code></pre>
</dd></dl>
<h3>
The solution</h3>
By doing the branching <i>inside</i> the <acronym title="eXtensible HyperText Markup Language">(X)HTML</acronym> markup, it is possible to contain what I call "proprietary fixes" within specific files. The main advantage of this approach is that it dramatically improves maintainability.
<img alt="Take note" class="impIcon" src="http://www.tjkdesign.com/img/important.gif" /><acronym title="For your information">FYI</acronym>: moving hacks from the styles sheets (the presentation layer) to the <acronym title="eXtensible HyperText Markup Language">(X)HTML</acronym> markup is considered bad practice by some (a very few).
<h3>
The workflow</h3>
Follow these steps to make your documents 99.99% <a class="outlink" href="http://centricle.com/ref/css/filters/?highlight_columns=true" title="Great collection"> hack</a> free:
<ol>
<li> Start with the <a class="outlink" href="http://www.alistapart.com/stories/doctype/" title="Fix Your Site With the Right DOCTYPE!">right <acronym title="Document Type Declaration">DTD</acronym></a>. Choose one of the Doctypes below to make sure your documents won't mix presentation markup with structural markup.


<dl>
<dt>HTML 4.01 Strict:</dt>
<dd><code> "http://www.w3.org/TR/html4/strict.dtd"></code>
</dd>
<dt>XHTML 1.0 Strict:</dt>
<dd><code> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></code>
</dd>
<dt>XHTML 1.1 DTD:</dt>
<dd><code> "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"></code>
</dd></dl>
<div>

<img alt="Take note" class="impIcon" src="http://www.tjkdesign.com/img/important.gif" />This first step is about creating well-formed documents and producing a clean markup, but it is not a requirement for this branching method to work. You can "downgrade" the <acronym title="Document Type Declaration">DTD</acronym> or even put <acronym title="Microsoft Internet Explorer">MSIE</acronym> 6 into quirks mode if you want (or need) to.
</div>




</li>
<li>Mark up your document with <a class="outlink" href="http://www.ermanz.govt.nz/news-events/archives/presentations/semantichtml.html" title="Use tags that have specific meaning assigned to them.">semantic</a> in mind (you should read these entries too: <a class="outlink" href="http://mpt.net.nz/archive/2004/05/02/b-and-i" title="Semantic elements vs. presentational elements.">when semantic markup goes bad</a> and <a class="outlink" href="http://www.simplebits.com/bits/simplequiz/" title="When to P.">SimpleQuiz</a>). Make sure it includes all the necessary structural elements and hooks (IDs, classes, etc.).</li>


<li>Run your file through the <a class="outlink" href="http://validator.w3.org/" title="Check your markup.">validator</a>. Do <i>not</i> move to step #4 until it validates.</li>


<li>Congratulations! Now your file is ready for prime time.
In the markup, below the <code>title</code> element, write the following:

<pre><code><style media="screen, projection" type="text/css">
@import "/css/basic.css";
</style>
</code></pre>
About the media types:

<ul>
<li><code>screen</code> is to make sure we do not serve the style sheet to all <acronym title="User Agent">UA</acronym>s out there.</li>
<li><code>projection</code> will cause Opera to use the sheet in <a class="outlink" href="http://www.designdetector.com/archives/03/02/TamingOperasFullscreenMode.php">full screen mode</a>.</li>
</ul>




</li>
<li><a href="http://www.blogger.com/post-create.do" name="step5"></a>If you don't know about the <a class="outlink" href="http://www.w3.org/TR/REC-CSS2/box.html" title="Box Dimensions">box model</a> already, it is a good time to read the beginning of this <a href="http://www.tjkdesign.com/articles/boxmodel.asp" title="IE5 Win does its own maths">article</a>. If you're already aware of the issue, remember to style accordingly (do not mix border and/or padding declarations with dimensions on the same axis).
Now open "basic.css" in your favorite editor and create the rules that will style your document the way you want. Go through the whole process <i>only</i> using the browser you think is the best when it comes to web standards.</li>


<li>Before going any further, you must accept that it is perfectly OK for a web page to not look <i>exactly</i> the same in every browser.
Now open your document in <acronym title="Microsoft Internet Explorer">MSIE</acronym> 6. How does it look? If it looks fine and appears to <i>function</i> properly, then skip to <a href="http://www.tjkdesign.com/articles/branching.asp#step9">step #9</a>.</li>


<li>To fix <acronym title="Microsoft Internet Explorer">MSIE</acronym> 6 issues, you create a new <acronym title="Cascading Styles Sheet">CSS</acronym> file (msie6.css) that you import using a <a href="http://www.tjkdesign.com/articles/conditional_comments.asp" title="What you should know about Conditional Comments">Conditional Comment</a>, like this:

<pre><code>
</code></pre>




</li>
<li>You open "msie6.css" and you use the "usual suspects" to take care of layout and behavior issues:


<dl>
<dt><code>height:0</code></dt>
<dd>To give <a class="outlink" href="http://www.satzansatz.de/cssd/onhavinglayout.html" title="Find out how 'layout' can change the rendering of and the relationships between elements.">layout</a> to an element.
</dd>
<dt><code>display:inline</code></dt>
<dd>To prevent <acronym title="Microsoft Internet Explorer">MSIE</acronym> to double a margin value on float.
</dd>
<dt><code>cursor:hand</code></dt>
<dd>To force a change of the cursor's shape if needed. Note that such declaration is safe here, but would make the regular style sheet fail validation.
</dd>
<dt><code>#whatever {overflow-x:hidden}</code></dt>
<dd>When <i>italic</i> text "pushes the envelop".
</dd></dl>
Etc.



</li>
<li><a href="http://www.blogger.com/post-create.do" name="step9"></a>Now we move to <acronym title="Microsoft Internet Explorer">MSIE</acronym> 5/Win (if you don't know how to run <acronym title="Internet Explorer">IE</acronym> 5 versions along with <acronym title="Internet Explorer">IE</acronym> 6, then read this great <a class="outlink" href="http://www.positioniseverything.net/articles/multiIE.html" title="Taming Your Multiple IE Standalones">article</a> by <a href="http://free.pages.at/staudinger/">Manfred Staudinger</a>). If you have styled your elements following my advice in <a href="http://www.tjkdesign.com/articles/branching.asp#step5" title="You shall not mix border and padding with dimensions on the same axis!">step #5</a>, you should not have too many problems related to box model. But in any case, Conditional Comments are there to help you out again. This time we use the following:

<pre><code>
</code></pre>




</li>
<li>Same thing again, you use "ie5win.css" to fix what needs to be fixed.</li>


<li>At this point, you can check your document in any other <acronym title="Internet Explorer">IE</acronym> versions you want, using extra Conditional Comments to target any specific vector version. On the other hand, depending on the fixes needed to cater various <acronym title="Internet Explorer">IE</acronym> builts, it is possible to implement Conditional Comments in a different way. For example <code> <style media="screen" type="text/css">
@import "/css/msie6.css";
</style> <link href="/css/print.css" media="print" rel="stylesheet" type="text/css"></link> <style media="handheld" type="text/css">
@import "/css/handheld.css";
</style> <script src="/js/styles.js" type="text/javascript">
</script> </code> <img alt="Take note" class="impIcon" src="http://www.tjkdesign.com/img/important.gif" /> Dreamweaver users may download this <a href="http://www.tjkdesign.com/misc/downloads/TJKCSSBranching_v11.mxp" title="Dreamweaver Extension (MXP file)">Snippet</a> (version 1.1 - 2kb) that will write all of the above for them. <img alt="Take note" class="impIcon" src="http://www.tjkdesign.com/img/important.gif" /> Make sure "basic.css" comes before other sheets served to the same media type. The script can go anywhere within the <code>head</code> element. <img alt="Take note" class="impIcon" src="http://www.tjkdesign.com/img/important.gif" />Note that there are more media types than the ones I'm using here. The complete list of media types in HTML4 is:

<ul id="mediaType">
<li><code>aural</code>,</li>
<li><code>braille</code>,</li>
<li><code>handheld</code>,</li>
<li><code>print</code>,</li>
<li><code>projection</code>,</li>
<li><code>screen</code>,</li>
<li><code>tty</code>,</li>
<li><code>tv</code>.</li>
</ul>
CSS2 defines the same list with the addition of <code>embossed</code> to differentiate between braille tactile feedback devices and braille printers. Also, <code>all</code> is used to indicate that the style sheet applies to <i>all</i> media types.

<h3>
But what about Safari, Opera, Camino, Konqueror, etc.?</h3>
Our styles sheets are designed for:

<ol>
<li>"good" browsers with solid <acronym title="Cascading Styles Sheet">CSS</acronym> support.</li>
<li>"bad" browsers with weak <acronym title="Cascading Styles Sheet">CSS</acronym> support, but a decent market share.</li>
<li>"old" browsers with poor <acronym title="Cascading Styles Sheet">CSS</acronym> support used by people stuck with out-of-date <acronym title="Operating System">OS</acronym>es or machines.</li>
</ol>
My take on this is that if a <acronym title="User Agent">UA</acronym> doesn't fit in one of these three categories, then there should be no need to worry about it.


</li>
</ol>