<div>Proposing &lt;nostyle&gt; in the spirit of &lt;noscript&gt;</div><div><br></div><div><br></div><div>Examples</div><div>--------</div><div><br></div><div>1) Head Usage</div><div><br></div><div>&lt;nostyle&gt;</div><div>
�&lt;meta http-equiv=&quot;Refresh&quot; content=&quot;0;url=/errors/stylerequired.html&quot;&gt;</div><div>&lt;/nostyle&gt;</div><div><br></div><div><br></div><div>2) Body Usage</div><div><br></div><div>&lt;nostyle&gt;</div>
<div>�&lt;h2&gt;Warning: Styles required for correct rendering&lt;/h2&gt;</div><div>&lt;/nostyle&gt;</div><div><br></div><div><br></div><div>The Obvious Push Back</div><div>---------------------</div><div><br></div><div>Why bother? You can just do this�</div>
<div><br></div><div>.nostyle {display: none;}</div><div><br></div><div>&lt;h2 class=&quot;nostyle&quot;&gt;Warning: Styles required for correct rendering&lt;/h2&gt;</div><div><br></div><div><br></div><div>And yes while that is true and for many situations will work fine, there are other cases you won&#39;t and you can get a sloppy or even bad results because of rendering engine paths. �For example, because style is not applied until later you have an issue here</div>
<div><br></div><div><br></div><div>�&lt;h2 class=&quot;nostyle&quot;&gt;&lt;img src=&quot;error.gif&quot;&gt;Warning: Styles required for correct rendering&lt;/h2&gt;</div><div><br></div><div><br></div><div>The network request happens regardless of situation no assuming images on. �This of course makes the idea of�</div>
<div>��</div><div><br></div><div>�&lt;h2 style=&quot;display:none;&quot;&gt;&lt;img src=&quot;error.php?style=off&quot;&gt;Warning: Styles required for correct rendering&lt;/h2&gt;</div><div><br></div><div>kind of useless. �</div>
<div><br></div><div>Obviously detecting style availability is no problem using JavaScript, just measure some style region or compute a style. �However, in the absence of JavaScript it is actually somewhat of a challenge to detect this case you have to look for dependent requests as a clue like some style only available background-image or something.</div>
<div><br></div><div>These corner cases aren&#39;t�necessarily�the main concerns, a serious motivation for this element is also because of some of the nonsense I am observing with background-image and content property near abuse by CSS wonks. �It appears that there is a fairly decent sized camp of CSS for everything and this element might help mitigate some problems stemming from this. �For example, using the content property can be somewhat troubling if style is removed. �For example, consider what happens if you are putting in field required indicators</div>
<div><br></div><div>input[type=text].required:before {content: &quot; (*) &quot;}</div><div><br></div><div>or for offsite links�</div><div><br></div><div>a[href^=&quot;http://&quot;]:after {content:&#39; ( Offsite Link )&#39;;}</div>
<div><br></div><div>or any other dynamic insert this way. �In my book effort I am seeing tremendous interest in the design community with such rules. �Without style you lose valuable data and there is no easy recourse to present this situation at least not one without using JavaScript. �At least having warnings via a nostyle element would be assisitive in informing users that this isn&#39;t quite right and in some cases I might dream up helpful for accessibility in light of too much CSS abuse.</div>
<div><br></div><div><br>Just an aside: The content property is the CSS cousin of document.write if you think about it, useful but problematic.</div><div><br></div><div><br></div><div>So given that noscript correctly acts in masking content for user agents supporting and not for those off or unsupporting, the nostyle element seems like a quite logical solution for the other technology key client-side tech.</div>
<div><br></div><div>Anyway if this were an acceptable addition, tag syntax would be quite simple would only have common attributes, pretty basic replication of noscript prose in the specification. �Though of course this is one element that would require browser changes, no quick simulation with JS.</div>
<div><br></div><div><br></div><div>Comments?</div><div><br></div><div><br></div><div>-Thomas Powell</div><div><br></div><div><br></div>