Thursday, August 21, 2008

More CSS tips

Continued from yesterday...

Firefox 3 and Safari both support rounded corners in CSS (now if only IE would catch up).

You can use the following tags.

-moz-border-radius: 3px; /** for Firefox **/
-webkit-border-radius: 3px; /** for Safari/webkit **/

If you use these tags on a div it will be rounded in FF or Safari and display square in IE.

If you only want to round some of the corners (as opposed to all of them) here is the additional syntax in an example (where I rounded the top corners only).

-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;

Wednesday, August 20, 2008

CSS tips

Been back in CSS today. Here are some things I learnt today.

1) text-transform will allow you to transform the text to uppercase, lowercase or capitalize i.e.

h1 {
text-transform: uppercase;
}

This is a handy alternative to typing everything out in upper case (which is bad because the designer may change his mind to switch away from all caps at some stage).

2) If you are going to use jQuery to show/hide a table, wrap it in a div and toggle that instead. This is because show/hide/toggle in jQuery changes something from display:none to display:block. A table's display is inline-table by default and setting it to block will lead to some unexpected results.

3) If you have to write CSS (or anything) for IE only, you can use conditional comments
<!--[if IE]>
Special instructions for IE here
<![endif]-->
It's best not to use special CSS code for IE at all, but in some cases it's unavoidable.

4) You can modify the sliding doors technique by using a single image (instead of 2 images). The advantage to using a single image is fewer graphics to download (as they are cached).

Thursday, August 07, 2008

Real MVC for the web

I recently read an article which talks about writing MVC for the web using jQuery (http://welcome.totheinter.net/2008/08/05/mvc-pattern-for-the-web/).

In any case, the author proposes building a full MVC controller in JavaScript (the example article is still in progress), which is interesting, but I think in some ways it is a little misguided, for I believe that the front end of the web is already MVC.

Model = HTML (provided it is written semantically and not structurally)
View = CSS (updating the style)
Controller = JavaScript

As long as you follow the principles of Unobtrusive JavaScript and keep your (X)HTML clean then you have MVC built in. XHTML is a form of XML after all (and XML is used to represent data/model).

Just a thought...