Canvas validation XHTML

问题

I am trying to validate my hxtml file but there is a problem with canvas element.

w3c errors

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<canvas id="canvas" width="500" height="250" style="background-color:#303030;" > </canvas>

Does anyone have any idea how to overcome it?

回答1:

As was said in the comments, using the doctype for HTML5 (<!DOCTYPE html>) is the sane choice.

However, it might be you're stuck with XHTML 1 for whatever reason. One such reason could be, because XHTML 1 has a real DTD, it supports the use of entity references like   and þ. (XHTML5 doesn't have such luxury!)

If so, you might have noticed that the browsers already support newer elements like canvas, so you don't really have to do anything to make it work. All you need to do is satisfy the validator!

So here's the trick. All you need to do is add the newer elements to the doctype declaration, as if they were part of the DTD.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"
   [
     <!ELEMENT canvas EMPTY>
     <!ATTLIST canvas
     id          ID             #IMPLIED
     class       CDATA          #IMPLIED
     style       CDATA          #IMPLIED
     title       CDATA          #IMPLIED
     lang        CDATA          #IMPLIED
     xml:lang    CDATA          #IMPLIED
     dir         (ltr|rtl)      #IMPLIED
     onclick     CDATA          #IMPLIED
     ondblclick  CDATA          #IMPLIED
     onmousedown CDATA          #IMPLIED
     onmouseup   CDATA          #IMPLIED
     onmouseover CDATA          #IMPLIED
     onmousemove CDATA          #IMPLIED
     onmouseout  CDATA          #IMPLIED
     onkeypress  CDATA          #IMPLIED
     onkeydown   CDATA          #IMPLIED
     onkeyup     CDATA          #IMPLIED
     height      CDATA          #IMPLIED
     width       CDATA          #IMPLIED
     >
     <!ENTITY % InlSpecial.class
     " | audio | canvas | embed | iframe | img | math | object | svg | video">
   ]
>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
 <head>
  <title>Element test</title>
 </head>
 <body>
  <div>
   <canvas id="canvas" width="500" height="250" style="background-color:#303030;"></canvas>
  </div>
 </body>
</html>

By the way, if you think this is a bit much, remember that you only need to do this to satisfy the validator, so you can remove all attributes from the ATTLIST except the ones you're actually using (in your example, id, width, height and style).

来源：https://stackoverflow.com/questions/37675308/canvas-validation-xhtml

标签

html5

canvas

xhtml-1.0-strict