anglesharp

Add external css file to dom AngleSharp

I have an external CSS file that isn't referenced inside of the html file. Is it possible to add this CSS file and apply the styling to the html via AngleSharp on the fly?

Another work around I've thought of is actually inserting the reference to the CSS in the html before parsing it into the DOM but I wanted to know if AngleSharp provided the initial question before I implemented the "workaround". Thanks so much!

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Test Doc</title>

</head>

<body>
  <div id="styleme">
    Hello
  </div>

</body>
</html>

Notice no css is linked.

And the external css file:

#styleme {
  color:blue;
  background-color: gray;
}
Solution

  • Yes. There are actually multiple ways.

    I guess what you are looking for is:

    var config = Configuration.Default.WithCss();
// note: ideally load your document from a URL directly if applicable
var document = await BrowsingContext.New(config)
    .OpenAsync(res => res.Content(@"<!doctype html>
<html lang=en>
<head>
<meta charset='utf-8'>
<title>Test Doc</title>
</head>
<body>
<div id=styleme>
Hello
</div>
</body>
</html>"));
var style = document.CreateElement<IHtmlStyleElement>();
// note: if you have the CSS from a URL; choose IHtmlLinkElement instead
style.TextContent = @"#styleme { color:blue; background-color: gray; }";
document.Head.AppendChild(style);
// note: using LINQPad here; you may want to store the style somewhere
document.DefaultView.GetComputedStyle(document.QuerySelector("#styleme")).Dump();

    Hope that helps!