Wanting to in-line styles, the first port of call, not least given Chrome-based browsers seem to in-line styles when using Select and Copy, is to find an existing solution. Alas that search yielded no fruit.
Here are some options that a search on the web uncovers.
Looks sort of nice but oh so complicated. So many options. On the up side they do clarify that it can and does run client-side, and provide a test site:
And it in-lines
<style> tagged HTML wonderfully. Works well.
Immediately disconcerting is the npm documentation for this package. It says simply "Inspired by juice" and fails to tell us why the authors felt that embarking on a new project was worth their while. It hints at the fact that it's better than Juice in some way or other (why else start a new project inspired by it?), but lays no claim as to if or how that might be the case. A dark horse.
Still, it also depends on cheerio, and so falls a little short of a native solution but worse, it does not provide us with any suggestion as to run-context (server side or client side).
So for my needs, it goes respectfully into the too-hard basket. Failed, in a sense, by the poor quality of its own introductory presentation. An irony, because there is some nice documentation there, just not a nice introduction that spells out whether it runs client-side or not, how to if so, and how it's different from Juice and why we'd use it. All the obvious questions I have surfing in on it.
document.styleSheets provides us with a collection of
CSSStyleSheet.rules in turn provides all of the
CSSStyleRules in use and
Element.matches() tells us if
CSSStyleRule.selectorText applies to a given element.
window.getComputedStyle() provides rapid access to the complete set of computed styles. That is, crucially it has taken all those styles that position things relative to the browser window and calculated where, in real coordinates it landed. Among other things. Crucially, it also has resolved all of CSS variables. It describes what an element actually looks like on the screen, rather than in the abstract CSS.
We can use the style sheets and the computed styles to update the style attribute of each element and then, when all is done the
innerText and the
outerHTML are available for the the
text/html MIME parts respectively.
Given we're in-lining styles, and we don't want to actually change the element in the DOM (we're just aiming to copy it to the clipboard in one form or another), we have to take a copy of the DOM element and in-line the styles on that. We have to use the computed style from the source element however as it is rendered on screen and the copy is not (hence has not got computed styles). To wit, we will have a source and target element one that is in the DOM and provides computed styles, and one that is not in the DOM and receives in-lined style attributes.
But ... performance, performance ... turns out that it's not slow, but it's not fast either, let's take a look at performance next, before we dive into an actual code implementation of the above schema - next week's article.