Slashdot HTML 4.01 and CSS 748
After 8 years of my nasty, crufty, hodge podged together HTML, last night we finally switched over to clean HTML 4.01 with a full complement of CSS. While there are a handful of bugs and some lesser used functionality isn't quite done yet, the transition has gone very smoothly. You can use our sourceforge project page to submit bugs and we'd really appreciate the feedback. Thanks to Tim Vroom for putting the HTML in place, Wes Moran for writing the HTML in the first place, and Pudge for writing the code to convert
900k users, 60k stories, and 13 million comments to comply. And for the brave, download the stylesheet and start experimenting with new themes and designs for Slashdot: some sort of official contest to re-design Slashdot is coming soon, so you can get a head start now.
Response to some reader notes in the forum:
- There are a handful of validation errors. Some will be fixed in the next day or so. Others are external HTML that is out of our hands. We may never toally validate with zero errors. yes we're comfortable with that.
- We're not going to XHTML for the same reasons as above- we control almost all of our HTML, but some of it (like the ads, and imports from other sites) just isn't ours to muck about with. We could go to XHTML, and someday we might, but today we're happy to just get to HTML 4.01 and CSS.
- Light Mode will be back in some form or another. The problem is that light mode served two purposes: Low Bandwidth, and Simplified Design. The later will probably be handled with a CSS theme (we have a handheld theme already). Low Bandwidth is a little trickier, but we will resolve that soon.
- All of our code is beta tested on www.slashcode.com and use.perl.org. Unfortunately there's always a few issues from those tiny tiny sites and the giant bohemoth that is Slashdot itself.
Kudos on a great upgrade! (Score:4, Informative)
And for the brave, download the stylesheet and start experimenting with new themes and designs for Slashdot:
I was just going to ask if we could get a few more CSS styles like we saw in the Beta. Glad to see you're already on top of it.
I did some testing with a FireFox version I *know* contains the infamous "Slashdot bug". (Not sure if it's corrected in recent versions since I normally use Mozilla or Safari.) As far as I can tell from testing, the bug is completely fixed. Considering the upgrades, one would expect this to be the case, but you can never be too sure.
Last but not least, the "Politics" and "Apple" sections look as nice as ever, but I'm afraid that the other sections look worse than ever. Can we turn off the colors for the other sites until better CSS sheets can be made? (Preferrably ones that don't hurt our eyes?) Yeah, the games section has the full treatment too, but I swear that the shades of purple it uses are causing me to go blind.
An alternative solution to turning off the CSS for the other sections is to provide the front page CSS as a style option on all the pages. That way we could simply shut off the crazy colors without pulling the whole "games.slashdot.org/article.pl -> slashdot.org/article.pl" trick.
Well, that's my 3.14159265 cents worth. Again, good job
Thanks a bundle! (Score:3, Informative)
Re:POOPHEADS! (Score:4, Informative)
Re:Kudos on a great upgrade! (Score:5, Informative)
Me too... I blogged this earlier [www.phk.ca] today, and briefly (first impression) journal'd it too [slashdot.org], and would love to comment now on some more technical aspects of the page now that I've had time to examine it more thoroughly. Kudos to all involved on a very positive step in the right direction!
The CSS is really clean and impressive. I don't have a problem with it at all at this point, but CSS was never really my strong suit so you may want to get a second (thousand) opinion on that.
I have to admit, it's nice to see the page load faster, with fewer visual errors in Firefox. The links and text seems quite a bit nicer. Now I can modify the CSS of the site to make it look however I want on my own system too, so that is certainly a benefit.
I'm sure many will point out that there are lots of errors in the HTML.
You can see for yourself, here [uitest.com]. That part isn't that important, because once you begin the road to enlightenment, that zen of CSS [csszengarden.com], it's a journey that has no return.
I'm actually quite proud of Slashdot today, even though I merely post here.
I will be far more proud when the new moderation systems come online. Not sure how many of you submitted ideas and had discussions with CmdrTaco on that subject but I had a thread going with him for quite some time last year. Much of what was said was repetitive, geared towards filtering out what he already had considered or someone else had suggested, but he genuinely listened to some of the suggestions that were unique. I wonder what the timeline is on the moderation changes... Taco?
Re:Testing process (Score:5, Informative)
They do. Beta code gets tested here [slashcode.com] before it's put on Slashdot. Now the upgrade process often generates quite a few 503s (since Slashdot is actually down during that time), but it's just a temporary problem.
If you're still getting 500s and 503s, try deleting all your cookies that point to "slashdot.org". Sometimes the upgrades have problems with old cookies.
Re:Stylesheet? (Score:3, Informative)
http://images.slashdot.org/base.css [slashdot.org]
http://images.slashdot.org/comments.css [slashdot.org]
http://images.slashdot.org/ostgnavbar.css [slashdot.org]
http://images.slashdot.org/slashdot.css [slashdot.org]
http://images.slashdot.org/print.css [slashdot.org]
http://images.slashdot.org/handheld.css [slashdot.org]
First spelling nazi post in new format (Score:2, Informative)
http://www.perseus.tufts.edu/Herakles/stables.htm
I LIKE IT! What about us Palm users, though? (Score:3, Informative)
Now, how 'bout taking a cue from AvantSlash [fourteenminutes.com], and making http://slashdot.org/palm [slashdot.org] actually work nicely?
AvantSlash is horribly broken, now, due to your changes (although I knew it was coming, and so did they.) So, one of two things needs to happen: the guy behind AvantSlash needs to update it, or you guys need to make the Palm site work.
Re:HTML 4.01?! (Score:4, Informative)
Styles - firefox (Score:4, Informative)
Re:HTML 4.01?! (Score:4, Informative)
http://hixie.ch/advocacy/xhtml [hixie.ch]
Re:Stylesheet? (Score:5, Informative)
http://images.slashdot.org/comments.css [slashdot.org]
http://images.slashdot.org/ostgnavbar.css [slashdot.org]
http://images.slashdot.org/slashdot.css [slashdot.org]
http://images.slashdot.org/print.css [slashdot.org]
http://images.slashdot.org/handheld.css [slashdot.org]
Re:HTML 4.01?! (Score:5, Informative)
Re:Kudos on a great upgrade! (Score:4, Informative)
It's fixed, but not in the 1.0 branch (1.0.7), only in the head. So the fix is included in the 1.5 Beta 1 (Deer Park) [mozilla.org].
Here's the Bugzilla entry (direct links from Slashdot don't work, so copy/paste): https://bugzilla.mozilla.org/show_bug.cgi?id=2175
Re:I LIKE IT! What about us Palm users, though? (Score:2, Informative)
Re:Thanks a bundle! (Score:2, Informative)
Re:HTML 4.01?! (Score:5, Informative)
This topic was done to death last time. [slashdot.org]
Short summary: there are a few compatibility downsides and there's no real point because there's no benefit to using XHTML yet.
Could we also... (Score:5, Informative)
There is actually no way to view all comments in order. I usually resort to clicking a page way later, like the 6th or 7th until I see a comment other than the first. But then I don't know if I missed any.
The pages seem to count all comments regardless of score. The proper way is to count the posts _after_ the threshold is applied.
This has been bugging me _for ages_!
Re:Doesn't validate... (Score:3, Informative)
As a general rule, quote all attributes, much more future-proof (XHTML requires all attributes be quoted), and much easier on the eyes when using a syntax-highlighting editor. FYI, I downloaded a snippet of your HTML, quoted the attributes, ran it back through the validator, and it validates (save for the lack of a doctype).
Hope this helps.
No, your code is broken (Score:3, Informative)
When in doubt, don't assume the bug is somebody else's fault unless you understand what's going on.
HTML, as you know, lets you omit the delimiting quotes for attribute values sometimes. For example, type=text is valid. However, just because you can omit them sometimes, it doesn't mean you can always omit them. Your page contains the following code:
The validator is saying that you have a closing </a> tag when you don't have an open <a> element. That is correct - you already closed the <a> element.
See, in order to provide us with the shortcut of not having to specify attribute names for some purposes (e.g. <input disabled>), HTML uses an SGML feature known as SHORTTAG NET. However, that's not the only shortcut it provides. It also lets you write <foo>bar</foo> as <foo/bar/.
Of course, I've only heard of one or possibly two browsers that have ever implemented this, so I'm not surprised that you haven't heard of it. In any case, one of the consequences of this shortcut is that you can't use slashes in attribute values unless you quote them - otherwise the parser has no way of knowing whether you are closing the tag or not. So when you write:
That has exactly the same meaning as this:
So, later on, when you try and close your <a> element, the validator rightly complains that there's no open <a> element to close.
If you actually find a real bug in the validator, then feel free to report it [w3.org]. If you had done this with the "bug" you are complaining about, then you would have found the answer to the problem a lot quicker.
It might be worth actually fixing this one, as I've seen some search engine bots trip over on similar things (XHTML-style empty meta elements in HTML documents, etc), so you might be preventing some search engine bots from indexing anything but the front page of your website.
Re:Could we also... (Score:4, Informative)
Who knows, maybe some day Slashdot even gets proper editors and no more dupes!
Works fine here (Opera 8.5). (Score:3, Informative)
Build 7700
Platform Win32
System Windows XP
Re:Testing process (Score:1, Informative)
Re:Getting There... (Score:4, Informative)
HTML 4.01 [w3.org] was released on December 24, 1999, so they're not quite here yet...
Re:Ahem! (Score:5, Informative)
Easy solution! (Score:3, Informative)
Anyway here's the Coral Cache of the W3C validating the Coral Cache of Slashdot! (can't get any longer than that
http://validator.w3.org.nyud.net:8090/check?uri=h
And here's the result:
1. Line 18, column 40: there is no attribute "LANGUAGE" .
<script type="text/javascript" language="javascript" src="http://a.as-us.falkag.
2. Line 303, column 25: there is no attribute "ALIGN" .
<div class="ad2" align="center"><!-- ad position 2 -->
3. Line 637, column 11: there is no attribute "SIZE"
<font size="3" color="#006666"><b>Search Freshmeat:</b></font><br>
4. Line 637, column 21: there is no attribute "COLOR" .
<font size="3" color="#006666"><b>Search Freshmeat:</b></font><br>
5. Line 637, column 30: element "FONT" undefined
<font size="3" color="#006666"><b>Search Freshmeat:</b></font><br>
6. Line 637, column 65: document type does not allow element "BR" here; missing one of "P", "H1", "H2", "H3", "H4", "H5", "H6", "PRE", "DIV", "ADDRESS" start-tag .
7. Line 638, column 54: document type does not allow element "INPUT" here; missing one of "P", "H1", "H2", "H3", "H4", "H5", "H6", "PRE", "DIV", "ADDRESS" start-tag .
<input type="hidden" name="link" value="freshmeat.net">
8. Line 639, column 27: document type does not allow element "INPUT" here; missing one of "P", "H1", "H2", "H3", "H4", "H5", "H6", "PRE", "DIV", "ADDRESS" start-tag .
<input type="text" name="q">
9. Line 640, column 6: end tag for "FORM" which is not finished .
</form>
10. Line 641, column 9: there is no attribute "ALIGN" .
<p align="right"><a href="http://freshmeat.net/"><b>More Meat...</b></a>
11. Line 1339, column 78: there is no attribute "BORDER" .
12. Line 1339, column 88: document type does not allow element "IMG" here; missing one of "P", "H1", "H2", "H3", "H4", "H5", "H6", "DIV", "ADDRESS" start-tag .
13. Line 1340, column 10: end tag for "NOSCRIPT" which is not finished .
</noscript>
(Hmmm weird, the next time i ran the validation it only gave me 12 errors). Anyway, that's all - considering slashdot used to have around 300 errors, this is quite an advancement. The first errors are probably a missing opening <form> tag.
A workaround (tho I don't know how effective) would be replacing the freshmeat data with an IFrame
Re:Getting There... (Score:3, Informative)
You don't need an extension for that, you can just put it in userContent.css.
@-moz-document domain(slashdot.org){rules here)
...Though I suppose you could package it as an extension to make it easier to install.
Re:Thanks a bundle! (Score:5, Informative)
We obviously did not forget about it, as another commenter suggested. Tim and Wes put in quite some effort to make sure it was still supported in some form. But much of its reason for existence will (soon) be able to be accomplished by simply changing style sheets. You the user can do that with various hacks; on our side, as Rob mentioned in his writeup for this story, we hope to provide some mechanism for users to pick different style sheets sometime soon.
Light mode was a kind of a half-assed hack that tried to do "show me Slashdot a little cleaner," "reduce my bandwidth for my 56K modem," and "give me the bare necessities for my mobile device," and IMHO didn't do any of those very elegantly. And the implementation kinda sucked too, so we want to get rid of it for code cleanup reasons. We're going to do mobile support properly (eventually) and let style sheets do the cleaning up. The third justification was bandwidth, and webpage bandwidth is pretty irrelevant in 2005.
For now (at least), Light mode means no slashboxes, which makes sense to me (at least). If you want slashboxes, the workaround is to turn Light mode off. If you're in the ~1% of Slashdot readers who simply must have the Light-mode look and slashboxes too, I'm afraid you'll have to bear with us until we get the changes I described above implemented.
And now I just realized Rob said much the same thing in his updated "response to reader notes," so go read that [slashdot.org] :)
Re:HTML 4.01?! (Score:3, Informative)
If you're going to set up your web application to spit out XHTML , except when the client only Accepts: text/html, then you might as well just serve text/html to everyone and ditch the added complexity.
Re:Tags (Score:3, Informative)
Re:Me three (Score:3, Informative)
The thing is that Slashdot is now natively readable from within Lynx or Links (only with they put some kind of link on top of the page pointing to the content itself, having to go through 5 pages of menu before actually reaching the content is annoying)
Re:Light version wishlist? (Score:5, Informative)
The plan right now is to have a few large chunks of the site drop in and out for a less bandwidth intensive version. Essentially we strip the site down to what must be here: Less menu items, less boxes on the right. Basically, "Title" "Advertisement" "Stories" "Some Menus And Links". VERY minimal. Get the page down to as few bytes as possible. This We'll probably have a stylesheet too, but mainly this page will just have far fewer bytes of stuff.
Design-wise we can create themes for modern handhelds. A generic theme is already available but it's a real quickee job. But now we can create thinned down look and feel customized for any individual handheld. Of course we don't really have any of these fancy devices ourselves, so hopefully readers will help by designing CSS that does just that.
Re:Wrong date?! (Score:2, Informative)
Surely thats a bug. We can't edit comments posted.
No bug. It's not a button, it's the subtitle of the "Post Comment" page. It's referring to the area where you "edit" the "comment" your about to post. See? Makes perfect sense.
Re:Not according to W3C html validity checker... (Score:4, Informative)
The code can easily handle a switch to XHTML 1.0 Strict, should we someday desire to do that.
Re:HTML 4.01?! (Score:5, Informative)
We already converted 13M comments to valid HTML 4.01 strict. A couple of months ago. No one noticed.
It would be relatively trivial to force XHTML 1.0 strict compliance. I'd flip a switch to force compliance on new content, then rerun the converter for old content. The code's been tested to work for both HTML 4.01 strict and XHTML 1.0 strict (since we allow only a relatively small subset of HTML tags and attributes, this isn't that hard for comments, or even stories, which allows a lot more variety in tags, but everything still fits in the intersection of the two, so it's just a matter of changing a very few number of things, that the code already knows about).
Re:HTML 4.01?! (Score:5, Informative)
* <script> and <style> elements in XHTML sent as text/html have to be escaped using ridiculously complicated strings.
Or you could refer to external files which you should probably be doing anyways. Besides, it's 2005. Are there still browsers in use that don't recognize the script tag? I haven't run across one in at least five years. Even browseres that don't support JavaScript at least know to ignore the contents of this tag.
* A CSS stylesheet written for an HTML4 document is interpreted slightly differently in an XHTML context (e.g. the element is not magical in XHTML, tag names must be written in lowercase in XHTML). Thus documents change rendering when parsed as XHTML.
Well, the second case is easily solved by writing tag names in lower case anyway. Wow, that was tough. I can't remember ever seeing a non-contrived case where the first was an issue, and even then it could be trivially worked around.
* A DOM-based script written for an HTML4 document has subtly different semantics in an XHTML context...
This is probably his one valid point. I do agree with this one, but also feel that it could be worked around with a little thought if you had a valid reason to use XHTML. Mainly you just need to use
* Scripts that use document.write() will not work in XHTML contexts.
Good! document.write() should have been put out to die years ago.
* Current UAs are, for text/html content, HTML4 user agents (at best) and certainly not XHTML user agents. Therefore if you send them XHTML you are sending them content in a language which is not native to them, and instead relying on their error handling. Since this is not defined in any specification, it may vary from one user agent to the other.
And this is different from sending your document as HTML 4 how?
* XHTML documents that use the "/>" notation, as in "<link
Probably technically true, but I've never seen this "SHORTTAG minimisation" discussed anywhere else, and I can't recall ever having dealt with a UA that treats self closing tags in such a manner.
In short, there are issues to watch out for, but there are a lot of cases when XHTML may be preferable to HTML 4 (e.g. using an XML based content management system), and as the most popular web browser on the internet doesn't handle XHTML when served as application/xhtml+xml (and it has been announced that the next version will not either) and all remotely modern UA's will handle XHTML served as text/html, there are a lot of cases where it doesn't put make sense to put off adoption of XHTML for 2 years or more until the majority of browsers can handle it properly.
That said, HTML 4 is still a perfectly valid alternative, and for a site like Slashdot where there are no compelling reasons to go with XHTML, and a lot of valid reasons for not, I don't see why anybody should complain that the site was done as HTML4+CSS and not XHTML+CSS.
"light mode" awesome on Sidek!ck II (Score:2, Informative)
Re:Yawn! (Score:2, Informative)
That's because your browser is using Times New Roman, Slashdot doesn't pick a font for article/comment text.
Which is easy to change:
Firefox: Tools > Options, select General(FF1.0)/Content(FF1.5b), Click on Fonts & Colors(FF1.0)/Advanced(FF1.5), and choose Sans Serif as the Proportional Font, You can also choose which Sans Serif font you want below
IE: Tools > Internet Options, General tab, Fonts button, Change the web page font to one of your liking.
Re:HTML 4.01?! (Score:3, Informative)
Those character encodings are capable of representing the characters, sure. But browsers aren't uniformly capable of decoding them. Browsers don't support UTF-16 as well as Big5, for example.
If every browser properly implemented Unicode, then sure, it wouldn't be a problem to require UTF-8 or UTF-16. But that's not the reality; browsers are far from perfect.
Re:Hey Rob: How about IDs for comment mods? (Score:2, Informative)
<li class="comment Troll Insightful mod_4 Friend Friend_of_Foe" id="(comment #)">
Then your personal CSS file could have entries like so:
{
display:none;
}
{
font-weight: bold;
}
etc.
Re:Wrong date?! (Score:3, Informative)
Try user javascript if you're using Opera, or Greasemonkey if you're using Firefox. Then use Simple site signatures: http://userjs.org/scripts/general/developer_tools
You're missing the point of HTML. (Score:4, Informative)
HTML is not there purely to be used as an anchor for style. It is there to explain what kinds of content a document contains. I mean, why use an h1 - h6 or a p or em or strong? You could simply create contextual style definitions for divs and spans which would, more or less, do everything that other tags do.
I mean really, if HTML was really just there for CSS all you'd need would be , , ,
Re:Kudos on a great upgrade! (Score:5, Informative)
http://slashdot.org/users.pl?uid=1 [slashdot.org]
Oh, and UID 0 is always the current user.
Re:Kudos on a great upgrade! (Score:3, Informative)
Konqueror 3.4.1 on FreeBSD 5.4 shows no such problem for me. Both Firefox 1.6 and Konqueror display identical. Perhaps you should check your software first instead of bitching about slashdot for trying to adhere to web standards?
Just a thought...
Re:HTML 4.01?! (Score:3, Informative)
No, I didn't miss the point. I was saying that there's no reason to even use HTML/XML comments in the first place. Hiding scripts in HTML comment tags was a nasty hack to keep browsers that didn't recognize the script or style tags from displaying the contents of the script tag. No browser (that I am aware of) released in the last 8 years requires this nasty hack, but everyone still does it anyway. My point was that all of his nasty escaping is unnecessary. The following will work fine in every browser that I'm aware of:
<script type="text/javascript">
</script>
And if you still want to be paranoid, and you don't believe me that the comments are completely unnecessary, you can (as I stated) just use external files:
<script type="text/javascript" src="foo.js"></script>
Re:Kudos on a great upgrade! (Score:3, Informative)
http://slashdot.org/search.pl?op=users [slashdot.org]
That will give you 30 users at a time, with a link at the bottom to go to the next 30. If you know approximately what UID you had, it makes it much easier than trying them one-by-one.
Re:HTML 4.01?! (Score:3, Informative)
-Dom
Re:HTML 4.01?! (Score:3, Informative)
The correct mime type for XHTML is application/xhtml+xml. Parsers should also recognize the generic XML mime-types: application/xml and text/xml.
Re:MOD PARENT DOWN (Score:3, Informative)
Page Threshold = 50 posts
Story has 200 posts, 4 pages
First thread is 101 posts.
Slashdot will show the first thread on pages 1, 2, and 3.
Page 4 will show the last 50 posts
The other 49 and their posts and threads will be invisible unless you go into nested mode.