Giter VIP home page Giter VIP logo

cssprefix's Introduction

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)

cssprefix's People

Contributors

lennym avatar remy avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.