Web Development for the iPhone: HTML, CSS & JS Support

Safari and Safari for the iPhone support all HTML elements, including deprecated elements and even some proprietary elements that were never part of any W3C specifications. In addtion, Safari is supporting some HTML5 elements, even though the HTML5 specifications have not been finalized. I’ve also added the attributes that each element supports. I didn’t include id, class, style, dir & title, since all elements basically support those, but I did include element specific attributes as well as some webkit only attributes.

iPhone Support for CSS3 Selectors

All CSS Selectors are supported by Safari on the iPhone. See CSS browser support for a chartcomparison of all the selectors. Selectos include:

*
E
.class
#id
E F
E > F
E + F
E[attribute]
E[attribute=value]
E[attribute~=value]
E[attribute|=value]

:first-child
:link
:visited
:lang()
:before
::before
:after
::after
:first-letter
::first-letter
:first-line
::first-line

E[attribute^=value]
E[attribute$=value]
E[attribute*=value]
E ~ F
:root
:last-child
nly-child
:nth-child()
:nth-last-child()
:first-of-type
:last-of-type
nly-of-type
:nth-of-type()
:nth-last-of-type()

:empty
:not()
:target
:enabled
:disabled
:checked
see them all

iPhone Support for CSS3 properties

Almost all CSS2.1 properties and values are supported by Safari on the iPhone, except for some keyword values for content. Position: absolute is supported, but due to the viewport, does not appear to be supported. See the list of all CSS2.1 properties and values by browser for more details. In addition, the iPhone Safari browser supports some CSS3 type properties and values including:

Some CSS3 including the following, which will be discussed in future blog posts.

hsl(), rgba(), hsla() color support
native rounded corners (-webkit-border-radius)
IE box model (-webkit-box-sizing)
Shadows on text (text-shadow was in CSS2.0)
Shadows on elements (-webkit-box-shadow)
multiple background images
opacity /gradient transparency
@font-face web fonts
CSS Animation
Media Queries
namespaces

iPhone & Safari Support for HTML elements, including HTML5

includes HTML attributes for the iPhone and Safari

Below is a grid of all of the elements, including deprecated elements (at the way bottom), and HTML5 elements interspersed with HTML4 elements in alphabetical order.

<ELEMENT>	Element Name	Safari Version	iPhone Support	Attributes (and Notes in italic)
Elements occuring outside the body element
<!DOCTYPE>	Document Type Declaration	1.0	1.0
<html>	html	1.0	1.0	manifest (Saf. 4, iphone 2.2)
<head>	document head	1.0	1.0	profile
<base />	url base for links	1.0	1.0	href, target
<link />	link	1.0	1.0	charset, href, media, rel, rev, target
<meta />	meta	1.0	1.0	content, name, http-equiv, scheme
<style>	style	1.0	1.0	media, type
<script>	script	1.0	1.0	charset, defer, language, src, type
<title>	document title	1.0	1.0
Elements Occuring in the <body> in HTML 4.01 and HTML5
<body>	document body	1.0	1.0	bgproperties (value: fixed)
<a>	Anchor	1.0	1.0	different event handlers for iPhone than Safari accesskey, charset, href (required), hreflang, rel, rev, shape (rect/cirlce/poly), target (deprecated, but useful), type
<abbr>	Abbreviation	1.0	1.0	title shows on hover in Safari
<acronym>	acronym	1.0	1.0	title shows on hover in Safari
<address>	address	1.0	1.0	italic
<area>	image map area	1.0	1.0	accesskey, alt (required), coords, href (required), hreflang, shape (rect/cirlce/poly), target
<article>				HTML5
<aside>				HTML5
<audio>	audio	3.1	3.0	HTML5: Similar to object, can nest sources and content to cascade until supported found. Audio support includes AAC, M4A, MP3, Wave, AIFF , Apple Lossless, Quicktime, but not OGG; autoplay, controls, end, loopend, loopstart, playcount, src, start
<bdo>	bi-directional override	1.0	1.0
<blockquote>	long quote	1.0	1.0	cite
<br>	break return or forced line break	1.0	1.0
<button>	push button	1.0	1.0	accesskey, disabled, type, value
<canvas>	canvas drawing region	1.3	1.0	HTML5: Stroke and fill colors, rgba/hsla colors, paths, rectangles, shadows, gradients, patterns, translations, rotation and scale
<caption>	caption	1.0	1.0
<cite>	citation	1.0	1.0
<code>	code	1.0	1.0
<col />	column	1.0	1.0	char, charoff, span
<colgroup>	column group	1.0	1.0	char, charoff, span
<dd>	definition description	1.0	1.0
<del>	delete	1.0	1.0	datetime
<dfn>	definition	1.0	1.0
<div>	generic block element	1.0	1.0	aria-checked, aria-level, aria-pressed, aria-valuemax, aria-valuemin, aria-valuenow, role (Safari 4.0)
<dl>	definition list	1.0	1.0
<dt>	definition term	1.0	1.0
<em>	emphasized text	1.0	1.0
<fieldset>	field set	1.0	1.0
<figure>				HTML5
<footer>				HTML5
<form>	form	1.0	1.0	accept, accept-charset, action, enctype. method, target
<frame />	frame	1.0	1.0	frameborder, longdesc, marginheight, marginwidth, noresize, scrolling (yes/no/auto), src
<frameset>	frameset	1.0	1.0	cols, rows
<h1-6>	headers	1.0	1.0
<header>				HTML5
<hgroup>				HTML5
<hr />	horizontal rule	1.0	1.0
<iframe>	internal frame	1.0	1.0	frameborder, longdesc, marginheight, marginwidth, scrolling (yes/no/auto), src
<img />	image	1.0	1.0	alt (required), composite, ismap, longdesc, src, usemap
<input />	input	1.0	1.0	accept, accesskey, alt, autocapitalize (iphone 1.1, values: on/off), autocomplete, autocorrect (iphone 1.1, values: on/off), autosave (safari), checked, disabled, incremental (safari), ismap, max, maxlength, min, placeholder, results, src, type, usemap, value
<ins>	Insert	1.0	1.0	datetime
<kbd>	keyboard	1.0	1.0
<keygen>	key generation	1.0	1.0	challenge, keytype
<label>	label	1.0	1.0	accesskey, for
<legend>	caption for fieldset	1.0	1.0	accesskey
<li>	list item	1.0	1.0	type, value
<map>	image map	1.0	1.0
<mark>				HTML5
<meter>				HTML5
<object>	object	1.0	1.0	archive, classid, codetype, data, declare, loop, type, usemap
<ol>	ordered list	1.0	1.0	type
<optgroup>	option group	1.0	1.0	disabled, label
<option>	option	1.0	1.0	disabled, label, selected, value
<p>	paragraph	1.0	1.0
<param>	parameter	1.0	1.0	type, value, valuetype
<pre>	preformatted text	1.0	1.0
<progress>				HTML5
<q>	inline quotation	1.0	1.0	cite
<samp>	sample computer code	1.0	1.0
<select>	option selector	1.0	1.0	disabled, multiple
<source>		3.1		HTML5 media
<span>	span (generic non-semantic container)	1.0	1.0	aria-checked, aria-level, aria-pressed, aria-valuemax, aria-valuemin, aria-valuenow, role (Safari 4)
<strong>	strong emphasized text	1.0	1.0
<sub>	subscript	1.0	1.0
<sup>	superscript	1.0	1.0
<table>	data table	1.0	1.0	frame (values: above, below, hsides, vsides, rhs, lhs, box, border), rules (values: none, groups, rows, cols, and all), summary
<tbody>	table body	1.0	1.0	char, charoff
<td>	table data cell	1.0	1.0	abbr, axis, char, charoff, colspan, headers, rowspan, scope
<textarea>	text area	1.0	1.0	accesskey, cols, disabled, readonly, rows, wrap
<time>				HTML5
<tfoot>	table footer	1.0	1.0	char, charoff
<th>	table header cell	1.0	1.0	abbr, axis, char, charoff, colspan, headers, rowspan, scope
<thead>	table head	1.0	1.0	char, charoff
<tr>	table row	1.0	1.0	char, charoff
<ul>	unordered list	1.0	1.0
<var>	variable	1.0	1.0
<video>	video	3.1	3.0	HTML5 autoplay, controls, end, loopend, loopstart, playcount, poster, src, start
Elements you should not be using, that are still valid
<tt>	teletype	1.0	1.0
<i>	italic
<b>	bold
<big>	big font
<small>	small font
<noframes>	no frames	1.0	1.0
<noscript>	no script	1.0	1.0
Elements that are deprecated or were never in a W3C spec, but you may still see on older websites
<applet>	applet	1.0
<center>	center	1.0	1.0
<dir>	direction	1.0	1.0
<embed>	embed	1.0	1.0	use object instead hidden, loop, pluginpage, pluginspage, pluginurl
<font>	font	1.0	1.0
<layer>	layer	1.0	1.0
<listing>	listing	3.0	1.0	use <pre> instead. from HTML 3.2
<marquee>	,arquee	1.0	1.0	behavior, direction, loop, scrollamount, scrolldelay, truespeed
<menu>	menu	1.0	1.0
<nobr>	no break	1.0	1.0
<noembed>	no embed	1.0	1.0
<nolayer>	no layer	1.0	1.0
<plaintext>	plaintext	1.0	1.0
<strike>	strikethrough	1.0	1.0	use <del>
<u>	underline
<wbr>	with breaks	1.0	1.0
<xmp>	sequence of literal characters	1.o	1.0

Safari and iPhone Event Handlers:

Event	Safari	iPhone	Explanation
onabort	1.0	1.0	When an image element is aborted during load. (for <img /> elements)
onbeforecopy	1.3		before the element is copied.
onbeforecut	1.3		before the element is cut.
onbeforepaste	1.3		before the element has something pasted into it.
onbeforeunload	1.3		before the element is unloaded from the page.
onblur	1.0	1.0	when the element loses focus.
onchange	1.0	1.0	when the element changes its value.
onclick	1.0	1.0	when the element is clicked.
oncontextmenu	1.1		when the element is right-clicked or when the mouse button is held down long enough to generate a contextual menu.
oncopy	1.3		when the element is copied.
oncut	1.3		when the element is cut.
ondblclick	1.0		when the element is double-clicked.
ondrag	1.3		when the element is dragged.
ondragend	1.3		when the element is done being dragged.
ondragenter	1.3		when a drag has entered the element.
ondragleave	1.3		when a drag has left the element.
ondragover	1.3		when a drag is over the element.
ondragstart	1.3		when the element has started to be dragged.
ondrop	1.3		when the element is dropped.
onerror	1.0	1.0	when the element has an error in loading.
onfocus	1.0	1.0	when the element gets focus.
ongesturechange		2.0	When fingers are moved during a gesture. (proprietary)
ongestureend		2.0	When the gesture ends (when there are 1 or 0 fingers touching the surface). (proprietary)
ongesturestart		2.0	When two or more fingers touch the surface. (proprietary)
oninput	1.3	1.0	when text is entered into the element.
onkeydown	1.0	1.0	when a key is pressed over the element.
onkeypress	1.0	1.0	when a key is pressed and released over the element.
onkeyup	1.0	1.0	when a key is released over the element.
onload	1.0	1.0	when the element finishes loading.
onmousedown	1.0	1.0	when the mouse button is pressed over the element.
onmousemove	1.0	1.0	when a key is moved within the element.
onmouseout	1.0	1.0	when the mouse leaves the element.
onmouseover	1.0	1.0	when the mouse is over the element.
onmouseup	1.0	1.0	when the mouse button is released over the element.
onmousewheel	1.0	1.0	when the mouse wheel button is rotated.
onorientationchange		1.1	When the orientation of the device changes.
onpaste	1.3		when the element is pasted.
onreset	1.0	1.0	when the form element is reset.
onresize	1.0	1.0	when the element is resized.
onscroll	1.2	1.0	when the element is scrolled (a text box would use this, for example).
onsearch	1.3		when a search is performed. (proprietary)
onselect	1.0	1.0	when text within the element is selected.
onselectstart	1.3		when the element begins to be selected. You can use this to prevent selections.
onsubmit	1.0	1.0	when the form element is submitted.
ontouchcancel		2.0	When the system cancels tracking for the touch. (proprietary)
ontouchend		2.0	When a given event lifts from the surface. (proprietary)
ontouchmove		2.0	When a finger for a given event moves on the surface. (proprietary)
ontouchstart		2.0	When a finger for a given event touches the surface. (proprietary)
onunload		2.1	when the element is unloaded from the page.