New development techniques using Opera Kestrel (9.5)

Note: You need to login to post in the forums. if you don't have an account you first need to sign up.

By chrismills Wednesday, 5. September 2007, 19:34:59

New development techniques using Opera Kestrel (9.5)

Kestrel is the upcoming version of Opera's desktop browser (version 9.5.) The full version isn't available yet, but the first beta version is already available to play with, at http://www.opera.com/download/?ver=9.50b. Now that Opera has fully migrated to the new version of its rendering engine, Core-2, Opera Kestrel has a few new techniques available for developers to play with, including new CSS3 and SVG support, and a new JavaScript engine, all of which I will discuss in this article.

( Read the article )

By hzr Wednesday, 5. September 2007, 20:56:35

Just some small comments:

:nth-child is written as :nthchild in all but the first instance.
Similar for ::firstchild -> ::first-child
The article says that compat with Yahoo! Mail is better. However, currently, it breaks badly.

By haavard Wednesday, 5. September 2007, 20:58:19

It's better, apart from a couple of things that weren't addressed in the alpha.

By dstorey Wednesday, 5. September 2007, 21:37:20

hrz: Thanks for pointing that out. That was probably my mistake when writing the descriptions. They should be correct in the actual examples.

For Yahoo! Mail, it is better, and we are talking to Yahoo!, there is just one major getter and setters bug that didn't quite make it in time for Alpha. The ground work has been laid though.

By Darken Thursday, 6. September 2007, 00:48:30

SVG's Rounded corners, nice trick!

Thanks for this article.

By Kelson Thursday, 6. September 2007, 00:53:42

I like the demo of using SVG to imitate rounded corners. Only one problem: on one of the two layouts where I use border-radius as an enhancement, I also use an actual border (making rounded tabs). I figure I can simulate the border in SVG, but I'm not sure how to deactivate the actual CSS border only in Opera.

By AyushJ Thursday, 6. September 2007, 01:34:18

Originally posted by Darken:

SVG's Rounded corners, nice trick!

But try zooming ..

By dflock Thursday, 6. September 2007, 11:11:37

The SVG rounded corners thing is nice - but as AyushJ said, it completely breaks if you zoom the page at all.

What would be much nicer and much simpler, is support for CSS3 border-radius itself. Please?

Also, with the examples for articles like this, it's much easier for readers to see how they work if you put all the CSS into a <style></style> block at the top of the example HTML page, rather than in a linked stylesheet. That way you can see all the HTML & CSS code that makes up the example, just by doing a view source on the example page.

Thanks for a great article, btw!

By chrismills Thursday, 6. September 2007, 12:29:37

Thanks to everyone for the positive feedback.

hzr - the missing hyphens in first-child etc are there in the source, but are not displaying on the page for some reason! This is a weird bug that I'm currently working on fixing ;-)

Duncan - your comment about putting the CSS in the <head> so you can see it with source view is a really good one. I'll make sure this is added to the code specs for future articles. We will of course have to add a disclaimer too, to let everyone know why we are doing this, avoiding the shouts of "bad practice...grr!" ;-)

By Darken Thursday, 6. September 2007, 20:11:03

Originally posted by AyushJ:

Originally posted by Darken:
SVG's Rounded corners, nice trick!

But try zooming ..

Hummm, zooming is for geek and Webdev users only. Normal users don't waste their times a zooming a Webpage.

By madinfo Friday, 7. September 2007, 10:15:03

Off-topic comment removed by moderator.

Post edited Saturday, 8. September 2007, 10:50:21

By tigerhawkvok Friday, 7. September 2007, 18:37:48

Off-topic comment removed by moderator.

Post edited Saturday, 8. September 2007, 10:50:36

By Darken Friday, 7. September 2007, 18:57:14

@madinfo & tigerhawkvok: Wrong topic.

By magidev Friday, 7. September 2007, 21:53:20

Off-topic comment removed by moderator.

Post edited Saturday, 8. September 2007, 10:50:49

By wolfgang.radke Saturday, 8. September 2007, 15:29:52

Originally posted by Darken:

Hummm, zooming is for geek and Webdev users only. Normal users don't waste their times a zooming a Webpage.

Well, since I turned 50 I'm using zooming a lot.

Second reason to zoom for me is to show something to my collegues

Wolfgang

By Darken Saturday, 8. September 2007, 19:31:39

Originally posted by wolfgang.radke:

Second reason to zoom for me is to show something to my collegues

I agree with you but, It is a particular utilization.

By Furnfield Saturday, 8. September 2007, 19:46:44

i have found a problem,

Flash doesn't work.. I have checked it is enabled but it doesn't work..

By chrismills Monday, 10. September 2007, 15:11:35

Furnfield - I've checked some Flash sites out in Kestrel, and they seem to work fine. Can you give me some examples/more detail of what you're having problems with?

thanks!

By Darken Monday, 10. September 2007, 15:29:08

@Furnfield & chrismills: Wrong topic (But, Flash work fine without any major problem with Kestrel.).

By neonard0 Monday, 10. September 2007, 16:21:27

I love Opera Browser, and I wonder when the developers like me, will have a real toolbar to debug web aplications. Yes, we have a tool, but is not as powerfull as Firebug on Firefox, I hope kestrel improve some tools to the developers so we can interect with de DOM and CSS, and javascript like in firefox. I dont like firefox, because is to heavy, but yI've found firebug really helpfull when development

By Zwoks-Stef Monday, 10. September 2007, 16:26:06

But... why doesn't the second example show rounded corners?

By p4trykx Monday, 10. September 2007, 19:49:30

I wonder if they plan to include some real javascript debugger like Venkman.

By dstorey Monday, 10. September 2007, 21:10:27

I've seen a bit of off topic replies about developer tools in article commends. I've created a forum topic instead, where you we can discuss this topic.

The short answer is yes we are developing tools and a JavaScript Debugger, and we want feedback as to what features are most needed.

By Zwoks-Stef Wednesday, 12. September 2007, 11:35:31

Can't anybody answer my question above?
Many sites use the feature the way it's shown in the second example. It would be bad if Opera won't support it...

By dstorey Wednesday, 12. September 2007, 18:30:17

Second example doesn't show rounded corners as it only uses -webkit-border-radius and -moz-border-radius. Opera doesn't support border-radius yet, and firefox and Safari don't support it yet without their specific prepend. We will support it, but when I can't comment. I'm not sure that many actual sites use it yet however, as even the Safari and Firefox implementations are inconsistent at the moment.

By Zwoks-Stef Thursday, 13. September 2007, 21:41:14

Thanks for the answer!
For example the german start-page of wikipedia (wikipedia.de) uses the border-radius. Yust one example...
Is the implemention intended for Kestrel or ist it also possible that we have to wait even longer?

By kaotixx Thursday, 27. September 2007, 16:27:14

Offensive post removed by moderator.

Post edited Friday, 28. September 2007, 08:28:44

By chs-pmo Monday, 23. November 2009, 12:33:16

The SVG tags, in the example of the "Rounded corners" paragraph, are not escaped. The code can not be displayed.

Login

Forums » Article Discussions

New development techniques using Opera Kestrel (9.5)