Picturefill aims to polyfill the standard features of the picture
element and related srcset
, sizes
, type
, and media
attributes (some of which work on img
elements without a picture
parent as well). Issues and contributions that fall outside of this scope are not likely to be accepted by the project. Some exceptions include workarounds that improve browser support for standard features.
While we always welcome new issues, please take a look through our open and closed issues to see if it's been brought up before. We're happy to reopen closed issues if it still persists.
Q: Firefox isn't updating the src on window resize.
A: This is a known issue, ever since firefox added partial support in Firefox 38. It's slated to be fixed in Firefox 46.
Q: I have an issue/question about the picture
element/spec.
A: Since Picturefill is only a polyfill, there's a repo for general picture
discussion here.
Q: I have a question about how to use srcset
, sizes
, or picture
.
A: Understandable—it's a lot of stuff to use! There's a handy resource from Eric Portis on srcset & sizes. Additionally, the picturefill website has a lot of demos and walks through some edge cases and how to solve them.
Picturefill is an open source project falling under the MIT License. By using, distributing, or contributing to this project, you accept and agree that all code within the Picturefill project are licensed under MIT license.
General Picturefill discussion takes place in Slack, at http://picturefill.slack.com. To join, send an email to picturefill
at ricg.io
. Discussion of issues pertaining to the responsive images specifications takes place in the RICG IRC channel and issue tracker.
You can connect to the Picturefill Slack channel via IRC (SSL enabled).
First, ensure that you have the latest Node.js or io.js and npm installed.
Test that Grunt's CLI is installed by running grunt --version
. If the command isn't found, run npm install -g grunt-cli
. For more information about installing Grunt, see the getting started guide.
- Fork and clone the repo.
- Run
npm install
to install all dependencies (including Grunt). - Run
grunt
to grunt this project.
Assuming that you don't see any red, you're ready to go. Just be sure to run grunt
after making any changes, to ensure that nothing is broken.
Note: The master
branch now represents the publishing branch. Anything on master should be publishable to npm and bower. When something goes into master, it gets published. Minor version branches (2.2
, 2.3
, etc) also exist to capture in-progress work on a particular version of picturefill. Once work on a version branch is complete, it gets merged into master to be published.
- If no issue already exists for the work you’ll be doing, create one to document the problem(s) being solved and self-assign.
- Create a new branch based off of the minor version branch you're fixing (
2.3
,2.2
, etc) — please don't work in themaster
branch directly. We recommend naming the branch to match the issue being addressed (issue-777
). - Add failing tests for the change you want to make. Run
grunt
to see the tests fail. - Fix stuff.
- Run
grunt
to see if the tests pass. Repeat steps 2-4 until done. - Open
test/*.html
unit test file(s) in actual browsers to ensure tests pass everywhere. - Update the documentation to reflect any changes.
- Push to your fork or push your issue-specific branch to the main repo, then submit a pull request against the minor version branch you're fixing.
2.2
,2.3
, etc. - Once tested and +1’d by another team member (with no outstanding objections), self-merge into the branch specified in the pull request.
- Once ready to release to the public, merge the minor version branch into master and publish to npm and create a tag for bower.
The rules of semver don’t necessarily apply here in the case of major releases (as a polyfill for a stable spec, we shouldn’t have breaking changes), so we’re using the following:
- MAJOR versions at maintaners’ discretion following significant changes to the codebase (e.g. refactoring core)
- MINOR versions for backwards-compatible enhancements (e.g. performance improvements)
- PATCH versions for backwards-compatible bug fixes (e.g. spec compliance bugs, support issues)
Please don't edit files in the dist
subdirectory as they are generated via Grunt. You'll find source code in the src
subdirectory!
Regarding code style like indentation and whitespace, follow the conventions you see used in the source already.
While Grunt can run the included unit tests via PhantomJS, this shouldn't be considered a substitute for the real thing. Please be sure to test the test/*.html
unit test file(s) in actual browsers.