Skip to content

Instantly share code, notes, and snippets.

@kapitancho

kapitancho/gist:5099504

Created March 6, 2013 14:06
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kapitancho/5099504 to your computer and use it in GitHub Desktop.
Save kapitancho/5099504 to your computer and use it in GitHub Desktop.
Download ZIP
IE 6 and IE 7 solution for generated content. This example shows how to emulate generated content in IE6 and IE7. It shows how to use content:attr (attribute name) and content : 'some text' and how to style the generated elements. Known issues: As the example below shows, a skew transition is applied to an element and to a :before element. Unfor…
Raw
gistfile1.txt
<!DOCTYPE html>
<html>
<head>
<style>
.test {
background: red;
zoom: expression(
this.runtimeStyle.zoom="1",
this.insertBefore( document.createElement("before"), this.firstChild ).innerHTML = this.getAttribute ('data-for-before'),
this.appendChild( document.createElement("after") ).innerHTML = ' after-content '
);
}
.test:before, .test before {
background: blue;
content:attr(data-for-before);
}
.test:after, .test after {
background: green;
content: ' after-content ';
}
.test3, .test2 before {
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=-0.3639702342662026, M21=0, M22=1, SizingMethod='auto expand')";
/* IE6 and 7 */
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=1,
M12=-0.3639702342662026,
M21=0,
M22=1,
SizingMethod='auto expand');
}
.test2::before, :root .test3 {
-webkit-transform: skew(-20deg, 0);
-moz-transform: skew(-20deg, 0);
-o-transform: skew(-20deg, 0);
-ms-transform: skew(-20deg, 0);
transform: skew(-20deg, 0);
filter: none;
}
.test2 before {
zoom: 1;
}
</style>
</head>
<body>
<div class="test" data-for-before=" before-content ">
HELLO!
</div>
<div class="test test2" data-for-before=" before-content2 ">
HELLO 2!
</div>
<div class="test test3" data-for-before=" before-content3 ">
HELLO 3!
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment