My case was about font-size and letter-spacing on Opera (11.10). Opera was displaying selected font way too big to fit in allowed space and I needed a hack to fix this issue.

Opera 9 and below

This is pretty straight forward and well known hack:

html:first-child p
{
    font-size:12px;
}

The real issue, in my case, was how to target newer and modern Opera versions 10 and 11.

Opera 10 and above

The answer is in media queries. Earlier this was obvious hack while no other browsers supported media-queries properly. However, nowadays more and more browsers support it and therefore we need to tweak the conditions a little:

@media not all and (-webkit-min-device-pixel-ratio:0) {
    p {
        font-size:12px;
    }
}

I’ve validated this with Opera 10.5 and Opera 11. I also checked on Chrome 11, Chrome 12, Firefox 3.6, Firefox 4.0, Safari 5 and IE 8 that it doesn’t affect on them.

Edit: I haven’t tested this on Opera 9 or earlier, but according to other resources, this hack should work on those browsers too.

Conclusion

It’s still possible to write browser-specific hacks but it’s getting more and more complex all the time. In this case we’re using a hack that is actually targeted to WebKit browsers to get them excluded from the media query hack. However, there is no confidence that this hack would work on Opera 12 or next versions of Safari or Chrome would behave as expected.

And big thanks goes to an article CSS Hack or New CSS File for Problematic Browsers? and Is There Any Dedicated CSS Hacks For Safari or Opera?.

Today, I read about a problem with Opera’s onload event not firing when navigating with back / forward buttons. The reason for this is that Opera receives documents directly from cache. Another, similar kind issue is related to firing onload event, when adding images dynamically.

In this article, we will solve Opera’s onload issue caused by caching, and another problem, which occurs when adding images dynamically with javascript.

Currently, this is tested to work with Windows versions of Opera 10.1, 10.2 and 10.5 pre-alpha. Please, give me feedback if you find issues with other versions of Opera.

How to force refreshing

This isn’t complicated at all:

if (window.opera)
{
	opera.setOverrideHistoryNavigationMode('compatible');
	history.navigationMode = 'compatible';
}

How to solve image.onload

After banging my head against wall, I found an easy solution:

var test = new Image();
if (test.addEventListener)
{
	test.addEventListener('load',function()
	{
		alert(this.width);
	}, false);
}

test.setAttribute('src','/images/test.gif');

The key is to define src attribute after you’ve bound event listeners.

Demo

You can view demo at Demo section: Onload issues with Opera

I was about not to publish anything before Christmas – just calming down, taking some extra time to get my blog design finished, plugins installed, and so on..

..but no. I got way too excited when I heard today that Opera 10.5 pre-alpha for Labs was released. In other words, this means that an updated version of Opera’s layout engine, Presto, was out to play with – meaning, that CSS3 Transformations and Transitions are available also for Opera.

In this article, we write some lines of CSS and create rotating transform effect with all the common browsers, including Internet Explorer and the latest version of Opera.

Issues with Opera and IE

Opera offers CSS3 Transitions support in Opera Presto 2.3, at least partially. By the specification, we’re able to take advantage of -o-transform:rotate(deg);.

IE is a bit trickier (big surprise). Fortunately there’s a nice filter available, called Matrix. The values for matrix are quite complicated, hence some assistance with Javascript is needed.

In my case, I’ve created some functionality and bound it with HTC file to CSS selectors. The functionality is based on values of property -ms-transformation. I’ve also implemented -ms-transition for transitions, but this will be examined further on later posts.

Example code

In this example, I’ll be using A-elements for hover support in IE6. I’ve already written a small implementation similar to Whatever:hover, but that “project” is still taking baby steps.

So let’s cut the chase and create some lines of code:

HTML

<a href="#" id="one" class="rotate">This is 45deg -rotated element.</a>
<a href="#" id="two" class="rotate">This is 10deg -rotated element, which rotates to 45deg when hovered.</a>

CSS

#one {
behavior:url(-ms-transform.htc);
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
-ms-transform:rotate(45deg);
}
#two {
behavior:url(-ms-transform.htc);
-moz-transform:rotate(10deg);
-webkit-transform:rotate(10deg);
-o-transform:rotate(10deg);
-ms-transform:rotate(10deg);
}
#two:hover {
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
-ms-transform:rotate(45deg);
}

Demo

You can view demo at Demo section: Cross-browser Rotation Transformation with CSS.

Final thoughts

Although everything “is not fully there”, this article shows the possibility for implementing cross-browser CSS3 Transformations purely with CSS.

In addition, this post works as an opening post of my blog. Feel free to give feedback. Merry Christmas!