Main /

Convert With Style


[-edit SideBar-]

Convert With Style

Moving from HTML tag-based formatting to CSS

HTML5-dropped Elements to be replaced by alternative HTML

ELEMENT droppedELEMENT alternativelimitations and considerations
<FRAMESET>, <FRAME>, <NOFRAMES><IFRAME>only a partial alternative, need to adjust the entire page

HTML5-dropped Attributes to be replaced by alternative CSS

List of CSS alternatives to historic HTML formatting methods, list of CSS equivalents to HTML5-dropped elements and attributes:

ELEMENT/attributeCSS equivalentlimitations and considerations
<BASEFONT>BODY,TD { font: [...] }
<BIG>SPAN { font-size:125; }
<BLINK>SPAN { text-decoration:blink; }
<CENTER>DIV { text-align:center; }
<IFRAME frameborder=0 marginwidth=0 marginheight=0 scrolling=no><IFRAME seamless>
<NOBR>SPAN { white-space:nowrap; }
<OL type=i>OL { list-style-type:lower-roman; }
<S>, <STRIKE><DEL> or SPAN { font-decoration:strike-through; }
<TABLE cellpadding=0>TD { padding:0; }
<TABLE cellspacing=0>TABLE { border-spacing:0; /*border-collapse:collapse;*/}
<TT>SPAN { font-family:monospaced; }
<U>SPAN { text-decoration:underlined; }
<WBR>&#8203;if font does not include this zero-width space character, an ugly block is displayed.

HTML5-introduced Element types and features: Supporting Browsers

ELEMENT/attribute/valuesupporting browsers...
<INPUT type=file multipleFF 3.6+: yesIE 8.0: noOP 10.51: no

Special-use CSS features: Supporting Browsers

CSS constructsupporting browsers...
SPAN { display:inline-block; }FF 3.0: yesIE 5.5-: ?? 6.0+: yesOP 7-: ?? 7.5: yes
SPAN { display:inline-table; }FF 3.0: yesIE 8: noOP 7-: ?? 7.5: yes
SPAN { display:run-in; }FF 3.6: noIE 8: noOP 7-: ?? 7.5: yes

Cutting Edge: Defining Custom, non-standard HTML Tags/Elements

How do web browsers handle tags they do not know? This question arises with the upcoming HTML5 that introduces a bunch of new HTML elements not known by 2010īs browsers.

The answer is quite simple: Firefox 1.0 and newer and Opera 8.0 and newer honor unknown elements and render them (assuming that an end tag is required) as specified in the style sheets. Internet Explorer does not and will not.

This means that IE8 will not be able to having it HTML5 CSSed so that it is displayed correctly. There might be some awkward work-around with (.htc) behaviour files.

If custom tags are required solely as helpers or shortcuts, IE can use an alternate XML namespace, specified by <HTML xmlns:ABC> where ABC is the namespace identifier, that must start with a character and may contain alphanumeric characters and the underscore.
IE is very picky in REQUIRING an end tag where the other browsers auto-close the tag when the parent tag closes.

The intentionally malformed snippet
<HTML xmlns:X> <STYLE> Y { font-weight:bold; } X\:Z { text-decoration:underline; } </STYLE> <SPAN>Y <Y>test</Z> test</Y> - X:Z <X:Z>test</B> test </SPAN> normalshould be expected to produce
Y test test - X:Z test test normal
as output.

Internet Exploder displays (ignoring unknown tags in default namespace, not auto-closing at the end of the SPAN, and having noticable delays during page load / parsing if some custom end tags were forgotten):
Y test test - X:Z test test normal

Firefox shows (incorrectly auto-closing the custom tags on another custom tags but not at known end tags):
Y test test - X:Z test test normal

Opera below and up to version 7.54u2 does nothing about custom tag styling.

Opera 8~9 does not know about XMLNS and fails to honor a start tag with missing end tag, but does its best at "valid normal" custom tags:
Y test test - X:Z test test normal

Opera 10.51 offers us (most desirable):
Y test test - X:Z test test normal

All browsers, if supporting custom tags at all, also handle nested custom tags correctly.

Summing up, you can get HTML5 tags displayed nearly correctly by emulating their destined behaviour (block, inline, hidden, margins) with cleverly written CSS on browsers that would otherwise not know about new HTML5 – except Opera below version 8 and IE all versions. But you can trick IE into accepting unknown/custom/HTML5-tags.

Insert a snippet before the begin of <BODY> as:
<script> document.createElement('X'); </script>which would normally be followed by an .appendChild() to insert the newly created element instance into the DOM tree, but instead we drop it and do nothing. After IE has seen such a tag in .createElement(), it will also accept and render it in the following static HTML and everything should be fine.

CSS defaults for HTML elements

The following box shows the W3C-recommended CSS defaults for HTML elements. Actual browser implementations may vary.
<style> /*#### box-model defaults ####*/ * { display:inline; } HTML, ADDRESS, BLOCKQUOTE, BODY, CENTER, DD, DIR, DIV, DL, DT, FIELDSET, FORM, FRAME, FRAMESET, H1, H2, H3, H4, H5, H6, HR, MENU, NOFRAMES, OL, P, PRE, UL { display:block; } BUTTON, INPUT, OBJECT, SELECT, TEXTAREA { display:inline-block; } HEAD { display:none; } LI { display:list-item; } /*#### table element defaults ####*/ TABLE { display:table; border-spacing:2px; } CAPTION { display:table-caption; text-align:center; } COL { display:table-column; } COLGROUP { display:table-column-group; } THEAD { display:table-header-group; vertical-align:middle; } TBODY { display:table-row-group; vertical-align:middle; } TFOOT { display:table-footer-group; vertical-align:middle; } TD { display:table-cell; vertical-align:inherit; } TH { display:table-cell; vertical-align:inherit; font-weight:bolder; text-align:center; } TR { display:table-row; } /*#### rendering/formatting defaults ####*/ *[dir="ltr"] { direction:ltr; unicode-bidi:embed; } *[dir="rtl"] { direction:rtl; unicode-bidi:embed; } BDO[dir="ltr"] { direction:ltr; unicode-bidi:bidi-override; } BDO[dir="rtl"] { direction:rtl; unicode-bidi:bidi-override; } :before, :after { white-space:pre-line; } :link, :visited { text-decoration:underline; } :focus { outline:thin dotted invert; } BODY { margin:8px; line-height:1.12; } ABBR, ACRONYM { font-variant:small-caps; letter-spacing:0.1em; } B, STRONG { font-weight:bolder; } BLOCKQUOTE { margin:1.12em 40px; } BIG { font-size:1.17em; } BR:before { content:"\A"; } CENTER { text-align:center; } DD { margin-left:40px; } DIR, MENU { margin:1.12em 0 1.12em 40px; } H1 { font-weight:bolder; font-size:2em; margin:.67em 0; } H2 { font-weight:bolder; font-size:1.5em; margin:.75em 0; } H3 { font-weight:bolder; font-size:1.17em; margin:.83em 0; } H4 { font-weight:bolder; margin:1.12em 0; } H5 { font-weight:bolder; font-size:.83em; margin:1.5em 0; } H6 { font-size:.75em; margin:1.67em 0; } HR { border:1px inset; } I, CITE, EM, VAR, ADDRESS { font-style:italic; } OL { margin:1.12em 0 1.12em 40px; list-style-type:decimal; } UL { margin:1.12em 0 1.12em 40px; } OL UL, UL OL, UL UL, OL OL { margin-top:0; margin-bottom:0; } P, DL, FIELDSET, FORM { margin:1.12em 0; } PRE { font-family:monospace; white-space:pre; } S, STRIKE, DEL { text-decoration:line-through; } SMALL { font-size:.83em; } SUB { font-size:.83em; vertical-align:sub; } SUP { font-size:.83em; vertical-align:super; } TT, CODE, KBD, SAMP { font-family:monospace; } U, INS { text-decoration:underline; } /*#### printing defaults ####*/ @media print { H1 { page-break-before:always; } H1, H2, H3, H4, H5, H6 { page-break-after:avoid; } UL, OL, DL { page-break-before:avoid; } } </style>
Known deviations:

  • Opera (at least until V10) does not indent DL-elements.

Further Reading

HTML-Attribute durch CSS ersetzen (in German language)

Recent Changes (All) | Edit SideBar Page last modified on December 08, 2011, at 07:15 PM Edit Page | Page History
Powered by TechnoloWiki