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 |
||
| (3 intermediate revisions by the same user not shown) | |||
| 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|box-shadow: 2em 2em 2em #000000}} | |||
For an example of how it would look in practical use: | |||
<pre><div style="{{Template:Xbrowsercss|box-shadow: 0px 0px 4px black}}">A block with shadow in a variety of browsers</div></pre> | |||
Would provide you with: | |||
<div style="{{Template:Xbrowsercss|box-shadow: 0px 0px 4px black}}">A block with shadow in a variety of browsers</div> | |||
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) and the <code>-o-</code> part works with Opera. Most CSS properties do not require use of this template. It's meant for fairly new CSS features which haven't been fully implemented in all browsers yet. | |||
As one additional note, this template is merely a shorthand way of creating css code, and is not a fix-all that will work in cases where the syntax is different between Mozilla, WebKit, and Opera. For example, in the case of using <code>border-radius</code> on a specific corner, Mozilla might use <code>-moz-border-radius-topleft</code> while WebKit might use <code>-webkit-border-top-left-radius</code>. Since the two are not the same, this template cannot be used in situations such as those. | |||
==Discussion== | |||
Latest revision as of 22:40, 5 September 2012
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;
For an example of how it would look in practical use:
<div style="{{Template:Xbrowsercss|box-shadow: 0px 0px 4px black}}">A block with shadow in a variety of browsers</div>
Would provide you with:
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) and the -o- part works with Opera. Most CSS properties do not require use of this template. It's meant for fairly new CSS features which haven't been fully implemented in all browsers yet.
As one additional note, this template is merely a shorthand way of creating css code, and is not a fix-all that will work in cases where the syntax is different between Mozilla, WebKit, and Opera. For example, in the case of using border-radius on a specific corner, Mozilla might use -moz-border-radius-topleft while WebKit might use -webkit-border-top-left-radius. Since the two are not the same, this template cannot be used in situations such as those.
