• 200901 Sep

    After many man-hours of work, Opera has unleashed Opera 10. This release contains the Opera Presto 2.2 rendering engine. The two main features in regards to CSS3 are Web Fonts and full support for the CSS 3 Color specification.

    Web Fonts

    Many followers of this blog will know all about Web Fonts by now. For those of you who are new, Web Fonts allow the author of a Web page to link to a font file on a server, rather than just the users local machine. This vastly increases the options available to designers. Opera and Safari supports linking to OpenType, TrueType and SVG fonts, Firefox support OpenType and TrueType fonts, and IE supports EOT fonts. One thing to bear in mind is that although any font can be technically used if the format is supported, the font’s EULA must explicitly allow embedding via @font-face, or be an open licensed font. Examples of high quality fonts that can be used can be found on The League of Moveable Type and WebFonts.info sites.

    Web Fonts can be specified using the @font-face At-rule, along with the source of the font and the font name, at the top of the CSS file:

    @font-face {
    	font-family: "Alef Caps A";
    	src: url(../fonts/AlefCapsA.otf) format("opentype");

    The font can then be referenced as if was a regular font using font-family:

    p:first-of-type::first-letter {
    	 font-family: "Alef Caps A";

    I have prepared an example file showcasing the existing fonts that are fairly safe to use today, and a selection of high quality Web Font safe fonts. This will work in Opera, Safari and Firefox. You will need to generate EOT files for the fonts to also work in IE. This demo shows the name of the font and a sample repertoire.

    For the Opera 10 launch I prepared a number of other showcases for the article The Opera 10 experience. The first showcase is a mock up Newspaper adapted from a Web Fonts showcase I wrote for this site that was never published. This uses two black letter Web Fonts and a serif web font, and should work in Opera, Safari and Firefox. The next showcase is a type specimen featuring the Junction font implemented using SVG. This requires Opera 10, as it uses SMIL animation which is not fully supported in Firefox or Safari.

    I have a currently in progress Web Fonts demo using a pixel font designed for drop caps, of which you can have a sneak peak. This currently only works on Opera for Mac as I have not yet found a suitable free cursive font. Safari unfortunately does not display the Web Font as a :first-letter drop cap. Firefox has inconsistent spacing below the drop cap (which I believe is line height) which makes the text overlap the drop cap when removing the space in Safari and Opera. I hope to fix these issues before publishing the final example here.


    Opera 10 now supports the full CSS 3 Color spec, meaning that it has full support for all At-rules, selectors and properties in the CSS 2007 snapshot spec. This includes the modules that are considered stable. The only property/value pair missing is visibility: collapse; which has already been implemented in the Opera Presto 2.4 engine.

    Opera supports the transparent value in the CSS 3 context, such as color, but this is not too exciting. The main action is in the HSLA and RGBA colour models. I will not cover these here as they have been covered on this site previously. For the Opera 10 launch, I updated my mock-up interface using CSS3 Colour example from CSS3.info to a new OS User Interface example (Requires Opera 10 due to use of SVG background-images). This adds more detail via SVG, such as gradients and buttons, and the windows can now be dragged around the screen. This makes liberal use of HSLA and RGBA, as well as the SVG CSS properties fill-opacity and stop-opacity. It is an example of what can now be done with the power of HTML5, CSS 3, SVG and JavaScript. We are not far away from being able to make native OS quality effects using humble web technology.

    Although Opera 10 has just been released, the Opera Core team has not been sitting idly while the Desktop team were at work. The next version of the rendering engine; Opera Presto 2.3 is already finished (including the likes of border-radius, box-shadow (including the spread value and inset keyword), and friends, and Opera Presto 2.4 is under heavy development. It already is and will be an exciting time for CSS 3.

    You can skip to the end and leave a response.

  • Comments

    • 01.

      Thanks David,

      Looking forwards to downloading this when I get home :)

    • 02.

      Actually, Opera’s support for web fonts is buggy, and I’ve had to remove my use of web fonts specifically of Opera. I checked with the release of Opera 10, and the bugs are still present. I’ve just now reverted back to non web fonts.

      Opera doesn’t support multiple font files with the same name but with differing characteristics, such as bold, italic, and so on.  

    • 03.

       I added back in the web fonts, so if you go out to my site with Opera, at least on the Mac, and I think it’s the same in Windows, you’ll see what I mean. Opera uses the latest font file for all of the fonts. Since the latest is bold and italic, all of the text is in bold, and italic.

      Firefox and Safari handle the font files correctly.

    • 04.

       Hi Shelly,

      It is a known issue that font descriptors are not supported in @font-face At-rule blocks. There was unfortunately not enough time to fix this due to regressions that the fix caused. It will be added in an automatic update in the very near future. There is a work around where you can name the font-family as a different name, but I’m not sure how worthwhile this is as the issue will hopefully fixed quickly and our users upgraded.

      Web Fonts lack a test suite so I’ve found them very buggy across browsers (such as Web Fonts not working with ::first-letter pseudo class in Safari) when writing a number of test cases. Fortunately Opera fixed almost all the ones we uncovered, except the aforementioned one.

    • 05.

       Today, I hate IE even more.

    • 06.

      I was really hoping it would support box-shadow and border-radius which are my two favorite CSS3 features even if I had to use a browser prefix.

    • 07.

      Very impressive browser, and great demos. I look forward to trying out some of the new CSS implementations.

    • 08.

       Neal: It was too early to implement Background and Borders in Opera Presto 2.2. Which proved to be the correct decision as the spec has changed and things like spread and inset have been added to the box-shaodw and Safari and Ff differ in their border-radius support. Safari doesn’t support different radius on the short hand as the spec didn’t have the / notation then. We have implemented it when it looks stable (though new properties have appeared for border-image) so our support is up to date and to spec in Presto 2.3.

    • 09.

      […] des Opera soll das dann endlich auch können (siehe hierzu den englischen Beitrag “Opera 10 unleashed, brings Web Fonts and transparency to the table” bei […]

    • 10.

      Nice to hear a word about border-radius. Not in the current release but still good to know.

    • 11.

      Btw, conteneditable box does not seem to move current position to the last line when you click on an empty position below the last lines.

    • 12.

      Safari supports SVG fonts as well.

      It’s nice to see support for font linking appear in more and more browsers, now if only those browsers would use nicer font rendering schemes on Windows.

    • 13.

       Nice stuff. I’m poking around Opera 10 today.

    • 14.

      ref: http://people.opera.com/dstorey/alefdropcap.html

      re-read the CSS 2.1 text on first-letter
      Gecko has a special handling of line-height in this context, as suggested by the spec.
      To allow UAs to render a typographically correct drop cap or initial cap, the UA may choose a line-height, width and height based on the shape of the letter, unlike for normal elements.

      reduce the line-height for other browsers (like 0.7 or something) and remove the margin-bottom.

      (and Safari displays the font just fine on my Mac.)

    • 15.

      @David – any chance to see the Presto 2.3 in a dot update, like Opera 10.1 or something? And is there a page with a list of features it will deliver?

      I’ve been looking at Opera 10 yesterday and newest additions look and work really great.

    • 16.

      […] Opera 10 unleashed, brings Web Fonts and transparency to the table […]

    • 17.


      Thanks for that. I wasn’t aware of the “may” statement in the CSS 2.1 spec. That is interesting, but it is a bit of a pain as it is a “may” so browsers can do something different, which causes incompatibilities like this one. I think the FF solution is probably better than Opera/Safari if all browsers did the same. I’ll see if it is something we (Opera) can add.

      The drop cap doesn’t work for me on Safari/Mac. If I have the font installed on my local machine it works as expected.

    • 18.

      [email protected]: The next significant Opera version will have Opera Presto 2.4. 10.10 will be more or less Opera 10 plus Opera Unite. Hopefully it will not be too long before we start having public alphas of Opera with Presto 2.4, but we can’t commit to a date yet.

    • 19.

      I also wasn’t thrilled. I have turned on embedded fonts for Opera on my site only to discover the bug (using the last font-style with the same font-family) which forced me to leave them on for Safari and Firefox only. But what’s worse, the bug that misplaces CSS pop-ups on pages where you need to scroll is still there. (If you want to check, here is an article on Typography and CSS I wrote a few days back: http://soukie.net/2009/08/20/typography-and-css/ )

    • 20.

      Where is Opera 10 with Qt4 ?
      Cant find it in pub – http://arc.opera.com/pub/opera/linux/

    • 21.

       Ooh, what will the CSS be for Opera’s rounded corners? -o-border-radius? I’ll have to get things ready!

    • 22.

      [email protected]: Just border-radius. We consider it stable now, especially considering it has now defined / notation to have different x and y radius in the short hand.

    • 23.

      Is Vega used for border-radius and box-shadow?

    • 24.

      [email protected]: Yes it is.

    • 25.

      Great demos, good to see css3 features working in more browsers with every new release.

      I’m a little confused about Presto 2.3, since the next significant Opera version will use 2.4 and it won’t make it to 10.1, does this mean 2.3 will never be used into an actual Opera release?

    • 26.

      @aditrif: It was included in Opera Devices SDK 10 for example as it was the latest Core version in release quality during its development. By the time the next Opera desktop version comes out with an engine upgrade, Presto 2.4 will be finalised and fully release quality.

    • 27.

      @David Will users get a chance to use snapshots with Vega implemented prior Carakan build or ypu plan to include both at once ?

    • 28.

       Nick: I’m not sure that is decided yet, but Vega is closer to public consumption (it is already in a shipping product – the Devices SDK) than Carakan.

    • 29.

       Opera doesnt support round borders =( and box shadow and so on. I like opera alot but the css 3 support is very bad. And i hate these -webkit -moz -o you have to make a css for all browsers.

    • 30.


    • 31.

       I hope that others will follow…

    • 32.

      […] sich im neuen Browser CSS mäßig tut gibts zum Beispiel hier zum […]

    • 33.

      Try the following page with Firefox and Opera:

      This is a downloadable font that requires Standard Script ligature feature of Open Type. (Pali language). Firefox wins handily.

    • 34.

      […] Opera 10 Unleashed, Brings Web Fonts and Transparency to the Table – David Storey […]

    • 35.

Hosting by: