dmitryshimkin/insert-html-mixin.less

Last active December 15, 2015 18:19

Star (0) You must be signed in to star a gist
Fork (0) You must be signed in to fork a gist

Select an option

Learn more about clone URLs
Clone this repository at <script src="https://gist.github.com/dmitryshimkin/5303328.js"></script>
Save dmitryshimkin/5303328 to your computer and use it in GitHub Desktop.

Download ZIP

Less mixin for inserting html via css under IE 5-7. Based on one-time css expression (executed only once, doesn't affect performance). Useful to emulate pseudo-elements, add extra-markup for old browsers or emulate css3 with images.

Raw

insert-html-mixin.less

+/* mixin */
+.insert-html(@html: "") {
+  behavior: ~"expression(function html (el) { el.runtimeStyle.behavior = 'none'; if (!el.updated) { el.updated = true; el.insertAdjacentHTML('afterBegin', '@{html}'); } }(this))";
+  }
+/* usage */
+.some-class {
+  .insert-html('<span class="shadow"></span>');
+  }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment