Code validation is gaining more importance these days. HTML coders and their clients want to know that their code is done correctly. While the debate over standards and validation is a large one, the Spry team has taken steps to ensure that Spry pages will pass W3C validation.
The W3C recommends a couple methods for extending XHTML to encapsulate custom attributes. One is adding new attribute declarations to the actual page. Another is using a custom Document Type Declaration (DTD). The Spry team wrote a custom DTD that can be appended to the doc type declaration at the top of the Spry page. This will cause the validator to pull in the linked DTD and use it in conjunction with the original DTD. This will ensure that Spry attributes validate correctly.
Further, the Spry DTD will help ensure that your Spry attributes are being used correctly. For instance, spry:repeat is allowed on some tags that spry:region is not (<table> for instance). The validator should show when spry attributes are used incorrectly.
First, a bit about basic validation. Below is a typical doc type declaration. The doc type is typically the first line of the HTML page that is delivered to the client. The validator looks at the URL of the DTD: http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd and uses that as the baseline for validation. The URL, in this case, points to the XHTML transitional DTD. This DTD lists all the rules to which this page need subscribe. There are different DTDs for different page types. For instance the strict DTD (http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd) doesn't allow some attributes that are deprecated in HTML 4.
DTDs are meant to be machine readable, not human readable, but take a look at one and see how they are put together.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry"> ... </html>
A bit about name spacing. Notice the Spry name space: xmlns:spry="http://ns.adobe.com/spry". This is added to pages that use Spry attributes. This name space declaration tells the browser that there are attributes that start with 'spry' on the page. This helps prevent conflicts with standard XHTML attributes, or other custom attributes from other name spaces that may be used in the page This doesn't help with validation but it is best practice to include it. You can read more about name spacing. here: http://en.wikipedia.org/wiki/XML_Namespaces. Pages that use Spry widgets or effects do not need this name space declaration. There is no requirement that there be a document at the name space URL and, if there is a document, there is no requirement as to its contents. It can be whatever the writer wishes: human or machine readable.
A note about Spry widgets and validation: In our samples, and in the code that Dreamweaver CS3 generates, we use the 'tabindex' attribute to enable keyboard navigation between areas in our widgets, like Tabbed Panel and Collapsible Panel. The Spry team chose to do this to enhance accessibility in our widgets. While using tab index on non-form elements is technically invalid, IE and Mozilla-based browsers support using tabindex on other page elements specifically for accessibility concerns. <a> tags can be used instead to allow tabbing if so desired, and tabindex can be removed from any widget without affecting base functionality.
In order to extend the doc type so that the page validates correctly, we need to add code to the original doc type. The example below shows how to do so.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
[
<!ENTITY % SPRY SYSTEM "http://www.adobe.com/dtd/spry.dtd">
%SPRY;
]>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
...
</html>
The <!ENTITY> line has the URL to the custom DTD. This is an absolute link to the Spry DTD on adobe.com: http://www.adobe.com/dtd/spry.dtd".
The '%SPRY;' line is the code that actually tells the validator to use it on this page. If that piece of code is missing, the page will not validate. The square brackets are also required.
Now, the page should fully validate when running it through the W3C validator: http://validator.w3.org/.
Ah..but you probably noticed the problem. Sure the page validates, but in the browser, there is code at the top of the page that looks like:
%SPRY; ]>
The trouble is that most browsers get confused by the ENTITY tag and and think the doc type is closed at that point. Therefore, the trailing snippet of code renders in most browsers. While Opera 9 handles it correctly, IE, Firefox and Safari all fail.
This is a browser bug and currently there is no fix for it, despite the code being strictly correct.
So, if you need to ensure validation, add the entity extension. If you then need the page to look correct, remove it when going live.
We will update this page as needed if this changes.
Copyright © 2006. Adobe Systems Incorporated. All rights reserved