Is there polyfill for css transform property in IE8
There are a few you can use, the ones suggested from modenizer are:
css sandpaper and transformie.
I'd argue though, that adding pollyfills to older browser like ie8 damages the performance of an already past it browser and lowers the user experience. Also, if you are adding pollyfills to mobile browsers you are adding to the loading times which in a 3g connection might put users off.
css transform rotate not working in ie8 even after implementing filter
To rotate by 45 degrees in IE, you need the following code in your stylesheet:
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
See here for more detail:
https://stackoverflow.com/a/4617511/2161568
Flip, mirror image in IE8 - CSS
filter:fliph
should work in IE4-8, even without -ms-
prefix (which was needed only for early beta versions of IE8). Probably you should add parentheses filter:fliph()
as this demo suggests. You can also try the newer IE5.5-9 syntax — filter: DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)
(as MSDN recommends).
Older IE versions required the element to have layout to apply filters to it (how to make an element have layout, is described ), but, AFAIK, IE8 doesn't require it.
IE11 - does a polyfill / script exist for CSS variables?
Yes, so long as you're processing root-level custom properties (IE9+).
- GitHub: https://github.com/jhildenbiddle/css-vars-ponyfill
- NPM: https://www.npmjs.com/package/css-vars-ponyfill
- Demo: https://codepen.io/jhildenbiddle/pen/ZxYJrR
From the README:
Features
- Client-side transformation of CSS custom properties to static values
- Live updates of runtime values in both modern and legacy browsers
- Transforms
<link>
,<style>
, and@import
CSS- Transforms relative
url()
paths to absolute URLs- Supports chained and nested
var()
functions- Supports
var()
function fallback values- Supports web components / shadow DOM CSS
- Watch mode auto-updates on
<link>
and<style>
changes- UMD and ES6 module available
- TypeScript definitions included
- Lightweight (6k min+gzip) and dependency-free
Limitations
- Custom property support is limited to
:root
and:host
declarations- The use of var() is limited to property values (per W3C specification)
Here are a few examples of what the library can handle:
Root-level custom properties
:root {
--a: red;
}
p {
color: var(--a);
}
Chained custom properties
:root {
--a: var(--b);
--b: var(--c);
--c: red;
}
p {
color: var(--a);
}
Nested custom properties
:root {
--a: 1em;
--b: 2;
}
p {
font-size: calc(var(--a) * var(--b));
}
Fallback values
p {
font-size: var(--a, 1rem);
color: var(--b, var(--c, var(--d, red)));
}
Transforms <link>
, <style>
, and @import
CSS
<link rel="stylesheet" href="/absolute/path/to/style.css">
<link rel="stylesheet" href="../relative/path/to/style.css">
<style>
@import "/absolute/path/to/style.css";
@import "../relative/path/to/style.css";
</style>
Transforms web components / shadow DOM
<custom-element>
#shadow-root
<style>
.my-custom-element {
color: var(--test-color);
}
</style>
<div class="my-custom-element">Hello.</div>
</custom-element>
For the sake of completeness: w3c specs
Hope this helps.
(Shameless self-promotion: Check)
Emulating css zoom in IE8 - any jQuery libraries, polyfill, anything?
It is not possible. Several people have tried but they all fail to work in IE8:
- Zoomooz
- JSImpress
- Zui53
- Presenter.js
These and many others have tried and failed to make a cross platform zooming library
CSS rotate property in IE
To rotate by 45 degrees in IE, you need the following code in your stylesheet:
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
You’ll note from the above that IE8 has different syntax to IE6/7. You need to supply both lines of code if you want to support all versions of IE.
The horrible numbers there are in Radians; you’ll need to work out the figures for yourself if you want to use an angle other than 45 degrees (there are tutorials on the internet if you look for them).
Also note that the IE6/7 syntax causes problems for other browsers due to the unescaped colon symbol in the filter string, meaning that it is invalid CSS. In my tests, this causes Firefox to ignore all CSS code after the filter. This is something you need to be aware of as it can cause hours of confusion if you get caught out by it. I solved this by having the IE-specific stuff in a separate stylesheet which other browsers didn’t load.
All other current browsers (including IE9 and IE10 — yay!) support the CSS3 transform
style (albeit often with vendor prefixes), so you can use the following code to achieve the same effect in all other browsers:
-moz-transform: rotate(45deg); /* FF3.5/3.6 */
-o-transform: rotate(45deg); /* Opera 10.5 */
-webkit-transform: rotate(45deg); /* Saf3.1+ */
transform: rotate(45deg); /* Newer browsers (incl IE9) */
Hope that helps.
Edit
Since this answer is still getting up-votes, I feel I should update it with information about a JavaScript library called CSS Sandpaper that allows you to use (near) standard CSS code for rotations even in older IE versions.
Once you’ve added CSS Sandpaper to your site, you should then be able to write the following CSS code for IE6–8:
-sand-transform: rotate(40deg);
Much easier than the traditional filter
style you'd normally need to use in IE.
Edit
Also note an additional quirk specifically with IE9 (and only IE9), which supports both the standard transform
and the old style IE -ms-filter
. If you have both of them specified, this can result in IE9 getting completely confused and rendering just a solid black box where the element would have been. The best solution to this is to avoid the filter
style by using the Sandpaper polyfill mentioned above.
Related Topics
P.Classname or .Classname P, Any Difference
How to Avoid Webkit Contenteditable Copy-Paste Resulting in Unwanted CSS
CSS Selector Clarification: |= VS ^=
Applying Border to a Checkbox in Chrome
What Is the Simplest Way to Implement Pure CSS Show/Hide
How to Align Youtube Embedded Video in the Center in Bootstrap
Transparent Strikethrought on Text
Does Semantic UI Framework Support Rtl Languages
Adding a Dotted Line Trail After Menu Description
Realtime CSS/Scss Edition with Meteor Avoiding Server Restart
How to Print Only Parts of a Page
How to Specify the Maximum Number of Columns Repeat() Will Create Using Auto-Fit/Fill
How to Make an Md-Button Smaller
Why Are There Two Colons Here? Span::Before
Responsive Canvas in Bootstrap Column
Viewport Units, Keeping Aspect Ratio
How to Scroll the Page Content Over a Cover Image (Like Medium.Com)