Hey, I'm the founder of Metadash.
Previously I was at Better.com and Glean AI.
My interests include design, tech, and startups.
I call New York City home.
CSS3 vendor prefix generator.
Home Page: http://imsky.github.com/cssFx/
Hey, I'm the founder of Metadash.
Previously I was at Better.com and Glean AI.
My interests include design, tech, and startups.
I call New York City home.
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
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?
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
Hello Ivan,
I use yepnope for loading some css files. How can I use your script for css files without classname cssfx?
Thank you!
Sergej
Borders and shadows don't work on IE8-
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...
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
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)
I don't find list of all css3 polyfils realized in cssFx.
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));
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.
PLEASE DISREGARD, and go ahead and close. I figured out that the error was on my end.
Thanks,
Bruce
Ivan,
I'm getting an error when testing my site in IE 8. The debugger shows it as a "syntax error" just before the closing script tag. </script>
If you load the following page in IE 8, you should be able to see it:
http://whub34.webhostinghub.com/~videoh6/brucetesting.com/moving-tips/video-tips/
Thanks,
Bruce
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
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!
content: "\f0fe";
*zoom:expression(this.runtimeStyle['zoom']='1',this.innerHTML='');
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
@import-ed files are loaded relative to the stylesheet that declares the import rule. cssFX, however, tries to load the CSS relative to the HTML document.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.