I want my website to work on text-based browsers like lynx
There's some part of the HTML that are useless in it like the profile photo
I tried the most upvoted solution put here Is there a HTML opposite to <noscript>?
which is
<head>
<noscript><style> .jsonly { display: none } </style></noscript>
</head>
However Lynx does not hide it
What I found to work is doing this
<body>
<noscript> <!-- </noscript>
<img src="foobar.png">
<noscript> --> </noscript>
</body>
This works and it seems to work on all browsers I have tested, i.e the image is hidden when javascript is disabled, and shown otherwise.
However I would like to know if it is a documented behaviour in HTML5 parser or if it's just an edge case that everybody has implemented the same way ?
It's guaranteed to work in every User Agent that does respect the HTML parsing rules, yes.
If you're ready to dive into this wonderful machinery...
Assuming the scripting flag is enabled, and we already processed the <body>
tag.
<noscript>
tag is emitted [text-fragment link],<
and switches to the RAWTEXT less-than sign state.!
character and goes back to the RAWTEXT state while emitting this character to the parser which just inserts it.<
character./
character and thus enters the RAWTEXT end tag open state.noscript
and finds the >
character.</noscript>
) is an appropriate end tag token.<img>
self-closing tag with all its attributes, until it meets the next <noscript>
tag, and pushes the -->
sequence in it as text.If the scripting flag was disabled though,
<noscript>
tag is met, we just insert an ordinary element out of it.<
character leads the tokenizer to the tag open state.!
one, to the markup declaration state.--
, to the comment state.-->
sequence will be part of the comment token that will get emitted to the parser and thus treated as text.</noscript>
token and inserts the current node, with the comment inside.