Convert HTML's CSS Attr to Plain Easy to Read CSS

1 post Page 1 of 1
Contributors
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

You can give it a go here and tinker with the code if you like - http://codepen.io/mikethedj4/pen/BCJun

Some people still add css to their html, and want to clean it up. So today I made a simple cleaner to help you through that. Enjoy!

Full Code:
Code: Select all
<!DOCTYPE html>
<html>
<head>
<title>Clean my CSS</title>
<meta charset='utf-8'>
<meta name='viewport' content='initial-scale=1.0'>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js'></script>>
<style type="text/css">
html, body { margin:0; padding:0; overflow:hidden; }
* { border:0; outline:0; padding:0; margin:0; resize:none; }
.hide { width:0; height:0; overflow:hidden; display:none; }
.left, .right { position:absolute; top:0; width:50%; height:100%; font: 14px arial;}
.left { left:0; color: #623d4f; }
.right { right:0; color: #000; }
</style>
<script type='text/javascript'>
$(function() {
  $('.cleanup *').css('border-radius', $('.border-radius').val() + 'px');
  $('.cleanup').html($('.convert').val());
  $('.code').val($('.cleanup *').attr('style').replace(/;\s?/g,";\n"));
  
  $('.convert').on('keyup', function() {
    $('.cleanup *').css('border-radius', $('.border-radius').val() + 'px');
    $('.cleanup').html($(this).val());
    $('.code').val($('.cleanup *').attr('style').replace(/;\s?/g,";\n"));
  });
  
  $('.code').on('click', function() {
    $(this).select();
  });
});
</script>
</head>
<body>
  <div class="hide cleanup"></div>
  <textarea class="left convert" placeholder="Put CSS Here"><div style="display: inherit; position: absolute; top: 20px; left: 19px; margin: 10px; width: 340px; height: 234px; padding: 1em; font-style: normal; font-variant: normal; font-weight: normal; font-size: 14px; font-family: arial; line-height: normal; color: rgb(255, 255, 255); border: 0px dashed rgb(0, 255, 255); border-top-left-radius: 0em; border-top-right-radius: 0em; border-bottom-right-radius: 0em; border-bottom-left-radius: 0em; background-color: rgb(0, 34, 102); text-shadow: rgb(255, 255, 255) 0px 0px 8px; overflow: visible; z-index: 0;">Hello World!</div></textarea>
  <textarea class="right code" placeholder="Clean CSS Goes Here" readonly></textarea>
</body>
</html>
1 post Page 1 of 1
Return to “Tutorials”