Supported CSS

There may be some things that you don’t have to change for your mobile site’s CSS. Opera supports all of the advanced CSS selectors and pseudo classes that you have grown to love. Opera also supports the following CSS3 that you may have already been using:

• text-shadow
• RGBA
• outline

Assuming you have been using -webkit specific CSS code, you may need to add some more CSS to get it to look right in Opera. Opera uses a mix of the generic properties, as well as specific Opera properties which has the “-o-” in front of the normal property such as “-o-box-sizing”.

Box Shadows

box-shadow: 1px 1px 2px rgba(0,0,0,.4);

Rounded Corners

border-radius: 5px;

Box Sizing

-o-box-sizing: border-box;

Transforms

Transforms can be done by using the special “-o-” property. In this example I am going to be rotating my element.

-o-transform: rotate(7.5deg);

Gradients

This was one of my favorite CSS3 properties. Unfortunately, this is one of the properties that Opera doesn’t support yet. Since Opera Mini is a regular iPhone app, they can put out regular updates. If they do support CSS gradients eventually, the update will be made available to all users.

More resources

CSS3 Please – A quick guide that lets you see how to create different effects right on the site. The CSS on the site is editable, and all the changes are reflected live on the site.

CSS3 Generator – A very quick tool that lets you select what you want to do, and gives you all CSS code for each browser (if available) to achieve it