Created
March 6, 2013 14:06
-
-
Save kapitancho/5099504 to your computer and use it in GitHub Desktop.
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…
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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