Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <h2>Original CSS</h2>
  <style style="display: block; white-space: pre; font-family: monospace">
h2 { margin:0; background: white url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC') no-repeat scroll left top; }    
ol { color:red; }
li { color:blue; background-color: red; }
li:hover { color:purple; background-color: red; }
li:first-child {  color:green; background-color: yellow; font-size: 2em;}
    li:first-child { font-size: 2em; padding: 5px; }
@media (max-width:512px) {
  li:first-child { color: cyan; background-color: lime; }
}
li:last-child { color:pink; background-color: blue; } 
  </style>
  
  <h2>Critical CSS</h2>
  <pre id=output></pre>
  <p>Note the last-child is not in the output because it is not visible (unless you have a huge monitor, in which case, shame on you, shrink your window).</p>
  <ol>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
    <li>TEST</li>
  </ol>
  
</body>
</html>
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
kinlanpro
0viewers