{"id":3045,"date":"2017-03-01T16:50:38","date_gmt":"2017-03-01T22:50:38","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=2152"},"modified":"2017-03-01T16:50:38","modified_gmt":"2017-03-01T22:50:38","slug":"compensate-for-internet-explorer-with-pie","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/compensate-for-internet-explorer-with-pie\/","title":{"rendered":"Compensate for Internet Explorer with PIE"},"content":{"rendered":"

As a developer or designer, you probably know that not all browsers (especially not all older versions of browsers) have support for all the nifty CSS properties. In particular, older versions of Internet Explorer that are still in pretty wide use don’t always have support for some pretty common properties, such as border-radius, linear-gradient, and box-shadow. If you use vendor prefixes, however, you can usually get those properties supported.<\/p>\n

If you’re still having trouble getting the properties mentioned above supported on Internet Explorer, then you can use the super handy tool called CSS3 PIE (PIE is an acronym that stands for Progressive Internet Explorer) that will allow to add your own pie vendor prefixes to your CSS code\u00a0to enable support for the border-radius, linear-gradient, border-image, multiple background image, and box shadow properties.<\/p>\n

\"Screen<\/a><\/p>\n

 <\/p>\n

With the CSS3 PIE too you’re getting access to the appropriate vendor prefixes because the tool allows you to link to the PIE library using the behavior property for instances in which versions of Internet Explorer (versions 6-9, specifically) don’t support any of the properties mentioned above. To\u00a0use PIE in this way, all you need to do is download the files, install them onto your project, and make sure that you reference\u00a0their correct path when you link to them in the behavior property. See the snippet below for an idea of how this should be done:<\/p>\n

\r\n\r\n\t\t
\r\n\r\n\t\t
\r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
css<\/div>\r\n\r\n\t\t\r\n\t\t
\r\n\r\n\t<\/div>\r\n\t\r\n\t
\r\n\t\t
  1. &lt;<\/span>br \/&gt;<\/span><\/div><\/li>\n
  2. div{<\/span>&lt;<\/span>br \/&gt;<\/span><\/div><\/li>\n
  3. behavior:<\/span> url<\/span>(<\/span>\/pie\/pie.htc<\/span>)<\/span>;<\/span>&lt;<\/span>br \/&gt;<\/span><\/div><\/li>\n
  4. }<\/span>&lt;<\/span>br \/&gt;<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n<\/p>\n

    Share and Enjoy !<\/h3>
    0<\/span><\/span>Shares<\/small><\/div>
    <\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"

    As a developer or designer, you probably know that not all browsers (especially not all older versions of browsers) have support for all the nifty CSS properties. In particular, older versions of Internet Explorer that are still in pretty wide […]<\/p>\n

    Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":2842,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/3045"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=3045"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/3045\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media\/2842"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=3045"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=3045"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=3045"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}