Either are bad, because vendor prefixes work on specific browsers, while CSS3 is not implemented fully by those browsers. When talking about vendor prefixes in CSS, let me tell you in breve, what’s this. If you’d like to make rounded corner under Mozilla Firefox, you usually use a background image, but there’s another way to do it – with Mozilla specific CSS:

-moz-border-radius: 5px;

That’s bad because it works only on Mozilla based browsers, although there’s a webkit based similar syntax:

-webkit-border-radius: 5px;

Even after that our “favorite” browser MSIE until version 9 is not displaying any rounded corners.

In other hand CSS3 gives us the possibility to write the simple:

border-radius:5px;

which is not implemented in many currently used browsers, but it may be used for progressive enhancements.

In Breve …

Everybody’s talking about vendor prefixes after the famous post of PPK, but there are both opinions – pros and cons. However it’s good to use it, but very carefully, and think about what CSS3 may give you!

Related posts:

1. CSS border-radius vs. images!
2. HTC?! Round the corners on IE!
3. CSS effective selector

Perhaps! I was curious how can inefficient selectors impact a page performance. To begin with this topic let me say that inefficient selector is referred usually as nested selector:

div span div {
    border:1px solid red;
}

as you can see here there are three nested tags I use to reference the innermost div. If you’re wondering how you’d know about inefficient selectors – well there is a plugin for the Firebug written by a Google team called Page Speed explaining which of your selectors are inefficient. See the image below.

In the demo page you can find what I was trying to achieve and you can play around with that code to measure by yourself the performance of the different selectors.

So who’s faster? Nested, IDs or Classes?

Actually its pretty though to say. Yet another surprise for me was to notice that the notation:

div.my-class {}

was a bit slower than the marked as “inefficient” by Page Speed:

div span div {}

Another good thing to mention is that there is a difference between div.my-class and .my-class

Question’s answer …

In fact div.my-class is always with a higher priority than .my-class even if you’ve the following code:

div.my-class {
    border:1px solid red;
}
 
.my-class {
    border:1px solid blue;
}
 
div span div {
    border:1px solid black;
}

And the computed style for Firefox was …

where “div span div” chain matches the same elements as the previous selectors, as you can see:

so even that div.my-class will be the most important and finally the element will get its red border! It does not depend only on where you put the CSS rules, but also on how they are defined.

Related posts:

1. CSS effective selector
2. jQuery cssText Helps You Improve Browser Reflows
3. CSS selectors – new look over them

When developing a website for Arabic one of the most common questions is how to get it work with a reverse direction. Actually there is the CSS property direction:

.my-class {
    direction:rtl;
}

which makes the page right aligned.

Floating elements …

However sometimes there are elements on the page which are absolutely positioned and the direction property doesn’t do the job. The solution is something like combining the two settings. Both direction and float. So something like:

.my-class {
    float:left;
}

becomes something like:

.my-class {
    float:right;
    direction:rtl;
}

and of course if you’ve something like margin-left it should become margin-right!

Related posts:

1. jQuery CSS functions. Part 1 – offset()
2. jQuery CSS selectors. Change one or more CSS properties!
3. CSS sprites. Go beyond the limits with base64!

As you may know the Arabic language is written from right to left in reverse of Latin and Cyrillic languages and in the web that means you must change the look of the page for that subset of users coming to your site.

One of the main problems are with web forms. Usually we use something like label:input pairs:

label: <input type="text" />

but when it comes to Arabic version it should be turned into:

<input type="text" /> : label

and that’s quite tricky!

The easiest way for me!

Well I simply wrap that chunk of code into a table. That helps me manage the direction with the CSS direction:rtl like so:

1
2
3
4
5
6

<table>
 <tr>
  <td>Label:</td>
  <td><input type="text" /></td>
 </tr>
</table>

When it comes to the Arabic version it can be translated with the simple:

1
2
3
4
5
6

<table style="direction:rtl;">
 <tr>
  <td>Label:</td>
  <td><input type="text" /></td>
 </tr>
</table>

Related posts:

1. CSS right to left direction & floating elements
2. One Form – Multiple DB Records
3. Use Zend_Translate to Translate Your Web App

media=print

this, lovely, browser stops the rendering until the sheet is loaded. This is pretty strange when it comes to such media, just because it is not used to render the page in a browser. In fact as Steve Souders says the normal behavior of the browser should be don’t block or even delay the sheets for media that is not the current one.

However for further reading see this post with many thanks to Steve Souders again.

Related posts:

1. Browsers, pixels and graphic rendering!
2. Performance of jQuery 1.4
3. HTC?! Round the corners on IE!

As I wrote recently there is a way to do this in IE with the use of VML, but yet again this is not working on Opera, and puts another chunk of markup in your document, that leads to more difficult maintain.

The solution can be done with another approach that can be considered as one level beyond the VML usage. Thus you have scripts only in IE and clean CSS.

Everybody now’s using both:

-moz-border-radius
-webkit-border-radius

and now’s coming the new wave with:

border-radius

property in CSS3, but as we know it will be maybe present in IE9 and any older MSIE will be discarded.

What the .htc means?

It stands for HTML components file, which is completely JavaScript code that’s included via CSS as:

behavior: url(border-radus.htc);

Of course you can find such .htc predefined files everywhere on the web and it’s completely working.

The problem

is that sometimes after using many HTML tags with border radius IE appears to crash, which is nothing new, but however not desirable.

Related posts:

1. Cross-browser rounded corners! Works on IE but, but not on Opera!
2. CSS border-radius vs. images!
3. Vendor Prefixes in CSS

Rounded Corners

That was a strange answer. Who’s making rounded corners with CSS?! on IE and more important how? There is a way to make it, but not entirely with CSS and HTML. The solution is with VML a subset of XML to deal with vectors, and CSS of course.

The original solution I found on snook.ca.

It is really working fine as described and shown in the example, but there are some issues as well. There is no way to setup background image on the container, and the width and height are behaving strange.

However this gives you an opportunity to make cross browser rounded corners with no scripting that slows down the page and except Opera it’s quite working!

Related posts:

1. HTC?! Round the corners on IE!
2. CSS border-radius vs. images!
3. Vendor Prefixes in CSS

When it comes to CSS selectors, most of us are using the most familiar selectors by id or class name. Something like:

.my-class {}
#my-id {}

But as you can see in most of the big JavaScript libraries, such as jQuery, you can improve the selection of element/s by using complex selector syntax.

Do you know the syntax?

Maybe yes, but maybe not! As I stumbled upon an interesting article on http://css-tricks.com
The Skinny on CSS Attribute Selectors.
The good part is that now you can use this powerful selector syntax to improve CSS.

Browsers

Because this is the most interesting part – yes it is supported by MSIE, and no – not before IE7, be careful if you’d like to support it.

Related posts:

1. What if your site doesn’t use all of the CSS selectors?
2. Optimizing CSS. Five simple steps!
3. CSS Priority: The Difference Between a.my-class and .my-class

This is one of the main problems of web design and development now, even if it sounds strange. The thing is that with round corners the elements become more nice and groovy and most of the web designers make such design templates. The problem than comes over the web developer who’s supposed to convert this into HTML and CSS. Of course it would be nice if all browsers support rounded corners in CSS, but they don’t and guess what IE fully doesn’t support it.

-moz and -webkit

Most of you have heart about this patches in CSS when you can use this prefixes for Mozilla based and Safari’s Webkit based browsers. Than you can use border radius with no pain, and you get the same effect as with using images.

-moz-border-radius : 4px;
-webkit-border-radius : 4px;

Of course on IE this doesn’t work and the element remains with square corners. But what the question is, should we make both versions for non IE browsers without images and a version for the “great” MSIE and all of its versions?

My answer is: no!

Although many sites do that, see vimeo for instance, there’s no need to support that. As the rumor and the MSIE blog says in IE9 which is … coming soon there will be – border-radius property.

That’s awesome!

Finally Microsoft has done something good! So stop using background images! This is hard to maintain, difficult to make and it’s bad for the browser loading time, because of the extra images/sprites.

Related posts:

1. Vendor Prefixes in CSS
2. HTC?! Round the corners on IE!
3. Cross-browser rounded corners! Works on IE but, but not on Opera!

In Zend Framework there is a very elegant way to include CSS and JavaScript. Because in one single view of any action you cannot include a JavaScript or CSS because they wont be executed from the browser, you can simply use a helper.

You can see the original source of how that’s done here. And in breve you can include a JS file like so:

<? $this->headScript()->appendFile('/media/js/global.js') ?>

but where the problem is?

As a very good PHP point of view, there is really that way to include JS into the application. But a PHP point of view is not a JavaScript point of view so this solution is not the best one.

As almost everybody knows JavaScript blocks other content until it’s loaded and executed from the server and nowadays the most popular way to include JS is just before the closing <body> tag.

That’s why the ZF solution is not optimal. What we actually need as both PHP and JavaScript developers is a most robust solution!

Related posts:

1. Zend Framework: Inject JavaScript Code in a Action/View
2. CSS sprites. Go beyond the limits with base64!
3. CSS selectors – new look over them