标签归档：CSS

goals of the project PIE

发表于 由
回复

PIE aims to drastically shorten that timeframe, by implementing a simple shim to make CSS3 “just work” in IE. Our goals are:

  1. Be simple to use

    Applying PIE is extremely simple; in many cases the only thing you have to do is add the behavior property to your CSS.

  2. Be a CSS-only solution

    Many of the current solutions for implementing CSS3 features like border-radius are implemented as JavaScript libraries and require the author to write JavaScript to invoke them. That is less than ideal because it requires the CSS author to also know how to write JS, and it makes development slower and less maintainable because your styling code is scattered between CSS and JS files. PIE works entirely within the stylesheet, so you only write CSS and it’s all in a single place.

  3. Be seamless to the CSS author

    There have been several articles and resources in recent months which show ways that you can make IE “mimic” certain CSS3 features, for example using IE filters to fake box-shadow, or jQuery plugins to implement rounded corners. The problem with these solutions is that they require a lot of IE-specific code on top of your real CSS3, increasing your development time and the size of your CSS files. PIE on the other hand uses your CSS3 directly whenever possible; you simply write real CSS3, and PIE handles it seamlessly.

    PIE handles attaching, detaching, and updating automatically without any intervention from the author. This means that, unlike some other solutions, PIE does not require you to explicitly initialize elements when they are added to or removed from the document via script, and does not require any sort of “update” method to be called when an element’s position, size, or styles are modified on the fly.

    Another aspect of PIE’s seamlessness is that it should be fully compatible with any JavaScript library the site author might choose to use. You can create elements and assign CSS3 styles to them in jQuery or YUI or MooTools or any other library and PIE will automatically apply itself. Also, PIE’s objects are completely self-contained except for a single global PIE object, so there’s no chance that it will override objects or functions from any other JS code.

  4. Be as compliant with the CSS3 specs as possible

    PIE aims to be a true CSS3 implementation for those features it supports, complying with the current spec drafts as closely as possible. The goal is to allow authors to write a single set of CSS3 code and have it “just work” between browsers.

  5. Be as performant as possible

    If it makes the browser feel sluggish (more so than IE normally does, that is) then it’s useless. PIE was architected with performance in mind from the very beginning:

    • Rendering elements are only updated when they need to be.
    • CSS property values are only parsed when they have changed.
    • Internal objects are created lazily, and cached when appropriate.
    • The behavior script is written with file size in mind, and the most advanced JS compression tools available are used to minimize the file size, so the initial download is as fast as possible.

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.

Use CSS3 Pie to Modernize Internet Explorer

发表于 由
回复

One of the biggest dilemmas facing web developers is the incompatibility of various Internet Explorer versions with current web standards. Although Microsoft has promised CSS3 and even HTML5 support for IE9, Windows users, especially businesses, may continue to use IE8, IE7, or even the dreaded IE6 for years to come.

As a result, coding a site with exclusive CSS3 features will only alienate a large portion of your website’s visitors, and obligating them to download a standards-compliant browser, like Mozilla Firefox or Google Chrome, will only come across as arrogant.

A possible solution to the problem is to use a modernizer, which is a script or application that uses a variety of tricks to make your site appear as it should in all browsers. CSS3 Pie is javascript-based modernizer that helps Internet Explorer recognize cool CSS3 features such as rounded corners, soft drop shadows, and gradient fills. It is quick, easy, and works most of the time with very little tweaking.

Installation and Setup

This brief tutorial assumes you already have a website with CSS3 elements. In order to get CSS3 Pie working, you need to do two things: upload the javascript package and add special code to your CSS file.

CSS3 Pie live demo with menu tabs

1. The download from the css3pie.com website includes a number of files, but if everything goes as planned, all you need is PIE.htc, which is a compressed text file. Upload it to a place on your web server where your CSS file can have access to it.

2. Open your CSS file in your text editor and locate the elements that contain CSS3 properties. Within those elements, add the following rule:

behavior: url(PIE.htc);

The path to your PIE.htc file needs to be exact, so if it is not in the same directory as your CSS file, change it accordingly.

The final element should look something like this:

#element1 { border: 1px solid #696;
padding: 60px 0;
text-align: center; width: 200px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background: #EEFF99;
behavior: url(PIE.htc); }

If it worked correctly, you should see the results in IE 6,7, and 8 immediately after uploading the altered CSS file.

Troubleshooting

If you see no changes at all, you could very likely need to adjust the path to your PIE.htc or even use the full URL. Just remember that IE will only accept an htc file from the same domain as the site, and “www.site.com” and “site.com” are considered two different domains.

Under some circumstances, you may need to try PIE_uncompressed.htc or even PIE.php to get it to work correctly. Consult the documentation for more details.

I have noticed that the combination of transparency and bold text results in some crazy-looking words in IE8. You might still need to use transparent image backgrounds in those situations.

The combination of CSS3 Pie and some jQuery functions seems to produce an error in IE. I have not found a solution for this, but the page still loads and displays correctly in spite of it.

Modernization

Live demo of CSS3 Pie to test in Internet Explorer

With very little effort, CSS3 Pie can help your website look consistently appealing in all major browsers, without the headache of having to shape corner images or make fake drop shadows. The front page of the site includes a demo so that you can adjust CSS3 properties and see the live results in Internet Explorer. Best of all CSS3 Pie is free and open source and available for download at no cost.