• 200825 Apr

    Opera has one of the better levels of support for CSS3 (and other standards), making it an ideal platform for experimenting with future technologies and new techniques that these standards will offer. However, this has always been let down by the fact that Opera is very lacking in the web developer tools segment. To be frank, Firebug and the Web Developer Toolbar blow away anything Opera has offered in this realm.

    This short coming is about to change soon. Opera has just announced today, with the release of Opera 95 beta 2, that Opera Dragonfly will be Opera’s web developer tools. These will be released as an alpha on the 6th of May. In line with their alpha status, the tools will not be feature complete, but they will show a good foundation of Opera’s developer tool vision.

    Once released, Opera is looking for feedback on the tools, to make sure they fit the needs of real world web developers and designers. I’m looking forward to web developers getting their hands on the Opera Dragonfly and finding out what the impressions are. If you are interested then go the the Opera Dragonfly website on the 6th or just open the Web Developer menu item from the tools menu. In the mean time, Opera 9.5 beta 2 (Kestrel) has been released today, so it is a good time to check out what CSS3 properties it supports.

  • 200831 Mar

    Some of you might have noticed that in the last few months, we’ve been having quite a few outages. Most of these were directly related to this blog being on Digg, Slashdot, Reddit, you name it. Some of the outages were caused by an even nastier thing, my other blog, an SEO blog, was on the same server, and had some articles, about WordPress SEO for instance, that were being hammered on a lot as well. Due to the fact that it was one environment, if that blog went down, this one went too, and the other way around.

    So we started looking around for a better hosting provider, and thanks to David, we got in touch with the great guys at Media Temple, who graciously offered to take care of our hosting for us. This had the added benefit of this server being in the States, close to where 80% of our public is. So after a bit of work, we’re now on a new hosting environment, everything should be working again, and a bit faster than before.

    We’ve also gotten a new RSS button, as you can see, thanks to my pal Roy Huiskes, and we’ve upgraded to WordPress 2.5, which I absolutely love. If there’s anything you see that’s not working correctly, let us know in the comments, and we’ll fix it!

    BTW: we’ve got 3 advertising spots available at the moment on the right, if you’re interested, check out the advertising page.

    Update: we now have gravatar support as well, get yourself one!

  • 200829 Mar

    One of the interesting things about Acid 3 is that it tests parts of the CSS3 Colour and CSS3 Selectors modules, that are a part of the 2007 CSS snapshot. Now that both Opera and WebKit pass the standards part of the Acid 3 test, the support for the snapshot has now also improved. The CSS 2007 snapshot is the state of play in CSS at the end of 2007.

    WebKit used to lack support for many CSS3 selectors, but now passes the CSS3 Selectors test on this site, and supports all of these selectors. Opera already supported these, but didn’t support HSLA, RGBA and the CSS3 values for transparent. These were added to pass Acid 3 in a post Kestrel build (which may or may not be back ported). Due to these improvements, support in these two browsers for the CSS 2007 snapshot looks healthy.

    Ignoring CSS2.1 for now (which Opera has very good support for), both browsers fully support the Selectors Level 3 spec and the CSS Namespaces spec. For CSS3 Colour, the support isn’t quite as clear cut. Everything is supported in Opera, except the flavor keyword and the various related colour profile properties. These properties are at risk of being dropped by the spec however. WebKit has the same support except it doesn’t support currentColor yet, and has some bugs with allowing mixed values in RGB and RGBA. Firefox has had similar CSS3 Colour support to Opera for a while now

    Away from the 2007 snapshot, ACID3 also tests Media Queries. These were already supported in Opera and WebKit, but are not yet supported in Gecko or the IE engine. Web Fonts (@font-face) are in the test and were already supported by WebKit, while Opera was developing support, but speeded up development to pass the test. Finally cursor from CSS3 Basic User Interface was added by Opera to pass Acid 3. I’m unsure if this was already supported by WebKit or not.

    Although CSS3 UI is not part of the CSS 2007 snapshot, the spec is close to being complete–apart from lacking an editor or a test suite–and support in one or more browsers exists for many of the properties. The features supported by one or more browsers now includes box-sizing (Opera, Safari, Firefox and IE8), resize (Safari), outline-offset (Opera, Safari and Firefox), nav-up, nav-down, nav-right and nav-left (Opera) and cursor (Opera, Safari and Firefox).

  • 200826 Mar

    Update by David: Opera has now released a public WinGogi build of Opera passing the DOM test and with pixel perfect rendering. We don’t believe we have passed the test yet, as there are performance issues with a couple of tests. This puts Opera and Safari neck and neck. It is fantastic to see both the Apple and Opera teams taking this test seriously and pushing each other to improve our standards support. Who ever wins the race doesn’t really matter, the main point is that there are now two engines with the required standards support to pass Acid 3. This could be a shot in the arm for both CSS3 and SVG.

    Update by David: Although the Acid 3 test was updated to allow WebKit to pass by the letter of the test, they still seem to fail by the spirit of the competition. One of the sections of the Acid 3 test checks SVG Animation. WebKit have added the interface to allow the test to pass, but not fully implemented the feature it was testing. See Jeff Schiller’s blog for more information.

    Update by Joost: While Opera might have been the first to pass the test in laboratory conditions, for which I applaud them and I hope they release it ASAP, you can download a WebKit nightly right now and enjoy the full 100/100!

    Update In the last few minutes (while I was eating lunch) the final 2% was reaching, making Opera the first browser to reach 100%. There are still some rendering issues, but things are well on track to passing the test. A preview build will be released on Opera Labs shortly. Thanks to our developers in Scandinavia that have been working into the evening to reach 100%.

    Acid3 in Opera

    Safari has been making great gains in its Acid3 score in recent weeks, currently residing on 96%. Opera however has come out of the chasing pack and moved from 77% in the latest weekly release of Kestrel, to 98%100% in the latest internal builds. As part of this it also includes the long requested CSS3 HSLA and RGBA support, and Web Fonts.

    These improvements wont be included in a weekly Kestrel build any time soon. Opera, like Mozilla, are at a stage on our development process where we are closing in on a release, and thus regression testing and stability are critically important. This work will most likely (although not confirmed) go into a post Kestrel release, in case it causes regressions and the like. There will probably be an experimental alpha release showing this improved support in the not too distant future.

  • 200816 Mar

    It was announced yesterday on the Webkit Blog that their latest nightlies now score 91/100 on Acid3. EDIT:- As of last night, the latest nightlies now score 92/100.

    Kudos to the Webkit guys for obtaining such a high score after Acid3’s launch only earlier this month; I recommend you subscribe to the blog to keep up with their work, as it’s pretty active at the moment and I’m sure that activity is only going to increase the closer they come to passing Acid3.

    A meta bug has been created in their Bugzilla which you can use to keep track of their progress and outstanding bugs relating to an Acid3 pass.

    Other browser scores below:-

    • IE8 – 17/100
    • Opera nightly (build 4681) – 65/100
    • FF3b pre 5 – 70/100
  • 200828 Feb

    As this is my first post, I’d like to introduce myself. My names James and I’m currently working as a senior User Interface Developer for Teachers TV. Like many of you guys, I’m fanatical about web standards and about creating the leanest, most semantic markup possible. I too am excited about the new possibilities with the arrival of CSS3, and am keen to contribute as much as I can to this great site. My first post is regarding a new method of creating Tooltips that I devised while coming up with a solution for a recent project.

    Up until now, there were a few options in existence; ugly Javascript-based methods, or solutions that use blank anchor tags (for IE6 compatibility). Another possibility is to ignore IE6 altogether and make use of the hover pseudo class in conjunction with the parent element that contains the tooltip text. I had to think out the box a bit on this one, but have come up with a completely new CSS3-based solution.

    My solution degrades gracefully in browsers that don’t support the CSS3 elements I’ve used and is a lot more elegant than former methods since it utilises an element’s title attribute, rather than creating additional markup within a parent element.

    Let’s start with the HTML (Note: the following example is based on use of icon background images for the divs, hence the fixed dimensions):-

    <div title="Tooltip text for first div"></div>
    
    <div title="Tooltip text for second div"></div>

    In short, my method is achieved by making use of the :before (or :after) pseudo element and content property, combined with the :hover pseudo class.

    First off I grab the value of the divs title attribute by using the content property’s attribute function. Notice how I set the generated content to display:none -I’ll make it visible on :hover.

    div:before{
    	content:attr(title);
    	display:none;
    }

    I now combine both the :hover class and :before pseudo element together, to specify values for the generated content when the div is hovered over.

    div:hover::before{
    	width:200px;
    	display:block;
    	background:yellow;
    	border:1px solid black;
    	padding:8px;
    	margin:25px 0 0 10px;
    }

    One of the problems I came across at this stage, was that when having two elements floated left to each other and you hover over one of the elements, although the tooltip displays, it renders underneath the adjacent element. It is a simple case of layering the generated content over the div; my immediate thought was to specify a layering value in the above statement. However, after referring to the relevant W3C spec, it was apparent that in line with their recommendations, user agents ignore the position property in an instance such as the above statement, therefore rendering a z-index value useless.

    The solution was to specify the z-index and position properties in a separate statement dealing exclusively with the :hover pseudo class.

    div:hover{
    	z-index:10;
    	position:relative;
    }

    This meant that it now works! It of course works in every browser above IE7 including Safari 3, Firefox 2.0.0.12 & Opera 9.5b

    Obviously there’s nothing you can do to stop the default behaviour of standards compliant browsers regarding rendering of title attributes, so when leaving your cursor on my method for too long, the default browser behaviour will overlay the generated content CSS effect

    Live example of the final product

OUR SPONSORS

Advertise here?
TAG CLOUD