How to use a UDT in your Style Sheets to help with repetitive vendor prefixes

So you have some nice rounded corners in your design and your client decides that they aren't round enough. Now you have to tediously edit each border-radius property and all the browser specific prefixed ones as well. Here's how to use a User Defined Tag to fix that.

The Problem

As you know, there are some useful CSS3 properties that require that the css property be written with a vendor specific prefix, but the value is usually the same for each browser. There are tools like border-radius.com that can help in some situations.

This is a good tool, when you are first creating your styles, but what if you need to change the values in the future? Wouldn't it be nice if we could change the value in only one place? With CMS Made Simple we can write a UDT that will do just that.

Here is a list of the prefixes that I know about:

Vendor Extension Prefixes

Prefix	Organisation
-webkit-	Safari (and other WebKit-based browsers)
-moz-	Mozilla Foundation (Gecko-based browsers)
-o-	Opera Software
-ms-	Microsoft
mso-	Microsoft Office
-atsc-	Advanced Television Standards Committee
-wap-	The WAP Forum
-khtml-	Konqueror browser

The Solution

Create a UDT. Lets call it css_prefixs.

 $value=$params['val'];
 $property=$params['property'];
 
 echo <<<PROP
 -moz-$property:$value;
 -webkit-$property:$value;
 -ms-$property:$value;
 -o-$property:$value;
 $property:$value;
 PROP;

This code expects to receive val=” “ and property=” “ parameters and uses them to generate the prefixes you need.
In your CSS you will use it like so:

[[css_prefixs property='border-radius' val='50px']]

Note that in CSS we don't use curly braces for smarty tags.
This will output the following:

 -moz-border-radius:50px;
 -webkit-border-radius:50px;
 -ms-border-radius:50px;
 -o-border-radius:50px;
 border-radius:50px; 

But it can be used for more than just border-radius, the following uses the same UDT to produce the css for using the border-image property:

[[css_prefixs property='border-image' val='url("border-shadow.png") 0 91 0 92 stretch']]

Going Further

In some situations it might be helpful to write a specialized UDT for properties that are formatted differently for different browser vendors. I will leave it up to you to expand on this concept.

---

« Back to Articles

---

Comments

---

Leave a Comment