Wikipedia:HiddenStructure

By using Cascading Style Sheets (CSS), it is possible to hide text in templates from most visual browsers, dependent upon the emptyness of a template parameter. This page documents a specific method to achieve that. This method was first popularized by User:Netoholic to help implement templates that are compliant with Wikipedia:Avoid using meta-templates.

An example application of this method can be seen at Template:Infobox President, where several rows are made "optional".

This method is intended only as a convenience, to hide extraneous text generated as a consequence of avoiding avoiding using so-called "conditional templates", like {{Qif}}.

This method does not hide text from any non-CSS browsers (including text-only browsers, like Lynx), nor from users of many types of screen readers and other accessibility software, nor from search engines. Therefore, it is important that the template be readable and make sense even if it weren't using this method. 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 Infobox as optional, or using this method to hide punctuation around an optional parameter.

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):

/* hiddenStructure from Monobook - allows selective hiding of markup in templates */
.hiddenStructure {
   display: none;
   speak: none;
}

Any text that is contained within the html construct <div class="hiddenStructure">text to hide</div> is hidden. The class can also be applied to <span> and wikitable rows (|-).

Examples

Example 1

<div class{{{param1|}}}="hiddenStructure">param1: {{{param1|}}}</div>

If param1 is empty (also if not defined), the result is hidden on the client side.

<div class="hiddenStructure">param1: </div>

If param1 is defined as "FOO", the param1 contents are internally concatenated onto the class element.

<div classFOO="hiddenStructure">param1: FOO</div>

'classFOO="hiddenStructure"' is removed by HTML Tidy, which runs on Wikipedia and strips out invalid HTML tag attributes ("classFOO" is not a valid tag attribute). The final result sent to the client is:

<div>param1: FOO</div>

Caveats

• Some people consider using CSS to hide unintentionally-created document structure is considered poor web authoring practice.
• 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.

See also

• Template:Infobox - a "model" infobox template which demonstrates this method.