diff --git a/README.md b/README.md
index 61c88f5..4d8a2e2 100644
--- a/README.md
+++ b/README.md
@@ -17,7 +17,8 @@ Features:
  - no CSS modifications. Valid CSS Syntax
  - all CSS selectors available. Uses regular attribute selector. No need to write rules in HTML/JS.
  - supports and tested in webkit, gecko and IE(10+)
- - `min-width`, `min-height`, `max-width` and `max-height` are supported so far
+ - `data-min-width`, `data-min-height`, `data-max-width` and `data-max-height` are supported so far and 
+ - for backwards compatibility the HTML non-compliant attributes `min-width`, `min-height`, `max-width` and `max-height` are still supported
  - works with any layout modifications: HTML (innerHTML etc), inline styles, DOM mutation, CSS3 transitions, fluid layout changes (also percent changes), pseudo classes (:hover etc.), window resizes and more
  - no Javascript-Framework dependency (works with jQuery, Mootools, etc.)
  - Works beautiful for responsive images without FOUC
@@ -33,17 +34,17 @@ More demos and information: http://marcj.github.io/css-element-queries/
     font-size: 12px;
 }
 
-.widget-name[min-width~="400px"] h2 {
+.widget-name[data-min-width~="400px"] h2 {
     font-size: 18px;
 }
 
-.widget-name[min-width~="600px"] h2 {
+.widget-name[data-min-width~="600px"] h2 {
     padding: 55px;
     text-align: center;
     font-size: 24px;
 }
 
-.widget-name[min-width~="700px"] h2 {
+.widget-name[data-min-width~="700px"] h2 {
     font-size: 34px;
     color: red;
 }
@@ -51,7 +52,7 @@ More demos and information: http://marcj.github.io/css-element-queries/
 
 As you can see we use the `~=` [attribute selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors).
 Since this css-element-queries polyfill adds new element attributes on the DOM element
-(`<div class="widget-name" min-width="400px 700px"></div>`) depending on your actual CSS and element's dimension,
+(`<div class="widget-name" data-min-width="400px 700px"></div>`) depending on your actual CSS and element's dimension,
 you should always use this attribute selector (especially if you have several element query rules on the same element).
 
 ```html
@@ -64,9 +65,9 @@ you should always use this attribute selector (especially if you have several el
 
 ```html
     <div data-responsive-image>
-        <img data-src="http://placehold.it/350x150"/>
-        <img min-width="350" data-src="http://placehold.it/700x300"/>
-        <img min-width="700" data-src="http://placehold.it/1400x600"/>
+        <img data-src="http://placehold.it/350x150"/>   
+        <img data-min-width="350" data-src="http://placehold.it/700x300"/>
+        <img data-min-width="700" data-src="http://placehold.it/1400x600"/>
     </div>
 ```
 
diff --git a/src/ElementQueries.js b/src/ElementQueries.js
index 4fe4298..693ee9f 100755
--- a/src/ElementQueries.js
+++ b/src/ElementQueries.js
@@ -113,7 +113,7 @@
             this.element = element;
             var key, option, elementSize, value, actualValue, attrValues, attrValue, attrName;
 
-            var attributes = ['min-width', 'min-height', 'max-width', 'max-height'];
+            var attributes = ['min-width', 'data-min-width', 'min-height', 'data-min-height', 'max-width', 'data-max-width', 'max-height', 'data-max-height'];
 
             /**
              * Extracts the computed width/height and sets to min/max- attribute.
@@ -133,7 +133,7 @@
                     value = convertToPx(this.element, option.value);
 
                     actualValue = option.property === 'width' ? elementSize.width : elementSize.height;
-                    attrName = option.mode + '-' + option.property;
+                    attrName = option.attrName;
                     attrValue = '';
 
                     if (option.mode === 'min' && actualValue >= value) {
@@ -185,8 +185,9 @@
          * @param {String} mode min|max
          * @param {String} property width|height
          * @param {String} value
+         * @param {String} attrName
          */
-        function queueQuery(selector, mode, property, value) {
+        function queueQuery(selector, mode, property, value, attrName) {
             if (typeof(allQueries[selector]) === 'undefined') {
                 allQueries[selector] = [];
                 // add animation to trigger animationstart event, so we know exactly when a element appears in the DOM
@@ -200,6 +201,7 @@
             allQueries[selector].push({
                 mode: mode,
                 property: property,
+                attrName: attrName,
                 value: value
             });
         }
@@ -336,8 +338,8 @@
             }
         }
 
-        var regex = /,?[\s\t]*([^,\n]*?)((?:\[[\s\t]*?(?:min|max)-(?:width|height)[\s\t]*?[~$\^]?=[\s\t]*?"[^"]*?"[\s\t]*?])+)([^,\n\s\{]*)/mgi;
-        var attrRegex = /\[[\s\t]*?(min|max)-(width|height)[\s\t]*?[~$\^]?=[\s\t]*?"([^"]*?)"[\s\t]*?]/mgi;
+        var regex = /,?[\s\t]*([^,\n]*?)((?:\[[\s\t]*?(?:data-)?(?:min|max)-(?:width|height)[\s\t]*?[~$\^]?=[\s\t]*?"[^"]*?"[\s\t]*?])+)([^,\n\s\{]*)/mgi;
+        var attrRegex = /\[[\s\t]*?((?:data-)?(min|max)-(width|height))[\s\t]*?[~$\^]?=[\s\t]*?"([^"]*?)"[\s\t]*?]/mgi;
 
         /**
          * @param {String} css
@@ -351,7 +353,7 @@
                 attrs = match[2];
 
                 while (null !== (attrMatch = attrRegex.exec(attrs))) {
-                    queueQuery(smatch, attrMatch[1], attrMatch[2], attrMatch[3]);
+                    queueQuery(smatch, attrMatch[2], attrMatch[3], attrMatch[4], attrMatch[1]);
                 }
             }
         }
@@ -368,16 +370,16 @@
 
             if ('string' === typeof rules) {
                 rules = rules.toLowerCase();
-                if (-1 !== rules.indexOf('min-width') || -1 !== rules.indexOf('max-width')) {
+                if (-1 !== rules.indexOf('min-width') || -1 !== rules.indexOf('data-min-width') || -1 !== rules.indexOf('max-width') || -1 !== rules.indexOf('data-max-width')) {
                     extractQuery(rules);
                 }
             } else {
                 for (var i = 0, j = rules.length; i < j; i++) {
                     if (1 === rules[i].type) {
                         selector = rules[i].selectorText || rules[i].cssText;
-                        if (-1 !== selector.indexOf('min-height') || -1 !== selector.indexOf('max-height')) {
+                        if (-1 !== selector.indexOf('min-height') || -1 !== selector.indexOf('data-min-height') || -1 !== selector.indexOf('max-height') || -1 !== selector.indexOf('data-max-height')) {
                             extractQuery(selector);
-                        } else if (-1 !== selector.indexOf('min-width') || -1 !== selector.indexOf('max-width')) {
+                        } else if (-1 !== selector.indexOf('min-width') || -1 !== selector.indexOf('data-min-width') || -1 !== selector.indexOf('max-width') || -1 !== selector.indexOf('data-max-width')) {
                             extractQuery(selector);
                         }
                     } else if (4 === rules[i].type) {
diff --git a/tests/demo.html b/tests/demo.html
index d8a75c2..44372f3 100644
--- a/tests/demo.html
+++ b/tests/demo.html
@@ -38,18 +38,18 @@
             /*}*/
         /*}*/
 
-        .widget-name[min-width~="400px"] h2 {
+        .widget-name[data-min-width~="400px"] h2 {
             font-size: 18px;
             animation: 1s element ;
         }
 
-        .widget-name[min-width~="600px"] h2 {
+        .widget-name[data-min-width~="600px"] h2 {
             padding: 55px;
             text-align: center;
             font-size: 24px;
         }
 
-        .widget-name[min-width~="700px"] h2 {
+        .widget-name[data-min-width~="700px"] h2 {
             font-size: 34px;
             color: red;
         }
@@ -65,18 +65,18 @@
             transition:all .2s ease;
         }
 
-        .example-1[min-width~="400px"] {
+        .example-1[data-min-width~="400px"] {
             padding: 80px;
         }
 
-        .example-1[min-width~="200px"] {
+        .example-1[data-min-width~="200px"] {
             text-align: left;
             font-size: 12px;
         }
 
 
-        .example-2[max-width~="300px"] .example-2-first,
-        .example-2[max-width~="300px"] .example-2-second {
+        .example-2[data-max-width~="300px"] .example-2-first,
+        .example-2[data-max-width~="300px"] .example-2-second {
             float: none;
             background-color: #4186ff;
             width: auto;
@@ -86,15 +86,15 @@
             background-color: #ba000d;
         }
 
-        .example-2[min-width~="200px"] .example-2-box {
+        .example-2[data-min-width~="200px"] .example-2-box {
             background-color: #ba6377;
         }
 
-        .example-2[min-width~="300px"] .example-2-box {
+        .example-2[data-min-width~="300px"] .example-2-box {
             background-color: #ba9196;
         }
 
-        .example-2[min-width~="400px"] .example-2-box {
+        .example-2[data-min-width~="400px"] .example-2-box {
             background-color: gray;
         }
     </style>
@@ -151,17 +151,17 @@ <h2>Element responsiveness FTW!</h2>
     font-size: 12px;
 }
 
-.widget-name[min-width~="400px"] h2 {
+.widget-name[data-min-width~="400px"] h2 {
     font-size: 18px;
 }
 
-.widget-name[min-width~="600px"] h2 {
+.widget-name[data-min-width~="600px"] h2 {
     padding: 55px;
     text-align: center;
     font-size: 24px;
 }
 
-.widget-name[min-width~="700px"] h2 {
+.widget-name[data-min-width~="700px"] h2 {
     font-size: 34px;
     color: red;
 }</textarea>
@@ -226,11 +226,11 @@ <h2>Demo 1</h2>
     transition:all .2s ease;
 }
 
-.example-1[min-width~="400px"] {
+.example-1[data-min-width~="400px"] {
     padding: 80px;
 }
 
-.example-1[min-width~="200px"] {
+.example-1[data-min-width~="200px"] {
     text-align: left;
     font-size: 12px;
 }
@@ -295,8 +295,8 @@ <h2>Demo 2</h2>
     padding: 2px;
 }
 
-.example-2[max-width~="300px"] .example-2-first,
-.example-2[max-width~="300px"] .example-2-second {
+.example-2[data-max-width~="300px"] .example-2-first,
+.example-2[data-max-width~="300px"] .example-2-second {
     float: none;
     background-color: #4186ff;
     width: auto;
@@ -306,15 +306,15 @@ <h2>Demo 2</h2>
     background-color: #ba000d;
 }
 
-.example-2[min-width~="200px"] .example-2-box {
+.example-2[data-min-width~="200px"] .example-2-box {
     background-color: #ba6377;
 }
 
-.example-2[min-width~="300px"] .example-2-box {
+.example-2[data-min-width~="300px"] .example-2-box {
     background-color: #ba9196;
 }
 
-.example-2[min-width~="400px"] .example-2-box {
+.example-2[data-min-width~="400px"] .example-2-box {
     background-color: gray;
 }</textarea>
                 </div>