Wickham's XHTML & CSS tutorial

Sitemap | Home | Search

CSS3 Features

View in Firefox, Safari, Opera and IE but IE6 often needs different solutions. In general IE7 and IE8 display like Firefox apart from the HTML5 and CSS3 features. The IE9 & above updates are mainly related to HTML 5 and CSS3 issues and display to a large extent like other main browsers. Google Chrome is based on the same WebKit engine as Safari.

Some of the examples are provided just to show problems, others show solutions that work in most major browsers. Use the example that suits you.
red icon problems   gold icon warning: works in some situations or some browsers or needs care to display as you wish   green icon OK in Firefox, Safari, Opera, Google Chrome and IE


 

CSS3 generally and useful links

CSS3 is supported to a reasonable extent by latest versions of Firefox, Safari, Google Chrome and Opera and badly by IE8 and previous IE versions but reasonably well by IE9. See caniuse.com and w3schools and and CSS Compatibility and IE9 beta Guide and CSS3 Selectors. This page HTML5 & CSS3 Support will show what features are enabled for the browser you are using (provided that JavaScript/ActiveX is enabled) so if you change browsers you will see different features that work in that browser.

It's often necessary to use a prefix in front of CSS3 styles for each browser, although the official websites showing the standard coding don't mention this. I think it's a temporary situation until browsers are fully compliant. Use -moz- for Mozilla Firefox, -webkit- for Safari and Google Chrome, -o- for Opera and -khtml- for Konqueror. The standard CSS3 code without the browser prefix should be last and this future-proofs the code so when CSS3 is officially released this will override any browser vendor properties.

There is one situation where -ms- prefix is required for IE when used for -ms-filter: used for opacity, but this prefix will probably not be required for any CSS3 features when future IE versions process the standard CSS3 code.

The following link lists the CSS3 features with further links to examples:- CSS3 Preview.

The CSS3 styles don't validate yet because they are new styles, but they should eventually as validators and browsers get up to date.

See also HTML 5 Features.

CSS3 PIE makes Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration features, like border-radius, box-shadow and linear-gradient, using a behavior htc file. It needs ActiveX enabled. There are other ways to make IE display like modern browsers as shown on blancer.com website.


CSS3 border-radius rounded corners

1 gold icon Border-radius will form rounded corners without images or scripts. Opera and IE9 process the border-radius style, but Firefox and Konqueror implement these codes with a prefix. Safari (version 5 onward) and Chrome (version 5 onward) all support the individual border-radius properties but the -webkit- prefix is required for older versions. IE8 and earlier versions do not process border-radius. Other methods using images or javascript have disadvantages; the image method means a lot of extra markup and the downloading of images while javascript uses a lot of script which may be disabled for the viewer.

Test CSS3 rounded corners (IE6/7/8 do not process this).

The CSS3 style is:-

The HTML markup is:-

A more complicated example is shown below with a dark gray outer div and a white middle div and a gray inner div, all with CSS3 rounded corners. The corners are not as smooth as you would get with images.

Test CSS3 rounded corners (IE6/7/8 do not process this).

The CSS is:-

The HTML markup is:-

There is more information on Border Radius on the css3.info website.


CSS3 box-shadow and text-shadow

2 gold icon The CSS3 box-shadow and text-shadow work in Firefox, Safari, Google Chrome, Opera and Konqueror as at 28/04/10. Box-shadow works in IE9 beta but not in IE6 to IE8; text-shadow doesn't work in IE versions 6 to 9.

Text (no text shadow in IE6-9).

Box-shadow needs the prefix -moz- for Mozilla Firefox and -webkit- for Safari and Google Chrome and -khtml- in Konqueror and works without the prefix in Opera but does not work in IE6 to IE8. The text-shadow works in those browsers without a prefix, except in IE.

The property takes 3 lengths and a color as it's attributes, the lengths are:
1. the horizontal offset of the shadow, positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box;
2. the vertical offset, a negative one means the box-shadow will be on top of the box, a positive one means the shadow will be below the box;
3. the blur radius, if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be.

The styles are:-

Box-shadow can be combined with border-radius. There is more information on Box Shadow on the css3.info website.

There is more information on Text Shadow on the css3.info website.


CSS3 border-image

3 gold icon The CSS3 border-image works in Firefox, Safari, Google Chrome, Opera (and possibly Konqueror but I can't check this) but not in IE6 - IE10 as at 05/11/12. Some browsers still need a prefix as described at the top of this page.

Text in div with border-image (not in IE6 -IE10).

See the source code of this page for the CSS in the head section style tag and the HTML markup in the body section.

The image used for the border is this Border image 81*81px where the size of each diamond is 27*27px which is used in the code to identify the parts to be used in the corners and sides (nine parts, four slices across the whole image creating four corners leaving four middle sides and a remaining middle part). The 27 is px and represents all four equal slices across the top, right, bottom and left sides. If coded as 27 20 25 23 it would be a 27px slice of the image across (down from) the top, 20px down and to the left of the right side, 25px across (up from) the bottom and 23px down and to the right of the left side.

There is more information on w3.org border-image and css3.info and lrbabe.com .


CSS3 Opacity

4 gold icon The CSS3 opacity property works in Firefox, Safari, Google Chrome, Opera (and possibly Konqueror but I can't check this) but not in IE6-8. However, for IE6-8 you can use the IE-only property of filter, as described on the page for Opacity.

There is more information on Opacity on the css3.info website.


@Font-face special fonts

5 green icon The CSS3 @font-face rule has worked in IE for many years but is now supported in Firefox, Safari, Google Chrome and Opera.

There is more information on @font-face on the w3.org website and a tutorial on the miltonbayer.com website and hundreds of @font-face kits on the fontsquirrel.com website.

You need to download the font-face files in several formats to suit different browsers; .ttf .eot .svg and .woff are the most necessary. You then need to download a special stylesheet for font-face which I called matchbook.css (which probably doesn't need editing, except perhaps for font-weight or font-style). I put all these in a separate folder called font-face. Add the stylesheet link into the page head section after the main stylesheet link. Then you need to create id or class styles to use the font-face; look at the head section style tag for this page. Then code the id or class into the html markup.

You have to be careful that the font-size, line-height and letter-spacing you state are suitable for the chosen font-face and check how it looks with bold text. font: 24px/27px is size and line-height.

See the source code of this page for the CSS in the head section style tag and the HTML markup in the body section.


CSS3 Multi-columns

6 gold icon CSS3 Multi-columns enable the page to have newspaper-style columns. There are two methods: column-width or column-count. Firefox requires the -moz- prefix; Safari and Google Chrome require the -webkit- prefix. The latest version of Opera supports the feature without a prefix. IE6 - IE9 do not support multi-columns.

There is more information on css3.info Multi-column layout.

View Source and look at the head section style tag for the CSS. Be careful to calculate the available width and the maximum width for the columns, allowing for column gap; div borders, padding or margin.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean egestas blandit ipsum. Morbi nulla metus, luctus et, ullamcorper sit amet, commodo quis, nisl. Ut blandit lacus nec nibh. Phasellus eleifend enim et risus. Nam condimentum.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean egestas blandit ipsum. Morbi nulla metus, luctus et, ullamcorper sit amet, commodo quis, nisl. Ut blandit lacus nec nibh. Phasellus eleifend enim et risus. Nam condimentum. Praesent euismod auctor dui. Nunc ut leo vel magna adipiscing tempor. Donec pretium, ligula et hendrerit faucibus, sem velit accumsan tortor, sodales tempor est ligula non velit. Nulla sagittis, odio quis porta nonummy, mauris arcu gravida odio, quis aliquam lacus elit non libero. Proin aliquam augue accumsan augue. Quisque ut eros at erat ultrices sodales.

See the source code of this page for the CSS in the head section style tag and the HTML markup in the body section.


CSS3 Multiple backgrounds

7 gold icon CSS3 Multiple backgrounds are not supported by IE6 to IE8. In CSS2 it was possible to have a background color and a background image in the same element, but not two background colors or two background images. It was necessary in CSS2 to have a background in several different elements and superimpose the elements. CSS3 now allows several background images over one background color.

This div has multiple background images (not supported by IE6 to IE8) over one background color.

The CSS3 code is:-

Note that the order that the backgrounds are coded is that the first value in a code represents the top layer (closest to the user), with subsequent layers rendered behind successively so my car image is coded last in each sequence (it doesn't matter for the other two as they are separately positioned).

The HTML markup code is:-

<div id="multibackground"><p>This div has multiple background images (not supported by IE6 to IE8) over one background color.</p></div>

The multiple backgrounds can be applied to the <body> tag.

Note that CSS3 also supports the background-position, background-size and background-repeat properties separated by a , comma in the same way (in the example above the single background-repeat code apples to all background images). A background-color can be used as the back layer with several background-images on top, but it seems that several background-colors cannot be used.

For more information, see css3.info and w3schools.