K-Squared Ramblings

Webbish Links

The WaSP Buzz recently posted several links to CSS resources, including a rather thorough CSS Reference at SitePoint.

The ISC reminds us that IE7 will be pushed out to WSUS next week, which should help get rid of IE6. Yeah, I’d rather more people switched to Firefox or Opera, but I’m at the point where I’d love to be able to stop worrying about IE6’s shortcomings when trying to build sites. IE7’s shortcomings are much easier to work around. (Sorry to keep harping on this!)

The inventor of Norton Antivirus talks about computer security and has some rather interesting ideas on what policies are worth pursuing…and what policies aren’t. Long passwords? Great for protecting a stand-alone machine, but on a 10,000 machine network, they only need to crack one. Patch everything? Not every vulnerability gets exploited. I’ll have to read the Slashdot thread when I have time; that should be really *ahem* interesting.

Advantages of standards-based design: Compatibility

Microsoft is really pushing for people to make sure their websites and apps are compatible with IE7. Apparently this is a real concern for a lot of people who relied on certain proprietary features, bugs, and quirks in IE6. I guess they figured they wouldn’t have to worry about future versions. (Hmm… I wonder where they got that idea?)

The fact of the matter is, I’m not worried. I tested my personal sites and the sites I’d built for work months ago, using the IE7 betas, and more recently with RC1. I made a couple of minor changes to some stylesheets, but that was about it.

Why? I’ve been writing standards-based code for years. I validate it from time to time, and I test to make sure it works in the latest versions of Firefox, Opera and Safari as well as IE. So the code was already portable.

Plus, anything new I’ve built since January has been designed with IE7 in mind from the beginning.

Most of the changes were to workarounds for IE6. Either stopping them from running on IE7 (if the bug was fixed), or keeping them running on IE7 (if it was done using a CSS hack).

Corporate Acid

The big news in web browsers this week is the formation of the Mozilla Corporation, a wholly-owned subsidiary of the Mozilla Foundation. So far it looks mainly like an accounting change so that they can work more easily with businesses that aren’t quite sure how to deal with non-profit partner. Firefox, Thunderbird, etc. will of course remain free and open-source. I’m optimistic about the change—being a for-profit company doesn’t seem to have hurt Opera much.

Speaking of Opera, they’re close to passing Acid2 in-house. They seem likely to be the next browser to pass (after Safari, iCab, and Konqueror). The next question is: Who will be the first to release a final version that passes the test? Safari and Konqueror still only pass on the development branches, and iCab’s still in beta.

CSS Outlines

I’d never bothered with the outline property in CSS before, mainly because I could never see what made it different from border. OK, it doesn’t affect the object’s size or position, but you can account for that when designing a page. And I could see it might be useful if you wanted to have a two-layer border around an object, since the outline starts just outside the border.

Well, Firefox is nearing 1.1 alpha, and among the new features is real support for outline. I figured I’d set up a test page and see what happened.

I set up two classes, one which applied an outline and one which applied a border, and just tried them on different objects. <p> only looked different in positioning (since border is just inside the edge, and outline is just outside), but <span> illustrated the difference clearly:

The first paragraph has some text with an outline. The second has text with a border. In both cases, the text wraps at the edge of the window, but while the border breaks and picks up again on the next line—as if the span had simply been chopped into pieces—the outline completely encloses each section on its own. This fits with its intended purpose, which is “to make [elements] stand out.”

Opera and Konqueror (and presumably Safari) seem to handle outline already, and display my test page the same way as Firefox 1.1.

Trusted Site, Untrusted Browser

I installed the just-released Netscape 8 Beta. It imported most of my settings from Firefox, including bookmarks, cookies and even history. One of the first things I always check with a new browser is how it identifies itself, which in this case is as Firefox 0.9.6. (Presumably they’ll get on this by the time the final version is out.)

First impressions: importing was clean and worked well. UI is a bit freaky, as things are spread all over the place—like the main menu, which is in the upper right and in line with the title bar instead of where the menus are on every other Windows application. The multiple toolbars seem confusing at first (it took a while to dig up my bookmark bar, for instance). Then I looked at the site trust/rendering choices, the big exciting feature of this release. And I’m not impressed. Or rather I am, but not favorably.

The current tab shows a shield icon indicating the trust level of the site: Green if it’s been verified by a “Netscape Security Partner,” yellow if not, and I would presume red if it’s a known phishing/virus/etc. site. There’s also an icon indicating the trust level: a check mark if it’s trusted, an ellipsis for “not sure” and an exclamation point for not trusted. Unverified sites are, by default, in the “not sure” category. So far this makes sense.

Clicking on the shield icon opens a site controls dialog box enabling you to choose to what extent you trust the website, and below that, whether to display the site using the Mozilla Netscape or Internet Explorer engine: Read the rest of this entry »

Random Links

AKA stuff I wanted to write about earlier this week but need to just slam out while they’re still topical.

• Judge slams SCO’s lack of evidence against IBM. Also Groklaw’s take. After all the wild claims they’ve made without providing evidence, it’s nice to see even the judge is getting sick of it.
• Coke may try out coffee cola – Yeah, it’s a month old, but it’s news to me. (Incidentally, I hate CNN’s practice of deleting stories from their website. That’s where I read about this earlier this week, and I had to go hunting for an article that was still up.) [Note: I've had to track down a third copy of the article.]
• MP3tunes.com shuns DRM – former MP3.com founder starts a new legal download service, and sticks with unencumbered MP3s instead of messing around with ultimately-flawed digital rights management. I’m reminded of Cory Doctorow’s famous talk on why DRM is bad for everyone.
• Beware the unexpected attack vector – Your enemy may not come at you from the direction you expect. Set up sentries around the beach, they’ll get you through the ocean. Set up a firewall, they’ll get you through web browsers. It’s mainly about computer/network security, but it has an interesting story explaining why there’s only one major newspaper in Los Angeles.
• CSS Zen Garden parody: Geocities 1996 – I’ve been meaning to post a link to this for over a month. It’s fully valid code, and manages to bring back the worst of 1990s web design.

Creating CSS Buttons

Several months ago, I went on a minor site optimizing kick. One thing I decided to do was replace the validation labels with something smaller, less obtrusive, and directly on the page. I tried to duplicate the look of the classic antipixel-style buttons (like the ones you see on the sidebar here) by splitting a link into two <span> elements, but had so much trouble getting borders and height to match up correctly that I wrote it off completely.

After a while I came back to it, and started with very simple buttons like this:

Your browser shows this as:

Valid XHTML XFN Friendly

Here’s the CSS and HTML used for this version: Read the rest of this entry »

Simple drop shadows? IE/Win and NS4 don’t think so!

I found myself thinking of A List Apart’s CSS Drop Shadows, and decided I’d modify my writing portfolio to use actual drop shadows instead of the clunky border mess I’ve had for the last few years.

The first thing I realized was that the technique isn’t suitable for large, arbitrarily-sized regions, because you need to have a background image as large as or larger than the area being given the shadow. When you’re trying to apply it to most of the page, you need a multi-thousand pixel image. That’s not only hard to work with, but even if it compresses well it’s still going to take up a lot of unnecessary room in the browser’s memory.

I wanted to keep the markup simple, so I shopped around a bit more and came across a CSS drop shadow example at W3C which was very simple: all you do is put a shadow-colored div behind the area and mess with margins.

Well, that worked great in Mozilla, Opera, Konqueror and Safari. Then, the dreaded Internet Explorer test.
Read the rest of this entry »

New Layout

I finally put together a new layout! I tried to do as much as possible in CSS and leave the HTML as little changed as possible, and when I finished I was able to keep the default WordPress layout as an alternate. In theory I ought to be able to plug in any of the submissions from the WordPress CSS Style Competition as alternates as well.

It’s been tested so far on Mozilla, IE 6, Opera 7, and Konqueror 3.2. It doesn’t use anything more complicated than Fahrner Image Replacement, so it shouldn’t cause too many problems. I’ll try to test it in a bunch of other browsers at work tomorrow.

I consider this a first draft – among other things I figure on adding to the main title banner – but it’s something a bit more distinctive than the out-of-the-box layout we ended up with after the upgrade to 1.0.

Updated Feb. 12 and Feb. 13 to describe testing in more browsers and the interesting saga of tracking down a bug in Internet Explorer 5.0: Read the rest of this entry »