Wednesday Feb 27, 2008

Border-Radius Roundup

The black and white object you're looking at will look different depending which browser you're using, but it should look like a circular target of some sort. It was created using nothing more than CSS's border-radius property and a couple of span tags. All of that to say this: It looks like Safari/Webkit browsers are rendering border-radius quite nicely these days, and Gecko-based browsers aren't far behind, if Firefox's latest public beta means anything. To illustrate this, I've posted some screenshots of a test page I built. This wasn't an exhaustive test for CSS3 border-radius compliance, just an attempt to see where the browsers were with basic support. Only one background image is used (shown below), the rest is pure CSS. (All tests done on the Mac.)

[Read More]

Tuesday Nov 27, 2007

Liking Firefox3's Page Zoom

Switching to Firefox 3 beta was just an experiment; I wanted to take a brief tour and then switch back, but now I'm addicted to the new page zoom, which has apparently replaced the text zoom of previous Gecko browsers. Rather than just bumping up all font sizes like it did before, which usually broke the page's layout, now the entire page scales proportionally, including background images and pixel-defined values. Fixed-width designs no longer look like a lonely column in the middle of a vast empty space. Flex-width designs no longer have ridiculously long lines of text. For someone who both hates tiny fonts and has a large monitor, this is big (both literally and figuratively). What's more, it seems to remember your page-zoom settings on a per-domain basis.

Wednesday Sep 05, 2007

A Tale of Two Lines

Around October 2006, two lines began to converge. It appeared that within a few months they would meet, cross, and continue on divergent paths. Those of us paying attention really wanted this to happen, but alas, it never came to pass. After the turn of the year, the lines began to level off, resolving onto seemingly parallel courses. Now, in mid/late 2007, their rate can only be described as geological.

These lines represent the popularity of IE6 versus IE7, plotted over time on Sun.COM. Had the lines crossed, it would have signified the glorious, long-awaited death of IE6. Of the fifteen or so browsers we try to support, IE6 alone accounts for up to three quarters of our debugging workload, plus it makes us write inelegant code. It's not that IE7 is so great, it's just that IE6 is such a hornet's nest of nasty bugs.

For some reason, IE6 usage just won't go down


Interestingly, every weekend, IE6 usage drops, while IE7 spikes. It gives the line a squiggly appearance. My theory is that IT departments are refusing to upgrade to IE7 for fear of breaking horribly-coded internal legacy web applications. In fact, my wife even confirmed this very state of affairs at her own company. People are locked in. One shudders to imagine the insoluable mass of nasty code grinding away out there on the world's intranets.

I think the desire to upgrade exists, but the hard reality of legacy web apps is keeping things at a standstill. Plus, at the end of the day (literally) most people are comfortable using the same browser at home as they do at work. If you peer at the graph, you can almost imagine the spikes as being little hands grasping out between the iron bars of corporate IE6 imprisonment, moaning, "Save us!"

Thursday Nov 11, 2004

My Favorite Firefox Tricks

To celebrate the long-awaited release of Firefox 1.0, I'm going to share a few of my favorite Firefox tricks and techniques.

  1. Middle-clicking. I read a lot of articles with links peppered liberally throughout. Firefox allows me to middle-click links and continue reading while the new pages load up in background tabs. When I'm done, all those pages are finished loading and ready to read! (If your mouse has a scroll wheel instead of middle button, click the scroll wheel.)
  2. Text-zoom. Web designers absolutely \*love\* the look of microscopic font. Evidently, their mantra is "Let not the content interfere with the design". Well, pooh on them. I just zoom until the font size suits my taste. Text-zoom is [CTRL +] and [CTRL -]. [CTRL 0] resets the font to original size.
  3. Kiosk mode. AKA fullscreen mode, kiosk mode is when the viewport (the part of the screen that shows web page) is stretched from edge to edge, minimizing the amount of scrolling and other UI distractions. Hit F11 to toggle to kiosk mode. (Combine text zoom with kiosk mode to make web pages more visible for presentations, etc.)
  4. Block images from... If a web page insists on using banner ads that would induce seizures in epileptics and annoy anyone else, right click on the ad and choose "block images from...". Reload the page and all ads from that server will be gone.

My name is Greg Reimer and I'm a web technologist for the Sun.COM web design team.


« April 2014