Extraction des styles css du document html vers un fichier css externe

Question

Existe-t-il un moyen d'extraire des styles codés en dur dans des documents html vers un fichier css externe? Si non, avez-vous une idée sur la façon de le faire? L'avez-vous déjà fait auparavant?

Exemple, à partir de:

<div style="background-color: red"> 
<a style="font-weight: bold"></a> 
</div> 

à

<div id='st-01'> 
<a id='st-02'><a/> 
</div> 

#st-01 { background-color: red } 
#st-02 { font-weight: bold } 

Answer 1

Pas exactement ce que vous cherchez, mais si vous ne me dérange pas de copier-coller votre code HTML, essayez ceci. Pas trop de fonctionnalités mais ça fait le boulot!

http://extractcss.com/

https://github.com/peterlazzarino/Inline-CSS-Extractor

Answer 2

Vous pouvez utiliser un code JS/JQuery pour extraire les styles, les effacer, donner des éléments d'un ID et ajouter css. Vérifiez cet exemple, vous pouvez l'étendre davantage.

$(document).ready(function(){ 
    var i = 0; 
    var css = ""; 
    $("div,a").each(function(){ 
     $(this).attr("id","st-"+i); 
     css += "#"+$(this).attr("id")+"{"+$(this).attr("style")+"}"; 
     $(this).removeAttr("style"); 
     i++; 
    }); 
    $("style").html(css); 
}); 

http://jsfiddle.net/d8TaJ/