Cross-Browser CSS in Seconds!
If you’re creating a web application or a web page, it is inevitable that you’ll need to work with CSS. Furthermore, your CSS will need to be compatible with all the popular and unpopular web browsers, regardless of their versions. This is where prefixes come into the picture. Prefixr is a tool that can be used to prefixize your style sheet with various prefixes of different browsers, to make it compatible for all browsers.
You can run your style sheet through the Prefixr tool (and prefixize your CSS with vendor prefixes) by a simple copy paste job, or from within different code editors like Espresso, Sublime Text 2, TextMate, Coda, Alfred, Command Line / Terminal, Ant (Building Tool), Phing (Build Script) and OSX. With Prefixr, you’ll no longer need to memorize different prefixes. All you’ll need to do is learn the right usage of Prefixr and you’ll be done with the prefixes problem once and for all.
Let’s now learn about the usage of Prefixr in various code editors as follows:
Command Line / Terminal
Prefixr-CL (Command Line) is a node package which provides an easy means of running queries through the Prefixr API on command line as well as in node. Installable through NPM (Node Package Manager) using the $ npm install –g prefixr command, the command line usage of Prefixr is as follows:
Usage - prefixr –input < files > [output options] [other options]
For instance, --input app.css base.css --output style.css
Or, -i app base –o style # using the shortcut options
As the package sends the queries directly to Prefixr tool, the prefixing doesn’t take more than one second (via a HTTP request). You can quickly prefix the file contents of one or more files and the output can be sent to a completely different file. You can even prefix the file contents and echo the result to the terminal.
Using the node API, you can use two minimalistic functions for running a query through Prefixr API.
An OSX system service for Prefixr usage is also available. It works pretty well and has an easy installation process too. All you need to do is download the Prefixr Service file, unzip it and then drop it into the ~/Library/Services. Now select any text consisting of CSS3 properties and then access the Prefixr service from within the ‘Services’ option after right clicking on the selection. Run and you’ll get all the vendor prefixes added to your selection.
Sublime Text 2 (Sublime Text 3 also available, although in beta stages)
You can make use of a Sublime Text 2 plugin and easily run your CSS files through Prefixr API. You run complete file, multiple selections or just a single selection through Prefixr, depending on your needs. All the whitespaces will stay preserved when you run Prefixr inside just a single block of your CSS.
Simply download the Package Control and install the package using the pertinent command from inside the command palette. The use of Package Control will ensure constant updation of the Sublime Prefixr, as and when it occurs.
Usage – Open the CSS file and press Ctrl + Alt + X on Linux and Windows systems, and cmd + ctrl + x on the OSX systems, after placing your cursor inside the concerned CSS block. Running it block by block, inside the CSS delivers the best results.
You can easily access Prefixr from inside TextMate 2 as well, using a command addition technique. All you need to do is go to ‘Bundles -> Edit Bundles’ and select the option ‘CSS Bundle’. Thereafter, click on ‘New’ and then choose ‘Command’. Now simply paste the following command:
curl -sSd "css=$TM_SELECTED_TEXT" "http://prefixr.com/api/index.php"
Once done, you can easily run your selected text inside CSS through Prefixr. The source CSS file should be selected for the scope, and you have the option of selecting more than one file by separating then with commas. For instance:
source.css, source.scss leading to command becoming available in both SASS as well as CSS.
On the other hand,
curl -sSd "&css=$TM_SELECTED_TEXT" "http://prefixr.com/api/index.php" | pbcopy
will deliver a command that’ll run a CSS selection through Prefixr and place the results on a clipboard for your usage.
You can even use Prefixr in other popular code editors like Phing (Build Script), Alfred (through a simple command), Coda (via a plugin) and Espresso (downloadable installation).