Archive for the ‘Browsers’ Category

Getting Delicious on Firefox 4

Thursday, April 21st, 2011

Yahoo is really pissing me off.

I’m glad that Delicious hasn’t gone the way of the dodo (by all accounts a delicious bird that pirates feasted upon), but I’m annoyed beyond all belief that since I’ve upgraded to Firefox 4 that I can’t make use of the add-on anymore.

Manually going to Delicious and doing the bookmarking directly on the site is like being forced to create mayonnaise by scratch for every sandwich. Somewhere, at some point, you just switch to Miracle Whip.

Gentlemen, I hate Miracle Whip.

Seriously, what’s in that stuff?

Today, like most days, I went to hit the Delicious icon to store a lovely page in the cloud for my perusal later. And today, like every day since Firefox 4, I cursed as I remembered I can’t do that anymore. So I went searching in a futile hunt for an update. It’s been weeks. Surely some Yahoo engineer somewhere fixed it already. Right?


But as fortune has it, someone else shared my distaste for waiting, and was more clever than I. Go here for instructions by James Moss on how to make the add-on work in eight easy steps. Thank you, James. You’ve saved my sanity.

Firefox 3.6, box-shadow & transform

Friday, March 18th, 2011
The Forest Browser Friends posing together for a photo.

As long as you’re not on a legacy browser, to the left you’ll see an image that is rotated 90 degrees.

If you’re using the current version of Firefox (3.6 as I write this), you’ll also notice a rather unpleasant visual effect on the box-shadow, which isn’t properly surrounding the rotated image like it should be.

I came across this by accident while working on some 2d transforms for a series of photos in a client’s project. I didn’t catch it at first because it only happens somewhere between 82 degrees and 108 degrees (and the direct opposite around 262 degrees to 278 degrees). I might be off by a degree or two, but that’s about the range where the shadow sheers off and snaps down to the picture’s height in its original orientation.

I’ve got a test case here. You’ll note Chrome, Safari, Opera and Internet Explorer (yes, even IE) are doing it right in their current versions. Only Firefox isn’t.

Considering how long Firefox has been implementing transforms in comparison to Internet Explorer (infamous inbred step-child of the browser market), this is really disappointing. It’s details like this that are slowly costing me my love for the flaming-tailed fox.

The bug is fixed in the Firefox 4 beta, thankfully. But that begs the question, how much longer do we need to wait for Firefox 4 to release?

Forest Browser Friends: The Great Race

Wednesday, March 16th, 2011
CSSquirrel #84: Forest Browser Friends - The Great Race!

Even if haters can’t admit it out loud, they probably need to admit it to themselves deep down inside: Nine is a contender.

For years, Internet Explorer has been out of the game when it comes to any discussion of what constitutes a modern browser. Version 8, as much as it was a drastic improvement over what had come before, was something I viewed more as a correction of 6 and 7′s many errors, and clearly not an effort towards embracing more modern features.

But Nine? Hardware acceleration. A blazingly fast JavaScript engine. Robust CSS3 support (missing things, but includes a decent chunk of what I wanted to see). HTML5 features like <video>, <audio> and even <canvas>. SVG support. On top of it all it’s got a slick, minimalist interface.

Internet Explorer 9 is a modern browser. Period. Dissenters and naysayers are at best nitpicking and at worse lashing out due to old habit.

There are downsides. I wish that they’d made it for XP, but as Microsoft is in the habit of selling operating systems I understand how complex of an issue that might be for their business model. It doesn’t include all the CSS3 I want to see (gradients, anyone?) but they do give a reasonable-sounding reasoning why (ostensibly, they don’t want to add a feature that has to be changed or removed later, and gradients currently have at least two exclusive syntaxes).

But the bottom line is that although IE9 isn’t perfect, it’s also not the flawed, stunted beast of ill-will and developer-consuming horror that its ancestors were. We, as designers, should be grateful that we’ve got another modern browser making our websites look better (and capable of doing more) without requiring us to craft different code for different browsers.

(But feel free to kvetch about the challenge in getting XP users to upgrade to a modern browser. My opinion on that? Tell them to use Chrome or Opera.)

The Orange, Flaming Elephant In The Room

I don’t, as a rule, use Internet Explorer as my daily browser. After all, I want the whole, real web, and historically it was not the best candidate for that. Now that Nine is out, I’ve found in the past couple days that my tolerance levels for my de facto browser, one Mr. Firefox, is suddenly waning.

Firefox is slow.

Today’s comic makes light of this sad, sad bit of information.

Additionally, when using some newer “HTML5″ JS features (such as localStorage) I’ve found Firefox even locking up on what seems like a quick, trivial task for competitors like Chrome. And the old mainstay of my reason to keep Firefox, the plugins, is no longer as unique a feature as it was. I’ve been trying to stick it out until Firefox 4 is released, but I’m losing confidence rapidly in Mozilla’s formerly delicious love child. When using a laptop or trying to quickly load a page to show a friend a neat bit of code or a cute cat video, I’ve lost my patience with Firefox. I’ll fire up Chrome… or Heaven forfend, I’ve even used IE9 in the past day.

I’m not convinced that Internet Explorer’s plunge in its percentage of browser users is going to change yet, despite IE9. I do think, however, that if current trends continue then Firefox is going to find itself facing a plunge of its own while IE’s fortune improves. Of all the modern browsers out there it currently seems to be lagging the most.

That’s right, I said it. I think Firefox is lagging behind Internet Explorer now in terms of modernity.

It’s all well and good to support gradients and other CSS3 features. But right now with the blossoming trend of web apps and the general push to a web-based computer culture, speed is becoming the king of relevance in making a browser worth using. And at the moment, I’m not convinced Firefox 4 is improving enough to close the gap.

Nine isn’t going to be my browser of choice. It’ll take some time yet before Microsoft can convince me to get back to using the big blue e on a regular basis. But its dramatic improvement has made me strongly examine my current browser of choice. I hear Chrome has Firebug.

Good show, Nine. Firefox, time to pony up.

IE9 Early Look: It’s Not Perfect, But I’m Glad It’s Coming

Wednesday, November 18th, 2009

Dean “Good Luck Pronouncing It” Hachamovitch (who stars in the old, old CSSquirrel comic Passion of the Dean) made a post on the IEBlog today giving us an early look at IE9 and the improvements it’ll contain. These improvements contain (but are not limited to) improved CSS3 support, better-looking fonts, hardware acceleration, better standards support and faster performance. Woo!

But some, like Dave “Maximus” Shea, aren’t impressed, as he makes clear here.

I get it. We’ve been hit in the face by Internet Explorer so many times that it’s impossible to think well of it. But the increasing speed at which they’ve started to bring out new versions, and the clear improvements of 8 over 7, have me convinced that what they’re doing is a good thing. Yes, there’s no mention of canvas support. Yes, some of these features were supported years ago elsewhere. But they’re trying hard to improve, and more importantly, they are improving.

IE Bots

So, I for one am glad to see this announcement. It makes me happy. Also, I secretly hope that if the version numbers keep going up on IE, certain stodgy corps will be shamed into updating past IE6.

Hey, a guy can hope. Right?

Accessibility: Take 2

Thursday, September 17th, 2009

As I first discussed here, and then officially announced here, I’ve been upgrading CSSquirrel with accessibility features to help make this site more accessible for the vision-impaired. I first considered the idea several months back, when John Foliot approached me with a code sample that I could use to give the comic an alternative long description for screen readers. I’ll admit that I didn’t act on it at the time, though, because it seemed like a low priority. How many blind people read comics?

I realized the mistake in my complacency when I received my first blog comment from a blind user here, where he was testing his ability to post despite the CAPTCHA that was present. At that point I realized that if even one person was visiting my site and incapable of at least knowing what was happening in the comic, they were getting a severely degraded experience, which was a disservice on my part.

My growing awareness of how frustrating such a thing would be is borne out in my Squirrel in the Dark post. As a result of this, I went about adding an aria-describedby attribute to my comic’s image tag. Later, based on feedback from a JAWS-10 user and with another suggestion by John, I doubled up with the addition of the longdesc attribute to the image. In both cases, the value for the attributes is an URL for a separate transcript page.

Thinking all was well, I congratulated myself and went back to poking fun at the HTML5 process and spent a lot of time drawing people in spandex.

Of course, it wasn’t that easy.

First, a new accessibility problem had reared its ugly head. When I built the site’s CAPTCHA, I had actually taken vision-impaired users into consideration and provided description text of each image to allow them to select the proper one for the CAPTCHA (mind you, not including the word that the CAPTCHA asked you to match with the image). However, when someone tabbed through the page’s links and fields, the tabbed indexing would go out of order, going through the other input fields for the comments at a different time than the CAPTCHA itself, making the whole affair confusing.

Secondly, I learned that the aria-describedby element isn’t meant to direct to other pages (which I think is a bit silly of a limitation, but I’m not an expert at these things), but rather should contain the ID of an element on the page containing a description. It’s quite a difference, and one I’ll admit I made by failing completely to do enough homework on the matter in advance.

I’d thank Henri Sivonen for his “bug report” on the aria-describedby issue, but he chose to use the issue to draw a comparison to the Super Friends‘ list of concerns (and its initial posting to a blog instead of the WHATWG mailing list) and neglected to mention it to me directly. So instead I’ll thank Laura Carlson for drawing my attention to my error, Arve Bersvendsen for sharing his opinions on alternate techniques, and Steven Faulkner for suggesting a way to use aria-describedby to link validly to off-page content. I know others contacted me about the error, but I’m sorry to say I don’t remember all the names at the moment.

My solution, therefore, was what Steven suggested in the W3C mailing list. The aria-describedby attribute on the image tag now has a value that is the ID of an anchor on the page. That anchor then links to the comic’s transcript page. The anchor is hidden by CSS to avoid distracting sighted users. You can examine a recent comic, like this one on the Super Friends, to see it in effect (if you’re on a normal browser you won’t notice much unless you view the page source).

The CAPTCHA’s messed up tabbing issue turned out to be an easy fix as well. Stéphane Deschamps pointed out in a comment that there was tabindexes on the form’s fields, which was causing the tab order to go screwy. I didn’t know these existed, having failed to examine the blog software’s default fields very much. Now that he’s pointed it out, I’ve taken them off, hopefully making the CAPTCHA less burdensome.

As I’ve stated in the past, I’m a non-expert at pretty much everything that doesn’t involve vector squirrels. However, I have an appetite for absorbing as many web-related skills as possible to help better the web through direct effort or comic-related advocacy. One of these areas of the web that I realize that I need a great deal more knowledge about is accessibility, and it’s a deficit that I seem to share with almost every designer or developer I meet.

Having admitted my deficiency, I’d like feedback on this issue, if you have it. Does the updated aria-describedby technique for serving the transcript actually use the attribute properly? Is the CAPTCHA usable by vision-impaired visitors with approximately the same level of annoyance all people feel when they use a CAPTCHA? Is there another feature on the site that causes accessibility issues that I haven’t mentioned or considered?

To those who contact me with these problems, thank you. I’m in your debt.