S
S
Sergey Gromov2015-01-09 10:00:22
css
Sergey Gromov, 2015-01-09 10:00:22

How to properly eat PIE.htc in IE8?

Good day, I, like all layout designers, sooner or later have to deal with cross-browser compatibility and, as the rules, all the torment hangs over IE, in my cases it's ie8, ie9, ie10, ie11. From a ton of information I've rummaged through, IE 8 doesn't support the following CSS3 properties
rem
media queries
rgba(), hsla()
:last-child, :nth-child(), :first-of-type, …
:empty
: not()
calc()
.ttf, .otf, .woff fonts
multiple backgrounds
background-size
vw, vh, vmin, vmax
:checked, :valid, :invalid, :required
box-shadow
transforms (rotate, translate, skew, scale , matrix)
border-radius
opacity
In search of a universal crutch, I came across PIE.htc but my terrible knowledge of the English language does not give me enough progress in this matter, so I have to contact the "Crutches" gurus.

  • I went to http://css3pie.com/ and downloaded the crutch as a *.zip archive
  • I threw PIE.js and PIE.htc into the js folder (Renamed to lower case)
  • In front of closing bodysuit hooked up
    <script type="text/javascript" src="js/pie.js"></script>
  • In the CSS properties of the selector addedbehavior: url(../js/pie.htc);

Let's move on to <div class="block">dancing with tambourines
.block{
  width: 200px;
  height: 200px;
  border-radius: 50%;
  behavior: url(../js/pie.htc);
 }

And voila, it works. But this code doesn't work anymore
.block {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  border-radius: 50%;
  background: linear-gradient(to bottom, #CCC, #EEE); 
   -pie-background: linear-gradient(to bottom, #CCC, #EEE); /*ie 6-9 via PIE*/
  behavior: url(../js/pie.htc);
}

It seems that I did everything as it is written on the OFFICIAL website in the css3pie.com/documentation/supported-css3-features documentation, but most of what is written there does not work for me, whoever encountered this, please help with mastering the full IE cross-browser compatibility for the above mentioned properties.
Note, I have searched through a lot of literature, and I am still digging it, DO NOT send me to different URLs, I asked a very clear question, if there is nothing to answer - keep silent :)

Answer the question

In order to leave comments, you need to log in

1 answer(s)
S
Sergey Gromov, 2015-01-17
@reskwer

reskwer.ru/ie - collected bit by bit. I haven’t uploaded examples yet, but everything you need about cross-browser compatibility is already there :)

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question