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

Related tags

                                         ======      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!
  • rounded corners causing background image to shrink

    rounded corners causing background image to shrink

    When I apply the rounded corners to a DIV tag, the background image shrinks by about 30 pixels. I tested by removing the rounded corners code: worked fine. I also tested by removing pie from the code: worked fine. this is affecting about a dozen of my websites. please help! below is my code. Yes, I know I have it labeled "fix-pie.php" but that is NOT the issue. I use it that way in about a thousand other places (not exaggerating) and it works fine.

    header {

    position:relative; width: 980px; height: 300px; margin: 0px auto 0px auto; padding: 0px; background-image: url(style/header.jpg); background-position: top left;

    overflow: hidden;

    border-radius: 6px 6px 0px 0px; -moz-border-radius: 6px 6px 0px 0px;

    behavior: url(fix-pie.php); }

    opened by JuneSites 23
  • behavior applied to parent element prevents scrolling in child divs in IE6/7

    behavior applied to parent element prevents scrolling in child divs in IE6/7

    I have a child div with defined height so that it scrolls vertically contained in a parent div that has rounded corners or dropshadow applied through PIE. In IE6 or IE7 the scroll bar flickers and you can't grab the bar to move it up or down.

    I have found others with this issue at http://css3pie.com/forum/viewtopic.php?f=3&t=1290

    opened by KyleAlanDavis 19
  • Added Transformation Support

    Added Transformation Support

    Hi Jason, in this commit I again tried to implement transformation support and succeeded pretty much. It now supports matrix, skew, scale and rotate. So far the translation is still missing, which seems to be due to an error in my translation algorithm. This is also the reason, why its not rotating around the correct transformation origin. This is still something that needs to be fixed to have this working. But I thought, commit early, commit often... :-)

    The supported code would be: transformation: skew(30px) rotate(20deg) scale(1.2);

    Maybe you have an idea for the translation?

    opened by Hackwar 14
  • IE9


    Looks like hell is freezing over, and judging by the IE9 technical previews, it's likely that the final IE9 will support most or all of the Backgrounds & Borders spec. As of right now (June 2010) it seems to already support everything PIE supports, with the exception of border-image and box-shadow.

    So we need to figure out what to do about this. Best-case scenario is that IE9 completely obsoletes PIE so we can just version-detect and do nothing for IE9. If that doesn't happen, we'll need to come up with a system to let IE9 render everything it knows how to natively and let PIE only handle the leftovers.

    opened by lojjic 12
  • Allow PIE to be invoked as a standalone JS library

    Allow PIE to be invoked as a standalone JS library

    Making PIE run as a .htc behavior has several advantages: users don't have to write any JS, the FOUS is avoided because the behavior is applied as soon as each element is ready, automatic cleanup when the element is unbound, etc.

    However it might be useful, especially for third party libraries, to be able to invoke PIE as a pure .js file, without the .htc wrapper. We could expose a PIE.applyTo() element which accepts an element reference or maybe a selector, and a corresponding method to remove it.

    We're probably pretty close to being able to do this. We'd have to rework a few things, like the fact that element-specific values are stored as local variables in the .htc would have to be changed so they are stored on the element itself or using a data hash with id indexes like jQuery does. We'd also have to attach the event listeners programatically, and make sure to clean them up on unload to prevent memory leaks.

    The resulting .js file would be an addition to the PIE distribution; the .htc would still be the preferred method of attachment for the above stated reasons.

    opened by lojjic 11
  • Border-image not work in IE9

    Border-image not work in IE9

    Border-image not work in IE9. I see that other users have the same problem. But the documentation says it should work in IE9. It is a bug? Should we do something special to make it work?

    Thanks, Regards, Jose

    opened by Josua2012 9
  • Position not setted correctly after js manipulation.

    Position not setted correctly after js manipulation.

    Today i encountered with a ¿bug?, The scenario was this:

    Slider with rounded buttons to the side, when the slider loads, it hides the first button because it's not needed (you can briefly see it before it's hidden, it's at the right position and with the rounded borders) but when it's showed the position will be top:0; and left:0; not the one setted on the css.

    We came to the conclusion that this is a conflict when hiding an element using display:none;. The weird thing is that when you scrolled, it came to position. Why this happens? Is normal behavior from PIE?

    We solved it setting the visibility to hidden, but that's not cool.

    opened by saibayadon 9
  • Gradient Transparency

    Gradient Transparency

    Hey Jason,

    After much trial and error, I figured got the opacity2 working. It is uber buggy.

    Overview: Apparently if fill['opacity2'] is set it will take on the value of fill['opacity'] and then proceed to display at full alpha. fill['opacity2'] appears to be set when the #Default#VML behavior is added to a fill.

    In order to get it to work you must set the fill['o:opacity2'] before the behavior is set.

    Change 1: What I did is separate out the s['behavior'] = 'url(#default#VML)'; from getShape and put it into a new function applyBehavior. I had getShape call applyBehavior for anything that wasn't a fill. If it was a fill I called the applyBehavior after all the styles attributes had been set.

    https://github.com/digitalagua/PIE/blob/master/sources/RendererBase.js - Line 138, Line 145

    This is why the other features aren't working. The applyBehavior is either not being called or it is being called at the wrong time. I honestly don't know if this is the best approach, but it works well for the linear gradients.

    Change 2: The other buggy piece is when the gradient itself is being set.

    https://github.com/digitalagua/PIE/blob/master/sources/BackgroundRenderer.js Lines 365-376

    If there are three or more stops IE switchs the starting point for opacity and o:opacity2, because that obviously makes perfect sense.

    Possible Change: I experemented with your vmlColors array. In the documentation it looks like you only need mid points not 0 and 1. I did it both ways and the gradients changed slightly, but not enough to notice.

    https://github.com/digitalagua/PIE/blob/master/sources/BackgroundRenderer.js Line 351

    You might try this instead: // Convert to percentage along the VML gradient line and add to the VML 'colors' value // first and last values are removed for the colors array for( i = 1; i < stopCount-1; i++ ) { vmlColors.push( ( vmlOffsetPct + ( stopPx[ i ] / vmlGradientLength * 100 ) ) + '% ' + stops[i].color.colorValue( el ) ); }

    All Other Changes: The other changes were trying to get the other features to work.

    All that I added was they applyBehavior where I thought appropriate, but I ran out of my allotted time.

    sources/BackgroundRenderer.js sources/BorderRenderer.js sources/BoxShadowOutsetRenderer.js sources/ImgRenderer.js sources/RendererBase.js

    Oh yeah and I added a couple of files to make navigating the test files easier. tests/index.html tests/toc.html

    Feel free to use any of the code or ideas. If you do use it, all I ask for is a credit.

    Feel free to drop me an email with any questions or if you want to bounce ideas for integrating this with other pieces of the PIE. Ha.


    James Butler Digital Agua

    opened by digitalagua 9
  • No effect when using :hover

    No effect when using :hover

    Did some testing and found that things like 'rgba' or 'border-radius' don't work when attached to a :hover pseudoclass. Would be really cool to be able to do this.

    opened by benzimmer 9
  • Fix for issue 302

    Fix for issue 302

    see: tests/offset.html

    Steps to reproduce bug:

    1. Hover your mouse pointing at any one text box
    2. Press F5 to refresh the page
    3. Repeat step 2, all of the text box the mouse is pointing to the text box after the position will be confusion

    Sometimes you can reproduce such documents under IE7 mode

    opened by gucong3000 7
  • PIE background scrolls doubly in IE8 Standards mode

    PIE background scrolls doubly in IE8 Standards mode

    I have a <div> which contains my PIE-d elements. The div has the following style:

    position: absolute;
    overflow-y: auto;
    top: 2.5em;
    bottom: 0px;
    left: 0px;

    When I scroll the content within it, the backgrounds scroll by twice as much as the elements. E.g. the elements scroll up by 100px but the backgrounds scroll up by 200px. This only happens in IE8 Standards mode. IE7 Standards mode and Quirks mode do not display this bug.

    I am using the latest PIE 1.x as of 3 Sept 2014.

    opened by CJDennis 5
  • use PIE with E:hover, element jitter occurs in IE

    use PIE with E:hover, element jitter occurs in IE

    .somenode {
        behavior: url(/PIE.htc);
        border: 1px solid red;
        border-radius: 5px;
        display: block;
        height: 500px;
        width: 500px;
        margin: 0;
    .somenode:hover {
        margin: 20px;

    I found a bug of IE: Sometimes node.offsetTop & node.offsetLeft is not the value we want. setTimeout for 0Ms, we can get right offsetTop & offsetLeft

    opened by gucong3000 2
  • A problem in https protocol

    A problem in https protocol

    When I use js version in my project under https. I found IE6 popup "Contain unsafe content " , So I replace this line rs.backgroundImage = 'url(about:blank)'; to rs.backgroundImage = 'url()';

    opened by wellingfine 0
  • PIE 2 has js errors in IE8

    PIE 2 has js errors in IE8

    I have no plugins whatsoever, am using the default Modern.IE build of IE8 on Windows 7 and when I load the page I see the following 7 times in IE8 Dev Tools console:

    'rootRenderer' is null or not an object _________ PIE_IE678.js, line 4309 character 17

    opened by u353 4
Jason Johnston
Frontend at ProtectWise / Verizon Security
Jason Johnston
PostCSS plugin to render WordPress global styles from a theme.json file

postcss-wp-global-styles PostCSS plugin to render WordPress global styles from a theme.json file. As of now it only supports preset styles. Usage @wp-

Luehrsen // Heinrich 10 Aug 5, 2022
Grid based on CSS3 flexbox

Flexbox Grid flexboxgrid.com Grid based on the flex display property. Install npm npm i flexboxgrid --save bower bower install flexboxgrid cdn CDNJS <

kj 9.3k Jan 2, 2023
A collection of CSS3 buttons implemented in Sass.

CSS3 Buttons This is a collection of buttons that show what is possible using CSS3 and other advanced techniques, while maintaining the simplest possi

Chad Mazzola 1.3k Nov 8, 2022
a Plex landing page that redirects you to various sites.

PlexRedirect a Plex landing page that redirects you to various sites. Blank spaces are where your server name goes. If you don't have a server name yo

null 222 Dec 29, 2022
A lightweight and modular front-end framework for developing fast and powerful web interfaces

UIkit UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces. Homepage - Learn more about UIkit @getui

null 17.7k Jan 8, 2023
Front-end framework with a built-in dark mode and full customizability using CSS variables; great for building dashboards and tools.

This is the main branch of the repo, which contains the latest stable release. For the ongoing development, see the develop branch. Halfmoon Front-end

Tahmid (Halfmoon UI) 2.8k Dec 26, 2022
🖼 A pure client-side landing page template that you can fork, customize and host freely. Relies on Mailchimp and Google Analytics.

landing-page-boilerplate A pure client-side landing page template that you can freely fork, customize, host and link to your own domain name (e.g. usi

Adrien Joly 129 Dec 24, 2022
A modern static resume template and theme. Powered by Jekyll and GitHub pages.

modern-resume-theme A modern simple static resume template and theme. Powered by Jekyll and GitHub pages. Host your own resume on GitHub for free! Vie

James Grant 1.5k Dec 31, 2022
A URL shortener website and PWA build with vercel serverless cloud function, MongoDB and nodeJS

❤️ lenk.cf A URL shortner made using NodeJS, MongoDB and Vercel serverless function. This project also includes a serverless API. With the help of thi

Adithya Pai B 12 Nov 5, 2022
The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

Bootstrap Sleek, intuitive, and powerful front-end framework for faster and easier web development. Explore Bootstrap docs » Report bug · Request feat

Bootstrap 161k Jan 1, 2023
The most advanced responsive front-end framework in the world. Quickly create prototypes and production code for sites that work on any kind of device.

Install | Documentation | Releases | Contributing Foundation is the most advanced responsive front-end framework in the world. Quickly go from prototy

Foundation 29.4k Jan 4, 2023
Modular and customizable Material Design UI components for the web

Material Components for the web Material Components for the web helps developers execute Material Design. Developed by a core team of engineers and UX

Material Components 16.6k Jan 3, 2023
Spectre.css - A Lightweight, Responsive and Modern CSS Framework

Spectre.css Spectre.css is a lightweight, responsive and modern CSS framework. Lightweight (~10KB gzipped) starting point for your projects Flexbox-ba

Yan Zhu 11.1k Jan 8, 2023
Adds OpenType features—ligatures, kerning, and more—to Normalize.css.

Note You might also like my more recent take on this project, Utility OpenType: CSS utility classes for advanced typographic features. Normalize-OpenT

Kenneth Ormandy 795 Dec 23, 2022
Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

Fluent UI Web ?? ?? ?? Version 8 of @fluentui/react is now available on npm! ?? ?? ?? See the release notes for more info, and please file an issue if

Microsoft 14.5k Jan 4, 2023
Easily create and maintain style guides using CSS comments

mdcss lets you easily create and maintain style guides with CSS comments using Markdown. /*--- title: Buttons section: Base CSS --- Button styles c

Jonathan Neal 679 Oct 4, 2022
[ON HOLD] Living Style Guides Engine and Maintenance Environment for Front-end Components. Core repository.

[ON HOLD] SourceJS - Living Style Guide Platform The project been stale for a while and currently is in the [ON HOLD] state until we find new maintain

SourceJS 552 Nov 8, 2022
Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation

Aphrodite Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation. Support for colocating y

Khan Academy 5.3k Jan 1, 2023