Skip to content
A tool to help developers include the right vendor prefixes in their sites
JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
public
views
README.md
app.js
package.json
prefix.js

README.md

CSS Prefix

Just a precursor to this readme: this is just an idea. There are already other tools available, my plan is to add to those tools to help developers.

If this is a daft idea or doesn't have legs, say so. If there's better ways of doing something: say so.

Status

Fork the project, and run:

npm install
node prefix.js [url]

This should output the CSS with retrofitted vendor-prefixes where they were missing. This was about 3 hours work, so if it's shoddy - I do apologise!

The Plan

Plan to build a service for developer to submit a site to that will:

  1. Plug in the missing CSS vendor prefixes
  2. Give a simple yes or no as to whether it's got all the appropriate fallback CSS properties
  3. Provide a simple API for external tools to use

Intended use

First as a red light/green light app with the ability to download updated CSS. For example:

http://cssprefix.com/check?http://remysharp.com

This would return a simple page - with an indicator of whether they're not using an fallback CSS properties.

Also available for plugins to use - with the intention that a developer can use a simple plugin (for firebug, chrome extension, etc):

http://cssprefix.com/check.json?http://remysharp.com

Returns:

{ pass: true }

Or if fails:

{ pass: false, detail: [ /* here be properties that fail */ ]}

Extension could then show a bleemin' great RED FAIL icon, or happy face green unicorn riding a tick mark (or something).

Tasks

  • Process the parsing of markup without blocking further requests (probably using cluster in Node)
  • Parse HTML, CSS, @imports, etc to find all CSS embedded in document (note: I've done this before)
  • Parse CSS to process properties used (either's Zakas' CSS lint parser or Lea Verou's -prefix-free might have this already (no go on Lea's code - spoke to her, and it doesn't include a parser))
  • Have a converter library to go from CSS property to all fallbacks required. Question maybe this could also use a minimum browser support flag - such as supporting IE8 would require filters for opacity...maybe not worth it?
  • Site design - something clear, simple and to the point.
  • Not sure about this - but what about a wall of shame???!

Tool integration

Ideas how to get this baked in to developer's work flow:

  1. TextMate commands
  2. Other editor commands (I'm not a TextMate user - I know, weird, right!?)
  3. Browser extensions (as mentioned above)
  4. Others?

Technology:

Server side is in Node, using Express to get up and running quickly. It also means that I can pull in the CSS parsers without having to do (too much) conversion.

Collaboration

I'm looking for help in the following areas:

  • UX for web site
  • Design for web site
  • CSS, HTML & JavaScript for web site
  • Testing (once the server is complete)
  • Third party tools (extensions, proof of ideas)
  • Support on server-side JS (though I'll get as far as possibly in as short amount of time as possible first though)
Something went wrong with that request. Please try again.