Showing posts with label css. Show all posts
Showing posts with label css. Show all posts

Tuesday, September 8, 2009

Opera 10 is Opera 9.8?! A user-agent Identity Crisis

Opera 10 has been released and naturally Colnect has to be tested with it. Although all of today's browsers are "complaint", they all produce different results for the same pages.

On Colnect, there are CSS pop-up menus for both the top menu and side menu. Perhaps not the best design decision, they are yet very functional to members browsing the site. So far, only Internet Explorer (IE) was not responding properly to the top menus. IE6 or lesser doesn't support them. IE7 does support them but displays them in the wrong position for right-to-left languages. IE8 does the job properly, as well as FireFox, Chrome and Opera. Actually, that was until the new Opera 10 came out and now the right-to-left languages display the popup CSS menus displaced and unusable. Only on Opera 10 the side menu pop-ups now have problems as well.

To ensure people choosing problematic browsers don't suffer, Colnect's code checks the browser by using its USER-AGENT string. When a problematic browser is encountered, the pop-up menus will simply not appear. That's how I found out that the brand new Opera 10 tells web server it's actually Opera 9.8 engine. See for yourself:



Identity crisis for Opera?

Monday, August 25, 2008

Adjusting CSS to RTL languages

Writing the new version of Colnect from scratch, I've decided to start using more CSS and less HTML table tags where possible. Truth is I'm still not sure that this decision will hold as CSS still seems immature to me. Yes, it's been around for years and it has many proponents but the truth is that sometimes you really have to work hard to do something which could have been easily explained to any design language. One such issue is RTL (right-to-left) languages, such as Hebrew and Arabic.

HTML supports the dir tag to allow one to easily change from left-oriented design to right-oriented one. In CSS, however, it seems the matter has not been taken into serious consideration. When you have a CSS float, for example, you can choose if it floats left or right but there's no way for you to say something simple like left and left-fixed. IMHO, left should have changed to right on RTL languages while left-fixed would have always kept left. The same goes to specifying the 4 dimensions like in 'padding: 1px 2px 3px 4px;'. They should be switched unless the directive fixed is added.

But since CSS doesn't do that well, a developer from Google has created a python script called CSSJanus which tries to address many issues relevant for converting a CSS from a left-oriented one to a right-oriented one. It's code is available here.

Since Colnect is built using PHP, I've decided to only use a few ideas from the CSSJanus code and integrate them into the JS/CSS combinator already in use. The idea is quite simple, the application asks for a different CSS file when it's right-to-left (RTL) oriented by prefixing some directive to the CSS requested which lets the combinator understand it should add the conversion.

You can start with the combinator script code here.

These two lines at the top of the script will add RTL directive:
$bRTL = (substr($_GET['files'], 0, 4) == 'rtl_');
if ($bRTL) $_GET['files'] = substr($_GET['files'], 4);


Now the cache hash should be different so there's a slight modification here:
$hash = $lastmodified . '-' . md5($_GET['files'].($bRTL ? 'RTL' : ''));


And the last thing to do is to create the left-to-right conversion function and place it just after stripping the CSS comments. Add this:
if ($bRTL) $contents = CssSwitchLeftToRight($contents);


And here's my simple conversion function (that does NOT cover many cases covered by CSSJanus):
/**
* Switch left to right and vice versa for a few of the cases relevant for css
*
* @param string $str
* return string
*/
function CssSwitchLeftToRight($str) {
$arConversionSeq = array(
'/-left/' => 'TOK1',
'/-right/' => '-left',
'/TOK1/' => '-right',
'/float\s*:\s*left/i' => 'TOK2',
'/float\s*:\s*right/i' => 'float:left',
'/TOK2/' => 'float:right',
);
foreach ($arConversionSeq as $pattern => $replacement) {
$str = /*"doing{} $pattern => $replacement ".*/preg_replace($pattern, $replacement, $str);
}
return $str;
}


I have not posted the entire script here since it has site-specific modifications on my site. You're welcomed to comment here if further clarifications are needed.

Wednesday, June 4, 2008

Pages load faster when using CSS instead of IMG tag

This is a small technical tip to speeding the loading of your web pages. There are many tips you should consider but I haven't seen this one well documented out there on the web.

When using the HTML IMG tags with Internet Explorer (tested on IE7), the page is not displayed until the images have been downloaded. Loading images using CSS background-image ensures the page is displayed even before the image is loaded.

See Colnect's countries page which contains many flag images in it using this tip.

With FireFox the page is displayed but this modification will make CSS background images load later than normal IMG images.

How to do it?

Simply replace:
<img src="image.jpg" 
width="100" height="100" />

with
<div style="height: 100px; width: 100px;
background: url(image.jpg) no-repeat center center;">
</div>

Link and Search

Did you like reading it? Stay in the loop via RSS. Thanks :)