Check out
CSS2.1 Properties & Browser support
All 90 CSS2.1 properties, values & browser support

CSS, JavaScript and XHTML Explained

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

 

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

Filed under: CSS (including hacks), Character Entities, Cursors & Icons, IE7, SEO — Estelle Weyl @ 12:49 am

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.

There are 5 attributes controlling background images, with a few more being added when we have CSS3 support. 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.

  1. background-attachment
  2. background-color
  3. background-image
  4. background-position
  5. background-repeat
  6. CSS3 background properties that may become relevant

and a shorthand: background, which includes the above attributes.

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 attention. 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.

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 grade-A browser that fails to support it correctly.

Property Values for background-attachment

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

Browser support for background-attachment

  Internet
Explorer 6		 Internet
Explorer 7		 Internet
Explorer 8		 Firefox 2 FireFox 3 Safari 3
fixed behaves as "scroll" behaves as "scroll" works, but the placement of the image is off.      
scroll behaves as "local" behaves as "local"        
inherit            
local Works because it inherits scroll, which erroneously renders as local. Works because it inherits scroll, which erroneously renders as local.        

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.

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

Sets the background color of the element. The default value is transparent. This attribute, like all other background attributes, is NOT inherited. If you set a background image that is a transparent gif or transparent PNG, the 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 (300 or 110%), the browsers should reduce the value to the maximum allowable value (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.

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

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.

Note: Do not using mixed values in RGB, and do not use RGBA without browser targeting: both will fail completely in non-supporting browsers.

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

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;

Browser support for background-attachment

  Internet
Explorer 6		 Internet
Explorer 7		 Internet
Explorer 8		 Firefox 2 FireFox 3 Safari 3 Opera 9.5
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 ignores the entire call     ignores the entire call

DOM

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

background-image

Property Values for background-image

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

Browser support for background-image

  Internet
Explorer 6		 Internet
Explorer 7		 Internet
Explorer 8		 Firefox 2 FireFox 3 Safari 3 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              

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.

DOM

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

background-position

Background position takes two values: 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%;

Browser support for background-position

  Internet
Explorer 6		 Internet
Explorer 7		 Internet
Explorer 8		 Firefox 2 FireFox 3 Safari 3
left/top            
right/bottom            
center            
inherit            
center            
px            
%            

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 not used in the following table, since I couldn’t figure out if green should mean it is supported or if green means it follows W3C specifications.

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		 Firefox 2 FireFox 3 Safari 3 Opera
% Supported Supported Supported     Supported  
px (length) Supported Supported Supported     Supported  
left / center /right 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		 Firefox 2 FireFox 3 Safari 3 Opera
% Supported Supported Supported     Supported  
px (length) Supported Supported Supported     Supported  
left / center /right Supported Supported Supported     Supported  

DOM

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

Background-repeat

Property Values for background-repeat

background-repeat: inherit | no-repeat | repeat | repeat-x | repeat-y;
  Internet
Explorer 6		 Internet
Explorer 7		 Internet
Explorer 8		 Firefox 2 FireFox 3 Safari 3
inherit            
no-repeat            
repeat            
repeat-x / repeat-y            

DOM

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

The background shorthand.

The background shorthand (or shortcut) attribute enables the declaration of all five background attributes in one statement. The values can be in any order, but are 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 are going to use the shorthand, I recommend always following the CIAPR order to make debugging easier. The attribute values should be separated by a space. See the above attribute descriptions for default values and quirks (such as background-position attribute order).

Property Values and order for the background shorthand

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

Default Values for background when values aren’t explicitly declared

Property Internet
Explorer 6		 Internet
Explorer 7		 Internet
Explorer 8		 Firefox 2 FireFox 3 Safari 3
background-color transparent transparent transparent transparent transparent transparent
background-image none none none none none none
background-attachment "local" "local" scroll scroll scroll scroll
background-position 0 0 0 0 0 0
background-repeat repeat repeat repeat repeat repeat repeat

DOM

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

CSS3 Background Properties

The specifications don’t seem to be finalized, but it would seem that the first two will be incorporated, and the second two are being worked on (simply my guess, I don’t know for sure).

  1. background-clip
    With possible values of border | padding, 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.
  2. background-origin
    Determines how the ‘background-position’ is calculated. Takes one or two parameters: border | padding | content. With a value of ‘padding’, 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’ means the position is relative to the border edge, and ‘content’ 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.

  3. background-size
    see background-size specifications at the W3C
  4. background-break
    see background-break specifications at the W3C
  5. 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.
 
 

Favicons: why and how to create favicons September 3, 2007

Filed under: Best Practices, Cursors & Icons, SEO, Web Development — Estelle Weyl @ 9:35 pm

The "WHY" of Favicons

Favicons ARE an integral part of your website and branding.

Favicons are the single most important graphic appearing on a website. While that sounds like a strong statement, it’s true. Favicons are the least expensive and most overlooked visual branding opportunity.

Favicons are the 16 x 16 pixel images that show up in the navigation bar of your browser. They also appear in browser’s bookmark/favorites menu. You might think, "big whoop! that’s not vital." But those aren’t the only places they appear.

They also appear at the bottom of my blog: not my favicon, but the favicon for stumbleupon, digg, technorati, del.icio.us, etc. Web developers and copy editors don’t even need to use the names of those online brands: everyone recognizes these networking favicons.

They now also appear next to the page title on the tabs in tabbed browsers: if a user has 25 browser tabs, each tab may be as narrow as just the favicon: would you prefer your visitors see Internet Explorer’s blue E, Safari’s blue compass, an icon of a page (Firefox and Opera), or would you prefer that they see your logo? If they see a logo, they recognize immediately what site is opened in each tab: you want to be one of those recognized pages.

Are you looking at your open browser tabs? Can you tell which pages are which? Have you checked your bookmarks list? Are there some bookmarks that stand out more than others? Have you looked at the bottom of this blog entry? Depending on how many toolbars you have downloaded and have open, you may have a plethora of favicons there too. So, have I convinced you?

The "HOW" of Favicons: How to design & create a FavIcon:

Designing a Favicon:

  • If you have a logo that easily translates into something that looks decent at 32 x 32 or 16 x 16, use it.
  • If you can avoid using the color blue, especially the glassy shiny blue of IE, avoid using it.
  • Keep it simple. Yahoo uses a Y!, Google uses a G. Flickr uses two little circles. Delicious is a square made of 4 squares. IE is an E. These are all ones you know.
  • If your logo is very complex, try using just a part of it such as the first letter. If your first letter doesn’t represent your company well enough (like in the case of this blog), use your logo color to abstract an image.

Creating a FavIcon: Converting an image to a .ico

  • Following the suggestions above, create a 48×48 or a 32 x 32 image that you will use as your favicon. Save it.
  • If you have photoshop, you can download a Favicon extension for Photoshop. If you don’t have photoshop, or don’t want to deal with extensions, you can visit Dynamic Drive and use their tool to convert your .jpg, .png or .gif into a .ico file. The file created will be called favicon.ico. You will be directed to download it.
  • Upload the .ico file to the root directory of your website.
  • If your favicon is named favicon.ico, then you don’t need to add code. However, if you don’t have the .ico file in your top level directory, or if you saved it under a different file name, or if you have different favicons for different parts of your site (not usually a good idea, but Yahoo has different icons for some of their properties, such as Yahoo! answers), then include the following in the header:
     

    <link rel="shortcut icon" href="http://www.mysite.com/myicon.ico" type="image/x-icon" />

Uses of Favicons

Now your favicon can appear all across the web:

 
 

Controlling cursors with CSS and creating .cur files April 21, 2007

Filed under: CSS (including hacks), Cursors & Icons, Web Development — Estelle Weyl @ 11:22 am



Creatings Cursors, a.k.a. .cur files

You can convert images such as .jpgs or .gifs into cursors. A static cursor is saved as a .cur file. An animated cursor is saved as a .ani file.

To create a .cur or .ani file, you need specialized imagery software that is freely available. Available software includes the free Just Cursors that is a bitmap style editor and Icon Forge which costs money, but has much greater capabilities.

Here are the steps:

  • Download and install the imagery software of your choice, listed above.
  • Convert your image to a .cur file if you want a static cursor. For animated cursors, convert your animated .gif file into a .ani file.
  • Upload your image to your server.
  • Write a CSS class to target the cursor (see below for instructions)

Including cursors with CSS

To include image cursors, you need to have the .cur file loaded onto a server on the Internet so that you can point to it:

<style type="text/css">
li { cursor:url(http://www.yourdomain.com/images/yourimage.cur); }
</style>

If you want to simply control the browser default cursor with CSS you don’t use the image path, but rather, the cursor name:

li { cursor: text; }
a {cursor: pointer;}

Controlling cursors with JavaScript

You can dynamically change your cursor using javascript:

object.style.cursor="text"

List of Browser Cursors

Hover over any of the definitions below to see how the cursor renders in your browser:

Value   Appearance and default browser defined usage
url(image.cur) heart cursor Image cursor you defined (if browser supports it)
default default cursor The default cursor: default value for disabled form elements and media="print" styles.
auto auto cursor The browser’s default cursor: input[type="hidden"]
crosshair crosshair cursor Like a big plus sign
pointer pointer cursor hand pointer: input[type="image"]
move move cursor cross with four arrows: Image Resizing
e-resize East Resize cursor left-right arrows: Image Resizing
ne-resize northeast resize cursor arrows pointing northeast & southwest: Image Resizing
nw-resize northwest resize cursor arrows pointing northwest: Image Resizing
n-resize north resize cursor arrows pointing up & down (points northeast in IE): Image Resizing
se-resize southeast resize cursor arrows pointing northwest & southeast (points northeast in IE): Image Resizing
sw-resize southwest resize cursor arrows pointing northeast & southwest:Image Resizing
s-resize south resize cursor arrows pointing up & down (points northeast in IE): Image Resizing
w-resize west resize cursor left-right arrows: Image Resizing
text text cursor Line up and down, indicating text: input, textarea, a:visited, a:hover
wait wait cursor Watch or hourglass
help help cursor Question mark or balloon: not a default browser value for XHTML, but often used in conjunction with elements having a title attribute.
progress difference in browsers, but shows waiting: not a default browser value for XHTML, but often used in conjunction with elements having a title attribute.

Note:

  • I recommend against using image cursors, especially animated .gif cursors, since they are annoying.
  • You can even convert a Flash movie into a cursor: first export the movie as an animated gif, then export your .gif to an .ani file.
  • If you are declaring an image cursor, remember to always define a generic cursor at the end of the list in case none of the url-defined cursors can be used. A list of cursors should be specified, followed by a standard cursor designation. Then, if the user’s browser cannot handle the image cursor, it will use the the other specified cursor. If that doesn’t work, it will use the default cursor defined by the browser.
    {cursor: url("firstcursor.cur"), url("secondcursor.cur"), pointer;}
  • Safari, IE and Firefox support cursors of type .CUR and .ANI. URL-specified cursors are not yet supported by Netscape and the alternate cursor does not load, so you’ll get the default.
  • .cur is for a regular cursor, .ani is for an animated cursor.
  • To see the cursors on your desktop on windows navigate to C:\WINDOWS\Cursors