{“lastseen”:”2025-09-02T17:54:11″,”description”:”Ok. This one is niche. But heh, you might enjoy a dive into this esoteric corner of the web \u2013 I certainly did.\\n\\n## XSLT and browser support\\n\\nI want to get to the technical-fun bits quickly, so here’s a quick rundown:\\n\\n * XSLT is an XML language for transforming XML, including transforming it into non-XML formats, such as HTML.\\n * Browsers currently support a ~25 year old version of XSLT natively (examples coming up later).\\n * This feature is barely used. Usage is lower than features that were subsequently removed from browsers, such as mutation events and Flash.\\n * The feature is often the source of significant security issues.\\n\\n\\n\\nThis leaves browsers with a choice: Take development time away from features that have significant usage and developer demand, and instead use those resources to improve (probably rewrite) XSLT processing in browsers. Or, remove XSLT from browser engines.\\n\\nCurrently, Chrome, Safari, and Firefox support removing XSLT.\\n\\nIf you want to know more of the process \\u0026 history here, I recommend Eric Meyer’s blog post.\\n\\nRight, let’s take a look at XSLT and the alternatives.\\n\\n## How XSLT works\\n\\nTake some XML like this:\\n \\n \\n \\u003c?xml version=\\”1.0\\” encoding=\\”UTF-8\\”?\\u003e\\n \\u003c?xml-stylesheet type=\\”text\/xsl\\” href=\\”books.xsl\\”?\\u003e\\n \\u003cauthors\\u003e\\n \\u003cauthor\\u003e\\n \\u003cname\\u003eDouglas Adams\\u003c\/name\\u003e\\n \\u003cbook\\u003e\\n \\u003ctitle\\u003eThe Hitchhiker’s Guide to the Galaxy\\u003c\/title\\u003e\\n \\u003cgenre\\u003eScience Fiction Comedy\\u003c\/genre\\u003e\\n \\u003ccover\\u003ehttps:\/\/covers.openlibrary.org\/b\/isbn\/0330258648-L.jpg\\u003c\/cover\\u003e\\n \\u003c\/book\\u003e\\n \\u003cbook\\u003e\\n \u2026\\n \\u003c\/book\\u003e\\n \u2026\\n \\u003c\/author\\u003e\\n \\u003cauthor\\u003e\\n \\u003cname\\u003eGeorge Orwell\\u003c\/name\\u003e\\n \\u003cbook\\u003e\\n \u2026\\n \\u003c\/book\\u003e\\n \\u003c\/author\\u003e\\n \u2026\\n \\u003c\/authors\\u003e\\n\\nIf you visit that document, you’ll (for now, at least), see a grid of books, with formatting and images, and that’s all down to:\\n \\n \\n \\u003c?xml-stylesheet type=\\”text\/xsl\\” href=\\”books.xsl\\”?\\u003e\\n\\n\u2026which tells the browser to transform the XML using XSLT.\\n\\nHere’s the full source if you’re interested, but here’s the snippet that renders each book:\\n \\n \\n \\u003cxsl:template name=\\”book\\”\\u003e\\n \\u003cdiv class=\\”book\\”\\u003e\\n \\u003cimg class=\\”cover\\”\\u003e\\n \\u003cxsl:attribute name=\\”src\\”\\u003e\\n \\u003cxsl:value-of select=\\”cover\\” \/\\u003e\\n \\u003c\/xsl:attribute\\u003e\\n \\u003cxsl:attribute name=\\”alt\\” \/\\u003e\\n \\u003c\/img\\u003e\\n \\u003cdiv class=\\”book-info\\”\\u003e\\n \\u003cdiv\\u003e\\n \\u003cspan class=\\”title\\”\\u003e\\u003cxsl:value-of select=\\”title\\” \/\\u003e\\u003c\/span\\u003e\\n -\\n \\u003cspan class=\\”author\\”\\u003e\\u003cxsl:value-of select=\\”..\/name\\” \/\\u003e\\u003c\/span\\u003e\\n \\u003c\/div\\u003e\\n \\u003cdiv\\u003e\\n \\u003cspan class=\\”genre\\”\\u003e\\u003cxsl:value-of select=\\”genre\\” \/\\u003e\\u003c\/span\\u003e\\n \\u003c\/div\\u003e\\n \\u003c\/div\\u003e\\n \\u003c\/div\\u003e\\n \\u003c\/xsl:template\\u003e\\n\\nThis template maps a `\\u003cbook\\u003e` into a `\\u003cdiv class=\\”book\\”\\u003e`, although it reaches up into the parent `\\u003cauthor\\u003e` to get the author name.\\n\\nI used to write XSLT as part of my first job ~20 years ago. Making this demo felt _deeply weird_. I kinda love\/hate how you need to add _children_ to the usually-empty `\\u003cimg\\u003e` to set attributes.\\n\\nAnyway, assuming the above will stop working someday, what are the alternatives?\\n\\n## Styling XML\\n\\nIn some cases, you might get away with just styling XML, which you can do using:\\n \\n \\n \\u003c?xml-stylesheet type=\\”text\/css\\” href=\\”styles.css\\”?\\u003e\\n\\nNow you can style your XML document using regular CSS. Just make sure your document is served with `Content-Type: text\/xml` (rather than, e.g. a more specific RSS content type), otherwise the browser won’t use the styles.\\n\\nWhat you can do here is pretty limited. In the XSLT example, I take the text content of the `\\u003ccover\\u003e` element, and make it the `src` of an image. I also repeat the author’s `\\u003cname\\u003e` for each book. Neither of these is possible with CSS alone.\\n\\nAlso, the document will have the semantics of the XML document, which likely means \\”no semantics\\”, so the result will have poor accessibility. For example, even if your XML contains `\\u003ch1\\u003e`, unless you’ve told it to be an HTML element, the browser won’t recognise it as a heading.\\n\\nThat said, if you just want to catch users that mistakenly land on some XML, you can get away with something like this:\\n \\n \\n :root {\\n \\u0026 \\u003e * {\\n display: none;\\n }\\n \\n \\u0026::before {\\n content: ‘Hi there! This is my RSS feed. ‘\\n \\”It isn’t meant to be human-readable\u2026\\”;\\n }\\n }\\n\\nWhich is what I’ve done with my RSS feed.\\n\\nFor anything more complex, you need to do some kind of transformation of the source data.\\n\\n## Wait, do you really want to do this client-side?\\n\\nIn almost all cases, the best thing to do is convert your data to HTML on the server, or as part of a build process. When you do that:\\n\\n * The HTML form of your data is more likely to be seen by crawlers and scrapers.\\n * The browser can render the page in a streaming way, meaning a faster experience for users.\\n * You can use whatever tools you like to do the transformation \u2013 you aren’t limited to things the browser supports natively.\\n\\n\\n\\nThis might mean you end up with two published files, one for humans (as HTML), and one for machines (as XML or whatever). This is fine. My blog posts and my RSS feed are different resources, even though they have data in common. All my posts have this in the head:\\n \\n \\n \\u003clink\\n rel=\\”alternate\\”\\n type=\\”application\/rss+xml\\”\\n title=\\”Jake Archibald’s Blog\\”\\n href=\\”https:\/\/jakearchibald.com\/posts.rss\\”\\n \/\\u003e\\n\\n\u2026meaning feed readers can find the RSS feed from any post.\\n\\nBut if you really need to, here’s how to do the transformation on the client, without XSLT:\\n\\n## Transforming XML client-side without XSLT\\n\\nIf you just want to make some existing XSLT work in browsers that don’t support it, check out Mason’s XSLT polyfill. But if you don’t need to use XSLT, JavaScript is, in my opinion, a better option.\\n\\nHere’s a demo that produces the same result as the XSLT demo, but this time using JS. Here’s how it works\u2026\\n\\nIn the XML, instead of including XSLT, I include a script as the first child of the root:\\n \\n \\n \\u003cauthors\\u003e\\n \\u003cscript\\n xmlns=\\”http:\/\/www.w3.org\/1999\/xhtml\\”\\n src=\\”script.js\\”\\n defer=\\”\\”\\n \/\\u003e\\n \u2026\\n\\nThe `xmlns` attribute is important, as it tells the browser this is an HTML script element, rather than some other kind of XML element.\\n\\nTechnically, this is changing the data structure. Validating parsers would see a `\\u003cscript\\u003e` they weren’t expecting, and throw an error. However, most parsers are not validating, as they want to allow for extensions to whatever format they’re reading.\\n\\nThen, in that script:\\n \\n \\n \/\/ Get the XML data\\n const data = document.documentElement;\\n \/\/ Create an HTML root element\\n const htmlEl = document.createElementNS(\\n ‘http:\/\/www.w3.org\/1999\/xhtml’,\\n ‘html’,\\n );\\n \/\/ Swap the two over\\n data.replaceWith(htmlEl);\\n\\nNow all I had to do was populate that `html` element. I created a simple templating function. For example, here’s the snippet that renders each book:\\n \\n \\n const bookHTML = (bookEl) =\\u003e html`\\n \\u003cdiv class=\\”book\\”\\u003e\\n \\u003cimg\\n class=\\”cover\\”\\n src=\\”${bookEl.querySelector(‘:scope \\u003e cover’).textContent}\\”\\n alt=\\”\\”\\n \/\\u003e\\n \\u003cdiv class=\\”book-info\\”\\u003e\\n \\u003cdiv\\u003e\\n \\u003cspan class=\\”title\\”\\u003e\\n ${bookEl.querySelector(‘:scope \\u003e title’).textContent}\\n \\u003c\/span\\u003e\\n -\\n \\u003cspan class=\\”author\\”\\u003e\\n ${bookEl.parentNode.querySelector(‘:scope \\u003e name’).textContent}\\n \\u003c\/span\\u003e\\n \\u003c\/div\\u003e\\n \\u003cdiv\\u003e\\n \\u003cspan class=\\”genre\\”\\u003e\\n ${bookEl.querySelector(‘:scope \\u003e genre’).textContent}\\n \\u003c\/span\\u003e\\n \\u003c\/div\\u003e\\n \\u003c\/div\\u003e\\n \\u003c\/div\\u003e\\n `;\\n\\nIt’s very similar to the XSLT equivalent, _and_ it can be debugged using regular JavaScript tooling.\\n\\n### Ensure you’re creating _HTML_ elements\\n\\nOne gotcha when creating HTML in an XML document is it’s easy to accidentally create XML elements rather than HTML elements. If you want proper semantics, accessibility, and behaviour, you want real HTML elements.\\n\\nFor example:\\n \\n \\n \/\/ In an XML document this will not create an HTML element:\\n const xmlElement = document.createElement(‘h1’);\\n \/\/ Instead, you need to use:\\n const htmlElement = document.createElementNS(\\n ‘http:\/\/www.w3.org\/1999\/xhtml’,\\n ‘h1’,\\n );\\n\\nIf you’re using a framework to create the elements, check that it’s creating real HTML elements \u2013 `el.namespaceURI` should be `\\”http:\/\/www.w3.org\/1999\/xhtml\\”`.\\n\\nThe `xmlns` attribute we used earlier only works via the parser, so this _doesn’t_ create an HTML element in an XML document:\\n \\n \\n const h1 = document.createElement(‘h1’);\\n h1.setAttribute(‘xmlns’, ‘http:\/\/www.w3.org\/1999\/xhtml’);\\n\\nHowever, `innerHTML` and `setHTMLUnsafe` will assume the content is HTML, which is what I used:\\n \\n \\n htmlEl.setHTMLUnsafe(html`\\n \\u003chead\\u003e\\n \\u003ctitle\\u003eSome books\\u003c\/title\\u003e\\n \\u003cmeta name=\\”viewport\\” content=\\”width=device-width, initial-scale=1\\” \/\\u003e\\n \\u003c\/head\\u003e\\n \\u003cbody\\u003e\\n \\u003ch1\\u003eSome books\\u003c\/h1\\u003e\\n \\u003cul class=\\”book-list\\”\\u003e\\n ${[…data.querySelectorAll(‘book’)].map(\\n (book) =\\u003e html`\\u003cli\\u003e${bookHTML(book)}\\u003c\/li\\u003e`,\\n )}\\n \\u003c\/ul\\u003e\\n \\u003c\/body\\u003e\\n `);\\n\\nHere’s the full working demo, and the source. And that’s it! Wow you made it to the end. Huh. I didn’t think anyone would.”,”published”:”2025-09-02T01:00:00″,”modified”:”2025-09-02T01:00:00″,”type”:”jakearchibald”,”title”:”Making XML human-readable without XSLT”,”source”:””,”references”:””,”id”:”JAKEARCHIBALD:C64062E9787AB9C7165631FA89940F0C”,”bulletinFamily”:”blog”,”cwe”:null,”cvelist”:[],”sourceData”:””,”sourceHref”:””,”cvss”:{“score”:0,”severity”:”NONE”,”vector”:”NONE”,”version”:”NONE”},”cvss2″:{},”cvss3″:{“version”:””,”vectorString”:””,”baseScore”:0,”baseSeverity”:””,”attackVector”:””,”attackComplexity”:””,”privilegesRequired”:””,”userInteraction”:””,”scope”:””,”confidentialityImpact”:””,”integrityImpact”:””,”availabilityImpact”:””,”cvssV3″:{“version”:””,”vectorString”:””,”baseScore”:0,”baseSeverity”:””,”attackVector”:””,”attackComplexity”:””,”privilegesRequired”:””,”userInteraction”:””,”scope”:””,”confidentialityImpact”:””,”integrityImpact”:””,”availabilityImpact”:””}},”href”:”https:\/\/jakearchibald.com\/2025\/making-xml-human-readable-without-xslt\/”,”category_name”:”News”,”post_link”:””,”product”:””,”version”:””,”vendor”:””,”ai_description”:””,”ai_severity”:””,”ai_vendor”:””,”ai_product”:””,”ai_version”:””,”ai_score”:0}<\/p>\n","protected":false},"excerpt":{"rendered":"
{“lastseen”:”2025-09-02T17:54:11″,”description”:”Ok. This one is niche. But heh, you might enjoy a dive into this esoteric corner of the web \u2013 I certainly did.\\n\\n## XSLT and…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[6,8,12,161,13,33,7,11,5],"class_list":["post-15478","post","type-post","status-publish","format-standard","hentry","category-category_news","tag-cve","tag-cvss","tag-exploit","tag-jakearchibald","tag-news","tag-none","tag-security","tag-tapic","tag-vulnerability"],"yoast_head":"\n