Sunday, February 8th, 2009
WebKit, the rendering engine that has brought CSS3's explicit animation to the web for the first time!
Today we as web designers and developers get a rare chance to look into the future. The latest nightly build of Webkit (the rendering engine for browsers Apple Safari and Google Chrome) includes some new support for CSS3. Specifically, explicit animations using CSS. Up until now, developers have either had to rely on Flash and all its drawbacks, or bite the bullet and write out a long piece of JavaScript just to get a box to slide in elegantly. JQuery alleviated the problem somewhat, but nothing compares to the visual approach of writing a CSS document.
CSS animation will enable developers to spend much less time on animation which, to the end user, may seem trivial. And it will do so with cleaner, simpler, more robust code that will load significantly faster and run smoother for the end user. Read on to see a preview of how it works, and when you can expect to be able to use this on an actual web page.
[click here to read the rest of the article]
Sunday, January 11th, 2009
I don’t like Internet Explorer. I don’t think I’ve made that any secret. One of the reasons for that is that there are many instances where fully valid code won’t render properly in IE6 — many more instances than is the case with other browsers.
IE6 Showing its True Malevolent Self
Today I found the strangest and most terrible bug I’ve ever encountered. In Internet Explorer 6, my main content was completely invisible. Images and text alike were simply gone! The container DIV was stretched out as it would be if the content were there, and the text was selectable! If I highlighted the text, in fact, I was able to see it, even after de-selecting it. On a page refresh however, my content would simply disappear again, only to reappear when highlighted.
I consider this the most terrible bug ever because in most cases, a bug will rearrange your website, or make it look ugly, but users will still be able to access the content. The content is the reason for the site’s existence, and with this disappearing content bug, users of Internet Explorer 6 will not see your content unless they think to highlight it (and in that particular demographic, I’m willing to bet the odds of that are pretty low). Thus your entire site is rendered unusable and pointless. So read on for the fix!
[click here to read the rest of the article]
Saturday, October 11th, 2008
With Safari now hovering around 8% of browser market share, it is important that web developers and designers test it almost as thoroughly as they would Firefox. Although the numbers don’t lie, plenty of developers/designers still don’t test Safari at all. Even those who do are easily prone to missing this one, as it’s rather difficult to see on lackluster monitors. There is a little-known issue in Safari where color in images mismatches with the CSS background colors. I won’t pretend to know the nitty-gritty details of how this works, but essentially Webkit renders CSS hex codes slightly different than it renders image colors.
Safari Background Image-Color Mismatch
Normally this background image/color mismatch is not noticeable enough to be a problem. However, if you are trying to fake transparency, and part of your image is meant to look like the background, the image/css color profile difference becomes immediately visible on modern monitors, since the background image intended to blend with the CSS solid color does not quite match up. This is shown in the image to the left, but again, you have to have a nice and bright monitor to see it. In case you’re having trouble seeing it, I highlighted the edges of the image, where the gray varies slightly, in the second image below and to the right.
[click here to read the rest of the article]
