CSS, JavaScript and XHTML Explained

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

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
• :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.

Safari and iPhone Event Handlers:

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

IE6 & IE7 label bug (implicit label bug) September 10, 2009

HTML and XHTML specifications allow both implicit and explicit labels. However,  IE6 and IE7 do not correctly handle implicit labels. When including implicit labels, IE6 and IE7 treat the input as one label and the text within the element as a second label. In other words, if you include padding, margin, bakcground images, or, in the case of IEs, hasLayout like "zoom", the styles will be added to both the input part of the label and to the text part of the label.

For example, <label>First name <input type=”text” name=”firstname”></label>. IE6 and IE7 interpret the code as if you wrote <labe>First name</label><label><input type=”text” name=”firstname”></label>.

Generally, this isn’t a major issue, which is probably why I couldn’t find documentation on this bug. However, if you want to put a background image between the input and the text, if you want to put a border around the label, or if the label is floated left and you need to give "hasLayout" for IE6, that’s where it gets tricky.

(note: if you use zoom: 1 on your label, the label will display on two lines: one for the input, and the other for the text)

The implicit label is valid according to the w3c. See the W3C Label Specifications. The w3c states “To associate a label with another control implicitly, the control element must be within the contents of the LABEL element. In this case, the LABEL may only contain one control element. The label itself may be positioned before or after the associated control.”

Some may argue “just use explicit labels”, and there are accessibility arguments around that. However, old versions of JAWS , in forms mode, did not read the label for implicit labels on checkboxes and radio fields. I believe that has been fixed.

My fix was inane, yet valid. I assume this is such an esoteric bug that I don’t need to create recommendations on fixing it. I just wanted to document it in case someone else comes across this bug

hover pseudoclass for the iPhone December 28, 2008

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:

• See also Web Development for the iPhone. This is an update to that post.

Browser Testing: 3 tools you can’t live without December 1, 2008

Firefox 2 and Firefox 3 don’t render the same. Also, Firebug 1.0 is less buggy than Firebug 1.2. So, at this point, it really is necessary to run multiple versions of Firefox in your development environment, similar to how most of us have been running IE6 and IE7 on the same machine for years.  What? You haven’t been running IE6 and IE7 on the same machine? Didn’t know it was possible? Here are three tools or links that you need to check out if you do any cross browser testing (which I hope you do).

Here are some links to help you out:

• Multiple Firefox: I have both FF2 and FF3 installed on my laptop. I develop in FF2 with Firebug 1.0, and have FF3 with FB1.2 for testing. Instructions for running multiple Firefox apps on the same box can be found here: http://jeroencoumans.nl/journal/multiple-firefox-versions.
• IE6 on Mac/ IE6 on Linux: I have a mac, so for quick IE6 checks I have IE6 installed in my Mac OSX. This isn’t a perfect rendition of IE6, but it’s good enough for quick tests, not final QA. To install IE6 on your mac, go to http://www.kronenberg.org/ies4osx/
  . I also sometimes work on Ubuntu 9.04 (a linux box), and have IE6 for Linux installed.
• Multiple IEs: To install IE7 and IE6 on your PC, or in your Parallels or VMWare Windows environment on your mac, you must install IE7 as your main IE application, and then you can go to http://tredosoft.com/Multiple_IE to install earlier versions - IE6, and even earlier.It does not support IE7, which is why IE7 (or IE8) needs to be a regular installation. Multiple IEs does NOT work on Vista.

Unfortunately there are a few quirks with running MultipleIE and IE6 on Mac- but I would say MultipleIE matches the crappiness of IE6 at about 99.9%.

These are links that I am always forwarding to people, so I figured I would finally blog them. Cheers!

-Estelle Weyl

CSS Background Properties: possible values, default values, browser support and DOM August 9, 2008

Everything you could possibly want to know about CSS Background Properties, including default values, browser support, targeting the DOM, and what to look for in CSS3.

background-attachment: fixed | scroll | inherit | local;

document.getElementById("myID").style.backgroundAttachment

background-color: transparent | rgb(255, 255, 255) / rgb(r%, g%, b%) | rgba(255, 255, 255, 1) /  rgba(r%, g%, b%, 1)  | #fff | #123456;

document.getElementById("myID").style.backgroundColor

background-image: inherit | none | url(relative to CSS);
background-image: url(relative to css), url(second image); // CSS3 allows for multiple background images.

document.getElementById("myID").style.backgroundImage

background-position: bottom | center | inherit | left | right | top | 10px 10px | 50%  50%;

document.getElementById("myID").style.backgroundPosition

background-position-x: center | inherit | left | right | px/em | %;

document.getElementById("myID").style.backgroundPositionX

background-position: bottom | center | inherit | top | 10px | 2em | 50%;

document.getElementById("myID").style.backgroundPositionY

background-repeat: inherit | no-repeat | repeat | repeat-x | repeat-y;

document.getElementById("myID").style.backgroundRepeat

background: background-color | background-image | background-attachment | background-position | background-repeat

document.getElementById("myID").style.background

IE7 only CSS hacks: Examples May 21, 2007

Examples of Hacks described in IE7 only CSS Hacks: Explained

This blog entry is the companion page to IE7 only CSS Hacks: Explained which elaborates on how and why these hacks work. Feel free to open this page up in IE7, IE6, Opera and Firefox on the PC, and Safari and Opera on the Mac.

</p> <div lang="en" align="left"> <!-- useless comment --></p> <div> <h2>The Star(*) hack</h2> <p class="starHack">body>div .myClass { *color: #CC33CC; }</p> <h2>The conditional comment</h2> <p class="conditional"> &lt;!&#8211;[if IE 7]&gt;<br /> &lt;style type=&quot;text/css&quot;&gt;<br /> p.conditional {color: #CC33CC;}<br /> &lt;/style&gt;<br /> &lt;![endif]&#8211;&gt;</p> <h2>The LANG filter</h2> <p class="item">.item {color: #000000;}<br /> html&gt;div .item {color: #CC33CC;}<br /> *:lang(en) .item{color: #666666;}<br /> .item:empty {color: #666666 !important} </p> <p>&lt;div lang=&quot;en&quot;&gt;<br /> &lt;p class=&quot;item&quot;&gt;<br /> This will purple in IE7, grey in Firefox and black in IE6</p> <h2>Triple X Hack</h2> <p class="testx" id="testy">.testx { color: #000000; }<br /> p[id$=&quot;testy&quot;] { color:#cc33cc; }<br /> p[id$=&quot;testy&quot;]:not([class=&quot;xxx&quot;]) { color:#666666; }<br /> @media all and (min-width:0px) { p[id$=&quot;testy&quot;] { color:#aaaaaa; } }</p> <p>This will purple in IE7, grey in Firefox and black in IE6</p> <h2 id="case">The Case Sensitive Attribute Hack</h2> <p class="casesensitive">p.casesensitive {color: #000000;} <br /> div[align~=left] p.casesensitive {color: #cc33cc;}<br /> <br /> div[align~=LEFT] p.casesensitive {color: #666666;} </p> <p class="casesensitive">&lt;div align=&quot;left&quot;&gt; &lt;p class=&quot;casesensitive&quot;&gt;<br /> This will purple in IE7, grey in Firefox and black in IE6&lt;/p&gt;</p> <h2>Aimsterloo Hack<br /> a.k.a.<br /> First Child Comment Hack</h2> <p class="fchild">p.fchild {color: #000000;}<br /> html&gt;div p.fchild {<span class="casesensitive">color: #cc33cc;</span>}<br /> div :first-child p.fchild {color: #666666;} </p> <p>&lt;div&gt;&lt;!&#8211; useless comment &#8211;&gt;&lt;div&gt;&lt;p class=&quot;fchild&quot;&gt;<br /> The div should be the first child of the div, but in IE it isn&#8217;t&#8230; </p> </div> </div> <p>

IE7 CSS Selectors: How they fail May 8, 2007

The following table explains the failures of IE7. I am only listing bugs in IE7 CSS from the selector perspective, not from the rendering perspective. The fact that IE7 fails to heed certain valid CSS selectors will provide opportunity for discovering IE hacks and filters. Quirks in rendering CSS will be posted in a future entry.

Notes:

• These tests were run in XHTML 1.0 Strict
• I will elaborate here on the last 7 selectors when i have a bit more time
• IE7 quirks in rendering CSS (versus understanding CSS) will be posted in a separate entry.
• This article goes over IE7 failings. Please see CSS3 Selectors and Browser Support for other browser’s support of CSS3 selectors.

CSS Selectors and Browser Support April 29, 2007

Note: This grid is OUTDATED! Please see Grid of CSS3 Selectors and Browser Support

Below are the various CSS selectors, including CSS3 selectors, and current browser 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.

Notes:

• 1. IE6 doesn’t errs on mulitple classes.  A double class such as

  .red.green { }  .green { }  <p class="green red"></p>

  Both CSS selectors should match, but the dual declaration should take precendence as it is more specific. So the second should be able to define additional properties, but not overwrite properties from the first. IE6 fails here.

• Check out the definition of Double Colon Notation
• The Avant Browser selector support is identical to IE7. It was removed from the list to make the table narrower.

IE7 only CSS hacks: Explained April 18, 2007

Targeting Internet Explorer 7

There are at least 6 ways to target IE7 only.

• The Star Hack
• Conditional Comments
• The LANG filter
• Triple X Hack
• The Case Sensitive Attribute Hack - NEW
• Aimsterloo Hack - NEW

To see all these Hacks in action, open up IE7 Only CSS Hacks: Examples in your browser. The text will appear purple in IE7 and black/shades of grey in all other browsers

The Star (*) Hack

html>body .myClass { *color: #ff0033; } where color could be any attribute

Method:

• Make it readable by IE with an asterisk in-front of the attribute, but not readable by any other browser. Other browsers skip over the attribute since it is not a valid attribute spelling
• Make it not readable by IE6 by include the html>body.
  IE6 does not understand the html>body
• This is the simplest way, but makes your CSS will not validate.

The conditional IE comment

<!--[if IE 7]>
<link rel=”stylesheet” type=”text/css”
href=”someFileName.css”>
<![endif]–>

Method:

• This causes an extra http request, but only for IE7 users.
• This is foolproof, and allows for correcting IE7 quirks. Quirks that i’ve
  found so far include rendering font sizes with em’s weirdly and a 3px offset on page centering.

The LANG filter

<body lang="en"> . . . </body>
(In XHTML, body should have the language attribute to make this work )

(then, you declare the IE7 and old browser value)

#item {background: red;}
html>body {background: blue;} 

*:lang(en) #item{background: green;}

This is read by FF & Opera. remember pseudo classes hold no value in the
cascade, so either put “!important”, or declare this value second…. declare the value second since you shouldn’t use important!

#item:empty {background: green !important} 

This is read by Safari supposedly, but i have yet to test.

• The original article on this can be found at http://www.ibloomstudios.com/article7. I added the html>body to make this an IE7 only hack. IE7 understands the html>body, but IE6 does not.
• I am still testing this one, and haven’t looked on a mac. But the bonus is
  this validates, and telling the screen readers and search engines that your
  page is in English is always a good idea.
• Since this validates, I consider this a “filter” rather than a “hack”

Triple X Hack

From Brothercake, this hack takes advantage of IE7 support for the substring matching attribute selector, which is an improvement over IE6, and it’s continued lack of lack of support for the negation pseudo-class. And, since Opera 9 doesn’t support the negation pseudo-class, there’s an added CSS3 media query to negate the style for Opera 9.

p.test { color:red; }
p[id$="test"] { color:green; }
p[id$="test"]:not([class="xxx"]) { color:red; }
@media all and (min-width:0px) { p[id$="test"] { color:red; } }

<p id="text" class="test">This paragraph needs to have both a class and id to be targeted by this filter.</p>

Note

• In the brother cake explanation another hack is presented: the XMLNS hack:

  p[id$="test"] { color:green; }
html[xmlns] p[id$="test"] { color:red; }

  That hack doesn’t work for me: IE7 undertands the substring matching attribute selector.

The Case Sensitive Attribute Hack

The quirk in IE7’s support of substring matching attribute selectors can be exploited.  IE7 employs some case-sensitivity to the value of an attribute whether or not the attribute type requires case sensitivity. While it makes sense to compare id values in a case senstive manner, attribute values for HTML are case insensitive. The XHTML specifications state that element and attribute names must be lower case, but it does not say anything about attribute values.  In this case, img[align~=LEFT] will match align="LEFT" but not match align="left" but img[align~=left] will match align="left" and align="LEFT".

Code:

p[align~=left]{color: #0000ff;}
p[align~=LEFT]{color: #ff0000;}

<p align=”left”>This will blue in IE7, red in Firefox and black in IE6</p>

This will blue in IE7, red in Firefox and black in IE6

Method:

• Use attribute selectors including E[attribute], E[attribute~=value], and E[attribute|=value], where the value is not truly case sensitive (such as align, but not alt or id. IE7 incorrectly requires the attribute value to be case sensitive.

Rationale:

• For an understanding of why this works, please see my entry IE7 CSS Selectors: How they fail. I discovered this hack while testing out all the selectors.
• Tested with XHTML transitional, Strict and HTML 4.01 strict
• XHTML specifications state that attribute names are case sensitive, but don’t specify that attribute values need to be, so this is indeed valide

Notes

• For me it makes most sense to add the cased attribute to the body tag instead of the each element that needs the hack. For example,

  p.casesensitive {color: #000000;}
  body[align~=left] p.casesensitive {color: #cc33cc;}
  body[align~=LEFT] p.casesensitive {color: #666666;}

  <body align="left"> <p class="casesensitive">This will purple in IE7, grey in Firefox and black in IE6</p>

  the body attribute can be used for all child elements, so useless attributes don’t need to be added throughout the HTML document.

Aimsterloo Hack

The :first-child pseudo-element works in most cases in IE7 except when the first child is a comment. IE7 treats the comment as the first child, even though CSS specifications state that :first-child should apply to elements, and comments are not elements. Note that there is a space between the selector and the colon. 

div :first-child {font-weight: bold;} will not match the paragraph in:
<div class="happy">
<!–comment –>
<p>Hi</p>
</div>

The trick to making this hack useful site wide is to add a useless comment immediately following the opening <body> tag.

p.fchild {color: #000000;}
html>body p.fchild {color: #cc33cc;}
body :first-child p.fchild {color: #666666;}

<body><!– useless comment –><div><p class="fchild">The div should be the first child of the body, but in IE it isn’t…

Notes

• I can’t show some of the hacks on this page since I didn’t do the template.  However, they can all be seen in My IE7 Hack Page.

Notes:

• To see all these Hacks in action, visit IE7 Only CSS Hacks: Examples. The text will appear purple in IE7 and black/shades of grey in all other browsers
• To learn all about how IE7 fails to understand specific CSS Selectors, I posted details in my blog at IE7 Css Selectors: How they Fail
• If you would like to target IE6 and less, IE7 and all others separately using the * hack, the code would be:

  
p {
color: #ff0000;     works in all
  *color: #00ff00;     targets IE6 and IE7
  _color: #0000ff;     targets IE6, not read by IE7
  }

• The conditional statement can be used to link to an external stylesheet (recommended, because it’s best to separate style from content) or the style can be added where the link element is located in the above example, if you are looking to reduce HTTP requests.

  <!--[if IE 7]>
<style type=”text/css”>
p {color: #ff0000;}
</style>
<![endif]–>