HTML5 Input Attributes & Browser Support

I have updated the HTML5 Web Form Browser support grid to include the various input attributes, for what input type each is relevant, and which browsers support each attribute for each type.

TYPE ⇒

Attribute

Text, search, url, tel Email Password Dateandtime
Date,
Month,
Week,
Time
Dateandtime-local,
number
range color Checkbox, radio file
accept WK, O,
FF, IE
autocomplete O O O O O O O
autofocus WK, O WK, O WK,O WK, O WK, O WK, O WK, O WK, O
checked WK, O,
FF, IE
disabled WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
Form O O O O O O O O
list WK, O WK, O WK, O WK, O WK, O WK, O
max O, WK O, WK O, WK
maxlength WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
min O, WK O, WK O, WK
multiple FF, WK, IE FF, WK
Name WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O, FF, IE WK, O,
FF, IE
WK, O,
FF, IE
pattern WK, O WK, O WK, O
placeholder WK WK WK
readonly WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
required WK, O WK, O WK, O WK, O WK, O WK, O WK, O
size WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
step O, WK O, WK O, WK
checked WK, O,
FF, IE
value WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O, FF, IE WK, O,
FF, IE
WK, O,
FF, IE
  • WK = Webkit (tested Safari 5)
  • O = Opera (10.5 on Mac)
  • FF = Firefox (3.6.3 on Mac)
  • IE = Internet Explorer (IE8 on XP)

Browsers that don’t support the type attribute may still support other attributes in the input as the browser may support attributes on the text input type (such as maxlength or size), and will therefore support those attributes on a type it doesn’t support, as the input will default to text type. For example, while IE and FF don’t currently support the email type, they do support the multiple attribute on that type, since they will accept a text type including space separated email addresses.

Resources for this effort include:

CSS3 only Native iPhone App. No images!

My challenge to myself today was to create the native look of an iPhone application using only CSS. No images. I did it. When developing for the iPhone, one only has to consider a single browser. This made the challenge somewhat easy.  The fun part was creating the page background, buttons and navigation bar without the use of image. Linear gradients came to the rescue.  Now that Safari 5 supports inset shadows, the buttons were a cinch.  Check it out (on iPhone or Safari 5 only)!

And, since I like to share, here are the important parts of the code:

#theNavBar{
        background-image: -webkit-gradient(linear, 0% 0%, 0% 50%, 
              from(rgba(176, 188, 205, 1)), to(rgba(129, 149, 175, 1)));
 	padding: 7px 10px;
	background-color: rgb(109, 132, 162);
	border-bottom-color:1px solid rgb(45, 54, 66);
	border-top:1px solid rgb(109, 132, 162);
	display: block;
	height: 31px;
	line-height: 30px;
	display: block;
	border-bottom: 1px solid #2C3542;
	border-top: 1px solid #CDD5DF;
}

#theBodyBackgroundImage {
      background-color:#C5CCD4;
      background-image: -webkit-gradient(linear, left top, right top, 
          from(#C5CCD4), 
          to(#CBD2D8), 
          color-stop(0.6, #C5CCD4), 
          color-stop(0.6, #CBD2D8));
     -webkit-background-size:7px 7px;
     background-repeat: repeat;
}

The page on it’s own is here, but is only decent on iPhone or Safari 5 and chrome.
The github version supports more browsers

Hack for CSS3 Supporting Browsers

Implementing CSS3 features in your CSS file can be complex. You have to make sure that the CSS you’re feeding to FF3.5+, Chrome, Opera and Safari are not being read by FF2, IE6, IE7 and IE8. There’s a simple hack to make sure that your CSS3 is fed only to browsers that support it… it’s forward compliant and it’s valid markup.

selector:nth-of-type(1n)

To target all browsers that support CSS3, and hide from the IEs, simply add :nth-of-type(1n) to your selector.

  h3:nth-of-type(1n)  {
      color: #FFFFFF;
      background-color: #FFFFFF;
      text-shadow:  
           3px 3px 3px rgba(0, 0, 0, 0.4);
}

In the above example, we’ll end up with white text on a white background, with the letters being defined by the drop shadow. You definitely don’t want to feed that to browsers that don’t support text-shadow: white text on white backgroud *IS* illegible.

:nth-of-type(1n) basically means “every”. So, it’s the same as not including it in terms of what selectors will be matched. Do note that you are adding a pseudo-class, so you are adding specificity. This pseudo-class is not understood by browsers that don’t support CSS3 selectors which is the same as those that don’t understand CSS3 properties and CSS3 property values.

For example, I have a row of images with captions going across a page. To make it more interesting, I made the pictures look like Polaroids. It looks fine plain, but why not add some fun CSS3.

/* understood by all browser */
.slides li {
	line-height:1.4;
	float:left; 
	width: 188px;
}
.slides img {
        display:block;
}
/* for CSS3 supportive browsers only */
.slides li:nth-of-type(1n) {
	-moz-box-shadow:0 3px 6px rgba(0, 0, 0, 0.25);
	-moz-transform:rotate(-5deg);
	-webkit-box-shadow:0 3px 6px rgba(0, 0, 0, 0.25);
	-webkit-transform:rotate(-5deg);
	box-shadow:0 3px 6px rgba(0, 0, 0, 0.25);
	transform:rotate(-5deg);
	background:none repeat scroll 0 0 #FFFFFF;
	color:#333333;
	display:inline;
	float:left;
	margin:0 0 27px 0;
	padding:10px 10px 15px;
	text-align:center;
	text-decoration:none;
	width:auto;
}
.slides li:nth-of-type(even){
    -moz-transform:rotate(7deg);
	-webkit-transform:rotate(7deg);
	transform:rotate(7deg);
}
.slides li:nth-of-type(3n){
    -moz-transform:rotate(0deg);
	-webkit-transform:rotate(0deg);
	transform:rotate(0deg);
}

The images look fine in IE, but look cool in FF3.6

Do make sure that the new CSS3 property is generally supported before using this hack. This is a general filter for generally supported CSS3. It works for multiple background images, text-shadow, border radius, and other well supported CSS3 properties and values. Don’t use this for CSS3 transitions, columns and animations until those are better supported in modern browsers. I have grids of browser support for all sorts of CSS3 properties, so take a look at those before relying on this filter.

HTML5 Web Forms & Browser Support

HTML 5 Forms support in Modern Browsers and IE

Note: This is only valid thru input type. After that, I still need to do more testing and the grid is just a placeholder. Safari 5 is out. THat is not yet included in this. Opera seems to have reverted, and no longer supports placeholder, so I have to redo this. Feel free to use this as a general guideline, but not fact at the moment. EEK!

<elements> / attributes / “values”   IE6 IE7 IE8 FF3.6 Saf4 Saf5 Chrome Opera 10.5
<elements> / attributes / “values”   IE6 IE7 IE8 FF 3.6 Saf4 Saf5 Chrome Opera 10.5
<form>  
accept-charset  
action  
autocomplete   Χ Χ Χ Χ Χ Χ Χ Χ
enctype  
method  
name  
novalidate                 Χ
target  
<fieldset>  
disabled   Δ Δ Χ Χ Χ Χ
form                
name                
<label>  
form  
for  
<input>  
accept file only Χ
alt image only
autocomplete most Χ Χ Χ Χ Χ Χ Χ Χ
autofocus   Χ Χ Χ Χ
checked radio & checkbox
disabled  
formenctype / formaction / formmethod / formtarget sumbit buttons              
form in spec (back in) Χ Χ Χ Χ Χ Χ Χ
height image
list texttypes Χ Χ Χ Χ Χ Χ Χ
max date, range, #s Χ Χ Χ Χ Χ
maxlength texttypes
min dates & range Χ Χ Χ Χ Χ
multiple email & file Χ Χ Χ Χ
name  
novalidate in spec???               Χ
pattern texttypes Χ Χ Χ Χ Χ
placeholder texttypes Χ Χ Χ Χ Χ
readonly  
required   Χ Χ Χ Χ Χ
size texttypes
src image
step date, range, #s Χ Χ Χ Χ Χ  
type required
"button" button
"checkbox" checkbox
"color" color picker Χ Χ Χ Χ Χ Δ Δ Δ
"date" calendar Χ Χ Χ Χ Χ Δ Δ
"datetime" calendar Χ Χ Χ Χ Χ Δ Δ
"datetime-local" calendar Χ Χ Χ Χ Χ Δ Δ
"email"   Χ Χ Χ Χ Χ Δ
"file" input + button
"hidden" invisible
"image"  
"month" calendar Χ Χ Χ Χ Χ Δ Δ
"number"   Χ Χ Χ Χ Δ Δ Δ
"password" obscured
"radio" radio
"range" slider Χ Χ Χ Χ Δ Δ
"reset" button
"search" search field Χ Χ Χ Χ Χ
"submit" button
"tel"   Χ Χ Χ Χ Χ
"text" (default value)  
"time" calendar Χ Χ Χ Χ Χ Δ Δ
"url"   Χ Χ Χ Χ
"week" calendar Χ Χ Χ Χ Χ Δ Δ
<button>  
action                
autofocus   Χ Χ Χ Χ      
disabled  
enctype                
form                
method                
name  
novalidate                 Χ
target                
type  
"button"  
"reset"  
"submit"  
value  
<select>  
autofocus          
disabled  
form   Χ Χ Χ Χ Χ Χ Χ
multiple  
name  
size  
<datalist>   Χ Χ Χ Χ Χ Χ Χ
<optgroup>  
disabled  
label  
<option>  
disabled  
label  
selected  
value  
<textarea>  
autofocus   Χ Χ Χ Χ
cols (required)  
disabled  
form                
maxlength  
name  
readonly  
required   Χ Χ Χ Χ Χ Χ
rows (required)  
wrap  
<output>                
for                
form                
name                

<form>

The <form> element creates a form for user input to pass user entered data to the server. Note that the accept attribute is no longer included in HTML 5.

<elements> / attributes Values IE6 IE7 IE8 Firefox 3.6 Safari 4 Chrome Opera 10.5
<form>  
accept-charset charset(s)
action URL
autocomplete on | off              
enctype mime type
method get | post |
put | delete              
name unique name
novalidate novalidate Χ Χ Χ Χ Χ Χ Χ
target _blank | _self | _parent | _top | winname

The reason there appears to be so much HTML5 support for the <form> element is that only two new attributes were added to the form element in HTML 5: autocomplete and novalidate.

autocomplete takes the values off | on. When ‘on’, the browsers stores the form’s input values, to auto-fill the form when the user returns. “off” tells the browser to not store user input.

novalidate, if set (and supported), tells the browser to not validate the form upon submission.

 

<fieldset>

The <fieldset> element is not new to HTML 5, but it does have new attributes – disabled, form, and name. The <fieldset> element is used to group together related elements in a form, drawing a box around the encompassed elements. The options <legend> element, if included as the first child of the <fieldset>, display a caption within the box border.

<fieldset name="car_elements" disabled>
 <legend> 
    <label>
   <input type="checkbox" name="cars"> Use Car Finder
    </label> 
  </legend>
  <p><label>Make: <input name=make  type="text" required></label></p>
  <p><label>Year: <input name=year required pattern="[-0-9]{4}"></label></p>
</fieldset>

Browser support of <fieldset> and its HTML 5 attributes

<elements> / attributes   IE6 IE7 IE8 Firefox 3.6 Safari 4 Chrome Opera 10.5
<fieldset>  
disabled   Δ Δ Χ Χ Χ
form              
name              

Weirdly, IE6 actually supports something Mozilla and Webkit don’t. ‘disabled’ in IE6 and Opera disables all form elements within the fieldset. In IE7 and IE8, the attribute only disables form elements in the <legend>.

<label>

The <label> defines a label for a form element, providing enhanced usability. When used in conjunction with radio or check boxes, clicking on the label text toggles the control.

The for attribute of the <label> tag should be equal to the id attribute of the related element to bind them together.

<elements> / attributes   IE6 IE7 IE8 Firefox 3.6 Safari 4 Chrome Opera 10.5
<label>  
form id of form
for id of form element

<input>

HTML5 defines 13 new values for the type attribute of the HTML <input> element (search, tel, url, email, datetime, date, month, week, time, datetime-local, number, range, and color). Currently, Opera has the best support, with some decent support from Webkit, especially for mobile.

<elements> / attributes input type values IE6 IE7 IE8 FF3.6 Saf4 Saf5 Chrome Opera 10.5
<input>    
accept file only mime types Χ
alt image only  
autocomplete most on | off Χ Χ Χ Χ Χ Χ Χ
autofocus   autofocus Χ Χ Χ Χ
checked radio & checkbox checked
disabled   disabled
formenctype sumbit buttons enctypes              
formaction url
formmethod methods
formtarget targets
form in spec??? form Χ Χ Χ Χ Χ Χ Χ
height image  
list texttypes   Χ Χ Χ Χ Χ Χ Χ
max date, range, #s   Χ Χ Χ Χ Χ
maxlength texttypes  
min dates & range   Χ Χ Χ Χ Χ
multiple email & file   Χ Χ Χ Χ
name in spec???  
novalidate in spec???                 Χ
pattern texttypes   Χ Χ Χ Χ Χ
placeholder texttypes *see js Χ Χ Χ Χ
readonly    
required     Χ Χ Χ Χ Χ
size texttypes  
src image  
step date, range, #s   Χ Χ Χ Χ Χ  
type required  
Values     IE6 IE7 IE8 FF3.6 Saf4 Saf5 Chrome Opera 10.5
"button" button  
"checkbox" checkbox  
"color" color picker   Χ Χ Χ Χ Χ Δ Δ Χ
"date" calendar   Χ Χ Χ Χ Χ Δ Δ
"datetime" calendar   Χ Χ Χ Χ Χ Δ Δ
"datetime-local" calendar   Χ Χ Χ Χ Χ Δ Δ
"email"   text Χ Χ Χ Χ Χ Δ
"file" input + button  
"hidden" invisible  
"image"    
"month" calendar   Χ Χ Χ Χ Χ Δ Δ
"number"     Χ Χ Χ Χ Δ Δ Δ
"password" obscured  
"radio" radio  
"range" slider   Χ Χ Χ Χ Δ Δ
"reset" button  
"search" search field   Χ Χ Χ Χ Χ
"submit" button  
"tel"   text Χ Χ Χ Χ Χ
"text" (default value)    
"time" calendar   Χ Χ Χ Χ Χ Δ Δ
"url"   text Χ Χ Χ Χ
"week" calendar   Χ Χ Χ Χ Χ Δ Δ

You’ll note that I changed some of the values from No to Iffy support because while some browsers don’t support the new features that go with email, url, tel, etc., input types, they do actually support the element. When a type is not supported or understood, the browsers interpret it as the default, which is text, which works fine. Un-understood types are treated as ‘text’ and don’t provide any new features. Because browsers old don’t break with these new types, you can go ahead and start using them now.

<input> attributes by type & Browser Support

TYPE ⇒

Attribute

Text, search, url, tel Email Password Dateandtime
Date,
Month,
Week,
Time
Dateandtime-local,
number
range color Checkbox, radio file
accept WK, O,
FF, IE
autocomplete O O O O O O O
autofocus WK, O WK, O WK,O WK, O WK, O WK, O WK, O WK, O
checked WK, O,
FF, IE
disabled WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
Form O O O O O O O O
list WK, O WK, O WK, O WK, O WK, O WK, O
max O, WK O, WK O, WK
maxlength WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
min O, WK O, WK O, WK
multiple FF, WK, IE FF, WK
Name WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O, FF, IE WK, O,
FF, IE
WK, O,
FF, IE
pattern WK, O WK, O WK, O
placeholder WK WK WK
readonly WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
required WK, O WK, O WK, O WK, O WK, O WK, O WK, O
size WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
step O, WK O, WK O, WK
checked WK, O,
FF, IE
value WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O, FF, IE WK, O,
FF, IE
WK, O,
FF, IE
  • WK = Webkit (tested Safari 5)
  • O = Opera (10.5 on Mac)
  • FF = Firefox (3.6.3 on Mac)
  • IE = Internet Explorer (IE8 on XP)

Browsers
that don’t support the specific type attribute may still support other attributes in the
input as the browser may support attributes on the text input type (such as maxlength or size), and will therefore support those
attributes on a type it doesn’t support, as the input will default to text
type. For example, while IE and FF don’t currently support the email type, they
do support the multiple attribute on that type, since
they will accept a text type including space separated email addresses.

 

With some input types, even if the browser does support it, you can’t tell. The big difference in support comes to the iPhone: when an input has type email, url or tel, the iPhone provides a more input type suitable keyboard for user data entry.

JavaScript for placeholder attribute functionaility until supported by browsers

$("input[placeholder]").each(function(){
  if($(this).val()==""){
    $(this).val($(this).attr("placeholder"));
    $(this).focus(function(){
      if($(this).val()==$(this).attr("placeholder")) $(this).val("");
    });
    $(this).blur(function(){
      if($(this).val()==""){
         $(this).val($(this).attr("placeholder"));
      }
     });
  }
});

Note: this is as far as i’ve gotten at this point on explaining web forms. I do plan on coming back and revisiting this page in June 2010 to update.

<datalist>

The <datalist> is a list of <options>. The <datalist> is used in conjunction with an <input> element, defining which values the input element can take. When used, the <datalist> is not visible to the user, but rather is associated with the <input> element thru the <input>’s ‘list’ attribute that takes as its value the id attribute value of the datalist. The <datalist> defines what values are valid for that <input>.

In the end, this is very similar to a select list, except that the user is not limited to the suggested values.

<label>Enter a car manufacture: <input type="text" name="make" list="makes">
    <datalist id="makes">
    <option value="Toyota" /> <!-- works -->
    <option>Honda</option> <!-- doesn't work in Opera -->
   <option value="Hummer" label="Stupid Ass Gas Guzzler"> <!-- not right -->

   <!-- add more -->
    </datalist>
    </label>

<output>

New in HTML 5, the <output> tag defines different types of output, such as output written by a script.

The ‘for’ attribute takes the ids of the other elements for which it is defining the outputs. The’form’ attribute takes as it’s value the form’s name with which the <output> element is associated. The ‘name’ attribute is a unique name for the element that defines the output element when the form gets submitted.

HTML5: <section> v. <article>

I have been asked several times “when do you use <article> and when do you use <section> in HTML5?” I use an analogy that I figured I would share, as it seems to help developers make sense of the two elements.

Think of a newspaper. The paper comes in sections. You have the sports section, real estate section, maybe home & garden section, etc. Each of those sections, in turn, has articles in it. And, some of those articles are divided into sections themselves.

In other words, you can have parent <section>s with nested <article>s that in turn have one or many <section>s. Not all pages documents need these, but it is perfectly acceptable and correct to nest this way.

I hope that helps explain it.

-Estelle

CSS3 Implementable Features

There are several features of CSS3 that are implementable today. In this presentation we discuss CSS3 Selectors, Text Shadows, Box Shadow, Rounded Corners (prefixed), @font-face, Alpha Transparency, Opacity, Rotation. Mostly, there are links to my sandboxing of those features.

If it’s not successfully embedded, you can see it here css3 implementable features

Content covered in the PPT presentaion

I do not have a podcast, but here is a summary of what was presented in case you missed it, or incase the flash above isn’t enough

CSS3: Si se puede

CSS2.1

has been around since 1999, but only fully supported in IE8. We obviously didn’t wait to implement CSS2 until all the browsers fully supported it. CSS3, while not yet finalized, has a lot of features that are supported in many browsers. Like CSS 2.1, there is no reason not to use these features just because not all browsers support all the features equally: if that were our logic, we would still be on CSS1.

Your site does not need to be identical in all browsers

In developing with CSS3 think about graceful degradation. Not all browsers need to implement your site identically. Yes, your site should look good in all browsers, but no, if your body is a few pixels different in one browser to the next, who cares? You’re the only one who is going to be looking at your website in multiple browsers at the same time. 99.99% of the site user base (that number is pulled out of my ass) have one favorite browser on their desktop, and that’s what they’ll use to look at your site.

Twitter uses rounded corners for non IE browsers only

Example: Twitter uses native rounded corners for supporting browsers.

IE does not support rounded corners. Twitter believes that rounded corners make their site look nicer, but lack of them doesn’t break the site. So, the experience is a little different in the IE’s than in modern browsers. But if I hadn’t shown you this example, you may never have known!

Twitter would have had a difficult time creating rounded corners with images since the background color of the right hand nav bar on twitter is user selectable. They could have created rounded corners on the left and square angles on the right, but likely going all square for IE looked better.

For the rest of the examples, I’ll be explaining how to make CSS3 work in IE. I just want to spread the gospel that it doesn’t have to look identical anyway.

Features that are implementable and discussed below:

  • CSS3 Selectors
  • Text Shadow (2.0).
  • Box Shadow (prefixed)
  • Rounded Corners (prefixed).
  • @font-face
  • Alpha Transparency.
  • Opacity.
  • Rotation.

Features that are implementable, but not discussed in this talk

  • Multi-column layout
  • Video (HTML5)
  • Animations
  • Transitions
  • Border-image
  • Multiple background images
  • Linear Gradients

CSS3 Selectors

If you look at the grid of CSS3 Selectors and Browser Support, you’ll note that, at this point, only the three IEs don’t understand CSS3 selectors. That doesn’t mean you can’t use them.

To see all the selectors, and what you can and cant use, check out CSS3 Selectors and Browser Support

Alpha Tranparency

color: rgba(0,0,0,0.4);
color: hsla(300, 100%, 50%, 0.4);

HSL stands for hue, saturation and lightness. The HSL format simplifies color palette creation as you can pick a hue as the base, then manipulate the lightness/darkness and saturation of the hue selected.

HSL is a new color type added in CSS3, stading for hue, saturation and lightness. The syntax is similar to rgb(), but instead of including the values for red, green and blue, the color value accepts values in degrees from 0 to 359 for hue, and percentages for saturation and lightness, with 50% being the norm for lightness and 100% being the norm for saturation. Lightness of 0% will be white, 50% will be the actual hue, and 100% will be black. Saturation of 100% will be the hue, and saturation of 0 will give you a shade of grey from white to #808080 to black depending on the lightness.

Values for hues include: 0 = red, 60 = yellow, 120 = green, 180 = cyan, 240 = blue, 300 = magenta, and everything in between.

Similar to rgb() with rgba(), hsl() also has an alpha transparent call, hsla(). the syntax is hsla, followed by hue in degrees, saturation in percentage, lightness in percentage and alphavalue from 0-1, encompassed in parenthesis.

For example: hsla(300, 100%, 50%, 0.5) is magenta at 50% opacity.

Opacity

Opacity likely doesn’t have the impact you intended. The element made less that fully opaque is not the only element impacted. All the element with a z-index higher than the one made opaque inherit the same level of transparency. Generally, you’ll want to use alpha transparency on a background rather than opacity.

  .halfthere {
       opacity: 0.4;
       filter: alpha(opacity=0.4)
   }

Opacity Example

Rounded Corners

.rounded {
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      border-radius: 3px;
   }

The order is topleft, topright, bottomright, bottomleft.

Safari has some issues with rounded corners.

IE6, IE7 and IE8 don’t support native CSS rounded corners, and never will. For those browsers, if I really don’t want my page to look different in the IEs than in modern browsers, I add the rounded corners with a little bit of JavaScript and CSS magic, and a single background image:

$('.rounded').append('<b class="tr"></b><b class="tl"></b><b class="br"></b> <b class="bl"></b>');

Text Shadow

.shadowed {
  text-shadow: 3px 3px 3px rgba(0,0,0,0.4);
  }

In the above, the order of values is

leftOffset rightOffset blur Color

If you’re going to use text shadow, which is not supported in IE, this is a good time to use the Hack for CSS3 Supporting Browsers. As I mention in that article, you don’t want to end up with white text on white background.

Rotation

Transforms are supported in all browsers, just with different syntax.

    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

Note that for IE, the values are 1=90, 2=180, 3=270. Check out my

sandbox, or just look at the header of this blog.

I’ve been told that IE supports more than just the 90degree angles, but haven’t tested yet. The syntax is:

     filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
                     M11=6.123233995736766e-17, M12=-1, M21=1, M22=6.123233995736766e-17); /* for IE6 and IE7 */
         -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',
                     M11=6.123233995736766e-17, M12=-1, M21=1, M22=6.123233995736766e-17)"; /* for IE8 */

and make sure that the element hasLayout.

Gradients

I didn’t actually go over gradients in my presentation, but linear gradients are  supported in one way or another in all browsers except opera, so you can use them. Radial gradients …. not yet.

background-image: -moz-linear-gradient(top, #56abf3, #ffffff, #ffffff, #ffffff); /* FF3.6+ */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #56abf3),color-stop(25%, #ffffff));

IE has

Filter: progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#FF56abf3, endColorstr=#FFFFFFFF)

There are two types of Gradients – 0 gives a gradient running from top to bottom. 1 from left to right.
startColorstr —  The start color of the gradient. The first 2 characters in the 8 digit HEX color number are the Alpha values ( 00 being transparent,  FF is opaque). Default is blue
endColorstr= —   The color of the bottom or right  end of the gradient, depending on what GradientType you use. The default color is black  #FF000000 if omitted.

There are no colorstops in IE as far as i can tell

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

Everything you could possibly want to know about CSS Background Properties: Interpreting the w3c specifications with browser support and links to examples and test cases.

Last Major Update: May 26, 2011

There are 8 attributes controlling background images. The CSS3 background properties are very well supported in modern browsers, but a few values are not. Also, there are some properties and values that have not yet made it into the specifications, but are already supported in all browsers except Firefox.. This blog post goes over all the existing and future attributes, targeting them with the DOM, and lets you know of bugs you may find when implementing backgrounds.

  • background-attachment
  • background-color
  • background-image
  • background-position
  • background-repeat
  • background-clip
  • background-origin
  • background-size
  • background-inline-policy – (not in the specifications)
  • shorthand: background, which includes the above attributes that are in the specifications.
  • Each property has a list of possible values. Many developers use the “background:” shorthand. I advocate against using the shorthand, as I spend a lot of time correcting other people’s code when they forget to declare all the possible values, and therefore inadvertently set some of the attributes to their default values, when that was not their intention. For example, in th CSS reset script I recommend, the reset sets background-repeat: no-repeat;. When this reset value is included, if a coder writes background: url(myImg.gif); the background-repeat value gets reset to the default value of repeat — repeating along the x and y axis — which is almost never the intended value. Note that none of the background properties are inherited by default, though several do have “inherited” as a value option. See below for more information on the background shorthand.

    default IE6 IE7 IE8 IE9 IE10 FF 3.6 FF 4 FF 5 Safari Chrome Opera
    background-attachement CSS2.1 Χ Χ
    fixed   Χ Χ
    scroll default
    inherit
    local CSS3 Χ Χ Χ Χ 5
    background-color CSS2.1 Δ Δ Δ
    transparent default Δ
    rgb(r, g, b)  
    #fff
    #ffffff
    rgba(r, g, b, a) CSS3 Χ Χ Χ
    hsla() CSS3 Χ Χ Χ
    140+ named colors
    CSS3                      
    background-image  
    none default     1 1 1 1
    url  
    url, url CSS3 Χ Χ Χ 3.6
    background-position  
    left/top default
    right/bottom
    center default when only one declaration
    inherit
    center
    px
    %
    multiple 
    CSS3 Χ Χ Χ 3.6
    4 Values
    CSS3 Χ Χ Χ Χ Χ Χ Χ Χ Χ Χ
    background-position-x not in the spec Χ Χ Χ Χ
    background-position-y not in the spec Χ Χ Χ Χ
    background-repeat  
    inherit
    no-repeat
    repeat
    repeat-x / repeat-y
    multiple images Χ Χ Χ
    space Χ Χ Χ Χ Χ Χ
    round Χ Χ Χ Χ Χ Χ
    x / y values separate Χ Χ Χ Χ Χ Χ
    background-clip CSS3 Χ Χ Χ Δ -webkit-
    border-box Χ Χ Χ Δ
    padding-box Χ Χ Δ
    content-box Χ Χ Χ Δ
    background-origin CSS3 Χ Χ Χ Δ
    border-box Χ Χ Δ
    padding-box default Χ Χ Δ
    content-box Χ Χ Χ Δ
    background-size CSS3 Χ Χ Χ -moz-
    auto default -moz-
    contain Χ Χ Χ -moz-
    cover Χ Χ Χ -moz-
    (length) Χ Χ Χ -moz-

    background-attachment

    The background-attachment attributes sets whether the background-image scrolls with the the document or remains fixed at the same location within the viewport. For example, if you include a “fixed” background image in a div, as the div scrolls up the page, the background image will stay in the same spot relative to the viewport, and will exit off the bottom edge of the div, disappearing from view, as the div moves up the screen. The default value is scroll. IE6 is the only browser that fails to support it correctly.

    Property Values for background-attachment

    background-attachment: fixed | scroll  | local;
    

    Browser support for background-attachment

    Internet
    Explorer 6
    Internet
    Explorer 7
    Internet
    Explorer 8
    Internet Explorer 9 Firefox Opera Chrome Safari
    fixed behaves as “scroll” behaves as “scroll” works, but the placement of the image is off.
    scroll behaves as “local” behaves as “local”
    local Works because it inherits scroll, which erroneously renders as local. Works because it inherits scroll, which erroneously renders as local. 10.5 5

    background-attachment:fixed;

    In elements with background images that are background-attachment:fixed; the position of the fixed image is relative to the viewport (the browser), not the element that it is in. In other words, if you declare a fixed background image, the image is positioned relative to the document window rather than relative to the element. Because of this, as you scroll thru the page, and your element with the background image that is fixed moves thru the viewport, the background image will come into view as it passes over the location of the otherwise hidden background image.

    Note: background-attachment: local is a new value added in CSS3. “Local” is basically how “scroll” has been acting on scrolling elements in IE6 and IE7. An example is a div with "overflow: scroll.” Generally, as you scroll thru to div, the background image stays exactly where it was initially in the scrolling div’s viewport. Using local, the div’s background image scrolls with the element’s content. In the case of ’scroll’, the background does not scroll with the element’s content, except in non-compliant IE6 and IE7. In the case of ‘local’, the background scrolls along with the element’s content.

    Mobile Note: Mobile webkit does support fixed, but it doesn’t behave as you might expect. Smart phones show websites thru a viewport, displaying just a portion of the webpage. As you scroll, you are moving the viewport, not the actual page. So, the fixed background image is doing what it should, but it doesn’t look like you would expect.

    Bugs:

    • IE8 does suppord fixed and not local, but get’s the positioning of the background image wrong.
    • IE6 and IE7 mistakingly renders fixed as scroll and scroll as local. Since scroll is the default, scroll renders as local, and the browser ignores the keyterm local, you can actually use local in these browsers as it will render local correctly.

    DOM

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

    background-color

    The background-color property sets the background color of the element. This attribute, like all other background attributes, is NOT inherited. If you set a background image that is a transparent gif, transparent PNG, or gradient with transparency,, the declared background color will show thru the transparent pixels.

    All browsers support background colors.

    The default value is “transparent”. In using RGB instead of Hex values, you can either use integer range 0 – 255 or percent values of 0-100%. If you go over (for example, 300 or 110%), the browsers will reduce the value to the maximum allowable value (either 255 or 100%).

    Note that if you mix RGB between integer and percents, some browsers will fail. If you include the wrong number of characters in a hex value, some browsers will ignore the declaration. If you misspell a named color, the browser will ignore the declaration.

    CSS3 provided us with new colors. Any valid value for color is valid for the value of background-color. For example, you can set the opacity or transparency level of the background color using background-color: rgba(255, 255, 255, 1);, where 255 is an integer between 0 and 255 or a percent value, and the 1 is any value between 0 and 1, with 0 being completely transparent and 1 being completely opaque. test page

    Property Values for background-color

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

    Browser support for background-attachment

    IE6 IE 7 IE 8 IE 9 IE10 FireFox Safari Chrome Opera
    transparent
    rgb(r, g, b) Renders with mixed values Renders with mixed values
    #fff
    #ffffff
    rgba(r, g, b, a) ignores the entire call ignores the entire call ignores the entire call  
    hsl(h, s, l) ignores the entire call ignores the entire call ignores the entire call  
    hsla(h, s, l, a) ignores the entire call ignores the entire call ignores the entire call  
    named colors didn’t test      

    Note:

    • Do not using mixed values (percents and integers) in RGB. This is against the specifications, and will fail in all modern browsers.
    • IE6 and IE7 get “partially compliant” for RGB, since they erroneously display color if integers and percents are mixed. This may be a good thing, but it’s not in the specifications. test page
    • Do not use RGBA without browser targeting: color will fail in non-supporting browsers.
    • Bug: IE6 sometimes completely chokes on background-color: transparent. For example, if you declare background-color: transparent on pop-out in a suckerfish menu, the links in that menu will not be clickable and it will display as black.
    • Named colors have been expanded to include many new colors. Check out my list of named, hsl, hex and rgb colors.

      DOM

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

    background-image

    The background-image property allows us to define none, one or more background images for an element. This property only declares what image or gradient, if any, should be used. Other properties on this page can be used to define the position, movement, size, etc., or your declared images.

    In CSS3, an element can have multiple background images or layers. Separate each layer/image background image with a comma. When more than one image/layer/gradient is defined, the last image is drawn below all other layers and the first one is drawn on top, with each layer displayed in front to back order in between.

    Note that background images are not limited to jpegs, gifs and pngs. Browsers support data URIS, and (almost) all supporting gradients and some are supporting inline SVG.

    Property Values for background-image

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

    Browser support for background-image

    IE 6 IE 7 IE 8 IE 9 IE 10 FireFox Safari Chrome

    Opera

    inherit if url doesn’t work, neither does inherit if the background image on parent doesn’t work, neither does inherit if the background image on parent doesn’t work, neither does inherit      
    none      
    url needs to have adequate size to work IE7 zoom function does not increase the size of background images IE7 zoom function does not increase the size of background images      
    url, url 3.6     10.5
    gradient -ms- -moz- -webkit- -webkit

    -o-

    background-image browser bugs

    IE6 has several bugs with background images that are worth noting.

    1. The area of an element with a background-image must be at least 2500 pixels, or the image may not display. Fix by giving area or hasLayout=true.
    2. The repeated background image position starts and ends at the inside of the border and is therefore not seen thru a dashed or dotted border. Compliant browsers start the image at 0 0, but repeat it thru the border on all sides.
    3. For background images on links, IE6 fetches the image from the server for every “hover”, causing flickering.
    4. IE6 does not handle transparency of PNGs. Use proprietary filter to get around this bug
    5. If the background-image of a link is a transparent PNG, the link will not work in IE6.
    6. Using background images on <li>, <dd> and <dt> the background image may not render, especially if the list is placed within a floated, relatively-positioned parent.

    IE7 and IE8 has bugs too:

    1. The IE7 zoom function does not increase the size of background images.
    2. Same as IE6, in IE7 and IE8 the repeated background image position starts and ends at the inside of the border and is therefore not seen thru a dashed or dotted border. Compliant browsers start the image at 0 0, but repeat it thru the border on all sides.

    Gradients

    Browsers are beginning to support gradients as background image values. See my CSS Gradients Library and Library of World Flags in CSS Gradients as examples. The syntax differs in Safari 5 (and slightly in FF 3.6) from the standard, and all browsers that support gradients support gradients only as a prefixed value.

    I’ll be posting a tutorial on gradients shortly, so am not including details here.

    SVG as Background image

    There are two ways to include SVG as background images. Either point to an svg file as you would to any jpg file: Old Example of SVG as bgimage

    or you can include the SVG directly in the background image call.

    background-image: 
     url("data:image/svg+xml;utf8,
       <svg xmlns='http://www.w3.org/2000/svg'>
       <linearGradient id='gradient'>
       <stop offset='1%' stop-color='#F00'/>
       <stop offset='90%' stop-color='#C33'/>
       </linearGradient>
       <rect fill='url(#gradient)' x='0' y='0' 
       		width='100%' height='100%'/>
       </svg>"); }

    Note that spacing was added for legibility. All spacing must be removed for SVG to work. example of svg as background URI

    DOM

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

    background-position

    In CSS2.1 background position takes two: left and top (in that order!) of the background image. If you only declare one attribute, the outcome depends on the type of value used (percent, measurement or keyword). The default value is “top left”, well, actually, “0 0″.

    NOTE: If you are using anything other than the keyterms, make sure the order is LEFT and TOP in that order.

    Property Values for background-position

    background-position: bottom | center | inherit | left | right | top | 10px 10px | 50%  50%;
    background-position: 0 0, 50% 50%, 100% 100%; /* multiple placements */

    In CSS3 we can have up to 4 values for a single image’s background-position!!!

    If only one value is specified, the second value is assumed to be ‘center’. For example, background-position: bottom; will position the image centered at the bottom of the element. When using lengths instead of keyterms, the value refers to the horizontal positioning, so background-position: -20px; will position the background image centered veritally, with 20px of the background image being cut off the left hand side of the element.

    If two values are given and they’re not both keywords, the first value represents the horizontal position and the second represents the vertical position as an offselt from the top left corner of the element (background origin determines is its the top left corner of the outside of the border, inside of the border or inside the padding.

    New to CSS3, we can include three or four values for background-position, enabling us to position a background image relative to the bottom right of the element.

    Let’s start by explaining the four value property value, since the 3-value value is insanely confusing. The default of background-position is to offset your background image from the top left corner. Use four values to set your own offset corner. the syntax with an example:

    background-position: [bottom | center  | left | right ][length][bottom | center  | left | right ][length];
    background-position: bottom 40px right 20px;

    Pick one side, then list the offset from that edge, then include a perpendicular side and the offset from that second edge.In our example, the background image will be positioned 40px from the bottom and 20px from the right toward the bottom right of our element.

     

    If three values are given, 2 values must be keyterms and the missing offset is assumed to be zero. Currently only Opera supports 3 and 4 value background position. And, if you get any part of the syntax wrong (like try to offset from center which is not allowed), the entire declaration will be ignored. Because the 3-value syntax is confusing and prone to error, I recommend defining the 4 value whenever offsetting from any corner other than the top left corner. JS Fiddle Example

    Browser support for background-position

    IE 6 IE7 IE 8 IE 9 !E 10 Firefox Opera Chrome Safari iPhone
    left/top
    right/bottom
    center
    inherit
    center
    px
    %
    mulitple     since 3.6 10.5
    4-value offset 11

    Note that background position with percent values can be confusing! A background-position of X% will place the pixel that is X% from the left of the image at the pixel that is X% of the way in from the left of the element in which it is placed.

    • For 0, the 0%, or left/top most pixel, will be placed at 0%, or the left/top.
    • For 100%, the 100%, or right/bottom most pixel of the bg image, will be placed at 100%, or bottom/right of the element.
    • For 50%, the middle of the image will be placed in the center of the element.

    Any other percentage value is a bit more confusing:

    A background-position of 25% will place the pixel that is 25% from the left of the image at the pixel that is 25% of the way in from the left of the element in which it is placed. If your image is 1000px wide, the pixel at 750px will be placed 75% in. In an element that is 1000px wide, it will be placed at 0,0. If your parent is 2000px, the pixel at 75% is 1500, so the 1000px background image will go from px 750 to 1750. Likely, that’s not what you want.

    Because of this, know the width of the image and the width of the element before using percent (other than 0, 50% and 100%) when creating liquid layouts. If you have a content area that is 80% of the viewport, to put a faux column background image for a 25% width column, create a background image with a ratio of 1:3 that is wide enough to cover a wide scree browser., and place the background-position-x: 20%; (80% * 25% = 20%).

    DOM

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

    Background-position-x

    Although not part of the W3C specifications, backgroundPositionX and backgroundPositionY are part of the DOM and supported by some browsers. Colors are different in the following table, since green means the browser follows the W3C specifications and red means it fails, and these values are not in the specifications.. This property was added by MS for IE5.5, made it into the CSS3 specifications for a while, but was removed in 2009. Test case

     

    Property Values for background-position-x

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

    Browser support for background-position-x

    Internet Explorer 6 Internet Explorer 7 Internet Explorer 8 Internet Explorer 9 Firefox Chrome Safari Opera
    % Supported Supported Supported Supported Supported Supported
    px (length) Supported Supported Supported Supported Supported Supported
    left / center /right Supported Supported Supported Supported Supported Supported

    DOM

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

    background-position-y

    Property Values for background-position-y

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

    Browser support for background-position-y

    Internet Explorer 6 Internet Explorer 7 Internet Explorer 8 Internet Explorer 9 Firefox Chrome Safari Opera
    % Supported Supported Supported Supported Supported Supported
    px (length) Supported Supported Supported Supported Supported Supported
    left / center /right Supported Supported Supported Supported Supported Supported

    DOM

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

    Background-repeat

    The backround-repeat property specifies whether the background image is repeated or tiled. And, if so, how that image is tiled. The default value is repeat, which repeats the image along both the x and y axis. Since this is generally NOT the effect I go for, i include background-repeat: no-repeat in my CSS reset.

    There are two new values for background-repeat: space and round. Space means the image is repeated as many times as can fully fit, separated by white space if repeating does not create an exact fit. Round means the image is repeated as often as will fit. If it doesn’t fit a whole number of times, the background images are rescaled so they do.

    You can also declare different values for the x and y axis. While this new feature is in the specifications, it is not supported yet in Firefox.

     

    Property Values for background-repeat

    background-repeat: inherit | no-repeat | repeat | repeat-x | repeat-y;
    IE 6 IE 7 IE 8 IE 9 IE 10 Firefox Chrome Safari Opera
    inherit
    no-repeat
    repeat
    repeat-x / repeat-y
    multiple comma separated values
    space
    round
    separate x/y values

    DOM

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

    background-clip

    With possible values of border-box | padding-box, the background-clip property determines whether the background position is relative to the border or the padding, specifying whether an element’s background extends underneath its border. This only has any visual effect when the border has transparent regions (because of border-style) or partially opaque regions; otherwise the border covers up the difference. The default value is “border”, which is the effective default of all current browsers. Firefox 3 supports -moz-background-clip. Safari’s implementation is -webkit-background-clip.
    Supporting browsers also support content-box, which is not in the CSS3 specifications at this time. Border box is the default. Webkit uses both -webkit-border and -webkit-border-box. Firefox uses -moz-background-clip, and does not include the term ‘box’ in the value. The syntax may change.

    Property Values for background-clip

    background-clip: [border-box | padding-box ] [ , [border-box | padding-box ] ]* ;
    -moz-background-clip: border;
    -webkit-background-clip: border-box;

    Browser support for background-clip

    IE 6 IE 7 IE 8 IE9 IE 10 Firefox 3.6 Firefox 4 Chrome Safari 4/5 Opera
    border-box     -moz-: border   -webkit- -webkit-
    padding-box     -moz-: padding   -webkit- -webkit-
    content-box         -webkit- -webkit-

    Notes:

    IE 7 (in yellow) behaves like background-clip:padding if overflow property is set to hidden, auto or scroll.

    FF 3.6 is both prefixed, and supports values of border and padding (not border-box | padding-box)

    Safari 4 is both prefixed, and supports values of border, padding and content (not border-box | padding-box | content-box)

    DOM

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

    background-origin

    The background-origin property determines how the ‘background-position’ is calculated. Takes one or two parameters: border-box | padding-box | content-box. With a value of ‘padding-box’, the position is relative to the padding edge (‘0 0′ is the upper left corner of the padding edge, ‘100% 100%’ is the lower right corner). ‘Border-box’ means the position is relative to the border edge, and ‘content-box’ means relative to the content edge.

    Each comma-separated value applies to one image of ‘background-image’. This is useful only in safari at this point… but haven’t tested to see if supported. Safari’s current implementation is -webkit-background-origin. Mozilla is supporting -moz-background-origin. Has no impact when background attachement is set to fixed.

    Unlike clip, the value of content-box is in the proposed specifications.

    Note that the spec has changed. Mozilla and webkit have support, but use the original value terms of border | padding | content instead of the currect proposed specifications border-box | padding-box | content-box.

    Property Values for background-origin

    background-origin: [border-box | padding-box | content-box ] [ , [border-box | padding-box  | content-box] ]* ;
    -moz-background-origin: border; /* does not yet support multiple images, so no support for multiple values */
    -webkit-background-origin: border-box, padding-box, border-box;

    Browser support for background-origin

    IE 6 IE 7 IE 8 IE9 IE 10 Firefox 3.6
    -moz-
    Firefox 4 Safari 3
    -webkit-
    Safari 4 Safari 5 Chrome Opera
    border-box     border   border -webkit-      
    padding-box     padding   padding -webkit-      
    content-box     content   content -webkit-      

    Sandbox: Background-clip in action

    DOM

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

    background-size

    Supported by Opera, Safari and Chrome, and Firefox , the background-size property specifies the size of the background images. The ‘contain’ values scales the image, while preserving its aspect ratio (if any), which may leave uncovered space. The ‘cover’ scales the image so that it covers the whole area, completely covering the element, but perhaps not showing part of the image if the element and the image did not have the same aspect ratio.
    see background-size specifications at the W3C

    Note that you still need to use the -moz- prefix if you’re supporting FF3.6 and the -webkit- prefix if for some unexplainable reason you’re still supporting Safari 4.

    Internet Explorer 6 Internet Explorer 7 Internet Explorer 8 Internet Explorer 9 Firefox 3.6 Firefox 4 Chrome Safari Opera
    auto -moz-
    contain -moz-
    cover -moz-
    (length) -moz-

    DOM

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

    The background shorthand.

    The background shorthand (or shortcut) attribute enables the declaration of all five background attributes in one statement. Before CSS3, the values could be in any order, but were generally in the color, image, attachment, position and repeat order. If an attribute value is not specified, the value gets reset to the default value, which is why I recommend against using the shorthand.

    If you use the background shorthand and fail to declare any of the individual properties that make up the shorthand, those properties will revert to their default values listed below:

     

    	background-color: transparent;
    	background-position: 0% 0%;
    	background-size: auto auto;
    	background-repeat: repeat repeat;
    	background-clip: border-box;
    	background-origin: padding-box;
    	background-attachment: scroll;
    	background-image: none

    If you are declaring several background images using the shorthand property, the background color, if declared, should be declared as part of the shorthand of the final image only.

    Since they have the same value syntaz, if one <box> value is declared, then both the ‘background-origin’ and ‘background-clip’ are set to that value. If two values are present, then the first sets ‘background-origin’ and the second defines the ‘background-clip’ property.

    Property Values and order for the background shorthand

    background: background-image | background-position / background-size | background-repeat  | background-attachment | backgroun-origin | background-clip | background-color 
    background: url(myImg.jpg) bottom 20px right 20px / 200px 100px no-repeat fixed red;
    background: url(myImg.gif) 0 0 /  200px 100px no-repeat fixed border-box padding-box blue;  /*in action*/

    Default Values for background when values aren’t explicitly declared

    Property IE 6 IE 7 IE 8 IE 9 Firefox Safari Chrome Opera
    background-color transparent transparent transparent transparent transparent transparent transparent transparent
    background-image none none none none none none none none
    background-attachment “local” “local” scroll scroll scroll scroll scroll scroll
    background-position 0 0 0 0 0 0 0 0
    background-repeat repeat repeat repeat repeat repeat repeat repeat repeat
    background-size       auto auto auto auto auto
    background-clip       border-box border-box border-box border-box border-box
    background-origin       padding-box padding-box padding-box padding-box padding-box

    DOM

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

    background-inline-policy

    Mozilla only, pecifies how the coordinate system for the background-position of an inline element is chosen when the content of the inline element wraps onto multiple lines. -moz-background-inline-policy values include bounding-box | continuous | each-box, with a default of continuous. Property has no effect when background-attachment is fixed.

    Making IE recognize HTML5 elements

    IE6, IE7 and IE8 don’t recognize the HTML elements. This causes a major problem when you’re using the HTML5 elements, such as ‘aside’, as part of (or your complete) selector in your CSS. Add this snippet either in your HTML or as a condionally included file, and IE will be able to handle your HTML5 elements as selectors in your CSS, and as members of your DOM in javascript. (thanks to John Resig for the inspiration)

    <!--[if IE]>
    <script type="text/javascript">
    (function(){
    var html5elmeents = "address|article|aside|audio|canvas|command|datalist|details|dialog|figure|figcaption|footer|header|hgroup|keygen|mark|meter|menu|nav|progress|ruby|section|time|video".split('|');
    for(var i = 0; i < html5elmeents.length; i++){
    document.createElement(html5elmeents[i]);
    }
    }
    )();
    </script>
    <![endif]-->

    Printing HTML5 in Internet Explorer: where HTML5 is not supported

    The code snipped above does wonders for enabling the various Internet Explorer’s to understand HTML5 elements as element selectors for scressn media, it does nothing to enable print CSS. The above javascript doesn’t cure the ‘print’ issue. Jonathan Neal has come up with a javascript solution to the IE HTML5 print issue.

    IE Print Protector is a javascript file that allows you to print HTML5 pages in Internet Explorer, helping IE render HTML5 elements correctly, both on screen and in print.

    iPhone: HTML, CSS & JS Support


    See Estelle at the 2nd annual CSS Summit
    Wouldn’t it be cool to be able to use CSS3 and HTML5 unfettered by the lack of support in IE? Mobile developers for smart phones get to do just that! When developing for mobile devices using webkit browsers we can use CSS animations, transforms, multiple background images, rounded corners, text and box shadows, CSS columns, and HTML5 form elements.

    In my CSS Summit session we’ll use some CSS3 features learned in earlier sessions to create a native looking iPhone web app. We’ll also cover some CSS UI and HTML5 form elements that will help you get up to speed on developing for mobile webkit. You don’t have to wait any longer to use CSS3! Join Us!



    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

    Alternative Text for Images: the ALT attribute


    For a webpage to validate and be accessible, all images must have a value for the alt attribute, even if that value is empty. The XHTML DTD requires only two atttributes for the img element: src and alt. The XHTML DTD tells you it needs to be there. WCAG tells you a bit more about what it needs to look like. Unfortunately, W3C writings are is not always understandable. This entry will explain, in human terms, how to write the values for your alt attributes.

    Section 508/WCAG alt attribute Guidelines:

    The first Section 508 guidelines states, “A text equivalent for every non-text element shall be provided (e.g., via “alt”, “longdesc”, or in element content)”. Checkpoint 1.1, the first priority of priority 1 of the WCAG guidelines states the same thing: Provide a text equivalent for every non-text element (e.g., via “alt”, “longdesc”, or in element content). This includes: images, graphical representations of text (including symbols), image map regions, animations (e.g., animated GIFs), applets… (I shortened it. the W3C tends to be loquacious.)

    Decorative Images

    Decorative images include background images, bullets, <hr /> equivalents, spacer images, etc. These types of images make the page prettier but have no semantic value for a webpage. The alt attribute for decorative images should be empty: <img src=”path/image.gif” alt=”” />.

    Notes:

    • If you’ve read any of my other blog entries, or other articles on web standards, you likely will never have an empty alt attribute, since you are separating the content layer from the presentation layer; and therefore not including decorative images in your XHTML; opting instead for the use of CSS.
    • If you include an empty alt attribute, screen readers will skip over the image. If you fail to put an alt attibute in, the screen reader will read the entire URL of the image. Can you imagine listening to a robot say “spacer gif spacer gif spacer gif” repeatedly, or, worse, going letter bu letter thru the underscores and extensions of a filename generated by ImageReady.

    Icons

    The alt attribute of an icon should describe the intention of the icon, since an icon can have differing meanings depending on the context, and someone who has never seen the icon wouldn’t understand whatit emant if only visually described.

    icon possible relevant values for alt useless alt
    “correct”, “open”, “start”, “completed”, “asset”, “” circle with check mark
    “stop”, “wrong”, “delete”, “close window”, “”, “remove module”, “delete email” red cross
    “RSS Feed”, “add RSS feed to reader, “” orange square with 3 lines.
    “answer”, “enter password”, “”, “primary key”, “security feature”, “” gold key
    “security feature”, “blocked”, “password protected” closed lock

    The desription of the appearance of the icon is almost alwasys a useless alt attribute value. Unless you are writing a manual on graphic design or on understanging iconography, don’t include a description of the icon as the value of the alt attribute.

    An empty string is a possible relevant value for all icon alt attributes. When an icon appears directly before an equivalent definition of the function of that icon, then the value of the alt attribute should be empty. The two most common examples of this are the print and email icons:

    icon possible relevant values for alt useless alt
    “open email”, “email messages”, “go to inbox”, “send an email, “” letter
    print, “” printer

    When an icon describes the text immediately preceding or following it, it is redundant to include a value for the alt attribute of the icon. The screen reader will read “print print”, or “email email”.

    Sample alt attribute encoding for icons:

    Wrong:

    <a href="inbox.html"><img src="icon/email.gif" /> inbox</a> //missing alt attribute

    Will validate, but not really good: Screenreader will say “go to inbox inbox”

    <a href="inbox.html"><img src="icon/email.gif" alt="go to inbox" /> inbox</a> //redundant alt attribute

    Better, and correct:

    <a href="inbox.html"><img src="icon/email.gif" alt="" /> inbox</a>

    Best: seperates content from presentation

    <a href="inbox.html" class="email">inbox</a>

    with the css of

    a.email {
        padding-left: 18px;
        background: tranparent url(icon/email.gif) no-repeat 0 0;
        }

    Notes:

    • Although it is generally best to use CSS background images (including sprites) if you are going to use an icon
    • If you use a sprite, the alt altribute should describe the relevant section of the sprite. Don’t write “sprite of icons”. Instead, follow the recommendations above (all those images are actually one transparent .gif — a sprite.

    Buttons, navigation and other images with text

    If you are still using images for the elements in your navigation bar (shame on you!), the general rule is that the value of the alt attribute must match the text of the image. If your image says only “about”, the value of the alt attribute should also read about. Then include more detail about the destination in the title attribute of the parent anchor tag.

    <a href="about/index.html" title="About the Author"><img src="img/nav_about.jpg" alt="about" /></a>.

    Include the text that appears within your image as the value of the image’s alt attribute.

    If you are using mystery meat navigation, you should describe relevant text in the alt, not the an explanation of the iconography of the tab. This may go against standards guidelines, but since mystery meat navigation goes against web standards, at least make your website accessible to the visually impaired, even if it isn’t accessible to sighted users.

    Instead of using an <img> for navigation, use text, and make your link attractive, including using your image, via CSS using image replacement. I will include a blog entry on image replacement in the near future, since i use it a lot. In the meantime, you can look it up on any search engine.

    Images, without text, that link to somewhere

    Sometimes it makes sense to actually use images, without image replacement, to link to a page. For example, on Facebook, Yahoo, and maybe on your company’s about page, thumbnail images of people or avatars may link to the person’s profile. If the image is within the same link as a text link, the alt attribute should be left empty. If not, however, the link should describe the purpose of the link: <a href="bios/jane.html"><img src="img/thmb_jane.jpg" alt="Jane Smith's profile" /></a>.

    This is similar to the explanation on icons above. Let’s say you do use just the email icon (from the icon example above). The correct presentation would be:

    <a href="inbox.html"><img src="icon/email.gif" alt="go to inbox" /></a>

    Complex, detailed images that “convey 1000 words”

    Sometimes images are worth a thousand words. Maps, Graphs and Charts are examples of images that contain information necessary to understanding the message of a page but too complex to be described in under 255 characters. If the complex image is followed by text explaining or detailing the content of the image, like you might find in a journal article, then a simple alt attribute value suffices.If there is information conveyed in the image that is not explained in the text following the image and is too complex to describe in 2 sentences, like you might find in a powerpoint presentation, then you need an alternative method of explaining the content of the image to those unable to view the image. In other words, if all the data presented in your image is reiterated as text, then an alt attribute value of “graph of blood pressure by age group” suffices. If there is information that is conveyed in the image that is not reiterated as text for all of your visitors to read (and search engines to find), then you should include a longer description of the image in the form of a longdesc attribute linking to content describing in full detail the contents of your image.

    The longdesc attribute

    longdesc is an optional attribute of the <img> and <frame> elements. The longdesc property specifies a url for a longer description of the contents of the current frame. The longdesc attribute is coded like this::

    <img src="graph.gif" alt="graph of blood pressure by age group(long description available)" longdesc="supportfiles/graphdescribed.html" />


    You then need to create a separate page for your longdescription. This page should include the description and a link back the current page. The longdesc attribute’s purpose is to provide a link to a separate page where a long description is available. This link is invisible to the sighted user but available to those using screen readers.

    The longdesc functionality is rarely implemented in websites despite it’s being the recommendation of the WC3 and Section 508 guidelines. For this reason, you should:

    • Include the fact that a long description is available in the alt attribute value of the image: it’s used so infrequently that even those using screen readers may not otherwise notice you included it. alt="graph of blood pressure by age group(long description available)"
    • It’s better to not use the longdesc attribute, opting instead to fully describe the contents of the image in the text for all readers. This method provides more fodder for search engines, and explains the content of your graph that even sighted users may not have otherwise noticed or derived.
    • To test whether it’s necessary, turn off images and see if all the information conveyed in the image is presented in the text in the page. If yes, longdesc is not necessary. If not, either include more descriptive text, or include a longdesc.
    • When I receive data graphs, I usually include a datatable with the data conveyed in the graph. Most charts are created using MS Excel (open MS Excel, select “Insert” > “Chart”). Ask whoever created your chart image for the original Excel file, and present the data from the spreadsheet in a data table. If you don’t have the original spreadsheet, if the chart is detailed enough to require a longdesc, then it’s detailed enough to be able to cull the data.
    • WebAIM provides more information on the longdesc attribute.

    Other images

    This is for all other images! If you included a picture of yourself standing with Britney Spears, your alt attribute value should minimally read “Britney Spears and me”. You can, of course, add a few more details to better describe the image if there is other relevant information presented in the image that the visitor should know.