Description
The default PmWiki skin minus the HTML table, which is replaced with divs styled using the CSS table model of CSS >= 2.1.
Questions
- Can we remove the unpopular HTML Table from the PmWiki default skin?
- Why remove the HTML Table?
Answer
Yes.
The identical visual appearance can be achieved in virtually all browsers (notably except IE7 and below) by replacing the HTML table with a CSS Table.
Files
A Version with conditional comments for old-IE compatibility:
Overview
Background
The use of HTML tables for page-layout purposes has been discouraged for a long time, since before the last major revision of the default skin happened in 2006. The main reason a table was used as part of the layout, despite unpopularity of table-based layout at the time, is because it provided maximum cross-browser compatibility with browsers that existed at the time.
A wiki's layout template has special demands imposed upon it because collaborative, author-contributed content can vary so widely. The table helps favor writers over readers because it reduces the chances an author will unintentionally break the layout by editing a page.
Subsequently CSS 2.1 has come about. In a nutshell, now we can move some control of presentation into the CSS stylesheet. For many of you that's all you need to know. Using tables for layout is unpopular more now than ever. Here's a brief explanation of why:
Moving control of presentation into the CSS stylesheet allows wikiauthors' contributed structure and content to be more accurately represented. HTML Tables can be used exclusively for tabular data.
For example, this makes it easier for automated parsing of a site by machines, including
- "screen scrapers" (e.g. tools used for offline reading)
- web bots (e.g. search engine crawlers)
- and screen readers (assistive technology for the sight-impaired)
Changes from the default skin
This skin uses the CSS Table Model from CSS 2.1 to replace the HTML Table elements with appropriately-styled divs.
This skin has just a few differences from the default skin.
- The HTML Table elements in the template have been replaced with divs.
- Three lines of CSS have been added to the stylesheet that cause the divs to be rendered the same as the table was before.
- Some cruft was removed
- The deprecated border='0' attribute has been removed from the template.
- One line of CSS relating to MSIE 5.5-compatibility has been removed from the stylesheet.
- Some other lines of CSS have been changed to make customizing the skin easier.
- pmwiki.tmpl is renamed skin.tmpl
- pmwiki.css is renamed skin.css
- The default README file is replaced with a small
README.txtfile.
Table removed.
The result is a skin that maintains -- arguably enhances -- the simplicity and ease-of-modification of the original skin. One reason is because renaming the skins's directory doesn't require renaming skin.tmpl and skin.css.
The divs nest more cleanly than the table elements did, and as a result the template should be easier to understand by looking at it.
Installation
Unpack the skin to pub/skins/ inside your pmwiki folder and add the following to your local configuration file:
$Skin = 'pmwiki-csst';
Notes
When I originally worked on the PmWiki skin the most common complaint was that it includes a table. Unfortunately the table was necessary at the time in order to maintain cross-browser compatibility. This is much less true today.
Browsers from 2006 may not work with this skin, however I think most modern browsers will render pages exactly matching the appearance of the version with the table.
It works using IE8; IE7 and earlier don't support the CSS Table model. HTML5Shiv could possibly be used to improve compatibility further.
HTML5Shiv is not the solution. Instead, the solution for improving IE7 and IE8 compatibility could possibly be to use Conditional Comments to insert the HTML table elements only for old versions of Internet Explorer.
Changing to this skin will reduce cross-browser compatibility by some small amount. The question is: which is greater, the benefit of a table-less design or the benefit of compatibility with a very small percentage of visitors who will have rendering issues? In my mind the former wins; any browser that will not render the table-less pages is not workable on a lot of web pages today and this will be even more true the future.
A note about why this upgrade is important: Not all user agents are humans using web browser software. Machines -- notably web crawlers such as search engine bots -- and screen readers shouldn't be overlooked; removing the HTML table should help them more accurately separate the semantic content of your wiki pages from parts of the page that exist for presentation purposes.
Modification-friendly enhancements
Some minor changes could make the default skin easier and mor predictable to modify (following PmWiki Philosophy #5).
Easier styling for fonts
Explicitly set { font-weight:normal } on black-styled sidebar and wiki-action links (#wikileft and #wikicmds). These are the two navigation areas affected by (:noleft:) and (:noaction:) respectively.
The reason: if a novice administrator adds something like
a { font-weight:bold; text-decoration:none; }
navigation links will remain normal-weight rather than becoming bold. I think that's closer to what would be desired and expected.
This change is only noticeable if the CSS is modified.
Easier styling for sidebar headings
When someone adds
%sidehead%Heading Foo
the heading is displayed inline, which doesn't match the lists on the sidebar. Simply changing the .sidehead sidebar-heading and (and .sidehead a) to { display:block } makes it easier and more predictable to customize sidebar headings with CSS styling.
The effect of this change is only noticeable if the CSS styling is modified.
Change log / Release notes
2014-06-09
Refinement
- Changed sidebar-heading anchors (
.sidehead a) to{ display:block }also.
2014-06-07a
Modification-friendly enhancements for easier / more predictable customization:
- Explicitly set
{ font-weight:normal }on black-styled sidebar and wiki-action links. - Changed the
.sideheadsidebar-heading to{ display:block }.
2014-06-07
- Improved comment text.
- Deleted extra blank line.
- The CSS table-row didn't need to be have ID. Switched it to a class.
2014-06-03b
Removed some cruft:
- Deleted the deprecated
border='0attribute from the wikilogo<img>tag int the template. - Deleted an obsolete line from the stylesheet that was for compatibility with MSIE 5.5.
2014-06-03a
This one-off release is practically untested. It uses Conditional Comments to restore the HTML Table elements only for old versions of Microsoft Internet Explorer. The conditional comments detract from the simple and easy-to-follow appearance of the template.
See also
Comments
See discussion at DefaultSkinWithoutTable-Talk?