CSS3 vendor prefix generator.

Overview

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

Comments
  • support transform

    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

    opened by spostad7 6
  • IE9 background SVG replacement

    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!

    opened by shousper 6
  • fixes rgba ms_gradient transparency

    fixes rgba ms_gradient transparency

    Background transparency was not working on IE6,7,8 found an example on CSS tricks down the bottom and it fixed the issue.

    http://css-tricks.com/rgba-browser-support/

    Very useful project! thank you.

    opened by leighmackay 3
  • Home website doesn't even work in IE ?

    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...

    opened by dtaralla 3
  • Most of cssFx not working in IE, Webkit

    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?

    opened by rockerest 3
  • Opacity support for IE8

    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)

    opened by uhnomoli 2
  • Add license scan report and status

    Add license scan report and status

    Your FOSSA integration was successful! Attached in this PR is a badge and license report to track scan status in your README.

    Below are docs for integrating FOSSA license checks into your CI:

    opened by fossabot 1
  • inline-block and -moz-inline-stack

    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

    opened by edriang 1
  • Error in IE8

    Error in IE8

    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.

    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

    opened by BruceA 1
  • Add zoom expression for content in IE7

    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

    opened by howdu 1
  • Readme needs full property support list

    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

    opened by jamiebuilds 1
  • @import regexp error

    @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

    opened by edriang 2
A Discord bot Template made with Discord.JS version 14 includes Prefix, Slash commands and MongoDB handler.

Project Language: Fork/Download for: Project Requirements: Database Available: DiscordJS V14 Bot Template - Introduction: A Discord bot project made w

T.F.A 105 Jan 3, 2023
A good looking help command made with discord.js with select menus. Works with prefix and slash commands too!

fancy-help-command A good looking help command made with discord.js with select menus. Works with prefix and slash commands too! Dependencies: Select

LunarCodes 11 Dec 12, 2022
OP3: The Open Podcast Prefix Project

op3 OP3: The Open Podcast Prefix Project The Open Podcast Prefix Project (OP3) is a free and open-source podcast prefix analytics service committed to

null 29 Dec 15, 2022
Obsidian text generator Plugin Text generator using GPT-3 (OpenAI)

is a handy plugin for Obsidian that helps you generate text content using the powerful language model GP

null 356 Dec 29, 2022
Types generator will help user to create TS types from JSON. Just paste your single object JSON the Types generator will auto-generate the interfaces for you. You can give a name for the root object

Types generator Types generator is a utility tool that will help User to create TS Interfaces from JSON. All you have to do is paste your single objec

Vineeth.TR 16 Dec 6, 2022
This Project is made with HTML5, CSS3, ReactJS, Axios, MetaMask, thirdweb, Rinkeby Test Network, Web 3.0 Technologies, and OpenSea API.

Abstract Collections This Project is made with HTML5, CSS3, ReactJS, Axios, MetaMask, thirdweb, Rinkeby Test Network, Web 3.0 Technologies, and OpenSe

Shobhit Gupta 34 Jan 4, 2023
Simple To-do list build using HTML5, CSS3, JavaScript and Webpack. You can add new tasks, remove and edit them.

Simple To-do list build using HTML5, CSS3, JavaScript and Webpack. You can add new tasks, remove and edit them.

Esteban Munoz 6 Mar 5, 2022
A webpack based todo list with HTML5, CSS3, JS and linters

Project Name This is a project to track your daily tasks as a todo list. This project doesn't have a backend so data gets saved in you local storage.

Ritobroto Mukherjee 19 Aug 22, 2022
A planetary body simulator with a HTML5/CSS3/JS frontend and simulated using Rust WebAssembly.

Solar Sim ?? A planetary body simulator with a HTML5/CSS3/JS frontend and simulated using Rust WebAssembly. Try the latest version here! Built with ??

Ben Plate 3 Jun 15, 2022
A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on

A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.

Ian Lunn 27.9k Jan 4, 2023
CSS3 list scroll effects

stroll.js – because it scrolls, and trolls. A collection of CSS list scroll effects. Works in browsers with support for CSS 3D transforms including a

Hakim El Hattab 4.3k Jan 3, 2023
CSS3 Animations with special effects

?? magic CSS3 Animations with special effects. (→ 3.1 kB gzip) Demo Checkout the demo for the animations here Table of Contents Installation Getting S

Christian 7.9k Dec 30, 2022
Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.

Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser. Read this file in Portuguese-BR here Our Website is outd

Modernizr 25.4k Jan 3, 2023
Responsive, CSS3, touch-enabled jQuery Coverflow plugin.

jQuery.Flipster Flipster is a CSS3 3D transform-based jQuery plugin built to replicate the familiar 'cover flow' effect, but also supports a variety o

Adrien Delessert 704 Dec 28, 2022
Convert Tailwind CSS class names into their CSS3-equivalent styles — right from Alfred.

alfred-tailwind2css Tailwind2CSS offers you the ability to convert TailwindCSS classes into their CSS3-equivalent styles -- right from within Alfred.

Stephan Casas 6 Dec 7, 2022
Generator of interlinear glossing for many mark-up languages. Conlanging.

Gloss My Gloss A generator for interlinear glosses This is an input/output generator for aligning linguistic interlinear gloss, for the purposes of co

Neonnaut 6 Nov 16, 2022
🤍 Custom gradient image generator

Gradient Gradient is a custom gradiant making web app. Use it here Features Custom Gradient Making Using Sliders And Color Picker Use Ready Made Gradi

Dopevog 15 Sep 10, 2021