-
200804 Dec
Posted in Browsers
Opera have announced the first Alpha release of the next version of their browser. Codename Peregrine features version 2.2 of their Presto rendering engine, which boasts 100% Acid 3 compliance, a 30% speed boost on certain sites, and a number of new features for web developers.
As CSS enthusiasts it’s the latter we’re interested in, of course, and the notable CSS3 implementations are:
You can skip to the end and leave a response.
-
Comments
-
01.
Good news, but no word on new HTML 5 implementations? Hmmm…
-
02.
There are some noted in the changelog:
* Improved HTML5 support, including end-tag and start-tag parsing, whitespace parsing, and DOCTYPE parsing
* HTML5 canvas elements can now export images to the JPEG format
* HTML5 canvas transforms are applied when building a path, not when painting it
* Implemented HTML5’s algorithms for detecting charsets in HTML -
03.
Good news… I just hope border-radius isn’t too far away. Mozilla and Webkit have had them for years… but it can’t really be blamed on Opera, though, as this property is still not a candidate recommandation after all this time. It’s mind boggling how much time the W3C need to make up their mind.
-
04.
[…] hat heute die erste Alpha von Opera 10 veröffentlicht, welche die @font-face-Anweisung unterstützt. Neben Mozilla (ab […]
-
05.
Isn’t candidate recommendation status set after the feature has been implemented in X browsers?
-
06.
Close to tears! Now all we need to do is convert the 99% of users (including me) that don’t use Opera. Maybe get a rumour started that IE is actually a virus?
-
07.
Well, border-radius is now implemented in both Firefox & Safari, but the problem is that both have a different implementation of it. Safari’s shorthand syntax differs from the W3C proposal (which was changed thanks to this blog!), and Firefox uses incorrect syntax for the individual properties (ie border-bottomleft-radius instead of border-radius-bottom-left) – I believe I read somewhere that this has since been sorted, but can’t find any confirmation.
Until these inconsistencies are resolved, the proposal will remain in draft.
-
08.
Michael "Competition" Howell says:Comment » December 5th, 2008 at 1:28 am
> Now all we need to do is convert the 99% of users (including me) that don’t use Opera.
By implementing these features, pressure is put on other browsers to implement them too (browsers with more market share, such as Firefox). Of course, in the case of IE, that rule doesn’t apply. -
09.
Gaston (comment 7),
The latest Gecko nightlies implement about everything in the latest background and border module (published September 10, 2008), except for the naming of the properties; that part wasn’t changed (from one -moz-border-radius-** to another -moz-border-radius-**), as the cost of maintaining multiple names was deemed too high, considering that module will very soon reach CR. See bug 450652. -
10.
Is this version getting border-radius back? I remmember opera used to support this, vis -o- or something, but I cant find it in 9.6 now.
-
11.
Nox says:Comment » December 5th, 2008 at 6:05 am
@MCH
Except, all of these have already been implemented in Gecko (and Webkit?) bar the SVG fonts(?). Though last I read something the problem remaining for fonts were pertaining to licensing and security issues. -
12.
Anon says:Comment » December 5th, 2008 at 7:59 am
Firefox 3.1 already implemented those features months ago, Opera is the slowpoke one here in supporting CSS3 features. Opera fanboys don’t seem to even check their facts.
Firefox 3.2 development has already started. Can’t wait for the last 7 check-ins needed to pass Acid3, SVG SMIL, SVG Fonts etc then performance improvements to pass the performance and smoothness criteria of Acid3. Firefox 3.1 already passes the pixel perfect rendering criteria, just needs 100/100 and performance now.
-
13.
Of course, what is important is not who implemented which declaration first, but the fact that they are being implemented at all.
-
14.
Chromium says:Comment » December 5th, 2008 at 1:01 pm
Chromium nightly builds had these features for months since updating and syncing up to Webkit tip of tree back in October. Opera now just playing catchup to Webkit and Gecko with CSS3 support?
AppleWebKit/528.5 (KHTML, like Gecko) Chrome/0.5.155.0
-
15.
chris says:Comment » December 5th, 2008 at 4:08 pm
Rounded corners are easy in Opera.
9.5 supports SVG as a background-image so you can create rounded corners, drop shadows, gradients all of which will scale perfectly to whatever element you apply it too.
It’s a shame other browsers don’t appear to support this.
-
16.
chris: I guess that’s easy enough compared to various other workarounds, but certainly not as easy as “border-radius: 5px”. And it’s still annoying that you need to create one or more SVG images, not to mention maintenance annoyances if you want to alter the styling.
Also, I haven’t tested that myself, but will all other browsers properly ignore that kind of rule if they don’t support it? If not, it’s also going to cause other problems too… -
17.
chris says:Comment » December 5th, 2008 at 5:47 pm
Stifu: SVG can be styled using as stylesheet so in theory there shouldn’t be any extra difficulties when you alter a background color or border thickness. In practice, because the SVG is already in a style sheet [background-image: url(‘image.svg’);] I can’t see a way of styling it, which is a shame. Seen as you can already import a stylesheet into a stylesheet it shouldn’t be a great leap to allow you to import one to style the svg images.
Other browsers don’t ignore this rule because it works with background (rather than -o-background) so as things stand conditional-CSS would be required.
-
18.
Nox says:Comment » December 5th, 2008 at 6:47 pm
@Chris
You wouldn’t happen to know if they also support using SVG fragments as background images? (i.e. myimage.svg#imagefragment) Just curious.There’s been an open bug for Firefox since the beginning of 2004.
https://bugzilla.mozilla.org/show_bug.cgi?id=231179
Though sadly:
“Firefox 3.1 Meeting Minutes: 2008-08-05” at
http://blog.mozilla.com/meeting-notes/archives/30 says “SVG image decoding –
CUT”, which I assume refers to bug 276431 blocking this one :(Oh well, there’s still the chance it will be coming in 3.2 :D
background: image.png more stuff;
background-image: image.svg
That should work, sort of, shouldn’t it? -
19.
Alex says:Comment » December 6th, 2008 at 3:18 pm
Some of the examples on the Opera site seem wrong, but maybe I’m just confused. Like one of the @font-face rules, it’s setup like this
@font-face { … font-family: “Blah”, serif; … }
Should that serif be there? It doesn’t seem like it should (And Firefox treats that as an invalid rule, so ends up dropping the whole block)
One of the other examples doesn’t work at all under Firefox, it does under Safari but has graphical issues, it’s quite strange.
-
20.
Alex says:Comment » December 6th, 2008 at 3:55 pm
Actually, the sample that doesn’t work at all looks like a Firefox bug, have test-case, will report.
-
21.
Nox says:Comment » December 6th, 2008 at 10:14 pm
@Alex
Looks like a valid rule.
http://www.w3.org/TR/css3-webfonts/#font-family -
22.
chris says:Comment » December 8th, 2008 at 11:44 am
Nox: It would be nice if browsers defaulted to the last valid rule they understood so you could put set a background as a png and then on the next line an svg, but they don’t. I’ve just come across the same problem with using an RGBA background color where it would have been nice to set a normal RGB background first (for IE) and then a RGBA on the next line. However, I’m sure that if they did work in this way it would cause all kinds of unimaginable problems!
It’s good to see that both Mozilla and Webkit projects are at least thinking about implementing svg as backgrounds as I think svg is a technology waiting for a use, and I think backgrounds are the perfect match for svg.
No idea about fragments, sorry.
-
23.
Alex says:Comment » December 8th, 2008 at 3:09 pm
@Nox
Yeah, according to that draft it is, which doesn’t make much sense (You’re describing a font, not trying to match an installed one), the current draft* doesn’t say that though (it only allows one value) -
24.
chris says:Comment » December 9th, 2008 at 6:40 pm
Sorry to bang on about svg when it’s nothing to do with Opera 10 it’s not really part of CSS3 but I was thinking…
if background images worked like fonts and the browser used the first image it understood then you could list an svg followed by a png. And to my surprise Safari works this way. Shame Opera and Firefox fail to use any image (I’ve not tested IE).
I would think that adding this functionality wouldn’t be too difficult to implement. But why would the IE team want to add functionality which allowed Opera to produce better looking web site.
-
25.
@chris:
“It would be nice if browsers defaulted to the last valid rule they understood so you could put set a background as a png and then on the next line an svg, but they don’t.”
Actually, they already do – all but IE<8 at least – but maybe not to the extent you are hoping. I could for instance define the following rules and they will fall back gracefully:
background-color: #12345;
background-color: rgba(0, 0, 0, 0.33);
cursor: pointer;
cursor: -webkit-zoom-out;
display: inline;
display: inline-block;However, in this particular case I don’t think browsers can fall back as you want them to, when there’s a valid image url() that points to a format the browser doesn’t support. The browser will faithfully apply the url(“image.svg”) rule, but then not know how to treat the file it eventually receives and so fail to display it, just as if you had pointed to a URL that didn’t exist.
This would be a tricky problem to address, because the browser has no way of knowing for sure what format the url() points to before it has received the file – and by the time it has received it, it’s kind of too late to ‘back out’ the entire style rule (which may have contained background colour declarations, multiple background images and so on).
-
26.
boen_robot says:Comment » January 3rd, 2009 at 12:49 pm
On the background-image fallback thing… I’ve had this problem too recently. And there’s only one way I can think it can be solved: server side browser detection.
I just tried to see if Opera reports image/svg+xml (or anything “svg”) as a supported type (so that we could use type detection instead of browser detection), but it appears it doesn’t show it there. I’ve reported this as a bug to Opera just now.
But either way, server side browser detection appears to be the only way to reliably get SVG image backgrounds to Opera, while giving everyone else PNGs.
-
27.
Alex says:Comment » January 4th, 2009 at 12:51 pm
I think the best way to do it, would be to sniff for Opera (only the versions that support it), then output it then, since at the moment Opera is it (Firefox 3.2 might get support for it)
Also, when you do something like this
background-image: url(1.svg), url(2.png), url(3.jpg);
You’re actually using the multiple backgrounds part of CSS3, not any sort of fallback. -
28.
Adam says:Comment » February 12th, 2009 at 2:13 pm
I’m using a recent alpha build (windows) of opera but can’t see the web fonts in the preview. The examples on the opera sites work though.
-
29.
[…] current version of Opera already supports parts of CSS3, while support in Opera 10 will be even greater. Opera 10 beta should be available in the next few […]
-
30.
Opera Still Cooking With CSS3 On the Way | SpecialityMoney.com says:Comment » March 28th, 2009 at 4:27 am
[…] current version of Opera already supports parts of CSS3, while support in Opera 10 will be even greater. Opera 10 beta should be available in the next few […]
-
31.
-
01.
