Coder Social home page Coder Social logo

cssfx's Introduction

cssFx

FOSSA Status

cssFx adds vendor-specific prefixes to your stylesheets.

How it works

When the document has finished loading, internal (<style>) and external (<link>) stylesheets are processed, fetching any @import stylesheets as well. It's recommended to bundle stylesheets into one file to minimize request overhead. Once processing is done, a new <style> tag is appended to the <head> with processed properties. Properties for all vendors (Mozilla, Webkit, Opera, Microsoft) are included by default.

Installing

Download cssFx or install it with Bower: bower install cssfx.

Usage

Include cssFx in your <head> tag: <script src="cssfx.js"></script>

Make sure any external stylesheets you want processed have the cssfx class.

Browsers Supported

  • Firefox 3+
  • Chrome 1+
  • Internet Explorer 6+
  • Safari 3+
  • Opera 9+

Important Considerations

  • IE and other browsers remove either unknown properties or properties with unknown values. To guarantee that all properties are parsed, link your stylesheet externally.
  • To prevent FOUC (flash of unstyled content), place cssfx.js immediately under the stylesheet tags.
  • cssFx only adds prefixes. It does not polyfill functionality unavailable in the browser.

License

cssFx is provided under the MIT license.

Credits

cssFx is a project by Ivan Malopinsky.

License

FOSSA Status

cssfx's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

cssfx's Issues

Readme needs full property support list

There is currently no place to find out what properties that cssFx will cover, this ruins it for me. If there's a list somewhere please point me to it and I'll gladly add the list myself.

Please and thank you

Add zoom expression for content in IE7

content: "\f0fe";
*zoom:expression(this.runtimeStyle['zoom']='1',this.innerHTML='&#xf0fe;');

If you check Font Awesome, this is actually where I found out how to do this be cool if you could add it into the code

Opacity support for IE8

IE8 requires -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=X)'; for opacity.

Also note this should be set before filter: alpha(opacity=X) to enable support for IE8-as-IE7. (from quirksmode)

Using with boilerplate main.css fails

When using cssfx with boilerplate, all code inserted on main.css is not processed by chrome.
It will only work if you create a separate css file.

@import regexp error

This is the RegExp used when finding @import statements:

/@import\s+(?:url(['"]?(.)['"]?))\s;?/gim;

The problem is that the resulting url sometimes include "double quotes", so then the browser outputs a 404 error.

It works anyway, but the error is uggly.

You can change, for example, the "(.)" part for something like ([^\")]

Thanks

chrome local error

error: Uncaught TypeError: Cannot read property '1' of null

line (68): css_files.push(fx.fetchCSS([import_regex.exec(css.match(import_regex)[y])[1]], true));

Most of cssFx not working in IE, Webkit

The following page is presented as a demo:

http://thomasrandolph.info/test/polyfill.html

I am using (on Windows 7):

Firefox 8.0
Safari 5.1
Chrome 14
Opera 11.11
Internet Explorer 9.0

In the example, I have used a background gradient with multiple stops, a transform with rotation, and a box shadow.

In Internet Explorer, none of these effects appear.
In Safari and Chrome, only the box shadow appears.
In Firefox and Opera, all effects appear as expected.

In Chrome ONLY, the inserted <style> tag contains the function found on line 41 of the uncompressed script (following prototype.IndexOf=), and nothing else.
In Safari and Internet Explorer, the (expected) inserted script tag is not ever inserted.

Are the IE, Safari, Chrome problems known bugs?

support transform

hi. tanx for your brilliant work
I want to use css3 transform in chrome browser. I used this plugin without adding any prefix to my css:
transform: rotate (180deg);
I expected this is work in chrome by adding needed prefix, but unfortunately it seems that something wrong.
could anyone help me plz?
tanx

inline-block and -moz-inline-stack

Hi, I got problems when the library converted inline-block to -moz-inline-stack.

I found this on stackoverflow that descrives my problem: "Child elements, including inline-block, block, and -moz-inline-stack are laid out atop one another."

Any reason to replace inline-block with -moz-inline-stack ?? I think that the behaviors of both are different

IE9 background SVG replacement

Hi Ivan,

Love your work!

Just wanted to ask if there were any plans or reasons against adding support for an inline SVG for gradient backgrounds in IE9?

The ColorZilla gradient generator creates one for you when IE9 support is ticked..

I wouldn't imagine it'd increase the size of cssFx much?

Thanks!

Home website doesn't even work in IE ?

Hi,
First, thanks for your tool. But I can't even try it in IE, seems like you didn't enter a DOCTYPE for your site http://imsky.github.com/cssFx/ . And even, I tested multiple times and your script just doesn't work :(

I'm using IE 9 and test your site with F12 (dev tools), and changing Internet Explorer navigator and document modes.

Using Chrome, I see that it replaces my border-radius rules for example by -webkit-border-radius. But it also put a -mozborder-radius. Why?

Very odd and sad, because your script is exactly what I need...

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.