Inline CSS - The Link "Cheat"
By @edent
· css HTML Web Development · 4 comments · 300 words
I am a bear of very little brains sometimes.
I had a site which, for various boring reasons, was printing a <style> element in the middle of the HTML's body. Because <style> is a metadata element, it should only appear within the <head> element.
This is OK:
HTML
<!doctype html>
<html>
<head>
<style> a { color: #f00; } </style>
</head>
<body>
…
This is an error:
<!doctype html>
<html>
<head>
</head>
<body>
<style> a { color: #f00; } </style>
…
Most modern browsers will parse the stylesheet and not complain. But I like doing things properly and to spec because I am a massive boring nerd who is no fun at parties.
There is another way to include CSS in a document - via the <link> element.
<link rel="stylesheet" type="text/css" href="https://example.com/style.css">
It is sometimes OK to have a <link> element in the <body> - but can you spot the problem? Yes! The href points to an external resource. That's no good because we want to put the CSS inline.
The href needs to point to a URl. But it can point to a data URl!!!!
So, if the CSS is first Base64 encoded, it's possible to place inline CSS within the body of the HTML document!!!!!!!
<!doctype html>
<html>
<head>
</head>
<body>
<link rel="stylesheet" type="text/css" href="data:text/css;base64,Q29uZ3JhdHVsYXRpb25zISBZb3UgZm91bmQgbXkgc2VjcmV0IG1lc3NhZ2UhIFlvdSByZWNlaXZlICs1IEludGVybmV0IHBvaW50cy4=">
…
This also works with URl encoding, if you prefer that, thusly:
<!doctype html>
<html>
<head>
</head>
<body>
<link rel="stylesheet" type="text/css" href="data:text/css,%2F%2A%0AThis%20is%20my%20CSS%0A%2A%2F%0Aa%20%20%7Bfont-family%3Amonospace%3B%7D">
…
Obviously, the correct thing to do is to change your rendering path so that the styles are all placed within the correct metadata section of the document. But, if you need to, this will work across all browsers in a standards compliant way.
Colin Wright says:
This renders wondrously badly in my webmail reader.
Do you want screenshots? I can\'t see it being of any value, but you might want the giggle(*)
cdw
@edent says:
I'm always up for seeing bad formatting 😆
Rik says:
Is the style complicated? Or is it "I just need to do this one style in a couple of places in this specific document, and it's not complicated"? Because that seems to be my deciding factor on just doing an
hello world
type deal.
@edent says:
Yeah, this was for a few dozen lines which only needed to be in a few documents.
More comments on Mastodon.