Template talk:Xbrowsercss

Due to the fact that some CSS properties are either not yet standardized or are still being developed, certain browsers use non-standard naming of those properties in order to provide early support for them. Unfortunately, those non-standard names rarely work in browsers from other companies. This template lets you get around the problem by simplifying the process of supporting the major browsers, while also providing a little future-proofing with minimal hassle.

Usage

To use it, simply provide the web standard name of the property you want. For instance, if you wanted a rounded corner on an element, you could use this template as follows:

{{xbrowsercss|border-radius: 10px}}

Note that a semi-colon is not necessary after the 10px, though providing one will do no harm. Using that code would produce:

border-radius: 10px;-webkit-border-radius: 10px;-moz-border-radius: 10px;-o-border-radius: 10px;

And if you wanted to have a shadow on your element, you could use the following code:

{{xbrowsercss|box-shadow: 2em 2em 2em #000000}}

Which would provide you with:

box-shadow: 2em 2em 2em #000000;-webkit-box-shadow: 2em 2em 2em #000000;-moz-box-shadow: 2em 2em 2em #000000;-o-box-shadow: 2em 2em 2em #000000;

The border-radius or box-shadow part of the output will eventually work with all standards-compliant browsers at some point in the future. The -moz- part works with modern Mozilla browsers (e.g. Firefox and Camino), while the -webkit- part works with modern WebKit-based browsers (e.g. Chrome and Safari).