Some demos to check out Kestrel's new capabilities
Wednesday, 5. September 2007, 20:45:03
You may have downloaded Kestrel by now, and glanced at the change log, but you may not have tested out its new capabilities. I don't profess to be a JavaScript expert, so I'll leave that to those of you who know better, but I've cooked up some demos of the new CSS and SVG capabilities along with an article explaining them. That article is now ready, so please go and check it out.
For those of you who want to go straight to the examples (some modified from previous demos on this blog), here they are:
-
Striped table, without Javascript, using CSS3 selectors and SVG as a CSS
background-image. It also usestext-shadow - Classless flexible drop caps using
first-of-type - Liquid layout using dynamic Media Queries
-
Rounded corners combining SVG and
border-radius. Allows rounded corners in Opera, Safari and Firefox, without images or JavaScript.
This article and demos have just scratched the surface. There is a lot to look forward to with our new JavaScript engine, improved DOM support, more HTML5 and canvas, and a more complete SVG implementation including partial SVG 1.2 Tiny support, and more. If you've been experimenting with Kestrel and have tried out some of the new features, share your examples and experiences in the comments. Hope you enjoy the article.
WIDGETIZE
Anonymous # 5. September 2007, 21:15
i dont want to sound rude, but what is the EXACT real-life use of these tricks in, lets say, 2yrs timeframe? using them on a production page is a waste, doing something for .5% of a market? until firefox incorporates it, it is a paper, useless stuff. better copy what firefox uses and opera doesnt have, because these things ARE GOING to be used, and opera, as frequent recently, will not work.
silverlight casus anyone? opera is no longer a 'major' browser, it is blocked by default. no time for cheap tricks, fix the basis first.
on topic:
for me, the most important one included in kestrel is overflow-x/y property, funny you havent mention it. and even that was implemented 3 years too late. most pages, that use these were coded to hack opera around (or ignore it, it is easier), and that mindset is deeply coded into webdevs minds. so most likely opera is going to be serverd 'social' version of page.
there are few more ooooooold things not included - by design, or by 'design' (like oncontextmenu - yes, i know that opera has its own menu, but well, webdevs can draw another menu side-by-side, or use right click to increment/decrement.
and btw, hows are the Tools going? without them, nobody will seriously consider using opera for anything than browsing, and without designers testing in opera, there are MANY things to fail = users leaving = opera leaving the market in disgrace.
btw2. killing viewBar killed operaWebDev Toolbar. congrats on sawing of a branch you were sitting on.
AyushJ # 5. September 2007, 21:32
Try Zooming
Anonymous # 5. September 2007, 21:58
They both fuck up when zooming BUT
the iTunes table looks fantastic.
fred # 5. September 2007, 22:02
dstorey # 5. September 2007, 22:42
Firstly, if you read the article, they are a look forward to techniques you'll be able to do in the future, which work in Kestrel today. They are for the most part additional eye candy that degrade in other browsers. They are suppose to showcase the new features in Core-2. However, Opera is more than just a web browser. The engine can be used to render interfaces on devices and applications such as widgets. These device interfaces don't need to work in Firefox or even IE, so they techniques are useful in those context. It is still important that they use standards even in these context, as there is a reuse of skill and the code is more portable. There is also mobile, where we are using the same rendering engine. We are the market leader in this space, and growing rapidly, with more growth than rival more well publicised mobile browsers.
Other browsers will add the standards support to be able to render these examples too. KHTML can already do the selectors stuff, and that will probably be merged into WebKit at some point. The other stuff is also a natural evolution for Firefox and the Safari. I can't answer when they'll be useable in these browsers and IE, as i don't work for those browsers. We are quite happy worrying about our own browser and adding as much standards support and bug fixes as we can.
If we should just copy Firefox, then we'd may as well give up and just use Gecko. We are adding stuff the Gecko supports that are breaking web sites, such as Gecko DOM Range.comparePoint. It would be nice if we didn't have to add none standard features, but unfortunately they get added by other browsers and we do have to support them (which is much harder than supporting a defined standard as there is often no spec and you have to also be bug compatible). But to add Gecko and IE extensions we have to know which ones are the ones that are going to be used first.
We are also working with Microsoft on Silverlight. I've had a number of discussions with them and we've fixed blocking bugs. Different people also work on plug-in support than layout, DOM, ECMAScript etc.
I've also mentioned overflow-x and overflow-y (which were IE extensions until they were added to CSS3) previously. I've even done a demo using it on CSS3.info. I didn't showcase it here as it didn't fit into any of the examples and most developers already know how to use it. They are nothing new.
Tools are not the discussion of this post (check a previous one), but they are going well. We know they are important and we are working on them.
porneL # 5. September 2007, 23:20
Opera has such insignificant market share in US, but in parts of Europe or Scandinavia, they're reaching 10-20% of the market.
And even before these features become popular enough on the Internet, they'll find their use on intranet apps (I'm actually using them already - SVG and advanced selectors make my life much easier!)
Some of that stuff is usable on the net today, because other browers implement some sort of equivalent functionality (IE has CSS+activex filters and VML which can emulate some very basic SVG) or because it degrades nicely (although use of SVG backgrounds will probably be tricky
And someone has to implement these things first. There's always the first "crazy" one to come up with "tricks" before it becomes normal thing when rest follows (or not... and continues doing their Microsoft stuff
I agree on the dev tools though. Especially "error console" is a total embarrassment. And lack of view bar killed my few dev tools indeed!
Darken # 6. September 2007, 00:55
Nice trick!
WildEnte # 6. September 2007, 02:54
in your comments, having a black comment background on a white general background that is framed by some green-greyish sides (I have a color-weakness so it may also be brownish (c;= ) and a super-thin dotted vertical line to the right of the comments and and THEN using white text...
... makes everything flicker before my eyes for 2 minutes after reading your long comment, and my fingers itch for switching to user mode.
Other than that, thanks for the instructive article (c;=
Fyrd # 6. September 2007, 12:55
If only SVG allowed something like stoke-position="inside", or margin="3px", then that would work...maybe I should find an SVG forum or something that might have a solution for fitting the stoke inside the box.
Anyway, I like the dynamic Media Queries too, certainly beats messing with javascript to accomplish the same.
hartley231 # 6. September 2007, 15:09
FataL # 6. September 2007, 16:14
Also please pay attention to this bugs:
http://rusrestaurant.com/tests/opera-bugs/~first-letter-regression2.html
http://rusrestaurant.com/tests/opera-bugs/~opera9-bug-nifty-numbered-list.html
Anonymous # 6. September 2007, 18:45
i was the first anonymous poster, sorry, but 9.5 failed captcha test first time and signature wasnt filled after back/forward (nice to have autofill, isnt it?)
as for the techniues - until firefox ads them - they are of no use. it is obvious for any experienced designer, not even web designer. web divided into two spheres - basic: ie, and advanced/modern - firefox. opera isnt even mentioned on most new sites, even in 'we dont support it' context. it does not exist as a desktop browser. mobile is another thing, but adding stuff esp for mobile is another sign, that opera is backing from desktop market. it is clear from observer standpoint that desktop does get less attention that mobiles/my.opera.
btw. mentioning them as usefull along with widgets in the same sencence, makes me HATE the man who made you make widgets for opera. what a colosal waste of resources.
another part is the 'standard' weapon. weapon of the weak i might add. i dont like it, but in reall world standards are defined by the market. and if 99.5% of the market uses some technique, how can it be less standard than some geeky css3 stuff that nobody uses. and btw. in most cases, the gecko dom extensions are BETTER documented than w3c specs. w3c specs are in parts so general and misleading that no wonder, why browser vendors interpret them differently. but the right way in such cases is to follow the crowd. 'i know better' attitide that opera used many time in the past makes it the 'broken' browser even before launch.
users really dont care much about what w3c specs say. they care about yahoo mail not working, about google pages not working. google is a lost case, they actively dont want opera to work with their pages, and in some part i understand them, opera attitude sometimes in the past was REALLY frustrating. yahoo, given the recent partnership (that is important to opera only, it is a drop in y! income) should at least try better, but they couldnt care less as it seems.
dev tools.. well, yeah, ive read that 'we are working on it' and 'it will be great' stuff severall times now. it reminds me the 'new and groundbreaking feature' that happened to be a speed dial. sorry to say, but i believe you (opera) no longer.
until it is relased, there is no way of fixing many, many bugs. of course, companies could hire guys like Hallvord, who are experts (and i mean that, he is awesome), but there arent many guys on that level. most pages are done by medicore, medium skilled developers, in most cases as their first or second IT job, before moving onto something serious. debugging stuff like y! mail without tools for them is impossible. so you get pages done in Web Expression and debugged with Firebug and VStudio2k5/Orcas.
"no opera was used in the making of this site". and you expect it to work?
and btw - i dont believe to see silverlight supported by Opera anytime soon. MS couldnt care less. sorry. they couldnt care less to relase wmp11 plugin for opera..
_Grey_ # 6. September 2007, 19:05
Originally posted by 'sid':
I think you're wrong about that one, MS is imho planning to get a hold on this "new" kind of platform and is therefore trying to get it to work for as many people as possible. Heck, I just even read Novell will bring about a Linux version of it...
Fyrd # 7. September 2007, 20:43
Anonymous # 8. September 2007, 11:30
see the testcase in this forum post:
http://my.opera.com/SVGraphics/forums/topic.dml?id=203830
you can see how inner borders with svg in css work,
and also this example works perfectly with page zoom.
cheers
FataL # 8. September 2007, 18:14
haavard # 13. September 2007, 10:21
Originally posted by Anonymous:
And if one waits for Firefox to add them instead of staying ahead, one would be criticized of lagging behind
Actually, the desktop team at Opera has more people and resources than ever. And we are not pulling out of the desktop market. On the contrary, the dekstop product is very important, both as a way to make money (160% revenue growth in the second quarter of this year for desktop alone), and as a way to get new technologies out there, and used by a large number of people. Desktop users are often the first ones to get their hands on new technologies, and their help in testing and giving us feedback makes our product stronger on other platforms as well. A competitive advantage.
Anyone who claims that we are pulling out of the desktop market is simply not paying attention