CSS 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.
Opera passes Acid2
2006-03-12 20:06 – Five comments
Opera 9 now passes the Acid2 test, as the second browser to do so, behind Safari.
/moose/::
2005-12-16 10:37 – Two comments
Pandora's Box (Model) of CSS Hacks And Other Good Intentions
2005-11-27 16:15 – Two comments
javascript: URIs, CSS, GMail and Opera
2005-03-13 09:50 – Four comments
How to get out of GMail jail in Opera with Javascript in CSS files.
Online CSS Optimizer
2005-03-05 00:15 – Leave a comment
Media Queries is not a hack
2005-02-28 15:37 – Leave a comment
Monospace, Firefox and braindeath
2005-02-02 17:56 – Nine comments
Monospace font handling in Firefox is braindead, often rendering monspaced fonts too tiny to read. This is a fix.
Opera Chat: Disabling annoying colors
2005-02-01 22:32 – Leave a comment
Colors on IRC can be annoying. This is a tiny howto on how you can disable them in Opera.
Who created CSS? CSS Early History
2005-01-05 23:37 – Ten comments
An answer to the question of who created CSS/CSS1, and a recollection of CSS history prior to CSS1
The Amazing CSS Maze
2004-12-15 00:07 – Leave a comment
The 2005 makeover
2004-12-06 00:13 – 13 comments
The 2005 makeover is almost done, with numerous changes both to the visuals and the back-end
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.
Using Opera to read text/plain
2004-09-21 03:15 – Six comments
This story describes how you can set up Opera to provide media-dependent styling of plain text. This makes Opera ideally suited for reading longer passages of plaintext in full-screen mode..
Descendant: Anything - Hide CSS from IE 5.5+
2004-03-04 16:27 – Two comments
How to hide CSS from Internet Explorer 5.5 and up.
IE5 is IE5 except when it isn't
2004-02-09 10:22 – Two comments
Some problems with running multiple versions of MSIE on the same installation.
Hack-free CSS for IE
2004-02-06 02:40 – 26 comments
How to target CSS for MSIE only, without invalidating either markup or CSS
Don't smoke Verdana!
2004-01-11 19:05 – 28 comments
Verdana is very popular at "the I-can-read-4px-fonts school of webdesigners". That is because Verdana is pretty, and it's legible even at fairly small sizes. Still, I hate it, and you should avoid it. Here are screenshots to show why.
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.
Ultra-simple rounded CSS tabs
2004-01-05 12:22 – Six comments
Rounded tabs using CSS pseudo elements :before and :after.
When redesigns fail
2003-11-02 15:42 – Two comments
Review of the quite shocking Dive Into Mark layout
Rounded corners with CSS
2003-08-06 21:27 – Nine comments
Rounded Corners in CSS that can be added to any existing design. These corners will fit boxes of any size, and uses the CSS pseudo elements :before and :after.
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.
W3-Dev
2003-05-31 19:00 – One comment
Opera menu.ini file for web developers
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
Summary Stylesheet
2003-03-10 13:52 – Two comments
User-mode CSS for vieweing quick document outlines.
Bleeding edge?
2003-02-24 07:52 – Three comments
Most of the early feedback on the redesign of this blog, and my other, Norwegian blog is in. And, amazingly, for the most part stuff just works. There does seem to be a couple of problem children, though. Konqueror is one, and since that is one, I presume sibling Safari is the other.
Tables without tables
2003-02-23 01:39 – Leave a comment
On using CSS to create table-like effects and still keeping semantic markup.
Re: Design
2003-02-18 17:00 – Two comments
Summary of the latest virtuelvis.com redesign.
Transparent PNG
2003-01-23 00:28 – One comment
Quick tutorial/demo to show how 24-bit PNGs can be used to create transparency effects on web pages.
Ignoring browsers
2003-01-21 14:48 – Three comments
Is giving Internet Explorer 6 the Netscape 4 treatment, hiding all styles, appropriate?