Cloaking Stylesheet

There is heated debate in WordPress mailing list ( [wp-hackers] WP Theme Directory Submission Restrictions ). Its very petty issue regarding “link and import CSS” and new guideline for theme submission.

Frankly, I don’t have much opinion regarding this matters as Its kind of trivial making point with a programmer.

Trying to sort thing out I tested few methods on linking and embedding stylesheet. Below is few possible way to links a stylesheet in XHTML document.

1. Internal styles

   <style type="text/css">
   ...
   </style>

2. Internal styles using @import

   <style type="text/css">
    @import url('style.css')
   </style>

3. External Link

   <link rel="stylesheet" type="text/css" href="style.css">

4. External Link and @import

   This will work if the import statements is in first row or before any tag selector inside the external stylesheet.

   @import url('reset.css')
   @import url('typography.css')

5. xml-stylesheet

   Will work on browser that fully support “xhtml+xml”.

   <?xml-stylesheet href="style.css" type="text/css" ?>

6. Check out this page → Robot Exclusion Profile.

What you should know

• Doctype XHTML 1.0 strict.
• Content type “application/xhtml+xml” (will also work with text/html).
• Valid XHTML 1.0 Strict

If you view the document sources there is no internal/embed styles, inline styles or external link styles but the page do have a main stylesheet & its also conformed with w3c XHTML 1.0 specs.

Cross Browser Test

• Mozilla Firefox 2.x & 3 - render successfully parsed xhtml+xml
• Google Chrome 0.2.149.27 - not supported but parse xhtml+xml
• Opera 9.5 & 9.6 - render successfully and parsed xhtml+xml.
• Safari 3.11 (Win) - not supported but parse xhtml+xml
• MS Internet Explorer 6, 7 & 8b - quirks mode, failed

There is two major browser support this implementation Firefox & Opera.