mozilla

Revision 36707 of Making your page using web standards - how to

  • Revision slug: Using_Web_Standards_in_your_Web_Pages/Making_your_page_using_web_standards_-_how_to
  • Revision title: Making your page using web standards - how to
  • Revision id: 36707
  • Created:
  • Creator: Dikrib
  • Is current revision? No
  • Comment 10 words added, 626 words removed

Revision Content

First, see fixing common validation problems.

Then see these additional steps tips:

I use <font>. How to define or to replace <font> with CSS?

The purpose of the deprecated FONT element is to specify typeface, color and size of the enclosed text. This functionality has been offloaded from HTML to CSS. The FONT element can be directly replaced with a SPAN element that includes the same style information:

<p><font color="blue" face="Helvetica">
A really <font size="+1">big</font> shoe.
</font></p>

... becomes:

<p><span style="color: blue; font-family: Helvetica, sans-serif;">
A really <span style="font-size: larger;">big</span> shoe.
</span></p>

... or even more concisely:

<p style="color: blue; font-family: Helvetica, sans-serif;">
A really <span style="font-size: larger;">big</span> shoe.</p>

This is appropriate usage for a local change to the font. However, this is not the best use of styles; the strength of CSS lies in the ability to gather text and other styling into logical groupings that can be applied across a document, without repeating the specific styling on every element that requires it.

More on conversion of <FONT>: W3C Quality Assurance tip for webmaster: Care With Font Size, Forget <font> and use CSS

I use <center> or align="center". How to align with CSS?

The CSS1 text-align property specifies how text or inline elements (like an image) are aligned within an element.

<p style="text-align: center;"><img src="..." width="..."
height="..." alt="..."></p>
// will center the image inside the <p> element

CSS margin-left: auto; margin-right: auto; properties will center a block-level element within its containing block. Defining margin-left and margin-right is for block-level elements. When both margin-left and margin-right are auto, they are set to equal values, thus centering a block-level element within its parent.
CSS1 horizontal formating

Worth mentioning is the excellent tutorial:
Centring using CSS by David Dorward
Also Interactive demo on CSS horizontal alignment and horizontal formating by Gérard Talbot

How to replace bgcolor? How to colorize background with CSS?

The bgcolor attribute can be replaced with CSS1 background-color property.

If you have

<td bgcolor="green" width="150">
... content here ...
</td>

... can replace it with:

<td style="background-color: green;" width="150">
... content here ...
</td>

How to upgrade markup code in specific cases: <embed>, <applet>, <marquee>, <bgsound>

What if I use <embed> for Flash or for a video?

Explaining in details how to do this would go beyond the scope of this article. Nevertheless, we recommend the following articles so that you can have a Flash movie or a video in your web page and, at the same time, have your page validate.

What if I use <applet>?

We recommend these resources:

Worth mentioning here: Java Upgrade Guide: Migrating From the Microsoft VM for Java to the Sun JRE http://java.sun.com/j2se/1.4.2/docs/...ide/index.html "after December, 2007, Microsoft will no longer support or provide a Java implementation with any of its products. (...) Those running applets in the Internet Explorer web browser will need to download and install an alternate VM."

What if I use <marquee>?

Marquee can be replaced with content string inside a <div> or <span> rotating over time with Javascript and DOM level 1. It must be said that this sort of effect is discouraged. Studies have shown that constantly moving objects or moving text disturb reading and weakens peripherical vision. DHTML marquee also greatly consumes user system resources (cpu, RAM) on tested browsers and will put modest systems under considerable stress. If after webpage assessment and consideration, you still want to include a marquee effect in your page, then you can use the following recommendable tutorials:
Cross-browser and web standard compliant Stock Ticker example by D. Rosenberg
Comprehensive web standard compliant alternative to <marquee> by D. Rosenberg
Firefox 2 and Firefox 3 support the non-standard <marquee> element. On the other hand, Firefox users can disable such support by customizing an userContent.css

What if I have <bgsound>?

Then use HTML 4.01 OBJECT, e.g.:
<OBJECT data="audiofile.wav" type="audio/wav" ...></OBJECT>
See this DevEdge article for information on rendering a sound OBJECT invisible within the page.
Web page background sound often slows down considerably web page loading; like the text effects above, music or sound accompanying a page is seldom appreciated. According to the survey page What we really hate on the web, 41.9% of survey respondents will avoid sites that automatically play music; 71.1% strongly dislike sites that automatically play music.
Why Playing Music on your Web Site is a Bad Idea by A. Gulez

Step 3: Validate your CSS code

Where can I validate my CSS code?

Free Online CSS validation services:

Built-in report of CSS parsing errors in modern browsers:

  • Error console in Firefox 3. From the menu, Tools/Error console; the error console reports CSS parsing errors.
  • Error console in Opera 9.5. From the menu, Tools/Advanced/Error console; the error console reports CSS parsing errors.
  • Error console in Safari 3. From the menu, Develop/Show Error console: the error console reports CSS parsing errors.
  • Error console in Icab 4. From the menu, Preferences/Show All/Other/Error report: the error console reports CSS parsing errors.

There are also other possible and excellent debugging CSS and DHTML tools, useful tools (Addons, Toolbars, Extensions) for developers. Here is a list of recommendable and free debugging tools from http://css.tests.free.fr/

<- Previous section: Benefits of web standards

Next section: Using the W3C DOM ->

Revision Source

<p>First, see <a href="/en/Fixing_common_validation_problems" title="Fixing common validation problems">fixing common validation problems</a>.</p>
<p>Then see these additional steps tips:</p>
<h5 name="I_use_.3Cfont.3E._How_to_define_or_to_replace_.3Cfont.3E_with_CSS.3F">I use <code>&lt;font&gt;</code>. How to define or to replace <code>&lt;font&gt;</code> with CSS?</h5>
<p>The purpose of the deprecated <code>FONT</code> element is to specify typeface, color and size of the enclosed text. This functionality has been offloaded from HTML to CSS. The FONT element can be directly replaced with a <code>SPAN</code> element that includes the same style information:</p>
<pre>&lt;p&gt;&lt;font color="blue" face="Helvetica"&gt;
A really &lt;font size="+1"&gt;big&lt;/font&gt; shoe.
&lt;/font&gt;&lt;/p&gt;</pre>
<p>... becomes:</p>
<pre>&lt;p&gt;&lt;span style="color: blue; font-family: Helvetica, sans-serif;"&gt;
A really &lt;span style="font-size: larger;"&gt;big&lt;/span&gt; shoe.
&lt;/span&gt;&lt;/p&gt;</pre>
<p>... or even more concisely:</p>
<pre>&lt;p style="color: blue; font-family: Helvetica, sans-serif;"&gt;
A really &lt;span style="font-size: larger;"&gt;big&lt;/span&gt; shoe.&lt;/p&gt;</pre>
<p>This is appropriate usage for a local change to the font. However, this is not the best use of styles; the strength of CSS lies in the ability to gather text and other styling into logical groupings that can be applied across a document, without repeating the specific styling on every element that requires it.</p>
<p>More on conversion of &lt;FONT&gt;: <a class="external" href="http://www.w3.org/QA/Tips/font-size#css">W3C Quality Assurance tip for webmaster: Care With Font Size, Forget &lt;font&gt; and use CSS</a></p>
<h5 name="I_use_.3Ccenter.3E_or_align.3D.22center.22._How_to_align_with_CSS.3F">I use <code>&lt;center&gt;</code> or <code>align="center"</code>. How to align with CSS?</h5>
<p>The <a class="external" href="http://www.w3.org/TR/REC-CSS1#text-align">CSS1 text-align property</a> specifies how text or inline elements (like an image) are aligned within an element.</p>
<pre>&lt;p style="text-align: center;"&gt;&lt;img src="..." width="..."
height="..." alt="..."&gt;&lt;/p&gt;
// will center the image inside the &lt;p&gt; element</pre>
<p>CSS <code>margin-left: auto; margin-right: auto;</code> properties will center a block-level element within its containing block. Defining margin-left and margin-right is for block-level elements. When both <code>margin-left</code> and <code>margin-right</code> are <code>auto</code>, they are set to equal values, thus centering a block-level element within its parent.<br> <a class="external" href="http://www.w3.org/TR/REC-CSS1#horizontal-formatting">CSS1 horizontal formating</a></p>
<p>Worth mentioning is the excellent tutorial:<br> <a class="external" href="http://dorward.me.uk/www/centre/">Centring using CSS</a> by David Dorward<br> Also <a class="external" href="http://www.gtalbot.org/NvuSection/NvuWebDesignTips/HorizontalAlignment.html">Interactive demo on CSS horizontal alignment and horizontal formating</a> by Gérard Talbot</p>
<h5 name="How_to_replace_bgcolor.3F_How_to_colorize_background_with_CSS.3F">How to replace <code>bgcolor</code>? How to colorize background with CSS?</h5>
<p>The <code>bgcolor</code> attribute can be replaced with <a class="external" href="http://www.w3.org/TR/CSS1#background-color">CSS1 background-color property</a>.</p>
<p>If you have</p>
<pre>&lt;td bgcolor="green" width="150"&gt;
... content here ...
&lt;/td&gt;</pre>
<p>... can replace it with:</p>
<pre>&lt;td style="background-color: green;" width="150"&gt;
... content here ...
&lt;/td&gt;</pre>
<h4 name="How_to_upgrade_markup_code_in_specific_cases:_.3Cembed.3E.2C_.3Capplet.3E.2C_.3Cmarquee.3E.2C_.3Cbgsound.3E">How to upgrade markup code in specific cases: <code>&lt;embed&gt;</code>, <code>&lt;applet&gt;</code>, <code>&lt;marquee&gt;</code>, <code>&lt;bgsound&gt;</code></h4>
<h5 name="What_if_I_use_.3Cembed.3E_for_Flash_or_for_a_video.3F">What if I use <code>&lt;embed&gt;</code> for Flash or for a video?</h5>
<p>Explaining in details how to do this would go beyond the scope of this article. Nevertheless, we recommend the following articles so that you can have a Flash movie or a video in your web page and, at the same time, have your page validate.</p>
<ul> <li><a class="external" href="http://www.alistapart.com/articles/flashsatay">Embedding Flash While Supporting Standards</a> by Drew McLellan, November 2002</li> <li><a class="external" href="http://www.alistapart.com/articles/byebyeembed">Bye Bye Embed: Embedding a video</a> by Elizabeth Castro, July 2006</li> <li><a class="external" href="http://wiki.dreamhost.com/index.php/Object_Embedding">Embedding Object with valid code</a> by MediaWiki, March 2007</li> <li><a class="external" href="http://ln.hixie.ch/?start=1081798064&amp;count=1">Embedding flash without &lt;embed&gt;</a> by Ian "Hixie" Hickson, April 2004</li> <li><a class="external" href="http://alistapart.com/articles/flashembedcagematch">Flash Embedding Cage Match</a> by Bobby van der Sluis, February 2006</li>
</ul>
<h5 name="What_if_I_use_.3Capplet.3E.3F">What if I use <code>&lt;applet&gt;</code>?</h5>
<p>We recommend these resources:</p>
<ul> <li><a class="external" href="http://ww2.cs.fsu.edu/%7Esteele/XHTML/appletObject.html">Java applet using &lt;object&gt; tag</a> by Shayne Steele</li> <li><a class="external" href="http://www.w3.org/TR/html401/struct/objects.html#edef-APPLET">HTML 4.01 on Including an applet</a></li> <li><a class="external" href="http://www.w3.org/TR/html401/struct/objects.html#edef-OBJECT">HTML 4.01 on Including an object</a></li>
</ul>
<p><span class="comment">Worth mentioning here: Java Upgrade Guide: Migrating From the Microsoft VM for Java to the Sun JRE <a class=" external" href="http://java.sun.com/j2se/1.4.2/docs/guide/deployment/deployment-guide/upgrade-guide/index.html" rel="freelink">http://java.sun.com/j2se/1.4.2/docs/...ide/index.html</a> "after December, 2007, Microsoft will no longer support or provide a Java implementation with any of its products. (...) Those running applets in the Internet Explorer web browser will need to download and install an alternate VM."</span></p>
<h5 name="What_if_I_use_.3Cmarquee.3E.3F">What if I use <code>&lt;marquee&gt;</code>?</h5>
<p>Marquee can be replaced with content string inside a <code>&lt;div&gt;</code> or <code>&lt;span&gt;</code> rotating over time with Javascript and DOM level 1. It must be said that this sort of effect is discouraged. Studies have shown that <strong>constantly moving objects or moving text disturb reading and weakens peripherical vision</strong>. DHTML marquee also <strong>greatly consumes user system resources (cpu, RAM)</strong> on tested browsers and will put modest systems under considerable stress. If after webpage assessment and consideration, you still want to include a marquee effect in your page, then you can use the following recommendable tutorials:<br> <a class="external" href="http://devedge-temp.mozilla.org/toolbox/examples/2001/stock-ticker/" title="http://devedge-temp.mozilla.org/toolbox/examples/2001/stock-ticker/">Cross-browser and web standard compliant Stock Ticker example</a> by D. Rosenberg<br> <a class="external" href="http://devedge-temp.mozilla.org/toolbox/examples/2002/xb/xbMarquee/index_en.html">Comprehensive web standard compliant alternative to &lt;marquee&gt;</a> by D. Rosenberg<br> Firefox 2 and Firefox 3 support the non-standard <code>&lt;marquee&gt;</code> element. On the other hand, Firefox users can disable such support by <a class="external" href="http://www.mozilla.org/unix/customizing.html#userContent">customizing an userContent.css</a></p>
<h5 name="What_if_I_have_.3Cbgsound.3E.3F">What if I have <code>&lt;bgsound&gt;</code>?</h5>
<p>Then use HTML 4.01 <code>OBJECT</code>, e.g.:<br> <code>&lt;OBJECT data="audiofile.wav" type="audio/wav" ...&gt;&lt;/OBJECT&gt;</code><br> See <a class="external" href="http://devedge-temp.mozilla.org/library/manuals/2002/plugin/1.0/intro.html#1003240">this DevEdge article</a> for information on rendering a sound OBJECT invisible within the page.<br> Web page background sound often slows down considerably web page loading; like the text effects above, music or sound accompanying a page is seldom appreciated. According to the survey page <a class="external" href="http://www.lowendmac.com/musings/02/0528.html">What we really hate on the web</a>, 41.9% of survey respondents will avoid sites that automatically play music; 71.1% strongly dislike sites that automatically play music.<br> <a class="external" href="http://www.wowwebdesigns.com/power_guides/music_off.php">Why Playing Music on your Web Site is a Bad Idea</a> by A. Gulez</p>
<h3 name="Step_3:_Validate_your_CSS_code">Step 3: Validate your CSS code</h3>
<h4 name="Where_can_I_validate_my_CSS_code.3F">Where can I validate my CSS code?</h4>
<p>Free Online CSS validation services:</p>
<ul> <li><a class="external" href="http://jigsaw.w3.org/css-validator/">W3C CSS Validation Service</a></li> <li><a class="external" href="http://www.htmlhelp.org/tools/csscheck/"><abbr title="Web Design Group">WDG</abbr> CSS checker</a></li>
</ul>
<p>Built-in report of CSS parsing errors in modern browsers:</p>
<ul> <li>Error console in Firefox 3. From the menu, Tools/Error console; the error console reports CSS parsing errors.</li> <li>Error console in Opera 9.5. From the menu, Tools/Advanced/Error console; the error console reports CSS parsing errors.</li> <li>Error console in Safari 3. From the menu, Develop/Show Error console: the error console reports CSS parsing errors.</li> <li>Error console in Icab 4. From the menu, Preferences/Show All/Other/Error report: the error console reports CSS parsing errors.</li>
</ul>
<p>There are also other possible and excellent debugging CSS and DHTML tools, useful tools (Addons, Toolbars, Extensions) for developers. Here is a <a class="external" href="http://css.tests.free.fr/en/debugging_css_tools.php">list of recommendable and free debugging tools</a> from <a class=" external" href="http://css.tests.free.fr/" rel="freelink">http://css.tests.free.fr/</a></p>
<p><a class="external" href="/en/docs/Using_Web_Standards_in_your_Web_Pages:Benefits_of_using_web_standards" title="en/docs/Using_Web_Standards_in_your_Web_Pages:Benefits_of_using_web_standards">&lt;- Previous section: Benefits of web standards</a></p>
<p style="text-align: right;"><a class="external" href="/en/docs/Using_Web_Standards_in_your_Web_Pages:Using_the_W3C_DOM" title="en/docs/Using_Web_Standards_in_your_Web_Pages:Using_the_W3C_DOM">Next section: Using the W3C DOM -&gt;</a></p>
Revert to this revision