[pmwiki-devel] Default Skin: Switch to CSS Table?

Simon nzskiwi at gmail.com
Mon Jun 2 17:09:07 CDT 2014


Given the difficulties we had trying to update the default skin to use all
relative CSS (see http://www.pmwiki.org/wiki/PmWiki/ReleaseNotes#rel2.2.60)
this could be easier said than done.
See also
http://thread.gmane.org/gmane.comp.web.wiki.pmwiki.devel/2148/focus=2150
and http://thread.gmane.org/gmane.comp.web.wiki.pmwiki.devel/2157/focus=2161

Needless to say I'd like to see the CSS updated, and while we are at it
make the page header and page footer wiki pages the same as the SideBar

Simon



On 2 June 2014 19:25, Petko Yotov <5ko at 5ko.fr> wrote:

> I have reviewed this skin. The changes from the default skin are indeed
> very minimal: it simply replaces the <table>, <tr> and <td> tags with <div>
> tags, and inserts 3 instructions in the skin css file to display these
> <div> elements as if they were a table.
>
> I believe this will make it look exactly the same, pixel for pixel,
> compared to the current default skin, for browsers that support CSS 2.1
> (most browsers since 2006, MSIE since 2009).
>
>  http://caniuse.com/#search=css%20table
>
> It will not look the same with MSIE 6 and 7, where the main page content
> will appear pushed down below the bottom of the sidebar.
>
> Do you think it is better to replace the default skin, or to distribute
> PmWiki with both skins?
>
> Petko
>
>
> H. Fox writes:
>
>> I'm spending some time on this because I think a lot of people in the
>> PmWiki community would want to improve the default skin so it uses CSS
>> for separating the template design from the semantics of the wiki
>> content.
>>
>> One fantastic charastic of PmWiki is that upgrading rarely breaks
>> things.  I don't know whether hurting compatibility with Intnernet
>> Exploer 6 & 7 is worth having better semantic structure by not putting
>> the wiki sidebar and page content inside HTML Table.  This post has
>> some information for everyone to consider, if interested.
>>
>> Some background...
>>
>> I worked on the PmWiki default skin in the past. As I recall, there
>> was discussion on the lists about it, and by this I mean aside from
>> the periodic discussion that would pop up about why a table shouldn't
>> be in there.
>>
>> I learned a lot by contributing to the development of the skin. Pm was
>> extraordinarily helpful guiding me along. I'm amazed the skin from
>> 2006 has lasted, virtually unchanged, into 2014.(*note)
>>
>> Because I spent so much time working on the skin I recognize why the
>> skin is the way it is, pretty much line-by-line. Pm wanted the skin to
>> be an easily-understandable starting point for someone to build upon,
>> while providing a consistent appearance in lots of browsers on lots of
>> platforms (cross-browser compatibility).
>>
>> One important lesson I learned was: cross-browser compatibility is a
>> vastly un-appreciated art!
>>
>> We used a browser-compatibility testing service called "BrowserCam",
>> now defunct, to see screenshot images that showed how various browsers
>> on various platforms rendered the skin as it developed. BrowserCam
>> screenshots could be _brutal_ about exposing weaknesses in a given
>> HTML/CSS layout. Chunks of content might disappear, unexpectedly move
>> or resize, or render oddly in some other completely unexpected manner.
>>
>> Summary:
>> At the time the default skin was created people wanted to see the
>> table removed for "tableless web design", but that would *definitely*
>> have reduced cross-browser compatibility beyond a level Pm was
>> comfortable with, so the table remained.
>>
>> Flash forward to the present...
>>
>> There's a feature of CSS 2.1 (and newer) called "The CSS table model"
>> documented at http://www.w3.org/TR/CSS21/tables.html#table-display .
>> From that page,
>>
>>   "The CSS table model is based on the HTML4 table model,
>>   in which the structure of a table closely parallels the
>>   visual layout of the table."
>>
>> This feature of CSS enables us to replace the HTML table with a CSS table.
>>
>> table ->   { display: table }
>> tr    ->   { display: table-row }
>> td    ->   { display: table-cell }
>>
>> Some may say the proposed template at
>> http://www.pmwiki.org/wiki/Skins/DefaultSkinWithoutTable is not a
>> tableless design, rather it's a still-tabled design that substitutes a
>> CSS Table for the HTML table. Possibly, but I think a CSS table is
>> distinctly different from a HTML table. The difference between {
>> display: table } and <table> is akin to the difference between {
>> font-weight:bold } and <strong>.
>>
>> Switching to a CSS table *will* break the design in some of the "long
>> tail" of old browsers the default skin supports. Most notably IE6 and
>> IE7 will not render CSS tables properly.
>>
>> On the other hand, not all user agents are browsers.  Machines
>> (notably web crawlers) and screen readers shouldn't be overlooked;
>> removing the HTML table may help them.
>>
>> It boils down to
>>  - whether the the CSS Table will become interpreted as a
>>   "presentational" table rather than a "semantic" table, and
>>  - whether separating semantics from presentation is important
>>    enough to justify reducing compatibility with a tiny fraction
>>    of browsers.
>>
>> I think the CSS Table will be interpreted as a presentational table
>> and the switch would be, when everything is considered, an
>> improvement.
>>
>> Hagan
>>
>> (*note)  As I wrote nearly a year ago, the skin lacks Responsive Web
>> Design and needs better support for mobile devices. It's even more
>> true now.  I still believe there could be small changes that would
>> improve mobile-usability without compromising the skin's goals.
>>
>> _______________________________________________
>> pmwiki-devel mailing list
>> pmwiki-devel at pmichaud.com
>> http://www.pmichaud.com/mailman/listinfo/pmwiki-devel
>>
>
> _______________________________________________
> pmwiki-devel mailing list
> pmwiki-devel at pmichaud.com
> http://www.pmichaud.com/mailman/listinfo/pmwiki-devel
>



-- 
____
http://kiwiwiki.co.nz
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://www.pmichaud.com/pipermail/pmwiki-devel/attachments/20140603/23f728a4/attachment-0001.html>


More information about the pmwiki-devel mailing list