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

Posted on December 5, 2009 by Estelle Weyl

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
  • iPhone Support for CSS3 properties
  • iPhone & Safari Support for HTML elements, including HTML5
  • HTML attributes for the iPhone and Safari
  • Safari and iPhone Event Handlers
  • Other iPhone and Safari Resources

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
  • spacer nly-child
  • :nth-child()
  • :nth-last-child()
  • :first-of-type
  • :last-of-type
  • spacer 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  
<br> 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.

 

Other iPhone posts in my blog

  • iPhone Screen Orientation: portrait and landscape
  • :hover pseudoclass for the iphone
  • Web Development for the iPhone
  • Safari 3.0 filter/hack
Posted in Accessibility, Best Practices, Browsers, Character Entities, contactApp, CSS (including hacks), DTD, firebug, HTML, IE7, InvoiceApp, iPhone, JavaScript, Web Development | 4 Comments

Moving from Web 1.0 to Web 2.0

Posted on November 21, 2009 by Estelle Weyl

Moving from Web 1.0 to Web 2.0: Skills you need to know to stay relevant.

Moving from Web 1.0 to Web 2.0View more from estellevw.

Here is the audio.

Posted in AJAX, Best Practices, Browsers, firebug, Web Development | Leave a comment

Dreamweaver tip for screen shot creation

Posted on October 24, 2009 by Estelle Weyl

I write a lot of tutorials. Really, really basic tutorials. While I generally program in BBedit, Eclipse, vi, gEdit, NoteTab, or whatever makes sense at the moment, I write most of my tutorials and blog posts in Dreamweaver. While this blog doesn’t contain many screen shots, my basic tutorials are filled with them. I made a new discovery today that is going to make my tutorial writing so much easier. This may be old news for avid Dreamweaver users, but it’s new to me, so I thought I would share.

The Tip: When you do a screen capture in Firefox (or any other open application) and you go to Dreamweaver, pasting whatever is in memory (your screenshot) into Dreamweaver design view enables you to save and add your screen shot directly into your open page.

I’ve been spending a huge amount of time creating my tutorial images for my Community MX workshops in Fireworks. I’ve successfully reduced the time to create screen shots.


Here are my steps:

  1. While in Firefox, I go into Firebug to alter the text of what i want to take a screen shot of so I can anonymize my email address and provide generic domain names. I don’t really own “[email protected]”. With Firebug, I can change all the email address examples, IP addresses, domain names, etc., to make them generic to hide from possible creeps who enjoy stalking in their spare time. Using firebug to alter text is much faster than trying to create text that fits into the available space and matches the other text in an image editing program.
  2. Then I use “screengrab”, another firefox extension, to take a screen shot of just the section of my Firefox. I could also use “grab” to capture a selection on my Mac.
  3. Then, in Dreamweaver, I hit where I want the picture added to my tutorial. I get the Fireworks style “Export image as” and “Save” screens, enabling me to save the image to my images folder.  If i am in design view, I also get prompted for an alt attribute, and the image is added to the page. If I am in code view, the image is not actually added to the page.

Maybe this is old news, but I just discovered it (I don’t use DW much).

Posted in Web Development | 1 Comment

iPhone Screen Orientation: Portrait and Landscape

Posted on September 11, 2009 by Estelle Weyl

When you tilt your iPhone, the screen changes orientation. The website you developed for the default portrait orientation may not look good in landscape mode, especially if you developed your page for the 480 (h) x 320 (w) screen.

In my original iPhone post, I instructed detecting the width of the screen at regular intervals to detect the orientation of the iPhone. That post was written within a week of the launch of v1 of the iPhone. There is now a better method: use the onOrientationChange method to change the class of your body based on the page’s orientation. Include CSS for both normal page layout, and then include a series of overrides for when the screen is displaying your iPhone application in landscape mode.

What you want to include is the unobstrusive javascript equivalent of:

<body>

In this case, we’ll call

switch(window.orientation){
   case 0:
       //handle portrait actions
       //document.getElementsByTagName('body')[0].className = 'portrait';
       break;
  case -90:
  case 90:
       // handle landscape actions
       //document.getElementsByTagName('body')[0].className = 'landscape';
       break;
} //end switch


Posted in