SnappySnippet
Por fin he encontrado algo de tiempo para crear esta herramienta. Puede instalar SnappySnippet desde Chrome Web Store. Permite el fácil HTML+CSS extracción de especificada (última inspección) nodo DOM. Además, usted puede enviar su código directamente a CodePen o jsFiddle. ¡A disfrutar!
![SnappySnippet Chrome extension]()
Otras características
- limpia HTML (extracción de atributos innecesarios, la fijación de la sangría)
- optimiza CSS para hacerlo legible
- totalmente configurable (todos los filtros se puede desactivar)
- funciona con
:before y :after pseudo elementos
- interfaz de usuario agradable gracias a Bootstrap Y tv de interfaz de usuario de los proyectos
Código
SnappySnippet es de código abierto, y se puede encontrar el código en GitHub.
Aplicación
Ya he aprendido bastante mucho al hacer esto, he decidido compartir algunos de los problemas que yo he experimentado y mis soluciones para ellos, tal vez a alguien le resulte interesante.
Primer intento - getMatchedCSSRules
En primer lugar he intentado recuperar los originales de las reglas CSS (procedente de los archivos CSS en el sitio web). Bastante asombroso, este es muy sencillo gracias a window.getMatchedCSSRules, sin embargo, no salió bien. El problema era que estábamos tomando solo la parte de HTML y CSS selectores que fueron coincidentes en el contexto de todo el documento, no fueron coincidentes en el contexto de un fragmento de código HTML. Desde el análisis y la modificación de los selectores no parecía una buena idea, me dio hasta este intento.
Segundo intento - getComputedStyle
Entonces, he empezado a partir de algo que @CollectiveCognition sugirió - getComputedStyle. Sin embargo, yo realmente quería separar CSS formulario HTML en lugar de todos los estilos inline.
Problema 1 - la separación de HTML CSS
Aquí la solución no era muy hermosa, pero bastante sencillo. He asigna Identificadores a todos los nodos en el subárbol y utiliza el ID para crear las reglas CSS. Esto funcionó muy bien, sin embargo me enteré de que cada una de mis reglas CSS ha ~300 propiedades de decisiones de todo el CSS ilegible.
Problema 2 - la eliminación de las propiedades con valores por defecto
Resulta que getComputedStyle devuelve todas las posibles propiedades de CSS y valores calculados para determinado elemento. Algunos de ellos, donde vacíos, algunos tenían el navegador predeterminado de valores. Para eliminar los valores por defecto tenía que llegar a ellos desde el navegador (y cada marca tiene diferentes valores por defecto). La solución fue comparar los estilos de elemento procedente de la página web con el mismo elemento insertado en vacío de un iframe. La lógica aquí es que no hay hojas de estilo en vacío de un iframe para cada elemento he anexado había solamente navegador predeterminado estilos. De esta manera yo era capaz de deshacerse de la mayoría de las propiedades que eran insignificantes. La próxima cosa que me ha llamado la atención fue que las propiedades de haber abreviatura equivalente eran innecesariamente impreso (por ej. hubo border: solid black 1px y, a continuación, border-color: black;, border-width: 1px itd.).
Problema 3 - manteniendo únicamente la abreviatura propiedades
Para solucionar esto simplemente hemos creado una lista de las propiedades que han de taquigrafía equivalentes y filtrado de los resultados. Número de propiedades en cada regla fue significativamente menor después de esta operación, pero he encontrado que me alféizar de tener un montón de -webkit- prefijo propiedades que nunca he de escuchar (-webkit-app-region? -webkit-text-emphasis-position?).
Problema 4 - quitar el prefijo propiedades
Me preguntaba si debo seguir alguna de estas propiedades debido a que algunos de ellos parecía útil (-webkit-transform-origin, -webkit-perspective-origin etc.). No he averiguado cómo comprobar esto, sin embargo, y como yo sabía que la mayoría de las veces, estas propiedades son solo basura, me he decidido a eliminar a todos ellos. Siguiente problema que me ha llamado la atención fue que las mismas reglas CSS que se repiten una y otra (por ej. para cada <li>, con exactamente los mismos estilos, no era la misma regla en la salida de CSS creado).
Problema 5 - la combinación misma de reglas CSS
Esto era sólo una cuestión de comparar las reglas de uno con el otro y con la combinación de estos que tenían exactamente el mismo conjunto de propiedades y valores. Como resultado, en lugar de #LI_1{...}, #LI_2{...} llegué #LI_1, #LI_2 {...}. Desde que yo era feliz con el resultado, me mudé a HTML. Parecía un desastre, sobre todo porque outerHTML de la propiedad la mantiene con formato exactamente como fue devuelto desde el servidor.
Problema 6 - la limpieza y la fijación de la sangría de HTML
La única cosa código HTML tomado de outherHTML necesitaba era un simple código de volver a formatear. Ya que es algo disponibles en cada IDE yo estaba seguro de que no es una biblioteca de JavaScript que hace exactamente eso, y resulta que yo estaba en lo correcto (jquery-limpia). Lo que es más, tengo atributos innecesarios eliminación adicional (style, data-ng-repeat etc.).
Problema 7 - filtros de romper CSS
Ya que existe la posibilidad de que, en algunas circunstancias, los filtros mencionados anteriormente, se pueden romper CSS en el fragmento que he hecho todos ellos opcionales. Usted puede desactivar desde el menú de configuración.
