Subscribe to RSS feed

CSS3 Quick Reference - panel and page

, , ,

In 2007, I added a CSS Quick Reference Panel to my public panels collection to make it easy to find all those new CSS3 properties, @-rules etc that were starting to get used by then. This was inspired by Eric Meyer's CSS 2.1 Quick Reference, and nowadays supersedes it as almost all browsers in active use support many CSS 3 features - see the excellent caniuse.com for up-to-date information on browser support.

This panel was originally hosted at my employer-provided webspace on people.opera.com/rijk/panels/. Since I left Opera Software last year, Opera's admins have been so friendly to leave a redirect in place from there to my personal webspace at my ISP - so if you use it, it's a good idea to update your bookmarks smile

Recently I've updated this CSS Quick Reference, hence this blog post. I hadn't touched it since 2010, while the CSS Working Group has been quite busy these last few years. So there was a lot to add! Just this morning a new CSS 3 working draft was added, 'CSS Overflow Module Level 3', which is of course also included. I've only excluded the really old CSS 3 modules, those that haven't been updated after CSS 2.1 became a final Recommendation.

I've now also made a CSS Quick Reference page available, which uses an iframe to show the content of the specs. This way, those without a panel or sidebars sporting browser can also make use of this resource. At the same time I've updated the styles, so it looks a bit fresher and works better in all modern browsers. Alas, that meant ditching the now deprecated 'system color' and 'system font' styles. On the plus side, the html code is now minimalistic HTML5. The sidebar/panel version is also suited for use in mobile browsers with a smallish screen, since I added a <meta name=viewport content="width=device-width"> element.


In the same way I've refreshed the style of the HTTP/1.1 panel that I stole from Hallvord. This one is also suitable for mobile use, and gets a HTTP/1.1 page using an iframe as well.

End of an era... leaving Opera

Change is in the air. In October I'll start in a new job, leaving Opera behind me after more than 11 years working there. I've been working from my home in the Netherlands all those years, with regular visits to Oslo HQ to keep in touch with my colleagues. Now I'll be working for a smallish Dutch Web company, from their office, and so I'll have to get properly dressed each day. Just kidding, I've always been dressed when working : -)

I'll revert to being an Opera fan, like I was before Sue and Håkon invited me to work for them. And I'll keep following the continued development of the browser on all platforms. I'm using it on an Android tablet right now to write this blog post for example! A pity there's no M2 on Android... I will surely miss interacting with all the devoted fans out there, thanks a lot for your feedback over the years.

Opera Mail, by far be most used mail client

, ,

76. That's the percentage of people in the Desktop team using Opera Mail. 12% uses Thunderbird and 10% uses Apple Mail.

I did a quick check on the mail clients used by members and ex-members of the Desktop team, who have posted at least one message to our internal team mailing list in the last two years and a few months. Excluded: Opera people from other departments who sometimes post to this list; summer students, and messages sometimes sent from the webmail interface of our work accounts. We also have a lone Emacs user. He's a recent convert from the Core team though, where you can also find cases of Kmail, Mutt and Alpine. I've also spotted a case of Sylpheed from a sysadmin. And then there's one developer who has never send a message using a desktop mail client at all smile

Other interesting facts: one Desktop developer finally upgraded (for mail use) from Opera 6.06 to 10.60 during the previous year. And in the time period where I looked at, one developer switched from Kmail to Opera Mail, and one from Opera Mail to Apple Mail. Not a very adventurous bunch here when it comes to mail clients smile

Frequent Releases

, ,

One of the news items last week: Mozilla Firefox wants to speed up their release schedule. Apparently they plan to release not just Firefox 4 this year, but also Firefox 5, 6 and 7! They are spurred on by Chrome of course, which is getting out its feature upgrades at breakneck speed. Though I suspect many Chrome users hardly notice - one of the disadvantages of Chrome's silent upgrades is that users are not aware that they are using a newer version with new features smile

I think that the people who read my blog will be aware that, while Opera still uses rather classical version numbers, we've already moved to a schedule of multiple feature releases in a year. Quite different from the 'almost once a year' releases that Firefox manages, never mind the (recent) two-yearly schedule of Internet Explorer (wikipedia). Here's an overview of the last 5 years of Opera releases:

Version Date Cool features (add "tons of fixes" to each cell yourself)
Opera 11.50 2011 Speed Dial extensions; Password sync. Core 2.9: more HTML 5 support
Opera 11.10 April 2011 Speed Dial changes; URL Filter API; Plugin install wizard; Special use IMAP folders support; Core 2.8: CSS 3 Multicol, CSS 3 Viewport, CSS 3 Gradients, WOFF, File API, WebP
Opera 11.00 December 2010 Opera Extensions; Search suggestions; Tab stacking; Visual mouse gestures; Safer Address field; Mail panel; Mail integration of labels and filters; Plug-in on-demand; Core 2.7: CSS 3 Paged Media, CSS 3 Text, more HTML 5 support
Opera 10.60 July 2010 Core 2.6: Geolocation, Offline Web Apps, Web Workers, WebM video format
Opera 10.50 March 2010 Core 2.5: Native JSON, CSS 3 rounded corners, CSS 3 transforms and transitions, HTML 5 Video, Web Storage; Carakan JavaScript engine; Opera Widgets for Desktop; Vega graphics and UI revamp; Improved OS integration; Private browsing
Opera 10.10 November 2009 Opera Unite
Opera 10.00 September 2009 Core 2.2: Webfonts, Acid 3, CSS Colors, CSS Selectors, SVG improvements; inline spell check; Auto-update; Opera Turbo; Visual tabs; HTML mail compose; Crashlogging
Opera 9.6 October 2008 Feed preview; Mail features
Opera 9.5 June 2008 Core 2.1: SVG improvements; Opera Link; Opera Dragonfly; Quick Find (address field search); SSL-EV
Opera 9.2 April 2007 Speed Dial
Opera 9.1 December 2006 Fraud protection
Opera 9.0 June 2006 Core 2.0: Canvas, Web Forms 2.0, XSLT, XPath, Rich text editing, Acid 2; Opera Widgets; Bittorrent; Site Preferences; Content Blocking; Integrated Source Viewer, opera:config

(data picked from the excellent Opera version history document)

I'm no spokesman for Opera Software, but I hope we manage to keep up the release speed from 2010 in this year as well. It would be trendy to call them 12, 13 and 14 instead of (for example) 11.10, 11.50 and 11.60, but I'll leave it to the marketing people to decide on such things smile

BTW, I'm aware that some people will say 'stop adding features, just fix all the bugs first'. So, there's no need to add comments like that. Especially as it is totally unrealistic.

Ten years, one month, and one week

, , , ...

I should really take up blog writing again, so much more permanence than Twitter, or even forum and blog comments! And now Haavard blogged about his ten years at Opera... so I was inspired to write a bit myself smile I started at Opera a few weeks earlier than Haavard, January 2001, and in a special way: without going to the office! How did I manage to get a job where I didn't have to actually go to the office?

Read more...

The new My Opera interface looks nice. Let's see how this twitter integration works out bigsmile

On Speed

, , ,

I noticed some pro-Chrome and pro-Opera bitching in the Desktop team blog comments around performance of Opera 10.51 in the Peacekeeper benchmark. I wrote something to use in a comment there, but then I decided to blog it here instead. It's been a while smile

Some choice quotes:

Originally posted by VarunM:

Chrome 5.0.356.2 destroys Opera 10.51 Especially the "Data" section is ridiculous. Chrome was 300% faster than Opera.

Originally posted by Asires:

"Data" is unimportant in rendering. "Rendering" is important. Opera is twice faster than Chrome in rendering.. So, Opera is 200% faster than Chrome.



It is pretty much all nonsense to focus on the details and comparing them across systems, to be honest... It is great that the top-score belongs to Opera for now (though the Chrome developers are of course not resting before they get on top again!), and to see Opera in the front lines on all systems. It shows that the JavaScript developers (and other Core and Desktop developers) must be doing something right :-)

But how well a browser really serves you is a highly personal experience. It depends a lot on what kind of sites you visit, what hardware you run your browser on, your Windows version, and what extra browser features you can use/add/customize/get distracted by. The Peacekeeper benchmark seems to be a bit sensitive of your underlying system, in some cases Chrome beats Opera, in others it is the other way around. I don't think speed will be a limiting factor with either of these modern browsers to enjoy the current web.

More Single-key Shortcuts

, , ,

Now that Opera 9.5+ ships with a set of keyboard shortcuts where cat-owners are protected from accidental exposure to Opera's features by disabling the single-key shortcuts by default, I wanted to expand the shortcuts that can be enabled with the checkbox under 'Tools > Preferences > Advanced > Shortcuts'. After all, there is no need to be careful anymore with single-key shortcuts if only the happy few will enable them! Here's the current list:
1 Switch to previous tab 2 Switch to next tab 3 Focus next frame Shift+3 Focus previous frame
4 Minimize page 5 Maximize page | Restore page 6 Zoom to 100%
7 Zoom out 100% 8 Zoom in 100% 9 Zoom out 10% 0 Zoom in 10%
X Forward Shift+X Fast forward Z Back Shift+Z Rewind
H Show typed history I Load all images Shift+I Tri-state image toggle Shift+G Toggle author/user mode
A Highlight next URL Q Highlight previous URL S Highlight next heading W Highlight previous heading
D Highlight next element E Highlight previous element V Speak selection
Some items in this list are relics from the past that I don't need, like the number shortcuts for Zoom (I'm fine with only using '-', '+' and '*'), and the Highlight shortcuts (I much prefer to use Spatial Navigation instead). And some shortcuts are now overcomplicated, because in the past they were made harder to hit accidentally (as well as on purpose). So for my optimized single-key setup, I removed various keys, and returned to 'P' for Print Preview and 'G' for the graphics toggle. Adding a simpler shortcut for toggling User Mode came naturally then: 'U'. And I wanted easier access to spatial navigation. On a numpad 2-4-6-8 work fine, and for notebook keyboards the A-S-D-W keys can be used instead. Looking at the numpad again, I then switched to using 1 and 3 to switch tabs, and 7 and 9 to switch frame focus. Some specific additions for webpage tinkering: 'R' for Refresh display (after editing cached documents) and 'Shift+R' for refreshing after editing user style sheets (yes, there's an action available for that, to prevent having to restart all the time when testing user stylesheets). I've also made 'M' the 'Boss key' to minimize (hide) Opera. This leaves me with this set of single-key shortcuts:
A Navigate left D Navigate right W Navigate up S Navigate down
4 Navigate left 6 Navigate right 8 Navigate up 2 Navigate down
1 Switch to previous tab 3 Switch to next tab 7 Focus previous frame 9 Focus next frame
X Forward Shift+X Fast forward Z Back Shift+Z Rewind
G Tri-state image toggle P Toggle Print Preview R Refresh display U Toggle author/user mode
M Hide Opera Shift+R Reload stylesheets H Show typed history V Speak selection
One problem: there are still lots of keys available! I could use some suggestions for shortcuts for common actions to add to my setup. Preferably with some mnenomic connection between the key and the action smile And no, this is not an announcement of a change in Opera, just some private tweaking.

A Compact Setup

, , , ...

I've been playing around with a new setup, that should be usable, useful, but also 'small' in a visual sense. So without a menu bar! Almost all Opera functions will be easily accesible. But not necessarily all from the main toolbars, which was what the ribbonesque Twelve setup tried to do. For now I've named it Compact, but suggestions are welcome for something more memorable. (No, not Chrome. Scandium maybe? Zircon?)

Screenshot, small version, composed of five windows showing aspects of the Compact setup

So starting with the Twelve setup, I removed lots of items (though many are still available from the Appearance dialog), moved the navigation controls back to their proper place below the tab bar, and created two menu buttons for access to various actions on the left end of the tab bar: one general menu with the Opera icon, and one with the page icon with page/text specific functions.

The 'manage' pages are hardly used in this setup, which relies on the panels instead. It should be more usable than the Twelve setup for those (like me) who use Opera's mail and chat clients, but note that the toolbars for the Mail and Chat tabs are still quite compact.

To try it out, install the Compact Toolbar 0.10 and the Compact Menu 0.10 that goes together with it, then hide the main menu bar.

BTW, in the screenshot I'm using the Winvista MSO2007 Blue skin.

Lightning at sunset


lightning at sunset
Originally uploaded by wvs

Testing the 'blog this' option from Flickr. This is my current desktop background image.

Updates

, , , ...

[edit 2008-06-15]Updates updated: made the setups offered here compatible with 9.5 Final. Same URLs, a few new versions.

I'm going from light blogging to no blogging apparently... a bad trend. I'm a little bit active on Twitter now, but not in a way that compares to my past blogging here. When 9.5 Final and Firefox 3 get released, I'll probably make an update for the Top 150 Extensions list.

But my customized setups can already use some updates, the 9.2 versions will have some broken functionality when used with Kestrel builds. So here are provisional 9.5-compatible setups, suitable for Kestrel Beta 2. Copying some description text from a blog post in April 2007 BTW smile

Below you can find the auto-install links, with links to old blog posts for some background info. Remember: use Ctrl+F12 > Advanced > Toolbars to get back to your previous menus, shortcuts and toolbars.

Twelve
Ribbon-inspired radical setup. Use the menu and toolbar together. Hide the main menu with Alt+F11 after tweaking the shortcuts.


Hugin
Mail-only setup. Use at least the menu and toolbar together.


More Mail
Sort of a Hugin-lite that adds more mail-specific menus, shortcuts and buttons, but doesn't remove the browsing functionality. Use at least the menu and toolbar together.


Bigger Menus
Just what it says.


Classic Clutter
Return to the toolbar-bonanza of Opera 7.23. With an additional Startbar even...


My Personal Setup
Use at least the menu and toolbar together.

Meme: In One Word Only

, ,

Tim has tagged me in an internet game of answers, one...word...at...a...time.

Where is your mobile phone?
pocket

Describe your girlfriend:
happy

Your hair:
gone

Your mother:
ashes

Your father:
busy

What is your favourite gadget?
phone

What did you dream last night?
nothing

What do you prefer to drink?
coffee

Dream car?
none

What room are you currently in?
kitchen

Your ex?
nope

Your biggest fear?
fear

What do you want to be in 10 years?
myself

Who did you spend last night with?
twitter

What are you not?
talkative

The last thing you did?
eat

What are you wearing?
jeans

Favorite book?
LoTR

The last thing you ate?
mango-pie

Your life?
typical

Your mood?
good

Your best friends?
scant

What are you thinking about right now?
friends

Your car?
picasso

What are you doing right now?
typing

Your Summer?
hopefully

Marital status?
pseudo

What is on your TV right now?
Bob

When did you last laugh?
today

When did you last cry?
movies

School?
vacation

As usual, I don't tag others. Though my girlfriend just started a (Dutch) blog on Hyves.nl, maybe she can pick it up smile

Three beer

beer beer beer

How Geek Are You?

,

CSS Quiz

,

61

CSS 3 Quick Reference Panel

,

For a few years I've been maintaining up-to-date versions of Eric Meyer's HTML 4 Quick Reference and CSS 2 Quick Reference panels/sidebars. Keeping the HTML QR up-to-date is easy, as it never changes, but CSS 2 is slowly progressing towards a CSS 2.1 Recommendation and so changes every once in a while.

The fun part in CSS developments is in the emerging CSS 3 modules. Some have been untouched for years, others get some serious work, and sometimes even new ones get created. The CSS Working Group at the W3C has this Current Work page that you can use to keep track. The most fun is of course the implementation of new properties in browsers, the folks at CSS3.info do a nice job of following that.

But with CSS3 modules starting to become usable for real use on the web, the CSS 2.1 QR needed an update. So I've made a new CSS 3 Quick Reference panel that pulls all the new properties, selectors, at-rules etc together. Come and get it from Rijk's Panelizer!

Back home

Today I've been discharged from hospital, so I'm back home behind the laptop again. Great! I can mostly help myself now at home (except for putting on socks and tying shoelaces) and the wound is healing well. No eight-hour working days for me for a while, but it is good to get back in the loop again. Though I've build up a backlog of 600 mail messages already. I'll install build 9523 soon and look at the mail later smile

Walking

Great to be walking again! I now have walk around a lot. Probably going home this weekend.

Progress

Today: walking with crutches, not very far yet, and sitting in a chair. A pity the GPRS connection is not so good in this room.

So far so good

OK so far. Sat on the edge of the bed this morning. And I love Opera Mini smile