Make CSS 3 Work in More Web Browsers

If you want to use HTML5 and CSS 3 in the design of your website, you should know that both HTML5 and CSS 3 are still under development. The CSS specification has not yet been approved by the W3C, but many browser developers have already implemented parts of the working drafts of CSS 3.

When browser companies implement parts of a working draft they call it experimental CSS and they usually include the browser name in the style rule.

For Safari and Chrome, you need to add the –webkit prefix to each style rule. For Firefox, add –moz. For the Opera web browser, add –o. If you want to follow the W3C recommendations (even though they aren’t yet approved), don’t add anything to the beginning. Here’s an example of a transition and a transformation for each of these four options:

The code for the Safari web browser looks like this:

-webkit-transition-timing-function: linear;
-webkit-transform: scale(1.5, 2);

For Firefox, here’s what you would use to create the same transformation:

-moz-transition-timing-function: linear;
-moz-transform: scale(1.5, 2);

In the Opera web browser, here’s what you would use:

-o-transition-timing-function: linear;
-o-transform: scale(1.5, 2);

The current W3C recommendation is simply this:

transition-timing-function: linear;
transform: scale(1.5, 2);

Not all browsers implement experimental rules in exactly the same way. For instance, here are two rules for a linear gradient:

-webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999));
background-image: linear-gradient(top, #444444, #999999);

Web Design & Development Glossary

AJAX

asynchronous JavaScript and XML. A technique used in web page development.

Web Design & Development Glossary

API

application programming interface. A set of rules programs use to communicate with each other.

Web Design & Development Glossary

color stop

A special element that indicates a color to be added to a gradient.

Web Design & Development Glossary

FTP

File Transfer Protocol. A network protocol useful for transferring files in a client-server relationship.

Web Design & Development Glossary

HTML

HyperText Markup Language. The predominant language for building web pages.

Web Design & Development Glossary

HTTP

HyperText Transfer Protocol. The primary networking language for the Internet.

Web Design & Development Glossary

PHP

PHP Hypertext Processor. A scripting language that works well within HTML.

Web Design & Development Glossary

socket

A technology that allows remote computers to maintain a persistent connection in order to communicate with each other.

Web Design & Development Glossary

sprite

An graphic object on a web page that will be manipulated in real time.

Web Design & Development Glossary

SQL

Structured Query Language. A programming language useful in managing relational databases.

Web Design & Development Glossary

stateless protocol

An Internet procedure that completely breaks the connection between the client and the server after a transaction, meaning that the next transaction will require an entirely new connection.

Web Design & Development Glossary

Telnet

A network protocol useful in interactive, text-oriented communications.

Web Design & Development Glossary

W3C

World Wide Web Consortium. The organization that sets international standards for the World Wide Web.