• 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


Advertise here?