Git Product home page Git Product logo

prefixfree's Introduction

Break free from CSS prefix hell!

Project homepage

A script that lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed.

API Documentation

Note: To use -prefix-free you don't need to write any JS code, just to include prefixfree.js in your page. The following is meant mostly for plugin authors.

-prefix-free creates 2 global variables: StyleFix and PrefixFree. StyleFix is a framework for building various CSS fixers and -prefix-free depends on it. Currently, StyleFix is bundled with -prefix-free and only available this way, but it might eventually get split to a separate project, with separate documentation.

StyleFix API Documentation

Properties

StyleFix.fixers

An array of the current callbacks.

Functions

StyleFix.register(callback)

Adds callback to the queue of functions that will be called when fixing CSS code. callback will be called with the following parameters:

  • css (String): The CSS code that is being processed,
  • raw (Boolean): Whether the CSS code can contain rules etc or it's just a bunch of declarations (such as the ones found in the style attribute),
  • element (HTMLElement): The node that the CSS code came from (such as a <link> element, a <style> element or any element with a style attribute)

and it should return the fixed CSS code.

StyleFix.link(linkElement)

Processes a <link rel="stylesheet"> element and converts it to a <style> element with fixed code. Relative URLs will be converted.

StyleFix.styleElement(styleElement)

Fixes code inside a <style> element.

StyleFix.styleAttribute(element)

Fixes code inside the style attribute of an element. Will not work in IE and Firefox < 3.6 due to a bug those have with getAttribute('style'): In IE invalid values of valid properties will be dropped, and in Firefox < 3.6 anything invalid will be dropped.

StyleFix.camelCase(str)
StyleFix.deCamelCase(str)

Utility methods that convert a string to camelCase and back.

-prefix-free API Documentation

Properties

PrefixFree.prefix

The detected prefix of the current browser (like '-moz-' or '-webkit-')

PrefixFree.Prefix

The detected prefix of the current browser in camelCase format (like 'Moz' or 'Webkit')

PrefixFree.properties
PrefixFree.functions
PrefixFree.keywords
PrefixFree.selectors
PrefixFree.atrules

Properties/functions/keywords/etc that are only available with a prefix in the current browser.

Functions

PrefixFree.prefixCSS(code [, raw])

Prefixes the properties and values in the code passed with the prefix of the current browser, only when needed. If the second parameter is truthy, it also prefixes selectors and @-rules. This is the most useful method in -prefix-free.

PrefixFree.prefixSelector(selector)
PrefixFree.prefixProperty(property)

Prefixes the passed selector or property. The property is prefixed even when it's supported prefix-less. These are more internal methods and I assume they won't be too useful in general.

prefixfree's People

Contributors

clanceyp avatar coliff avatar daphnedormanoldaccount avatar dmitrybaranovskiy avatar dziudek avatar fumoboy007 avatar gotcha avatar jacobrask avatar javatlacati avatar johtso avatar joshcoady avatar joyously avatar konsumer avatar leaverou avatar mernstackman avatar michalbednarski avatar naifamoodi avatar narthur avatar nverba avatar poswald avatar pygy avatar robbert avatar samcome avatar simonsapin avatar tda avatar thomasweiser avatar vincentbernat avatar w3core avatar zenside avatar zeorin avatar

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

prefixfree's Issues

Doesn't seem to work on mobile devices

I checked on iOS and android and the js doesn't seem to work on mobile devices. Can you please take a look and suggest a workaround?

Great work btw and many thanks for all the hard work.

background-image: url('') triggers an error

When I use the following CSS:

/**
 * Disabled drop-down lists
 *    - background-color alone does not work in Google Chrome:
 *      http://code.google.com/p/chromium/issues/detail?id=100234
 *      Setting background-image: url('') solves the issue 
 */
select[disabled] {
    background-image: url('');
    background-color: #ebebe3;
}

It triggers the following error in my JS console:

GET http://[...]' 404 (Not Found)

Confimed on the following browsers:

  • Google Chrome 16.0.950.0
  • Firefox 9.0.1

problem with gradients in Opera (again)

Hi!
I'm getting error in Opera (but not on all sites)
Console is throwing out:

Error thrown at line 68, column 2 in <anonymous function: link>(link) in ../prefixfree.js:
    link.setAttribute('data-inprogress', '');
called from line 125, column 2 in <anonymous function>() in ../prefixfree.js:
    $('link[rel="stylesheet"]').forEach(StyleFix.link);

alternate stylesheet

Styles with rel=stylesheet alternate should not be processed until the style has been selected. Currently all styles will be applied at once.

To avoid bugs affecting most people with current sites using alternate stylesheets, prefixfree should not process alternate stylesheets at all until some way of determining when a stylesheet is in use has been figured out. I can't find anything in the specs on possible DOM events for this.

Support for earlier version of IE

It mentions support for IE9 and above, but what about earlier version of IE? Is there any partial support? In particular I'm thinking of gradients.

Thanks,
Rene

Minified Version Not Working?

I couldn't get the minified version of the script to work in any browser (Chrome 16, Firefox 8, IE9). I tried the uncompressed version, works just fine. Not sure what the issue was.

Strange behaviour in dev tools

I'll try to explain it with words, but I made a picture more understandable.

=> http://www.yojimbo.fr/_images/prefixfree_issue.png

I set up 2 test-cases :

Step by Step :

  • In both cases, I do a right-click on the section tag (Big grey square) -> inspect
  • then Dev Tools open in Elements panel, where i can see DOM on the left, and Styles applied to selection on the right.
  • In the right subpannel, we can see which file is the origin of the shown CSS, it's where the difference appears. Without PrefixFree, I get the classic behaviour : the CSS file is show, i can click on it and live edit it in Ressources panel. But With PrefixFree, it's the HTML file which is shown, and whene i click on, i still go to Ressource panel, and Chrome doesn't show me the CSS, but the HTML file -> and here, when i click on the CSS file, and try to edit it, it doesn't work :( !

Maybe it's not a PrefixFree problem, that's why I didn't make an issue here at first. Maybe it's a local problem (But my coworkers have the same) ... I don't know, but thanks for the help !

Cannot use prefix-specific overrides when using prefixfree

This is really more of an issue of how to correctly handle vendor-specific rendering problems, but I'm logging this issue so you're aware of this effect.

When using different vendor-spefic selectors, I can easily specify CSS attributes for different rendering engines:

-webkit-transform: rotate(15deg) rotateX(0); /* Force Chrome to render as 3D, enabling antialias */
-moz-transform: rotate(15deg);
-ms-transform: rotate(15deg);
-o-transform: rotate(15deg);
transform: rotate(15deg);

Using prefixfree, however, writing something like this:

-webkit-transform: rotate(15deg) rotateX(0);
transform: rotate(15deg);

...turns the resulting CSS on Chrome into:

-webkit-transform: rotate(15deg) rotateX(0);
-webkit-transform: rotate(15deg);

This negates the vendor-specific attribute spec and reverts it back to a non-antialiased view.

Now, I know that this could be solved by simply applying a Modernizr-like class name for specific browsers (and platforms, like IE), but the alternative would be to assign vendor-specific attributes a higher priority than unprefix ones, eg. if the rule exists prefixed in addition to the unprefixed one in source, do not transform the unprefixed one. This enables the override which would fix this issue.

Again, not sure if this is something that should be handled by prefixfree or not, just putting it out there.

Gradient not working on my Android 2.3.6

Android 2.3.6 default browser not showing gradient while other browser are fine. I have only tested in Android 2.3.6 version.

.discount-label {
left: -7.1em;
top: 1.4em;
background: url(../img/texturee.png), linear-gradient(left, #de2785 1%,#f954b1 50%,#de2785 100%);}

it's working in all but not android. For me now only option to add vendor-prefixes to whole css. I had made it for a big project.

behavior URLs should not be converted

Currently, -prefix-free converts URLs in linked stylesheets since they are relative to the CSS file. However, IE treats behavior URLs as relative to the HTML document, so they shouldn’t be converted.

This bug breaks CSS3PIE.

linear-gradients don't get prefixed

For linear-gradient and the others, where the prefix is in the value, not the attribute, prefixfree's not doing anything.

background: linear-gradient(top,#d6f0fc 0,#ffffff 50%,#3867a1);

should be adding:

background: -moz-linear-gradient(top,#d6f0fc 0,#ffffff 50%,#3867a1);
background: -ms-linear-gradient(top,#d6f0fc 0,#ffffff 50%,#3867a1);
background: -o-linear-gradient(top,#d6f0fc 0,#ffffff 50%,#3867a1);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#d6f0fc), color-stop(0.5, #ffffff), to(#3867a1));
background: -webkit-linear-gradient(top,#d6f0fc 0,#ffffff 50%,#3867a1);

but it's not.

Hopefully there's a fix; gradients are the biggest part of my css; if I can trim them out, the size savings from that alone would make prefixfree worthwhile, even ignoring all the other prefix headaches that it saves me! :D

Tag versions

Tag significant versions so that they can be referenced directly (e.g. https://raw.github.com/LeaVerou/prefixfree/$VERSION/prefixfree.js).

Version 1.0.2 breaks when using AdBlock 2.5.19 in webkit

When using the Safari/Chrome Extension AdBlock there is an error on line 67 in prefixfree.js

  • XMLHttpRequest cannot load data:text/css,. Cross origin requests are only supported for HTTP
  • 67NETWORK_ERR: XMLHttpRequest Exception 101: A network error occured in synchronous requests.

The Issue is, that AdBlock seems to create a link element between the head and the body
link type="text/css" rel="stylesheet" href="data:text/css,"

I guess prefixfree tries to do something with it and then the error occurs.

Of course u could just deactivate AdBlock but IMO that's a pretty common Extension to have so maybe we should try to find a workaround.

Version 1.0.1 worked fine btw

PrefixFree breaks on pages that reference non-existent stylesheets

I discovered a very odd issue with PrefixFree while developing a site recently. On only certain pages of my site, when the script was present, an additional set of styles would get loaded that conflicted with the rest of the styles on the page and completely messed up the layout.

By diffing pages that worked fine with PrefixFree against those that didn't, I discovered that all the pages that weren't working were referencing stylesheets that no longer existed. In other words, on a broken page, I would have something like <link rel="stylesheet" href="css/template.css" />, but nothing called template.css in the css directory. Upon removing these references, the pages immediately began rendering correctly again.

The strangest part is that I couldn't determine where those additional styles were coming from. I copied them out of Firebug and searched for them across my entire project, and found nothing that was defining them anywhere. The only thing I could think of was that PrefixFree was acting on cached versions of the stylesheets that no longer existed - but I looked at old versions from before they had been removed, and nothing inside them matched the additional styles I was seeing through Firebug.

I'm not sure if there's anything you can or should do to PrefixFree to address this, since the solution for me was to remove references to non-existent stylesheets - which is good practice anyway - but I wanted to bring it up since it did severely alter the layout/presentation of my pages.

Support for LESS

Hi,
I was wondering, is there any way to make Prefixfree compatible with Less.js ? Make it add prefixes to .less files compiled on-the-fly ?

Add support for CSS3 PIE -pie- prefixes?

This is probably a long shot, but would you consider having PrefixFree generate -pie- prefixed properties for use with CSS3 PIE?

In other words, it would be awesome if I could write this in my stylesheet:

body {background: linear-gradient(#fff, #000);}

And have PrefixFree generate this in IE:

body {-pie-background: linear-gradient(#fff, #000);}

Then I could drop in PIE.htc and my non-prefixed CSS3 gradients would work in all versions of IE down to 6! I know it's probably out of the scope of PrefixFree, but maybe it could be offered as a plugin?

Stylesheet media type is not included

I used this great library in a new project. However, I ran into a problem by having a media="print" stylesheet. When using prefixfree, the print stylesheet gets included without media type - which will show the print view of the page (which has completely different layout in my case).

There is a workaround by including the "@media print {}" in the print stylesheet. However, I think it is safer to carry the media type into the newly created stylesheet node. Maybe you could include this patch:

73 +: media = link.getAttribute('media'),
97+: if (media) { style.setAttribute('media', media); }

Regards, Kai

{display: box} not being prefixed

theseus {
display: box;
}

is a little strange, should be prefixed thusly for webkit:

theseus {
display: -webkit-box;
}

and for moz:

theseus {
display: -moz-box;
}

v1.0.2 breaks @font-face

@font-face
  font-family: 'IconicStroke'
  src: url('iconic_stroke.eot?') format('eot'), url('iconic_stroke.ttf') format('truetype'), url("iconic_stroke.svg#IconicStroke") format('svg')
  font-weight: normal
  font-style: normal

this breaks in 1.0.2 - worked fine in 1.0.1

tested in firefox/chrome/safari on mac

Object.defineProperty shim is non-spec compliant.

I noticed you shim Object.defineProperty, but only partially. This may cause problems w/ 3rd-party code that lazy detects functionality with checks like if (Object.defineProperty) {. Your own code assumes Object.defineProperty has functionality that the shim does not provide (setting the enumerable and configurable descriptor attributes). Since the primary use of your shim is for getter/setter why not just abstract those into private util functions.

Relative URLs do not work

Tried out this script today and as soon as I refreshed the page I was working on all of the css background images disappeared as soon as the script loaded. I tried the script first at bottom of page, where I normally put js like this, tried it in the as well.

I'm on a mac and this bug happened in Chrome 14 and the latest Firefox version 7.0.

I typically write my css on one line and write background properties like this: background: url(../img/hero-bg.png) no-repeat;

Would love to use the script but unfortunately won't be able to with this bug.

Thanks

Node not found in onreadystatechange

Using the minified version of 1.0.3, I get this error "Node was not found" on FF, and "Uncaught Error: NOT_FOUND_ERR: DOM Exception 8" on Chrome, appearently about: window.PrefixFree.process.link.e.onreadystatechange

URLs relative to the root don't work

The URL in my stylesheet url(/images/socialicons.png) is replaced with the path to the stylesheet and the URL as so: url(/css//images/socialicons.png).

cursors with vendor prefixes dont work

The vendor specific cursors below dont work un-prefixed with prefixfree

works:
div {
cursor: -webkit-grab;
cursor: -moz-grab;
}

does not work:
div {
cursor: grab;
}

border-image-slice problem

While writing border-image with the shorthand border-image rule, since the border-image-slice will not be correctly handled by firefox and the whole rule thus will be ignored in that browser.
so, firefox will choke on this
border-image: url(path/to/img.png) 10 10 10 10 fill round round;
unless an extra
-moz-border-image: url(path/to/img.png) 10 10 10 10;
is presented.

more details:
http://code.google.com/p/chromium/issues/detail?id=101311#c9
http://www.w3.org/TR/css3-background/#border-image-slice-fill

Some issues regarding gradients in Opera and iOS

Hello,

I was planning to develop a PHP script in order to get rid of prefixes... and I found out you made a great js script :-). Thanks a lot for this !

So here are some difficults/bug I found :-p. the gradient property doesn't seem to work on the Opera browser, such as :

background : linear-gradient(left, #484848 0%,#a3a3a3 100%);

For the iOS device, the problem is different since the property hasn't the same format, so I guess I have to add it manually in my style sheet, isn't it ?

Thank you :-)

Server-side solution?

Please don't kill me by asking this! But I really prefer to handle this in server and hand a clean stylesheet to the browser. Do you know a PHP version of this?

-webkit-scrollbar and supported()

I wanted to add ::scrollbar so it would be prefixed by Webkit, but it seems like the supported test function isn't reporting correctly for some values in Webkit. I tried adding '::foobar':null to the selectors object, and supported returns true in Webkit. In Opera the same code returns false.

Functions don't get prefixed when they are immediately preceded by a comma

I recently tried to use -prefix-free on my site, but ended up dumping it as it changed code with multiple linear gradients (which I happened to get from the CSS3 Pattern Gallery) and incorrectly added vendor prefixes to each item in the gradient list instead of putting in different background-image properties. So something like this:

    background-image: 
            -webkit-linear-gradient(#fff 2px, transparent 2px),
            -webkit-linear-gradient(0, #fff 2px, transparent 2px),
            -webkit-linear-gradient(rgba(255,255,255,0.3) 1px, transparent 1px),
            -webkit-linear-gradient(0, rgba(255,255,255,0.3) 1px, transparent 1px);

SHOULD have turned into this (but didn't - it instead turned into one very long list of linear gradients [which breaks the effect in all the browsers I tried]):

    background-image: 
            -webkit-linear-gradient(#fff 2px, transparent 2px),
            -webkit-linear-gradient(0, #fff 2px, transparent 2px),
            -webkit-linear-gradient(rgba(255,255,255,0.3) 1px, transparent 1px),
            -webkit-linear-gradient(0, rgba(255,255,255,0.3) 1px, transparent 1px);
    background-image: 
            -moz-linear-gradient(#fff 2px, transparent 2px),
            -moz-linear-gradient(0, #fff 2px, transparent 2px),
            -moz-linear-gradient(rgba(255,255,255,0.3) 1px, transparent 1px),
            -moz-linear-gradient(0, rgba(255,255,255,0.3) 1px, transparent 1px);
    background-image: 
            -ms-linear-gradient(#fff 2px, transparent 2px),
            -ms-linear-gradient(0, #fff 2px, transparent 2px),
            -ms-linear-gradient(rgba(255,255,255,0.3) 1px, transparent 1px),
            -ms-linear-gradient(0, rgba(255,255,255,0.3) 1px, transparent 1px);
    background-image: 
            -o-linear-gradient(#fff 2px, transparent 2px),
            -o-linear-gradient(0, #fff 2px, transparent 2px),
            -o-linear-gradient(rgba(255,255,255,0.3) 1px, transparent 1px),
            -o-linear-gradient(0, rgba(255,255,255,0.3) 1px, transparent 1px);
    background-image: 
            linear-gradient(#fff 2px, transparent 2px),
            linear-gradient(0, #fff 2px, transparent 2px),
            linear-gradient(rgba(255,255,255,0.3) 1px, transparent 1px),
            linear-gradient(0, rgba(255,255,255,0.3) 1px, transparent 1px);

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.