View source for Wiki143:HiddenStructure

:''On hiding text, see [[Help:Hidden text]]''

{{notice|As of December 29, 2006, this technique is disabled on this wiki. The class hiddenStructure still exists in the [[MediaWiki:Common.css|CSS]], but now outlines the text in green instead of hiding the text. This is to find any remaining instances of hiddenStructure in templates. Note that this only disables use of the CSS class hiddenStructure. It does not prevent use of similar tags like ''display: none'' or ''visibility: hidden''. These still cause accessibility problems, and should be used with caution (see "other uses" section below).}}
{{Ombox
|type  = content
|image = [[File:X mark.svg|30px|link=|alt=]]
|text  = <strong>This form of syntax is highly frowned upon, and it should not be used.</strong>  Due to browsers that don't support CSS, and other devices such as screen readers, using this syntax results in vastly inferior pages for many users.  The below is documented for informational purposes only.
|imageright = {{Ombox/shortcut|WP:HIDE}}
}}
{{Historical|type=woundup}}
By using [[Cascading Style Sheets]] (CSS), it is possible to hide text in templates from popular [[web browser]]s, dependent upon the emptiness of a template parameter. Please, don't use it. This page documents a specific highly controversial method to achieve that.

Brion VIBBER [{{fullurl:w:Wikipedia_talk:Avoid_using_meta-templates|diff=36124214}}], lead developer of [[MediaWiki]], describes some of the problems with hiddenStructure.
{{quote|...it's using a CSS hack to hide structure elements, which can fail for text browsers, plaintext renderings of articles, and any HTML display of the article that doesn't use the stylesheet on this site. This harms both the primary site's accessibility and offsite reuse of material.|{{user|Brion VIBBER}}|}}
Graham87 [{{fullurl:w:MediaWiki_talk:Common.css|diff=36319008&oldid=36287089}}], a blind Wikipedian, discusses screen reading software and the limitations therein, and also states that he doesn't believe we should use CSS hacks.
{{quote|...I would strongly recommend that the css hacks not be used because there will be a sizable number of people using older screen readers, and they may not be able to upgrade.|{{user|Graham87}}|}}

== How it works ==
This method relies on the existence of a CSS class "hiddenStructure". For the en: wiki this is defined in [[MediaWiki:Common.css]] as (revision as of 20:50, January 17, 2006):
<syntaxhighlight lang="css">
/* hiddenStructure from Monobook - allows selective hiding of markup in templates */
.hiddenStructure {
   display: none;
   speak: none;
}
</syntaxhighlight>
Any text that is contained within the HTML construct <code><nowiki><div class="hiddenStructure">text to hide</div></nowiki></code> is hidden.  The class can also be applied to any [[XHTML]] element, such as <nowiki><span></nowiki> and wikitable rows ('''|-''').

This function is then combined with the [[meta:Help:Parameter default|parameter default]] function to achieve selective hiding of text depending on the emptiness of the template parameter.  Here is an example of a simple table, which could be part of a template. if the "parameter" is left blank, <code>class<nowiki>{{{parameter|}}}</nowiki></code> resolves to simply <code>class</code>, completing the CSS call as above.  For any value of "parameter", the style becomes meaningless and is stripped by the MediaWiki software, making the table row visible, as well as the data.

<syntaxhighlight lang="wikitext">
{| 
|- class{{{parameter|}}}="hiddenStructure"
! Header
| {{{parameter|}}}
|}
</syntaxhighlight>

== Caveats ==
This method does not hide text from any non-CSS browsers (including text-only browsers, like [[Lynx (web browser)|Lynx]]), nor from users of many types of [[screen reader]]s and other accessibility software. Pages relying on this method also fail to display properly when copied to other sites which have not been configured to use the 'hiddenStructure' class, including foreign language Wikipedias and possibly some Wikipedia mirrors. Therefore, ''it is important that the template be readable and make sense to someone using such a browser''.  If a page depends on this technique to make sense, then it will break a [[WAI]] priority 1 accessibility checkpoint.  Some common pitfalls involve overuse of this by marking ''every'' row in an [[Wikipedia:Infobox templates|Infobox]] as optional, or using this method to hide punctuation around an optional parameter.
* Using CSS to hide unintentionally-created document structure is considered poor web authoring practice.
** This approach will transmit redundant information to the clients
** In some cases, this approach includes raw wikitext, which is meaningless in the context of an article (e.g. [[:template:Infobox President]])
* This approach creates a slightly different version of an article's ''content'' in a visual browser than for other browsers and search engines.
* If the two versions of an article differ in meaning, then the page fails all three levels of accessibility validation.

=== Problems ===
{| style="float: right; border: none; background: transparent; margin-left: 1em; padding: 0;"
|-
| [[Image:Lynx.uss monitor.css.png|thumb|100px|[[USS Monitor]] using CSS hacks]]
| [[Image:Lynx.uss monitor.meta.png|thumb|100px|[[USS Monitor]] using meta-templates]]
|-
| [[Image:Lynx.blue whale.css.png|thumb|100px|[[Blue Whale]] using CSS hacks]]
| [[Image:Lynx.blue whale.meta.png|thumb|100px|[[Blue Whale]] using meta-templates]]
|}
The problem with using ''hiddenStructure'' is that it hides rows in a non-standard way. Whereas other websites hide data by simply not sending it out from the server<ref>Most websites use [[PHP]] or [[Active Server Pages|ASP]] to conditionally send data from the server. More advanced designs cache results so PHP/ASP scripts are only executed once for each possible outcome.</ref>, ''hiddenStructure'' defers this hiding process to the client. Because of this, some non-CSS aware or compliant browsers incorrectly render pages using this hack (see pictures at right). 

Some pages minimize the damage by only displaying the parameter if it's actually non-blank (using the syntax <code><nowiki>{{{parameter|}}}</nowiki></code>). In this way only the row is displayed, not the ugly <nowiki>{{{parameter}}}</nowiki> parameter name. Of course in templates with large numbers of conditional rows, this still results in unnecessary data being displayed to non-CSS compliant browsers.

Because of these problems many articles render poorly for the disabled. In the worst case, a number of Wiki-markup parameters are displayed/read to the reader. In the best case, a number of rows are displayed/read which are empty.

For these reasons, ''hiddenStructure'' should not be used.
{{clear}}
Footnote: {{Reflist}}

=== Solutions ===
Solutions, in order of preference, are.

* Use [[meta:ParserFunctions|ParserFunctions]]
** '''Advantage''': less server load and less likely to break than other methods.
* Use Weeble code (such as {{tl|row}}).
** '''Advantage''': Can avoid meta-templates altogether.
** '''Problem''': Requires that a blank parameter (usually <code>if=</code>) be passed. Also, if and when conditionals are implemented in MediaWiki, it may be more difficult to find and replace templates utilizing this method. Finally, templates that use Weeble are generally the ugliest as far as the code is concerned.
* Limit or eliminate conditional rows.
** '''Advantage''': Avoids the issue of conditional row displays.
** '''Problem''': Avoids the issue of conditional row displays.
Other possible solutions, which are ill-advised, include:
* Breaking apart a single template into various multiple other templates, with each handling different combinations of parameters.
** '''Problem''': This is a maintenance nightmare, and goes against the purpose of templates (centralizing maintenance to one place).

== Other uses ==
One of several accepted uses of CSS <code>display: none</code> is to hide kludges inserted only for legacy browsers from modern browsers. A typical example is '''reset'''-buttons; no modern browser needs this, as users can clear textareas locally. Legacy browsers don't offer this feature and depend on a '''reset'''-button. Users clicking '''reset''' unintentionally would lose their modifications in the form. A hidden '''reset'''-button only visible with legacy browsers avoids this problem.

Other examples are '''media''' specific applications: Emoticons (smileys) as ASCII art are arguably pointless for speech browsers, it's possible to hide them there, maybe offering a WAV. Sometimes copyright info can be restricted to the printed output. Info normally only available for visual browsers with a mouse could be additionally displayed as normal text hidden from most output '''media''' except from text, print, and speech. A similar concept is the <code>&lt;noscript&gt;</code> element.

=== Known uses ===
:''This is an incomplete list of known uses arguably considered to be '''harmless''', please add what you find:''
#<s>{{Lts|hide}}</s> - probably not harmless

== See also ==
* {{Lts|Infobox}} - a "model" infobox template which demonstrated this method, later removed.
* {{Lts|Infobox Conditionals}} - same with conditionals.
* [[Wikipedia:Qif conditionals]] - explanation of the '''#if:''' conditional technique.
* [[Wikipedia:Accessibility]] - several proposals addressing [[WAI]] issues. 
* [[Wikipedia:Historic debates]] - features also [[WP:HIDE]].
* [[m:ParserFunctions]] - a replacement for {{tl|qif}} and hiddenStructure.
* [[m:Help:Array]] - explains also older methods like "weeble".

[[Category:Wikipedia template administration]]
[[Category:Wikipedia how-to]]