Template talk:Xbrowsercss: Difference between revisions
(New page: Used for CSS3 properties that are still implemented using browser-specific code in Firefox and WebKit. For instance, with the box-shadow, you could use this template as follows: <pre>{{xb...) |
No edit summary |
||
| Line 1: | Line 1: | ||
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: | |||
<pre>{{xbrowsercss|border-radius: 10px}}</pre> | <pre>{{xbrowsercss|border-radius: 10px}}</pre> | ||
Note that a semi-colon is not necessary after the <code>10px</code>, though providing one will do no harm. Using that code would produce: | |||
{{xbrowsercss|border-radius: 10px}} | |||
And if you wanted to have a shadow on your element, you could use the following code: | |||
<pre>{{xbrowsercss|box-shadow: 2em 2em 2em #000000}}</pre> | |||
Which would provide you with: | |||
{{xbrowsercss| | {{xbrowsercss|box-shadow: 2em 2em 2em #000000}} | ||
The <code>border-radius</code> or <code>box-shadow</code> part of the output will eventually work with all standards-compliant browsers at some point in the future. The <code>-moz-</code> part works with modern Mozilla browsers (e.g. Firefox and Camino), while the <code>-webkit-</code> part works with modern WebKit-based browsers (e.g. Chrome and Safari). | |||
Revision as of 18:51, 10 March 2010
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).
