HTML 5 Deprecated

Posted: Tue Jan 31, 2012 8:39 pm

#html5
This thread is mostly for my own use - it's easier for me to put stuff here than look up various aspects of the HTML 5 specification from various sources, plus I can include code changes that are specific to RN 2.5 and might prove to be useful to others.

Quote:

Element -> CSS equivalent
basefont -> 'font-size', 'font-family' and 'color' on body
big -> 'font-size:larger'
blink -> 'text-decoration:blink'
center -> 'text-align:center' and 'margin-left:auto; margin-right:auto' on descendant blocks

font -> 'font-size', 'font-family' and 'color'
marquee -> CSS transitions and animations
s -> 'text-decoration:line-through'
spacer -> 'margin', 'padding', 'text-indent'
strike -> 'text-decoration:line-through'
tt -> 'font-family:monospace'
u -> 'text-decoration:underline'

Quote:

Attribute CSS equivalent
alink on body elements 'color' on :link:active, :visited:active
background on body elements 'background-image' on body
bgcolor on body elements 'background-color' on body
link on body elements 'color' on :link
text on body elements 'color' on body
vlink on body elements 'color' on :visited
clear on br elements 'clear' (or other techniques to clear floats)
align on caption elements 'caption-side' or 'text-align' on caption
align on col elements 'text-align' on the appropriate td/th
char on col elements -
charoff on col elements -
valign on col elements 'vertical-align' on the appropriate td/th
width on col elements 'width' on col
align on div elements 'text-align' and 'margin-left:auto' and/or 'margin-right:auto' on descendant blocks
compact on dl elements -
align on hr elements 'margin-left:auto' and/or 'margin-right:auto' on hr
noshade on hr elements 'border-style:solid' on hr
size on hr elements 'border-width' or 'height' on hr
width on hr elements 'width' on hr
align on h1�h6 elements 'text-align' on h1�h6
align on iframe elements 'float' on iframe
frameborder on iframe elements 'border' on iframe
marginheight on iframe elements 'margin-top' and 'margin-bottom' on body in the containing document
marginwidth on iframe elements 'margin-left' and 'margin-right' on body in the containing document
scrolling on iframe elements 'overflow' on the root element in the containing document
align on input elements 'float' or 'vertical-align' on input
align on img elements 'float' on img
border on img elements 'border' on img
hspace on img elements 'margin-left' and 'margin-right' on img
vspace on img elements 'margin-top' and 'margin-bottom' on img
align on legend elements -
type on li elements 'list-style-type' on li
compact on menu elements -
align on object elements 'float' on object
border on object elements 'border' on object
hspace on object elements 'margin-left' and 'margin-right' on object
vspace on object elements 'margin-top' and 'margin-bottom' on object
compact on ol elements -
type on ol elements 'list-style-type' on ol
align on p elements 'text-align' on p
width on pre elements 'width' on pre
align on table elements 'margin-left:auto' and/or 'margin-right:auto' on table
bgcolor on table elements 'background-color' on table
border on table elements 'border-width' on table
cellpadding on table elements 'padding' on the table's td and th
cellspacing on table elements 'border-spacing' on table
frame on table elements 'border-color:black' and 'border-style' on table
rules on table elements 'border-color:black' and 'border-style' on the table's appropriate elements
width on table elements 'width' on table
align on tbody, thead, and tfoot elements 'text-align' on tbody, thead and tfoot and 'margin-left:auto' and/or 'margin-right:auto' on descendant blocks
char on tbody, thead, and tfoot elements -
charoff on tbody, thead, and tfoot elements -
valign on tbody, thead, and tfoot elements 'vertical-align' on tbody, thead and tfoot
align on td and th elements 'text-align' on td and th and 'margin-left:auto' and/or 'margin-right:auto' on descendant blocks
bgcolor on td and th elements 'background-color' on td and th
char on td and th elements -
charoff on td and th elements -
height on td and th elements 'height' on td and th
nowrap on td and th elements 'white-space:nowrap' on td and th
valign on td and th elements 'vertical-align' on td and th
width on td and th elements 'width' on td and th
align on tr elements 'text-align' on tr and 'margin-left:auto' and/or 'margin-right:auto' on descendant blocks
bgcolor on tr elements 'background-color' on tr
char on tr elements -
charoff on tr elements -
valign on tr elements 'vertical-align' on tr
compact on ul elements -
type on ul elements 'list-style-type' on ul

Sources;
http://wiki.whatwg.org/wiki/Presentational_elements_and_attributes

Posted: Tue Jan 31, 2012 8:45 pm

We see this a fair bit in RN and I have used it myself.
Typically we would have done some like this

Code:

<br clear="all" />

to clear floated elements.
A better method (if you have to do it inline) seems to be

Code:




<br style="clear:left; clear:right;" />

though you would probably want to set up a specific CSS class to do this if it is done frequently within a module or theme.

Posted: Tue Jan 31, 2012 8:54 pm

Typically we would have vertically aligned a TD element with inline styling like this

Code:

 <td valign="top">

Since valign (in fact 'align' in general) is deprecated in HTML 5 you'll need to either move that into an inline style using CSS stling attributes

Code:

<td style="vertical-align:top;">

or more correctly (since you don't really want inline styling if you can help it, is to move it into your CSS stylesheet; maybe create a unique TD class called 'vtop' so you can re-use it whenever you need to.

Posted: Wed Feb 01, 2012 2:59 am

BIG attribute is obeselete.
I was working my way through TON when I came across this one. You'll probably find this code in several other places (admin menu as an example)

Code:

&nbsp;<strong><big>&middot;</big></strong>....

I'm not even sure why we do that since it's really more suited to a styled list but here's an alternative in case your not dealing with a list.

Code:




&nbsp;<span style="font-size:1.2em; font-weight:bold;">&middot;</span>&nbsp;..........

Posted: Wed Feb 01, 2012 3:11 am

hspace is used to put a padding around an image.

Code:

<img src="somepath/someimage.gif" hspace="10" alt="an image" title="a title" />

If you don't want to create a specific img class if you only have the one image you could use an inline styling but either way, the replacement is the same CSS.

Code:

<img style="padding-top:10px; padding-bottom:10px;" src="somepath/someimage.gif" alt="an image" title="title" />

Posted: Wed Feb 01, 2012 3:44 am

cellspacing and cellpadding obselete
You'll see this A LOT!

Code:

<table width="100%" border="0" cellpadding="2" cellspacing="1"...

An equivalent CSS / inline styling would be

Code:

 <table style="width:100%; border:0px; padding:2px; border-spacing:1px;">

I should mention for clarity that whilst border="0" is obselete and won't validate in HTML 5, for some bizzare reason border="1" is fine as is border=""
Not all browsers can interpret border="" so it is better to remove any doubt and style it correctly with CSS

Posted: Thu Feb 02, 2012 12:16 pm

Frameborder and scrolling are obselete under the HTML 5 specification.
I came across this whilst trying to find some work arounds to fix validation for FCKeditor.
In include/fckeditor/fckeditor_php5.php I had to remove the fixed default VAR value in the constructor for the frames width - by default it is set to '100%' but you cannot use the % character in this context so I just changed it to '600' , which is long enough to display a full width toolbar.

Code:




public function __construct( $instanceName )


    {


      $this->InstanceName   = $instanceName ;


      $this->BasePath      = '/fckeditor/' ;


      $this->Width      = '600' ;


      $this->Height      = '300' ;


      $this->ToolbarSet   = 'Default' ;


      $this->Value      = '' ;





      $this->Config      = array() ;


   }

The iframe code itself won't validate by default because of the use of frameborder and scrollbar attributes

Code:




$Html .= "<iframe id=\"{$this->InstanceName}___Frame\" src=\"{$Link}\" width=\"{$this->Width}\" height=\"{$this->Height}\" frameborder=\"0\" scrolling=\"no\"></iframe>" ;

This was my workaround

Code:




$Html .= "<iframe seamless=\"seamless\" id=\"{$this->InstanceName}___Frame\" src=\"{$Link}\" width=\"{$this->Width}\" height=\"{$this->Height}\" style=\"overflow:hidden;\"></iframe>" ;

Please note that the seamless attribute is not supported by many (if any) browsers at this time. I won't fail validation using it but it does produce a warning. I'm used it simply because (a) it doesn't hurt and (b) it will be supported in the future so it will save having to add it at that time.

Newbie Joined: May 12, 2009 Posts: 74 Location: TX

I feel your pain here, as working in html5 with all the warnings and errors it's hard to keep your own work valid as you go. Another note about tables, it's good practice to use <thead> <tbody> and <tfoot> tags where applicable. It's good for browser support and in some cases may render your tables faster/better. Not to mention most JavaScripts that enhance tables are going to want these attributes, as well as devices for disabled users with screen readers, etc. Note that many people use tfoot incorrectly in html4, as it should occur before the <tbody> tag, not after. HTML5 has softened this restriction but for doctype flexibility a valid table might look like:

Code:

<table class="sometable">


<thead>


<tr>


<th>Item</th>


<th>Quantity</th>


</tr>


</thead>


<tfoot>


<tr>


<td>Total</td>


<td>25</td>


</tr>


</tfoot>


<tbody>


<tr>


<td>Oranges</td>


<td>10</td>


</tr>


<tr>


<td>Apples</td>


<td>15</td>


</tr>


</tbody>


</table>

While it's somewhat backwards to place the tfoot above the tbody, that's where it was intended to be placed in html4. So many have placed it below the tbody, that it is generally well supported in browsers even though it is invalid... but it can cause irregularities in some browsers. If you only care about html5 it can go below tbody.

From a styling perspective I would usually target most of it by the class of the table, only adding additional classes to the markup if I needed to target a specific area. Something like this would allow you to target this particular table, and the individual cells of each section.

Code:

table.sometable{}


table.sometable thead th{}


table.sometable tbody td{}


table.sometable tfoot td{}

My 0.02

Posted: Sat Feb 25, 2012 11:24 pm

I'm with you all the way on this. Tables are a ruddy nightmare to re-write because there are just so many of them doing things like

Code:

<table width="100" border="0" cellpadding="3" cellspacing="0"...

There isn't one single attribute we can actually use in that sample and the same goes for TR and TD.
A problem I have found, when converting older code which uses a border at the TD or TR level is that not all browsers seem to behave the same if you convert it to using an inline style and you often get a broken border between TD elements in the same row (although depending on the color scheme, that can actually look nicer).
I think one thing we really do need to add to the core RN CSS file (if it isn't there) are some td column widths so we could use something like
td class="col_1" = 100%
td class="col_2" = 50%
td class="col_3" = 33.3%
.... etc
I'm sure the idea is understandable but it might be nice to have these as top level classes so they could be used by td's tr's or even form label/inputs. I haven't given it a lot of thought though, it might be easier to just write some custom CSS at the module level but I do have it on my To Do list to see how easy it might be to utilise something like HTML Kickstart

Newbie Joined: May 12, 2009 Posts: 74 Location: TX

Yeah I've notice some strange abnormalities at times. Chrome does not like background images for TR as it will not repeat properly if one than one cell is used. Setting table-layout:fixed on your table can help some issues, but depending on your table it may make it look worse until it's completely styled out. For those that don't know, table-layout:fixed keeps tables from stretching beyond their assigned size. If you have ever had tables escaping their container, it's because the default setting is table-layout:auto... Which basically says make it bigger if needed. May not work in all situations (nested tables) but is reasonably well supported in recent browsers.

BTW , HTML kickstart looks cool! Reminds me a little of working with the jquery mobile framework, which has easy to deploy "widgets" created from standard markup.

Site Admin Joined: Jan 06, 2006 Posts: 311

Guardian wrote:

I haven't given it a lot of thought though, it might be easier to just write some custom CSS at the module level but I do have it on my To Do list to see how easy it might be to utilise something like HTML Kickstart

100% in agreement. I think it needs serious considerations, or at least take out bits and pieces. However, I think RN really needs some thoughtful overall UI requirements consideration and then design (or is that really "re-design") and then incorporation...

Posted: Wed Mar 07, 2012 8:31 am

That should actually be much easier to achieve if used alongside some of the changes/proposals I've outlined in the multi-lingual support thread.
a new core/core_Header.php file deals with everything between the doctype declaration and the closing HEAD tag and will hopefully utilise a new header Class so every single aspect of the headers rendered output can be altered on-the-fly either by altering that file directly for "core" changes, at the module level by re-assigning values to the $header array or at the theme level with themes/YOUR_THEME/PageHeader.php

In theory, you could utilise something like HTML Kickstart or even jQuery Themeroller on a per module or per theme basis without having to touch any core files, which could open up a whole new world in module development.