CSS3 archive
A CSS backgammon board
2007-09-11 19:10
One of the things I usually do when I want to get to know a new API, new functionality, or learn something old, is to play around with it.
Since Opera 9 added better (read: Near complete) support for selectors from the CSS3 Selectors working draft, I felt the need to familiarise myself with more of the spec, and a challenge from Rune, I wanted to take a stab at creating a rendering of a backgammon board using only CSS, and completely devoid of any markup cruft.
Without further ado, I present the CSS Backgammon board using a variety of selectors and CSS Border Slants. Renders correctly in Opera 9.50, breaks in Firefox 2 and MSIE. Status for other browsers unknown.
Opera 9.5 alpha, Kestrel, released
2007-09-04 14:44
Ok, I never got around to blog the release of Opera Mini 4 beta 2 — apologies for that. Let me instead introduce you to Opera 9.5 Alpha - a.k.a. Kestrel.
A quick overview is available on a separate product page
So, what’s new? In a nutshell:
- History search
- Bookmark synchronization
- Dramatic performance improvements
- Web site compatibility improvements
- Improved standards support
- Huge improvements to M2
The Changelog
I wish I could get through all of the changelog here, but I’m afraid it’s way too long, and I could blog until 2011 about it, in which case Kestrel would already be severely out of date. Instead, I’ll just give you the links.
So, let’s go through some of the changes
History search
I’ve lost count of the times in the past, when I’ve visited some page, somewhere, and have been totally unable to remember where it was, on what domain, or even what the document title was. In other words, finding what I have already visited has been a very hard task, bordering on impossible. Enter history search.
With history search, Opera creates a full-text index of each and every page you visit, and when you go to the address bar, you can simply start entering words you know have been on pages you’ve visited before, and items matching your search show up. It’s a kind of magic, really. At least compared to what browsers have done in the past.
Not only can you do this, but there is also an internal web page, named opera:historysearch that gives you a more traditional web search interface that allows you to bookmark your searches. Speaking of which …
Bookmark synchronization
Bookmarks have changed in Kestrel. In the past, the only way to get your bookmarks from machine to machine was to export the bookmarks, copy the opera6.adr file, or use external software to transport them. In Kestrel, you simply log in with your My Opera account, and sync your bookmarks, speed dial items and personal bar with the server (The synchronization is using https, fwiw, so you don’t need to fear that your data are being compromised).
So, you may say “I never use two computers, why should I sync?”. Real men don’t do external backup. They just cry a lot - when their offices catch on fire!. That’s why.
M2
I have been absolutely dependent on M2 as my mail client for years, but it has had a number of annoying issues, related both to IMAP, and to indexing, where I’ve seen mail go into the wrong access point for no reason. I’m happy to report that I haven’t seen any such issues with mail with Kestrel for a long time.
Keyboard shortcuts
Now, this change is probably somewhat controversial for old-time Opera users, since they probably have single-key shortcuts as part of their muscle memory. For newcomers, though, Opera is going to feel a lot less alien, as all single-key shortcuts have been removed in the default setup. This prevents these newcomers from performing accidental navigation, or from changing their browser’s settings without knowing how.
Those oldtimers who want the old setup back, can do so, though, by checking the box in opera:config#UserPrefs|EnabledExtendedKeyboardShortcuts (Alternatively, by going to Preferences->Advanced->Shortcuts and and check “Enable single key shortcuts”.)
Now, on to more developer-related stuff
Selectors
Kestrel has top-notch support for CSS3 selectors, as shown in this demo.
Backgrounds
Kestrel has also added support for SVG in background-images, plus support for the background-size property. David Storey has created an extremely nice demo, also including a showoff of Opera’s extended selector support (mirrored with permission, as the My Opera file store doesn’t allow external referers).
Overflows
Opera now support both the overflow-x and overflow-y from the CSS3 box model specification. This both improves web site compatibility, since there are a few sites out there that use this, and it allows you, as an author improved control over those scrollbars.
getElementsByClassName
Library vendors, take note. Opera supports getElementsByClassName natively. This should allow for even faster selectors.
Dynamic media queries
In Kestrel, CSS3 Media queries support has improved, making them dynamic. For you, as a developer, you can now count on Opera actually applying the correct style when the user resizes his window, instead of re-rendering on a resize event. You can view this yourself here - note how the content changes in the max-width & min-width tests when you resize the window.
Getters and setters
Opera now supports Getters and setters from JavaScript 1.5.
Offline support
While Opera doesn’t yet implement a peristent storage, the Navigator.onLine is now supported, with window.online and window.offline events for when the value changes.
Spatial navigation
Controlling keyboard navigation can be a major pain in web applications, in particular if your application is on a device with “keyboard” as the only input device, which is the reality if you want to make web applications tailored to mobile devices, or you want to accomodate those unable to use a mouse. Opera support for these scenarios have improved in two ways.
First, Kestrel supports a custom CSS pseudo class -o-prefocus that applies to form elements that have been reached via spatial navigation, allowing for better styling. Further, Opera also now support four methods on the document object, document.moveFocusLeft(),document.moveFocusUp(),document.moveFocusRight() and document.moveFocusDown(), allowing you to initiate spatnav on regular keyboard events. I have put up a very simple demo that demonstrates a use of this property. When you navigate of the right end of a table, the code in the example moves the spatial navigation focus to the far left of the table row below. The code is not commented, but should be fairly simple to understand.
Text-shadow
Kestrel also adds (full) support for the CSS3 text-shadow property. Unlike WebKit’s support, Opera supports multiple text-shadows, comma-separated (More precisely: You can have 12 of them).
There’s more?
Yes. There’s lots more, and like I said, I could continue posting stuff from the aforementioned changelog until 2011, now go download a build for unix, Mac or Windows
Have fun.
Chat with Håkon Wium Lie
2007-02-06 09:59
Ok. Ever wanted to chat with the father of CSS? Now you have the chance. Håkon is participating in an IRC chat session lasting from 17.00 to 18.00 CET on Wednesday February 7th, 2006. From the announcement:
He’ll take questions on any of his many passions: CSS, ACID2 (or 3), microformats, the One Laptop Per Child project, Web standards.
Join #webapps on irc.opera.com to participate.
dojo.query: A CSS Query Engine For Dojo
2007-02-05 08:19
Link: dojo.query: A CSS Query Engine For Dojo
dojo.query is a CSS Selector Query engine that performs very well in Opera and WebKit nightlies, tolerably in Firefox. MSIE performance is left at the mercy of IE engineers lack of support for XPath on the HTML DOM
Opera Developer Community site launches
2006-11-01 13:29
Well, wouldn’t you know it; today we launched the very first beta of the new Opera Developer Community site, named Dev.Opera
First of all, when we say beta, we mean beta, so we welcome any and all feedback for the site in the beta thread in the developer forums.
So, what’s there? Let’s do a little walkthrough, in no particular order.
Media Queries is not a hack
2005-02-28 15:37 – Leave a comment
CSS3 Backgrounds and Borders Module
2005-02-17 14:39 – One comment
Quite limited: Device-aspect-ratio
2004-11-29 16:38 – Five comments
Some problems with the CSS3 property device-aspect-ratio related to true aspect ratio of device pixels.
CSS rounded corners without images
2004-11-20 21:37 – 12 comments
Rounded corners without images: The CSS3 solution, and the non-solution offered by Mozilla/Firefox
2005 Preview
2004-10-29 10:31 – Three comments
First preview of the site design for 2005.
Making CSS visible for Opera 7 only
2004-01-10 22:43 – Two comments
A guide on how to make CSS visible for Opera, versions 7 and above, using CSS3 Media Queries.
More fun with :target
2003-08-01 19:12 – Three comments
A prototype GUI, using CSS :target to minimize complicated Javascript. Draggable, semi-transparent windows, with an added 58 lines of Javascript to make windows draggable.
Fun with :target
2003-07-09 16:44 – 13 comments
A prototype GUI, using CSS :target to minimize complicated Javascript. Draggable, semi-transparent windows.
CSS Media queries test
2003-04-10 13:07 – Leave a comment
Simple, collected test to determine support for various aspects of CSS3 Media Queries