• This repository has been archived on 20/Apr/2023
  • Stars
    star
    2,787
  • Rank 16,349 (Top 0.4 %)
  • Language
    HTML
  • License
    Other
  • Created over 14 years ago
  • Updated over 6 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A behavior for Internet Explorer allowing it to recognize and render various CSS3 box decoration properties
                                         ============================
                                         ======      PIE       ======
                                         ============================

                                                 Mmmmmm, pie.


CSS Level 3 brings with it some incredibly powerful styling features.  Rounded corners, soft drop shadows, gradient
fills, and so on.  These are the kinds of elements our designer friends love to use because they make for attractive
sites, but are difficult and time-consuming to implement, involving complex sprite images, extra non-semantic markup,
large JavaScript libraries, and other lovely hacks.

CSS3 promises to do away with all that!  But as we all know, due to Internet Explorer's lack of support for any of
these features, we must be patient and refrain from using them, and make do with the same old tedious techniques for
the foreseeable future.

Or must we?

PIE stands for Progressive Internet Explorer.  It is an IE attached behavior which, when applied to an element, allows
IE to recognize and display a number of CSS3 properties.  Consider, if you will, the following CSS:

    #myElement {
        background: #EEE;
        padding: 2em;
        -moz-border-radius: 1em;
        -webkit-border-radius: 1em;
        border-radius: 1em;
    }

This results in a box with nicely rounded corners in any of today's modern browsers, except of course for IE 6, 7, or
8, which all display a square box.  However, add the following single rule to that CSS:

    #myElement {
        ...
        behavior: url(PIE.htc);
    }

Now the exact same rounded corners appear in IE!  That's all there is to it.  No, really, I mean it.

PIE currently has full or partial support for the following CSS3 features:

    * border-radius
    * box-shadow
    * border-image
    * multiple background images
    * linear-gradient as background image

Other features such as radial gradients, multiple box shadows, and many many bugfixes are under development.  This is
still a young project which has a long way to go, but is already pretty remarkable!  We're working on getting a site
up with documentation and examples.  Contributions (code, documentation, testing) are greatly appreciated!

More Repositories

1

aframe-troika-text

An A-Frame component for rendering 3D text using troika-three-text
JavaScript
71
star
2

bidi-js

A pure JavaScript implementation of the Unicode Bidirectional Algorithm
JavaScript
41
star
3

webgl-sdf-generator

A signed distance field (SDF) image generator for 2D paths such as font glyphs, accelerated using WebGL.
JavaScript
34
star
4

html5denver-polyfills

HTML5 Denver: "Polyfills For The Pragmatist" slides and demos
JavaScript
15
star
5

JS-Wiring

Lightweight dependency injection container for JavaScript
JavaScript
7
star
6

ScriptSheets

A collection of some of my old JavaScript experiments
JavaScript
6
star
7

Sencha-Expenses-Touch

A simple Sencha Touch 2 app for expense reporting, created using Sencha Designer
4
star
8

IEtoW3C

Drop-in JavaScript file which brings Internet Explorer into near compliance with the W3C DOM Level 2
JavaScript
4
star
9

unicode-font-resolver

TypeScript
4
star
10

XULServe

A server-side interpreter for XUL applications which renders its view to browsers via HTML and AJAX.
Java
3
star
11

css-summit-polyfills

Slides and demos for my CSS Summit 2012 presentation on CSS Polyfills
JavaScript
3
star
12

XBL

A collection of XBL (XML Binding Language) bindings, and a JavaScript XBL implementation for non-Gecko browsers
JavaScript
2
star
13

zomby

JavaScript vector graphics animation framework
JavaScript
2
star
14

CocoonStuff

Some Cocoon-related code experiments
JavaScript
1
star
15

tiny-thenable

A small JavaScript implementation of Promises/A+ thenables
JavaScript
1
star
16

PIE-ext-perf

JavaScript
1
star
17

Ext.ux.CRUDView

A Sencha Touch 2 component which exposes a simple CRUD interface for a data store
JavaScript
1
star
18

RDFCMS

A content management system based on a RDF (Resource Description Framework) data model
1
star