Category: css

Getting Pocket IE to Obey the “Screen” CSS Media Type

Ashley Bischoff4 Comments

CSS Media Types can be rather handy for delivering CSS rules to one platform or another. Not uncommonly, they can be used to automagically create printer-friendly pages. They can, however, also be used to create mobile-friendly pages (such as for PDAs, cell phones and the like) through the “screen” media type. The general idea is that large screen devices (CRTs and LCD monitors) can be fed CSS rules with the “screen” media type while handheld devices get a set of CSS rules with the “handheld” media type.

One fly in the ointment is that Pocket IE tries to outthink a page’s media types. Because some front-end coders put much of their CSS in a file with the “screen” media type, the Pocket IE development team decided that their browser should render rules with the “screen” media type. Ruh-roh. All of a sudden, all of the potentially small screen-unfriendly declarations “ floating, absolute positioning and the like — were being gargled and swallowed by this diminutive browser.

What that meant was that coders had to employ CSS with “screen” and “handheld” media types; and, in addition to having the usual mobile-type tweaks in “handheld” (such as perhaps removing extraneous page elements), coders also had to resort to undoing the effects present in “screen” stylesheets. Yuk. Pleasantly, Michael Angeles discovered a workaround — by capitalizing “Screen”, Pocket IE properly ignores CSS with that media type.

I’ve not been able to find a comprehensive table of CSS media support among handheld browsers, but the comments attached to this post about CSS for Mobiles are a decent starting point. There, the author set up some test pages for CSS media support and invited readers to send in their results. Here’s an excerpt:

  • Pocket IE — applies “screen” and “handheld”
  • SonyEricsson browser — passes over “screen” and applies “handheld”
  • Blackberry (7730) — neither “screen” nor “handheld” are applied
  • Motorola browser — passes over “screen” and applies “handheld”

I wouldn’t be surprised if some handheld browsers still incorrectly apply the “screen” media type. All the same, with Pocket IE back on the good side of the force, that helps quite a bit; granted, Pocket IE doesn’t have quite the market dominance that desktop IE does, but (until now) it was still one of the major offenders among mobile support for CSS media types. And, with a work-around as straightforward as tossing in some capitalization, it’s not hard to push Pocket IE in the right direction.

#CSS IRC Channel on EFNet

Ashley Bischoff6 Comments

I came across a mention of a #CSS IRC channel among the comments on a post at TechCrunch. I did some Googling around to try to see if it was a just-started channel trying to get off the ground, but it looks to be a more established venue.

I’ve found that a second set of eyes can often be invaluable when debugging CSS (or code in general, I suppose) — sometimes all it takes is a second point of view to help shed some light on a problem. So, I think I may just give this channel a shot. The channel is #CSS on EFnet and I figure that I’ll load it up during the day and let it run in the background; even if I don’t run into an issue myself, maybe I’ll be able to help someone else out.

The channel’s official home page goes over a few rules that they follow — they're generally pretty reasonable, such as “You must validate” and “We need a URL to your problem”. In addition, though, they also discourage nick-changing (“nickname_lunch”, “nickname_brb”, and so on) which I may have to un-learn. I’ll give it a try and see how it goes :).

(Oh, and here’s a list of EFnet servers in case that’s helpful.)

Opera Browser Now Free!

Ashley Bischoff9 Comments

Opera has always been a good browser with excellent standards support — and now it’s free!

Opera has removed the banners, found within our browser, and the licensing fee. Opera's growth, due to tremendous worldwide customer support, has made today's milestone an achievable goal. […]

For a moment there, I was wondering how they’d make their money, but it looks like they have a Premium Support plan in place. All the same, I’m pretty stoked about this. And, if Firefox didn’t have so many scrumptious extensions, I’d consider trying Opera as my day-to-day browser.

Update 2005-09-23: According to Om Malik, it was Google that made Opera free, through a compensation deal. Well, yay Google :).

IE7 Beta Due This Summer

Ashley Bischoff1 Comment

In an apparent policy reversal, Microsoft has said that it will release a beta of IE 7 this summer (Microsoft previously said that IE updates would only be available with Windows upgrades). Details seem to be scarce at the moment, but a Q&A with Mike Nash, their Corporate VP of Security, revealed this much:

“We’re very excited to announce at the RSA Conference today that this summer we’ll release a beta of Internet Explorer 7.0 for Windows XP with Service Pack 2, which will have even more enhancements to security and privacy protections. These enhancements align very closely with the three core tenets of Microsoft’s security approach that I mentioned earlier. Internet Explorer 7.0 will be the most secure browser we’ve ever released, building on and surpassing the success of the SP2-enhanced Internet Explorer 6.0. We don�t plan to ship it until it meets our quality bar, which we�ve set pretty high. […]”

So, while it looks like they’re primarily focusing on securing their browser (which isn't a bad thing), I’m hoping that they’ll improve IE’s standards compliance as well — oh, what I wouldn’t give to be able to use adjacent sibling or attribute selectors.

HTML Altimeter Bookmarklet

Ashley Bischoff3 Comments

I heard about this an intriguing HTML Altimeter bookmarklet via Asa (or “Topographic View”, as the author calls it). It’s a bit hard to describe, but it essentially reassigns the CSS background for each element on the current page to represent the number of nested elements at that point.

Level zero starts at black and each additional nested element gets closer to white (with 16 shades in total). To make use of the bookmarklet, visit the author’s page and drag the “Topographic view” link to your Personal Toolbar. Then, just click that link to see the effect applied to the current page.

As you might expect, well formed CSS-based sites barely get out of black, but table-based layouts can easily approach pink (the color designating nesting past 16). All the same, though this bookmarklet is good for an easy laugh at the expense of poorly built sites, I’m not sure if it has any practical development applications :-/.