search

liriliri / eruda

Console for mobile browsers
https://eruda.liriliri.io
MIT License
18.04k stars 1.16k forks source link

XHTML5 compliance #428

Open fuweichin opened 2 months ago

fuweichin commented 2 months ago

XHTML5 is a common set of XHTML and HTML5, it should be declared with XHTML namespace (xmlns="http://www.w3.org/1999/xhtml"), served with XHTML mime type ("application/xhtml+xml") or opened with ".xhtml" filename extension.

HTML changes to ensure XHTML5 compliance:

  1. modify HTML boolean attributes, e.g. replace selected with selected="selected" or selected=""
  2. escape & in attribute value as &, avoid use of HTML-specific named entities like   ©
  3. add self-closing slash for void elements. e.g. replace <br> with <br/>

JavaScript changes to avoid potential bugs:

  1. Check element.tagName, element.nodeName with caution since they may be in uppercase for HTML5 but in lowercase for XHTML5
  2. Tell XHTML5 mode by checking document.contentType === 'application/xhtml+xml'
  3. To debug and locate syntax error reason when setting element.innerHTML, use try...catch and log the html to-be-set

Known locations to be changed:

  1. eruda/src/Info/defInfo.js:51 replace }&exclude=true"></a> with }&amp;exclude=true" /></a>
  2. luna/src/setting/index.ts:449 insert .join('') for map() return value
  3. luna/src/setting/index.ts:596 replace ' selected' with ' selected="selected"'
  4. luna/src/setting/index.ts optionally, replace all ></input> with />

HTML-syntax

XHTML5 Compliance Test page

test.xhtml

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>XHTML5 Compliance Test</title>
</head>
<body>
<p id="message">This is an XHTML5 document</p>

<script>
document.querySelector('#message').textContent += ' served with MIME ' + document.contentType;

// if (navigator.userAgent.includes('Mobile') || !('onmousedown' in window))
{
  let script = Object.assign(document.createElement('script'), {
    onload: () => { /* global eruda */
      eruda.init({
        container: document.body.appendChild(document.createElement('div')),
        tool: ['console', 'info']
      });
      console.log('initialized eruda');
    },
    async: false,
    src: '../dist/eruda.js'
  });
  document.body.append(script);
}
</script>

</body>
</html>