Beefy Boxes and Bandwidth Generously Provided by pair Networks
There's more than one way to do things

PerlMonks XHTML+CSS: an implementation

by AidanLee (Chaplain)
on Feb 25, 2002 at 15:44 UTC ( #147340=monkdiscuss: print w/replies, xml ) Need Help??

Petruchio's recent node on using CSS at the monestary got my curiosity piqued, so I tried giving perlmonks a markup makeover:

While I didn't stick *quite* to the current perlmonks style, the important part is under the hood. Do a view source on each page, or simply direct your browser to to grab things (including the css file) right out of the directory.

I tested in IE5, IE6, Mozilla 0.9.7, lynx all with good results. I didn't get around to quite everthing, such as how <code> tags are currently rendered, but the majority of site markup is done (I think).

When you open the source you'll notice that just about everything is named, either by class or by id. This should make it much easier to refer to style the different conceptual containers on the page (as belg4mit brought up in the thread under Petruchio's node). I also ordered the page elements in the source code as I thought would make sense to someone using a text/voice browser as opposed to a visual one.

I've only done three pages, but I'd be quite willing to work with the pmdev team to get the site's markup up-to-date.

feedback craved :)

Replies are listed 'Best First'.
(ar0n) Re: PerlMonks XHTML+CSS: an implementation
by ar0n (Priest) on Feb 25, 2002 at 20:34 UTC

    Cool! It's interesting to see what various people trying the same thing come up with.

    I've only done three pages, but I'd be quite willing to work with the pmdev team to get the site's markup up-to-date.

    The problem is not so much updating the PM code to use xHTML, but rather having our cake both ways: using xHTML while still allowing some facility for those on older/crappy browsers, namely Netscape 4.x.

    Right now, we can have xHTML, but can't have it in such a way that it'd be both used in an xHTML-sane way (using div tags instead of tables, etc) and have it not break the current design for icky browsers.

    So unless we can get everyone to voluntarily upgrade their browsers to Opera, MSIE 6 or Mozilla .9+ we need to think this through a bit :-)

    [ ar0n -- want job (boston) ]

      That is always the issue, isn't it? :)

      I certainly don't have access to the Monastery's web logs, but I have found a few things in my web-work:

      • XHTML itself is a non-issue for older browsers. It is possible to have a completely valid XHTML 1.0 Strict document render in a 4th gen. browser. It's the CSS which is funky.
      • There *is* a subset of CSS that works acceptably in the 4th gen browsers
      • I would hypothesize (and i could be treading on thin ice here) that given the technical audience, the proportion of users with more modern browsers is probably significantly higher than the general web audience.
      • I know that the Perl community tends to avoid political statements, but there are ways to let older browsers down more gently.

      I may post more completely later. I'm off on a road trip :P

      Update (2002/02/26 8:55 AM EST): picking up where I left off

      I'd argue that it is more a question of when rather than of why at this point, as most monks fluent in the web these days understand that such a transition would be a good thing. But do you wait until only 10% of your audience uses a 4th gen browser? 2%? That's vroom's call no doubt, but I'd like to encourage the Monastery to make the transition sooner rather than later.

      As a transition, though I'll admit readily enough that I don't know how the site works, but it might be possible to make the xhtml/css optional by making it it's own theme. I don't know how flexible theming is though. As a theme people could choose whether or not to use it, and then go on to use the new CSS support Petruchio announced recently to style it any way they see fit.

        I'm all for civic improvement - but at what cost?

        I have an SGI Indy, a Sun 386i and a Linux K6-233mHz PC.
        I would challenge you to run a browser that works smoothly under such conditions other than NetScape 4.7x
        Yes, I know its not a particularly good browser, yes I know it doesn't render much and its Java/JavaScript support isn't so hot... But I don't have much of a choice.
        And no, it definately doesn't work with your CSS/XHTML examples at all.

        So do you really want to stop me reading PerlMonks?

        -- Alexander Widdlemouse undid his bellybutton and his bum dropped off --

        I don't care whether the monastery as a whole is at 10%, 2%, or 0.1% usage of older browsers. I care that I am in that portion.

        I personally use an old laptop without sufficient space to install the dependencies for any recent browser, and I am not planning to replace it until at least this summer. (The key dependency being to find out where I am moving so I can decide whether I will get another laptop for the form factor, or whether I will buy a desktop.) If the site is switched over before then, then I will find myself an alternate destination for the web. (Unless, of course, you feel a burning urge to buy me another Linux-compatible laptop. A desktop is not sufficient, I need a laptop for the form factor...)

        So unless the Monastery wants to lose me, it should not break NS 4 compatibility until at least this summer. And that needs to be compatiblity with NS 4 with JavaScript turned off, thank you very much. Which means that it should render usably with no CSS. (Note that usably does not mean aesthetically pleasing. If aesthetics was a burning desire of mine, I would have upgraded a long time ago.)

Re: PerlMonks XHTML+CSS: an implementation
by pmas (Hermit) on Feb 26, 2002 at 19:29 UTC
    Nice job - graphically. But I found the same issue on many sites: Font size is hardcoded. Sometimes I am working on PC with huge screen, and I like my fonts little bigger. When I tried IE menu: View >> Text Size >> Larger on your page, nothing happened. Is it a bug, or design? IMHO it is bug, what I can tell other web designers to check to fix it?

    To make errors is human. But to make million errors per second, you need a computer.

      I suppose I was not as rigorous as I could have been ... you are right, it is far better to set font size by 'pt' rather than by 'px' for flexibility. Generally the font-size setting scheme should strive to be a base font (your "normal" text, specified in the body tag) with a 'pt' specification (or no setting if the default suits you) and then using percentages to set other font sizes relative to it. This allows the whole page to scale well with minimal effort.

      If this sheet were to become the basis for a CSS Perlmonks site, it would need careful community scrutiny. But for specific "I don't like that" complaints (not saying yours is such a complaint... you have a very valid point) people will still have the opportunity to override things with their own style sheets.

        Setting font sizes by pt OR px: BAD.

        Setting font sizes by relative terms: GOOD.

        People have set the font on their browser to be the size that they can read the normal text without having to adjust the size. This should never ever be redefined; that is, what makes up the 90% of the page text should be unstyled in terms of fonts and colors and use the user's options as specified by the browser. If you play with the font size, even by setting pt to be nice across platforms, you'll anger people that try to read sites at 1600x1200 with your fixed 8pt font that looks great at 800x600.

        Any font changes should be specified in HTML tags using <BIG> or <SMALL> tags, or in CSS using font-size: smallest | smaller | small | normal | large | larger | largest. But, IMO, I only specify font sizes on footnotes and the like; any normal text remains at the default size.


        Dr. Michael K. Neylon - || "You've left the lens cap of your mind on again, Pinky" - The Brain
        "I can see my house from here!"
        It's not what you know, but knowing how to find it if you don't know that's important

Re: PerlMonks XHTML+CSS: an implementation
by belg4mit (Prior) on Mar 03, 2002 at 21:42 UTC
    Things you might attempt to improve aesthetics/usability for non-DOM browsers is to inline the various <div>s in their approximate location in the source. This way they do not all end up at the bottom.

    Something else that couldn't hurt to try is getting back to basics and using <dl>, <dt>, <dd>. So dl encloses nodes at the same level, dt is the title, author, etc. dd is the node body. One can then apply styles to these elements. For an idea of what this might look at try: blocks (Note: you might get a server overloaded message, be patient and try again.) So that's what you can do to enhance the look with CSS; it does not give the proper impression w/o CSS as it is an <ol> and not a <dl>,

    perl -pe "s/\b;([st])/'\1/mg"

Log In?

What's my password?
Create A New User
Domain Nodelet?
Node Status?
node history
Node Type: monkdiscuss [id://147340]
Approved by root
and the web crawler heard nothing...

How do I use this? | Other CB clients
Other Users?
Others exploiting the Monastery: (2)
As of 2022-06-27 06:20 GMT
Find Nodes?
    Voting Booth?
    My most frequent journeys are powered by:

    Results (86 votes). Check out past polls.