| /** | |
| * rwd animation | |
| * from 320x480 to 1800x1000 in 14s | |
| */ | |
| div { | |
| border: 5px solid #333; | |
| border-width: 5px 5px 10px 5px; | |
| border-radius: 10px; | |
| width: 32px; |
| var developissimo = function() { | |
| var devcon = document.createElement('div'), | |
| devstyle = document.createElement('style'); | |
| devcon.id = 'developissimo'; | |
| devstyle.innerHTML = '#developissimo{position:absolute;top:0;right:0;z-index: 10000;padding:5px;background:#fff}'; | |
| document.head.appendChild(devstyle); | |
| devcon.innerHTML = window.innerWidth; | |
| document.body.appendChild(devcon); |
| <!DOCTYPE html> | |
| <html class="no-js"> | |
| <head> | |
| <title>Responsive Styleguide</title> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <style> | |
| html { | |
| font: 62.5%/1.4 Arial, sans-serif; | |
| padding: 2em; |
| IE7 | |
| hyphens - | |
| word-break + | |
| overflow-wrap + | |
| hyphens + word-break combined - | |
| hyphens + overflow hyphens combined + | |
| IE8 | |
| hyphens - | |
| word-break + |
| /** | |
| * Webplatform example for http://docs.webplatform.org/wiki/css/properties/transform | |
| * transform: rotate(20deg) | |
| * Rotate the object by 20deg | |
| */ | |
| .rotate { | |
| -ms-transform: rotate(40deg); | |
| -webkit-transform: rotate(40deg); | |
| -o-transform: rotate(40deg); |
| /** | |
| * Webplatform example for http://docs.webplatform.org/wiki/css/properties/transform | |
| * transform: translate(80px, 80px) scale(1.5, 1.5) rotate(45deg); | |
| */ | |
| html {padding: 2em} | |
| .step { | |
| width: 10em; | |
| height: 10em; | |
| padding: 0.2em; |
| /** | |
| * Webplatform example for http://docs.webplatform.org/wiki/css/properties/transform | |
| * transform: scale(3, 0.5) | |
| * Scales the element by the factor of 3 on the x axis and by the factor of 0.5 by the y axis | |
| */ | |
| .scale { | |
| -ms-transform: scale(3, 0.5); | |
| -webkit-transform: scale(3, 0.5); | |
| -o-transform: scale(3, 0.5); |
Thoughts about a way to progressive enhance the technique to control CSS loading by Jake Archibald.
My idea was to set a class for html (which gets changed if custom properties are supported) and in the CSS use:
.no-ccp footer {
display: block;
}
footer {
| .user-style-justmarkup { | |
| --color1: #118C3C; | |
| --color2: #fff; | |
| --color3: #9FD1B1; | |
| --color4: rgba(0, 0, 0, 0.05); | |
| --color5: rgba(17,140,60,0.25); | |
| --color6: #E7F3EB; | |
| --color7: #C3E2CE; | |
| --color8: #0D7030; | |
| --color9: #0A5424; |
| <script> | |
| if (navigator.serviceWorker) { | |
| navigator.serviceWorker.register('./serviceworker.js', { | |
| scope: './' | |
| }); | |
| } | |
| </script> |