Insertar CSS en C#
Necesito insertar css desde una hoja de estilos en c#.
Como cómo funciona esto.
Http://www.mailchimp.com/labs/inlinecss.php
El css es simple, solo clases, sin selectores de fantasía.
Estaba contemplando usar una expresión regular (?<rule>(?<selector>[^{}]+){(?<style>[^{}]+)})+ para eliminar las reglas del css, y luego intentar hacer un reemplazo de cadena simple donde se llaman las clases, pero algunos de los elementos html ya tienen una etiqueta de estilo, así que tendría que tener en cuenta eso también.
Es hay un enfoque más sencillo? O algo ya escrito en c#?
ACTUALIZACIÓN - Sep 16, 2010
He sido capaz de llegar a un simple CSS inliner siempre que su html es también xml válido. Utiliza una expresión regular para obtener todos los estilos en su elemento <style />. A continuación, convierte los selectores css en expresiones xpath y añade el estilo inline a los elementos coincidentes, antes que cualquier estilo inline preexistente.
Tenga en cuenta que el CssToXpath no está completamente implementado, hay algunas cosas que solo no puedo hacerlo... aun.
CssInliner.cs
using System.Collections.Generic;
using System.Text.RegularExpressions;
using System.Xml.Linq;
using System.Xml.XPath;
namespace CssInliner
{
public class CssInliner
{
private static Regex _matchStyles = new Regex("\\s*(?<rule>(?<selector>[^{}]+){(?<style>[^{}]+)})",
RegexOptions.IgnoreCase
| RegexOptions.CultureInvariant
| RegexOptions.IgnorePatternWhitespace
| RegexOptions.Compiled
);
public List<Match> Styles { get; private set; }
public string InlinedXhtml { get; private set; }
private XElement XhtmlDocument { get; set; }
public CssInliner(string xhtml)
{
XhtmlDocument = ParseXhtml(xhtml);
Styles = GetStyleMatches();
foreach (var style in Styles)
{
if (!style.Success)
return;
var cssSelector = style.Groups["selector"].Value.Trim();
var xpathSelector = CssToXpath.Transform(cssSelector);
var cssStyle = style.Groups["style"].Value.Trim();
foreach (var element in XhtmlDocument.XPathSelectElements(xpathSelector))
{
var inlineStyle = element.Attribute("style");
var newInlineStyle = cssStyle + ";";
if (inlineStyle != null && !string.IsNullOrEmpty(inlineStyle.Value))
{
newInlineStyle += inlineStyle.Value;
}
element.SetAttributeValue("style", newInlineStyle.Trim().NormalizeCharacter(';').NormalizeSpace());
}
}
XhtmlDocument.Descendants("style").Remove();
InlinedXhtml = XhtmlDocument.ToString();
}
private List<Match> GetStyleMatches()
{
var styles = new List<Match>();
var styleElements = XhtmlDocument.Descendants("style");
foreach (var styleElement in styleElements)
{
var matches = _matchStyles.Matches(styleElement.Value);
foreach (Match match in matches)
{
styles.Add(match);
}
}
return styles;
}
private static XElement ParseXhtml(string xhtml)
{
return XElement.Parse(xhtml);
}
}
}
CssToXpath.cs
using System.Text.RegularExpressions;
namespace CssInliner
{
public static class CssToXpath
{
public static string Transform(string css)
{
#region Translation Rules
// References: http://ejohn.org/blog/xpath-css-selectors/
// http://code.google.com/p/css2xpath/source/browse/trunk/src/css2xpath.js
var regexReplaces = new[] {
// add @ for attribs
new RegexReplace {
Regex = new Regex(@"\[([^\]~\$\*\^\|\!]+)(=[^\]]+)?\]", RegexOptions.Multiline),
Replace = @"[@$1$2]"
},
// multiple queries
new RegexReplace {
Regex = new Regex(@"\s*,\s*", RegexOptions.Multiline),
Replace = @"|"
},
// , + ~ >
new RegexReplace {
Regex = new Regex(@"\s*(\+|~|>)\s*", RegexOptions.Multiline),
Replace = @"$1"
},
//* ~ + >
new RegexReplace {
Regex = new Regex(@"([a-zA-Z0-9_\-\*])~([a-zA-Z0-9_\-\*])", RegexOptions.Multiline),
Replace = @"$1/following-sibling::$2"
},
new RegexReplace {
Regex = new Regex(@"([a-zA-Z0-9_\-\*])\+([a-zA-Z0-9_\-\*])", RegexOptions.Multiline),
Replace = @"$1/following-sibling::*[1]/self::$2"
},
new RegexReplace {
Regex = new Regex(@"([a-zA-Z0-9_\-\*])>([a-zA-Z0-9_\-\*])", RegexOptions.Multiline),
Replace = @"$1/$2"
},
// all unescaped stuff escaped
new RegexReplace {
Regex = new Regex(@"\[([^=]+)=([^'|""][^\]]*)\]", RegexOptions.Multiline),
Replace = @"[$1='$2']"
},
// all descendant or self to //
new RegexReplace {
Regex = new Regex(@"(^|[^a-zA-Z0-9_\-\*])(#|\.)([a-zA-Z0-9_\-]+)", RegexOptions.Multiline),
Replace = @"$1*$2$3"
},
new RegexReplace {
Regex = new Regex(@"([\>\+\|\~\,\s])([a-zA-Z\*]+)", RegexOptions.Multiline),
Replace = @"$1//$2"
},
new RegexReplace {
Regex = new Regex(@"\s+\/\/", RegexOptions.Multiline),
Replace = @"//"
},
// :first-child
new RegexReplace {
Regex = new Regex(@"([a-zA-Z0-9_\-\*]+):first-child", RegexOptions.Multiline),
Replace = @"*[1]/self::$1"
},
// :last-child
new RegexReplace {
Regex = new Regex(@"([a-zA-Z0-9_\-\*]+):last-child", RegexOptions.Multiline),
Replace = @"$1[not(following-sibling::*)]"
},
// :only-child
new RegexReplace {
Regex = new Regex(@"([a-zA-Z0-9_\-\*]+):only-child", RegexOptions.Multiline),
Replace = @"*[last()=1]/self::$1"
},
// :empty
new RegexReplace {
Regex = new Regex(@"([a-zA-Z0-9_\-\*]+):empty", RegexOptions.Multiline),
Replace = @"$1[not(*) and not(normalize-space())]"
},
// |= attrib
new RegexReplace {
Regex = new Regex(@"\[([a-zA-Z0-9_\-]+)\|=([^\]]+)\]", RegexOptions.Multiline),
Replace = @"[@$1=$2 or starts-with(@$1,concat($2,'-'))]"
},
// *= attrib
new RegexReplace {
Regex = new Regex(@"\[([a-zA-Z0-9_\-]+)\*=([^\]]+)\]", RegexOptions.Multiline),
Replace = @"[contains(@$1,$2)]"
},
// ~= attrib
new RegexReplace {
Regex = new Regex(@"\[([a-zA-Z0-9_\-]+)~=([^\]]+)\]", RegexOptions.Multiline),
Replace = @"[contains(concat(' ',normalize-space(@$1),' '),concat(' ',$2,' '))]"
},
// ^= attrib
new RegexReplace {
Regex = new Regex(@"\[([a-zA-Z0-9_\-]+)\^=([^\]]+)\]", RegexOptions.Multiline),
Replace = @"[starts-with(@$1,$2)]"
},
// != attrib
new RegexReplace {
Regex = new Regex(@"\[([a-zA-Z0-9_\-]+)\!=([^\]]+)\]", RegexOptions.Multiline),
Replace = @"[not(@$1) or @$1!=$2]"
},
// ids
new RegexReplace {
Regex = new Regex(@"#([a-zA-Z0-9_\-]+)", RegexOptions.Multiline),
Replace = @"[@id='$1']"
},
// classes
new RegexReplace {
Regex = new Regex(@"\.([a-zA-Z0-9_\-]+)", RegexOptions.Multiline),
Replace = @"[contains(concat(' ',normalize-space(@class),' '),' $1 ')]"
},
// normalize multiple filters
new RegexReplace {
Regex = new Regex(@"\]\[([^\]]+)", RegexOptions.Multiline),
Replace = @" and ($1)"
},
};
#endregion
foreach (var regexReplace in regexReplaces)
{
css = regexReplace.Regex.Replace(css, regexReplace.Replace);
}
return "//" + css;
}
}
struct RegexReplace
{
public Regex Regex;
public string Replace;
}
}
Y algunas pruebas
[TestMethod]
public void TestCssToXpathRules()
{
var translations = new Dictionary<string, string>
{
{ "*", "//*" },
{ "p", "//p" },
{ "p > *", "//p/*" },
{ "#foo", "//*[@id='foo']" },
{ "*[title]", "//*[@title]" },
{ ".bar", "//*[contains(concat(' ',normalize-space(@class),' '),' bar ')]" },
{ "div#test .note span:first-child", "//div[@id='test']//*[contains(concat(' ',normalize-space(@class),' '),' note ')]//*[1]/self::span" }
};
foreach (var translation in translations)
{
var expected = translation.Value;
var result = CssInliner.CssToXpath.Transform(translation.Key);
Assert.AreEqual(expected, result);
}
}
[TestMethod]
public void HtmlWithMultiLineClassStyleReturnsInline()
{
#region var html = ...
var html = XElement.Parse(@"<html>
<head>
<title>Hello, World Page!</title>
<style>
.redClass {
background: red;
color: purple;
}
</style>
</head>
<body>
<div class=""redClass"">Hello, World!</div>
</body>
</html>").ToString();
#endregion
#region const string expected ...
var expected = XElement.Parse(@"<html>
<head>
<title>Hello, World Page!</title>
</head>
<body>
<div class=""redClass"" style=""background: red; color: purple;"">Hello, World!</div>
</body>
</html>").ToString();
#endregion
var result = new CssInliner.CssInliner(html);
Assert.AreEqual(expected, result.InlinedXhtml);
}
Hay más pruebas, pero, importan archivos html para la entrada y la salida esperada y no estoy publicando todo eso!
Pero debería publicar los métodos de extensión Normalizar!
private static readonly Regex NormalizeSpaceRegex = new Regex(@"\s{2,}", RegexOptions.None);
public static string NormalizeSpace(this string data)
{
return NormalizeSpaceRegex.Replace(data, @" ");
}
public static string NormalizeCharacter(this string data, char character)
{
var normalizeCharacterRegex = new Regex(character + "{2,}", RegexOptions.None);
return normalizeCharacterRegex.Replace(data, character.ToString());
}
8 answers
Dado que ya está en el 90% del camino con su implementación actual, ¿por qué no usa su marco existente y reemplaza el análisis XML con un analizador HTML en su lugar? Uno de los más populares es el HTML Agility Pack. Soporta consultas XPath e incluso tiene una interfaz LINQ similar a la interfaz estándar. NET proporcionada para XML por lo que debería ser un reemplazo bastante sencillo.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-11-23 22:39:07
Tengo un proyecto en Github que hace CSS en línea. Es muy simple y admite estilos móviles. Leer más en mi blog: http://martinnormark.com/move-css-inline-premailer-net
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-06-10 11:06:05
Excelente pregunta.
No tengo idea si hay una solución. NET, pero encontré un programa Ruby llamado Premailer que afirma que CSS en línea. Si quieres usarlo tienes un par de opciones:
- Reescribir Premailer en C# (o cualquier lenguaje. NET que esté familiarizado)
- Use IronRuby para ejecutar Ruby en. NET
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-09-09 18:28:04
Recomiendo usar un analizador CSS real en lugar de expresiones regulares. No es necesario analizar el lenguaje completo ya que está interesado principalmente en la reproducción, pero en cualquier caso estos analizadores están disponibles (y para.NET también). Por ejemplo, echa un vistazo a la lista de gramáticas de antlr, específicamente una gramática CSS 2.1 o una gramática CSS3. Posiblemente puede quitar grandes partes de ambas gramáticas si no le importa resultados subóptimos en los que los estilos en línea pueden incluir duplicados definiciones, pero para hacer esto bien, necesitarás alguna idea de de la lógica CSS interna para poder resolver atributos abreviados.
En el largo plazo, sin embargo, esto sin duda será un mucho menos trabajo que una serie interminable de correcciones de expresiones regulares adhoc.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-09-22 09:10:33
Aquí hay una idea, ¿por qué no hacer una llamada post a http://www.mailchimp.com/labs/inlinecss.php usando c#. del análisis usando firebug parece que la llamada post necesita 2 parámetros html y strip que toma valores (on/off) el resultado es un parámetro llamado text.
Aquí hay un ejemplo de cómo hacer una post call usando c #
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-09-16 07:48:44
Chad, ¿necesariamente tiene que agregar el CSS en línea? ¿O podrías estar mejor agregando un bloque <style> a tu <head>? Esto en esencia reemplazará la necesidad de una referencia a un archivo CSS, además de mantener la regla de que las reglas en línea reales anulan las establecidas en el encabezado/archivo CSS referenciado.
(lo siento, olvidé agregar las comillas para el código)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-09-16 13:00:09
Yo recomendaría un dictonario como este:
private Dictionary<string, Dictionary<string, string>> cssDictionary = new Dictionary<string, Dictionary<string, string>();
Me gustaría analizar el css para llenar este cssDictionary.
(Añadiendo 'style-type', 'style-property', 'value'. En el ejemplo:
Dictionary<string,string> bodyStyleDictionary = new Dictionary<string, string();
bodyStyleDictionary.Add("background", "#000000");
cssDictionary.Add("body", bodyStyleDictionary);
Después de eso, preferiría convertir el HTML en un XmlDocument.
Puede correr recursivamente a través de los nodos de documentos por sus hijos y también buscar sus padres (esto incluso le permitiría usar selectores).
En cada elemento se comprueba el tipo de elemento, la identificación y la clase. A continuación, navegue por el cssDictionary para agregar cualquier estilo para este elemento al atributo style (Concedido, es posible que desee colocarlos en orden de ocurrencia si tienen propiedades superpuestas (Y agregar los estilos en línea existentes el último).
Cuando haya terminado, emite el XmlDocument como una cadena y elimina la primera línea (<?xml version="1.0"?>) Esto debería dejarle con un documento html válido con css en línea.
Claro, puede que parezca un truco, pero al final creo que es una solución bastante sólida que garantiza la estabilidad y hace lo que parece estar buscando.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-09-16 14:12:33
Como esta opción no está muy clara en las otras respuestas, creo que merece una respuesta directa.
Use PreMailer.Net.
Todo lo que tienes que hacer es:
- Instalar PreMailer.NET via nuget.
-
Escriba esto:
var inlineStyles = PreMailer.Net.PreMailer.MoveCssInline(htmlSource, false); destination = inlineStyles.Html;
¡Y ya está!
Por cierto, es posible que desee agregar una directiva using para acortar esa línea.
Más información de uso en el enlace de arriba, por supuesto.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-05 22:32:50