Tag Archives: Opera

Webkit display:table-cell Problem

I recently tried to retrofit a mobile layout onto an old table-based site using CSS. It was a fairly simple layout: A banner across the top, two columns, and a footer. I figured I’d use CSS to “unwrap” the table and make the sidebar and main content area into full-width sections instead of side-by-side columns.

In theory this should be simple: CSS handles tables by using the display property and assigning it table, table-row and table-cell for the <table>, <tr> and <td> elements. You can assign these properties to other elements and make them act as tables, or you can assign block or inline to these elements and make the table act like a series of paragraphs.

Initial testing worked perfectly in Firefox 3.6 and Opera 10.5x. Internet Explorer 8, as expected, ignored the changes entirely. Chrome, however, did something very strange, and Safari reacted the same way: The banner shrank, and the columns changed from a narrow sidebar to a 50/50 split…making it actually worse for small screens.

Clearly WebKit didn’t like something I was doing. Unfortunately, WebKit powers the exact platforms I was targeting: the iPhone and Android!

I dug around with the developer tools a bit to see if I could figure out what was going on. Was the browser not applying the property? Were the table cells inheriting the “original” property from somewhere else? Did I need to change properties on thead and tbody as well?

What I found was that WebKit did recognize the display:block I had added, but somehow the computed style was reverting to display:table-cell. This only applied to table and td, though. Table rows actually did what I told them to, which was why the result ended up looking bizarre.

If it hadn’t changed anything, I probably would have chalked it up to the capability just not being implemented yet. But since it worked on table rows, but not on cells, I decided to treat it as a bug in WebKit and went looking for the best way to report it. I ended up creating a WebKit Bugzilla account and reporting it as bug 38527.

Check out the testcase in Firefox 3.6 or Opera 10.5 to see what it should look like, then take a look in Chrome 4 or 5 or Safari 4.

What’s Cool in Opera 10

Opera IconAfter a long wait, Opera 10 is out! So what’s new in this first double-digit web browser?

Turbo

The biggest new feature is Opera Turbo, which can massively speed up web access on a slow network connection. Turbo takes the compression used for Opera Mini, which has to deal with slow cell phone networks, and brings it to the desktop. On fast connections you won’t need the proxy, but if you’re stuck on dial-up or sharing a busy network, it can help immensely.

I definitely could have used it on the painfully slow hotel wi-fi during Comic-Con!

Turbo can be turned on and off through the status bar, or set to auto-detect your network speed and switch on when it would help, and off when it’s not needed.

Speed

Even without Turbo, Opera 10 is a heck of a lot faster than Opera 9 was! The app itself is a lot snappier, it displays pages faster, and it responds quickly. Opera feels lighter than Firefox again, after the (comparatively) clunky 9.x series.

Web Fonts

Opera’s CEO CTO recommended embedding TrueType fonts with CSS in 2007, but Safari was the first web browser to support it in a non-beta release. Now Firefox, Safari and Opera can all download fonts as-needed. That means websites can use fonts that aren’t already installed on your computer.

Until now, if a designer wanted to use a font other than one of the standard fonts that come pre-installed with Windows or Mac OS, they had to save the text as an image. That’s fine for banners and the like, but a pain for anything that changes regularly…like headlines or content.

You can read more about web fonts at Mozilla Hacks, and see them in action at Speed Force (font write-up).

Site Compatibility & Features

Website compatibility has improved a lot, and Opera has continued to add support for newer technologies. It’s great to see Opera, Chrome, Safari and Firefox all working toward the next generation of the web. (If only Internet Explorer were along for the ride – at least IE8 has finally caught up with the last generation.)

Spell-Check

Opera has had on-demand spell checking for a while, though on Windows you had to install a separate dictionary. Now it’s built-in, and it’ll underline misspelled words as you type. (Downside: it underlines inside HTML code. I don’t really want to add “href,” “li,” and so forth to my dictionary.)

Unite Postponed

One thing Opera 10 doesn’t have that was introduced in the betas preview snapshots is Opera Unite, which lets you set up a presence on your computer that other people can see for file sharing, social networking, etc. Apparently they decided it needed more work and didn’t want to hold up the release.

But Wait, There’s More!

Some other new features:

  • Visual tabs: Stretch out the tab bar and see a thumbnail of each page you have open.
  • New e-mail client, including the long-requested ability to compose with formatting.
  • Automatic update.
  • Customize Speed Dial.
  • Web apps integration with web-based email and feed readers.
  • Improved developer tools (Dragonfly).
  • Opera Link: synchronize bookmarks, history, notes, etc. across multiple computers and phones. (Not new, but I think it syncs more types of data than it used to)

And a lot more.

As a reminder: Opera is free (as in beer). It has been for almost 4 years now, but it’s worth repeating because every once in a while you see someone who thinks it’s still pay or ad-based software.

Oddities: Environment Ideas, Browser Bits…and Perry Mason

  • Top 10 Odd Environmental Ideas (Time via @ThisIsTrue). Some are disturbing, but I like the staple-free stapler. #
  • Aha! The 17 links that have been stuck in the linkcheck queue since yesterday are all to posts on the old Spread Firefox site. The archive’s locked. #
  • Spam: “Para legal information” from…Perry Mason. Wait, shouldn’t that be “Perry legal information?” #
  • Odd: Opera’s Reinvent the Web event is launching at midnight Pacific time? #

Browser Sniffing Strikes Again!

As the first major web browser to reach a double-digit version, Opera has been testing out alpha releases of version 10 for months now. One of the early problems they encountered was bad browser detection scripts that only looked at the first digit of a version number and decided that Opera 10 was actually Opera 1, and therefore too old to handle modern web pages.

After extensive testing, they’ve concluded that the best way to work around this is to pretend to be Version 9.80. From now on, all versions of Opera will identify themselves as “Opera/9.80” with the real version appearing later in the user-agent string.

For example:

Opera/9.80 (Macintosh; Intel Mac OS X; U; en) Presto/2.2.15 Version/10.00

This is similar to the way all Gecko-based browsers identify themselves as Mozilla/5.0, then list the real browser name and version number later on, which makes me wonder why they didn’t just stick with that increasingly irrelevant prefix — though I suppose any scripts looking specifically for Opera versions might have still picked up Opera/10 later on in the ID.

It’ll be some time before Firefox or Safari runs into this issue, but with Internet Explorer 8 in wide release, you have to wonder…what will Microsoft do when they get to IE 10?