CSS, JavaScript and XHTML Explained

Estelle Weyl’s Blog of quirks, random thoughts and funky finds discovered in day-to-day coding

 

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

Filed under: Accessibility, Best Practices, Browsers, CSS (including hacks), Character Entities, DTD, HTML, IE7, InvoiceApp, JavaScript, Web Development, contactApp, firebug, iPhone — Estelle Weyl @ 9:27 pm

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

 

Other iPhone posts in my blog

 
 

iPhone Screen Orientation: Portrait and Landscape September 11, 2009

Filed under: Browsers, Character Entities, HTML, JavaScript, Web Development, iPhone — Estelle Weyl @ 12:22 am

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 onOrientationChange="changeMyClass();">

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


 
 

hover pseudoclass for the iPhone December 28, 2008

Filed under: Best Practices, CSS (including hacks), HTML, IE7, JavaScript, Web Development, iPhone — Estelle Weyl @ 9:38 pm

Since you’re not hovering, there is no hover pseudo class on the iPhone. instead they have touch events. To simulate the :hover pseudo class, include javascript similar to this:

var myLinks = document.getElementsByTagName('a');
for(var i = 0; i < myLinks.length; i++){
   myLinks[i].addEventListener(’touchstart’, function(){this.className = “hover”;}, false);
   myLinks[i].addEventListener(’touchend’, function(){this.className = “”;}, false);
}

and in your CSS add something similar to:

a:hover, a.hover { /* whatever your hover effect is */ }

Notes:

  • onTouchStart is similar to onMouseOver and onTouchEnd is similar to onMouseOut
  • You’ll likely want something more complex than simply removing the class on touch end. This is just a very simple example that will replace all classes on all your links with a "hover" class, which is probably not what you want. But you get the idea.
  • You can use this on all elements, not just links.

-Estelle Weyl

Note:

 
 

Safari 3 CSS Support July 10, 2007

Filed under: Browsers, CSS (including hacks), Web Development, iPhone — Estelle Weyl @ 1:50 pm

Safari 3.0 has the best CSS, including CSS3, support of any popular browser. Below I go over Safari CSS Selector support and then show how to include multiple background images, and how to create rounded corners without the use of background images (FF has a similar method)

CSS Selectors and Safari 3.0

Below are the various CSS selectors, including CSS3 selectors, and Safari 3.0 for Windows and iPhone support. Green / √ means current support. Orange / Δ means that the browsers have some support for the selector. Red / Χ means that the browser is non-compliant. Non-compliant selectors can be used and a valid way to target individual browsers.

Selector iPhone Windows XP Comments
* √ √  
E √ √  
.class √ √  
#id √ √  
E F √ √  
E > F √ √  
E + F √ √  
E[attr] √ √  
E[attr=val] Δ Δ Safari is case sensitive in cases where it need not be (this is the exact opposite of the IE7 quirk)
E[attr~=val] Δ Δ
E[attr|=val] Δ Δ
:first-child Δ Δ When a new first child is created via javascript, the previous first child maintain :first-child attributes. Otherwise, this pseudo-class works
:link √ √  
:visited √ √  
:lang() √ √ Has an inheritance quirk that I haven’t been able to replicate
:before √ √  
::before √ √  
:after √ √  
::after √ √  
:first-letter √ √  
::first-letter √ √  
:first-line √ √  
::first-line √ √  
The following selectors are new to CSS3 (above were in previous versions)
E[attr^=val] Δ Δ Safari is case sensitive in cases where it need not be (this is the exact opposite of the IE7 quirk)
E[attr$=val] Δ Δ
E[attr*=val] Δ Δ
E ~ F √ √  
:root √ √  
:last-child Χ Χ  
:only-child Χ Χ  
:nth-child() Χ Χ  
:nth-last-child() Χ Χ  
:first-of-type Δ Δ When a new first of a type is created via javascript, the previous match maintain :first-of-type attributes. Otherwise, this pseudo-class works
:last-of-type Χ Χ  
:only-of-type Χ Χ  
:nth-of-type() Χ Χ  
:nth-last-of-type() Χ Χ  
:empty Χ Χ  
:not() √ √  
:target √ √  
:enabled √ √  
:disabled √ √  
:checked √ √  

Mulitple Background Images

In a single element, you can declare multiple background images. If you open up this blog entry in Safari, the following paragraph will look like it’s in a quote bubble:

This is styled only in Safari. No other browsers currently support this CSS3. This is a simple paragraph with a single class. The CSS for this paragraph follows.

#conversation p {
  background:
    url("img/top-left.png") no-repeat top left,
    url("img/top-right.png") no-repeat top right,
    url("img/bottom-left.png") no-repeat bottom left,
    url("img/bottom-right.png") no-repeat bottom right,
    url("img/left.png") repeat-y left,
    url("img/top.png") repeat-x top,
    url("img/right.png") repeat-y right,
    url("img/bottom.png") repeat-x bottom;
}

CSS Rounded Corners

Safari and Firefox now enable rounded corners simply thru CSS (no more background images>

div.box {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border: 1px solid #000;
}

Setting -webkit-border-radius will impact all four corners. You can set corners individually with the following:

  • -webkit-border-top-left-radius
  • -webkit-border-top-right-radius
  • -webkit-border-bottom-left-radius
  • -webkit-border-bottom-right-radius

Notes:

 
 

Web Development for the iPhone July 8, 2007

Filed under: Browsers, Web Development, iPhone — Estelle Weyl @ 11:14 pm

Web Development for the iPhone: Targeting the iPhone Safari browser

Developing for the iPhone

Also check out CSS, XHTML and JS support in the iPhone. It’s way more relevant than this article, which is about v1.

  • The Safari iPhone user agent string is:

    Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+
    (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3

  • Platform string: (iPhone; U; CPU like Mac OS X; en)
  • Version string: Version/3.0 Mobile/1A543a Safari/419.3

To target the iPhone with CSS, use:

<!--[if !IE]>–>
<link media=”only screen and (max-device-width: 480px)”
    href=”iPhone.css” type=”text/css” rel=”stylesheet” />
<!–<![endif]–>

or

<![if !IE]>
<link media=”only screen and (max-device-width: 480px)”
    href=”iPhone.css” type=”text/css” rel=”stylesheet” />
<![endif]>

(I need to test to see which is the right one…will get back to this in a bit)

The logic of this is that only browsers that understand screen understand only, and of these, only the iphone has a max-device-width of 480px. The reason for the anti-IE comments is that some versions of IE render CSS regadless of media type declarations.


To target the iPhone server-side with PHP you can use:

if (stristr($_SERVER['HTTP_USER_AGENT'], ‘iPhone’)) {}

:hover pseudoclass on the iPhone

Please see hover pseudoclass for the iPhone to learn how to simulate hover effects on the iphone

iPhone Viewport Orientation

The iPhone supports both landscape and portrait views. You can specify CSS based on viewport orientation which you determine via javascript and update the orient attribute of the body element. Target the browser with body[orient="landscape"] or body[orient="portrait"]

iPhone ViewPort Orientation JavaScript

The following javascript snippet detects and sets the iPhone’s viewport orientation by evaluating the innerWidth property of the window object and setting the orient attribute of the body element at regular intervals:

var updateLayout = function() {
  if (window.innerWidth != currentWidth) {
    currentWidth = window.innerWidth;
    var orient = (currentWidth == 320) ? "profile" : "landscape";
    document.body.setAttribute("orient", orient);
    window.scrollTo(0, 1);
  }
};

iPhone.DomLoad(updateLayout);
setInterval(updateLayout, 500);

Hiding the iPhone toolbar

With one line of JavaScript you can hide the big toolbar: window.scrollTo(0, 1); . Include this line of code to your snippet of detecting the phone’s orientation, as the toolbar will reappear when the orientation is changed. Remove it from the snippet above if you want the toolbar to show.

iPhone Viewport Meta Tag

The viewport meta tag properties include width, height, initial-scale, user-scalable, minimum-scale and maximum-scale. The height is calculated based on the width and aspect ratio. The initial-scale is the scale to render when the page first loads; with the default to fit the screen. Unless user scalable is set to no, th user can change the scale through pinching and double tapping of the iPhone.

Property Default Value Minimum Value Maximum Value
width 980 200 10000
height based on aspect ratio 223 10000
inital-scale fit to screen minimum-scale maximum-scale
user-scalable yes no yes
minimum-scale 0.25 > 0 10
maximum-scale 1.6 >0 10

Examples:

<meta name="viewport" content="initial-scale=2.3, user-scalable=no" />
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

The iPhone automatically adjusts font size for readability. This feature can be overridden with -webkit-text-size-adjust. The values for -webkit-text-size-adjust are none (default) | auto | %value.

Note that if you have a web page designed for the desktop that is wider than 980px, you will always have scrolling on the iPhone. The solution? For example, if your the site is 1060px wide, iPhone’s Safari only scales up to 980px: this will cause a small amount of zooming. In this scenario, the simple fix of <meta name="viewport" content="width=1060" /> will fix it all.

Comparisons of Safari on the desktop versus the iPhone.

Safari on iPhone supports:

  • Safari supports cookies on both
  • Safari on iPhone allows up to 8 user initiated browser pages to be open at once.
  • Default user preference is set to block pop-up windows.
  • Safari on iPhone supports many MIME types and rich media, including PDF and media file types
  • Images: Safari supports .gif, .jpg, .png, and .tiff
  • Fonts: The iPhone comes with American Typewriter, Arial, Arial Rounded MT Bold, Courier, Courier New,Georgia, Helvetica, Helvetica New, Marker Felt, Times New Roman, Trebuchet MS, Verdana, and Zapfino; so that’s what Safari on the iPhone supports.
  • Other than the :hover pseudoclass which isn’t supported on the iPhone since mouseover effects aren’t supported, Safari on the iPhone supports CSS1, CSS2 and several selectors and attributes of CSS3. If you do want to include a hover pseudo class, check out: hover pseudoclass for the iPhone.

Safari on iPhone does not support:

  • Events: mouseover and mouseout, including :hover styles and tool tips, (but it does support onclick and event listeners). Safari on the iPhone does not support the document events of onkeydown, onkeypress and onkeyup, the form-field events of ondblclick, onmouseenter, onmouseleave, onmousemove, and onSelect, and the window events of onresize and onScroll. This is not an exhaustive list, so test your event handlers before listening to me.
  • window.showModalDialog()
  • Plug-ins: Flash or Java, and plug-in installations. Do not ask users to download Flash.
  • File-size: Non-streaming files of over 10MB. CSS, JavaScript and HTML files are limited to 10MB per file. JavaScript is limited to 5 seconds of execution time. Safari for the iPhone does support gzip compression, so compress!
  • The iPhone does not support gifs, png or tiffs over 8 MB and jpgs over 128 MB (but does support larger streaming media files).
  • You can use iFrames, but avoid framesets.

Other iPhone Safari features

Phone numbers are automatically converted to phone links. You should convert them instead of letting Safari control it for you.

<a href="tel:4155551212">415.555.1212</a>.

Notes: