MediaWiki Stylings & CSS

SMW P-tag element hack
Semantic Mediawiki prefaces each semantic template used with an empty  element that displays a line break. This makes for a very messy looking page, especially when using multiple semantic templates.

A workaround is to include CSS styles that hide these empty  elements.

The simplest way to do so, is to add the following CSS code to $wgStylePath/common/shared.css: /* p hack /* http://kb.g-and-o.com/wiki/index.php/Customizing_MediaWiki#SMW_P-tag_element_hack p br { display: none; }

Mobile skins
As mobile web browsing becomes more ubiquitous, it is crucial that your MediaWiki site support mobile skins to display content fluidly and optimally on these devices. Mobile skin design should take into account W3C Mobile Web Best Practices.

Device resolutions
Please note the display width of these popular devices:
 * iPhone: 480 px
 * Droid: 480 px
 * Blackberry: 240 to 360 px

User agent sniffing
This method detects the browser & device requesting the page and uses the appropriate skin/CSS file. The former uses the stable MobileSkin extension which works on MediaWiki versions 1.13+. Some drawbacks are that you may have to create separate skins for each device and you would have to account for non-supported or unique devices.

Handheld media stylesheets
Dating back to the HTML 4 specification in 1998, one could link to different stylesheets depending on the device targeted, included "handheld" media. This could be done in three ways:



@media handheld { /* CSS rules for handheld devices */ }

@import "some.css" handheld;

As of MediaWiki 1.14+, there is a global variable setting ($wgHandheldStyle) in LocalSettings.php that controls this skinning. In order to temporarily view the skin in a regular browser, pass the parameter  to the URL. To perform this method, set the variable to the path of the skin's main.css file. This may be a URL, base-relative, or $wgStylePath-relative path. For example:

$wgHandheldStyle = 'chick/main.css';

It has been noted that Mobile Safari & Opera Mini do not support @media="handheld" [EDIT: it seems as though in Mobile Safari 3.1.2 "handheld" media is supported. THIS NEEDS CONFIRMATION]. They use a method known as media querying. For this reason, this method should either not be used or supplemented by media querying. The "handheld" media should be avoided because many mobile browsers (not just the ones mentioned above) implement them in different ways:
 * Some read only the handheld stylesheet.
 * Some read only the handheld stylesheet if applicable; if not, defaults to the screen stylesheet.
 * Some read both handheld and screen stylesheets.
 * Some read only screen stylesheets (especially for newer browsers living up to their "full web" motto).

For "handheld" to be applicable for iPhone's Mobile Safari browser, the MediaWiki global variable $wgHandheldForIPhone can be used. Of course, this is only limited to iPhone and is not known to work for other devices that do not recognize "handheld".

Media Query
Media querying is similar to the above method. However, instead of using the "handheld" type, it links to an external stylesheet after querying, for example, the max width of the screen. The following example instructs the browser to use the stylesheet for devices with a maximum width of 480 pixels. The IE conditional statement is added to protect from rendering inconsistencies. This method is recommended by Apple.



Wikipedia example
There is stylesheet reference links in the section of a Wikipedia article that pertain to media="handheld", such as in the article http://en.wikipedia.org/wiki/John_Locke?handheld=yes. This uses the Chick skin. There is no media querying handling.

Wikipedia handles mobile skins (tested with Mobile Safari on an emulated iPhone) by redirecting the request to a mobile site (http://en.m.wikipedia.org/wiki) which applies the skin appropriately for the mobile device. So the article http://en.wikipedia.org/wiki/John_Locke would be redirected to http://en.m.wikipedia.org/wiki/John_Locke?wasRedirected=true. The HTML structure of the mobile pages differs from the regular site:
 * The mobile site sets the viewport default to the device width and scale.
 * The mobile site contains only one stylesheet link and no alternate links (i.e., Atom and/or RSS feeds).
 * The mobile site contains minimal javascript (jQuery and application.js).
 * The mobile site uses the Webkit stylesheet, as opposed to a skin.