Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<h2>Background</h2> <p>The problem here is, that <code>price</code> is a <em>custom</em> attribute. Even though it's usable by almost all browsers per JavaScript the way you posted it, it's <strong>not</strong> a valid (X)HTML attribute, like <code>id</code> or <code>name</code> are, for example. </p> <p>The W3C validator validates your source code against the DTD (Document Type Definition) found in the <a href="http://www.w3.org/TR/REC-xml/#dt-doctype" rel="nofollow"><code>&lt;!DOCTYPE .. &gt;</code> declaration</a> of your document.</p> <p>Magento CE/EE 1.x versions use a <a href="http://www.w3.org/TR/xhtml1/dtds.html#a_dtd_XHTML-1.0-Strict" rel="nofollow">XHTML 1.0 Strict DTD</a> by default.</p> <p>A DTD declares which rules a document must follow to be valid for the given document type. It defines which element types are allowed, which attributes a specific element can have, which entities can be used, etc.</p> <p>If you check the linked DTD above, you'll see that there's no <code>price</code> attribute defined anywhere in the file. </p> <p>That's why the W3C validator rightfully complains <code>.. there is no attribute "price"</code>.</p> <h2>What can you do?</h2> <p>Mainly the following three things come to my mind on about how to handle such situation:</p> <h3>Ignore after double checking</h3> <p>You could simply ignore this (and only this) specific kind of W3C validation errors.</p> <p>I guess that's what most devs do with ".. there is no attribute attr_name" validation errors when they already double checked, that it's a custom attribute really in use and only failing W3C validation (using a pre-HTML5 DTD), but working completely fine otherwise.</p> <h3>Extend the DTD</h3> <p>You could extend the XHTML 1.0 Strict DTD, adding custom attributes to specific elements. </p> <p>Example on how to add a custom <code>price</code> attribute for <code>input</code> elements, using an internal subset:</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" [ &lt;!ATTLIST input price CDATA #IMPLIED&gt; ] &gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta http-equiv="Content-type" content="text/html;charset=UTF-8" /&gt; &lt;title&gt;Test&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;p&gt; &lt;input type="checkbox" class="checkbox product-custom-option" onclick="opConfig.reloadPrice()" name="options[21][]" id="options_21_2" value="27" price="0" /&gt; &lt;/p&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Containing this internal subset, the W3C validator will validate without errors. </p> <p><strong>But</strong>, most major browsers will render an ugly <code>]&gt;</code> as a result, when internal subsets come into play.</p> <p>Maybe, because they don't support nested tags (at all, or correctly), or maybe they switch to their hardwired DTDs as soon as they found an official one in the <code>&lt;!DOCTYPE .. &gt;</code>, I can't tell exactly.</p> <p>To avoid the <code>]&gt;</code>, you could build a <strong>custom DTD</strong>, using the original DTD as a base, extend it with custom attributes and change the <code>!&lt;DOCTYPE .. &gt;</code> to use that custom DTD.</p> <p>The crux with custom DTDs is, even though it's technically correct <em>and</em> the browsers won't render that ugly <code>]&gt;</code> anymore, you also can't use the W3C validator anymore. It doesn't support custom DTDs.</p> <p>So, if W3C compliance is a must, your only choice is to stay with internal subsets. But then you still need to get rid of the ugly <code>]&gt;</code> somehow. And to achieve this, you could use some CSS, e.g. similiar to this:</p> <pre><code>html { color: transparent; } </code></pre> <p>Be aware though, that extending DTDs can result in lots of work. You'll need to extend <strong>all</strong> element types where your custom attribute could appear. And you'd need to do this for <strong>each</strong> custom attribute, of course.</p> <h3>Use HTML5 <code>data-*</code> attributes</h3> <p>You could rewrite your Magento templates to use HTML5 and its <a href="http://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-%2a-attributes" rel="nofollow"><code>data-*</code> attributes</a>, a way where you only have to prefix custom attribute names with <code>data-</code> to make them perfectly valid.</p> <p>But since fully transferring Magento 1.x from XHTML 1.0 Strict to HTML5 would result in tons of complex work, I don't really consider this an option.</p> <p>Afaik, even Magento 2.x will <strong>not</strong> switch to HTML5, but continue to use XHTML 1.0 Strict.</p> <p>Maybe for the very same reason^^</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload