Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

XHTML5 compliance #428

Open
fuweichin opened this issue Apr 13, 2024 · 1 comment
Open

XHTML5 compliance #428

fuweichin opened this issue Apr 13, 2024 · 1 comment

Comments

@fuweichin
Copy link

fuweichin commented Apr 13, 2024 •
edited

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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@fuweichin and others