Welcome to the MacNN Forums.

If this is your first visit, be sure to check out the FAQ by clicking the link above.
You may have to register before you can post: click the register link above to proceed.
To start viewing messages, select the forum that you want to visit from the selection below.

There was a request for a CSS tips thread, so I thought I would post some of my favorite tips...

Recycling code seems to be a common practice among developers, and with the separation of your widget's code from its display, it is possible to create widgets you can easily drop into other sites and simply skin then by modifying the CSS.

When you add new CSS files to your head tag (or load them dynamically), these rules are *appended* onto the existing rules. Therefore, it is smart to create a file of CSS defaults for your widget - some basics that you know are going to be consistent no matter what site the widget is displayed on. Then, you can add your own CSS rules in a separate file that will extend the defaults.

Check out your CSS in Firebug to determine which rules are given priority...

YUI Loader is a great way to load your default CSS, your own CSS, and any attached Javascript dynamically. You'll find that stuffing 2309428309 assets into your head tag that may only be needed for certain pages slows down your site. Loading these resources dynamically also allows you to speed up the initial rendering of your page. Performance aside, YUI Loader is a great way to define and modularize your widgets and define prerequisites for these so that you can call them:

Often times it is useful to add or remove classes dynamically via a Javascript trigger. I'm sure jQuery and other JS toolkits have similar functionality, but in Prototype I'm *constantly* making use of, for example:

Displaying table like data can be tricky in CSS. You can always use a plain HTML table, but these are often somewhat limiting and do not work well with some Javascript toolkits including Script.aculo.us. If you need extremely precise control, there are other options.

1) Make display-inline block (blocks with defined widths and heights) work in all browsers:

The "A" is the amount of transparency where the IE way (AARRGGBB) is one of the 16 hex values where 00 is opaque and ff is transparent, and the W3C way (RGBA) is a decimal between 0-1, where 1 is opaque and 0 is completely transparent.

Save yourself a lot of headache by dealing with the differences in default CSS attributes between IE and non-IE browsers by using the YUI CSS reset library. This will strip out all of the vendor provided defaults and will leave with you with absolutely nothing so that you can define these attributes yourself. This is a great way to put each browser on a level playing field.

Mozilla browsers also create that little border around links when clicked on to show you the clickable region. You can disable this Mozilla only thing with the following:

Making rounded corners is something that designers seem to want to do frequently. This is extremely easy to do in non-IE browsers, and a complete PITA to do in IE. In non-IE browsers you can use the CSS3 border-radius attribute to do this:

There are also attributes to just curve certain corners of your box, should you wish to do this. As you can see, this is very easy to do, and IE browsers will just ignore this and render the element with square corners.

Microsoft has announced border-radius support in IE 9, but until then I mostly just stick with the CSS way of doing this and leave IE users stuck with square corners. I'm usually too lazy to do this any other way, unless the rounded corners are absolutely required.

Other useful CSS things:

- box-shadow: for adding shadows to stuff, no IE support

- opacity: opacity - this is supported in IE with filter:alpha(opacity=70) where 70 is a value between 0-100. Older Mozilla browsers used -moz-opacity.

Background sprites are a *great* technique for updating your site's graphical navigation buttons by updating a single file, rather than having to update a bunch of slices. If you aren't using sprites, you should. Sprites + Firebug make an incredible combo, since you can reposition elements on the page without having to reload the page using Firebug. You can also do this with the IE 8 developer tools, but I don't think you can do this with the Webkit developer stuff (if not, I haven't discovered it yet)

Font embedding is here now! You can now display text on your sites with non-Web friendly fonts providing that you can convert the font to Opentype or Truetype (if it isn't already), and these silly .eot files for IE. There are plenty of EOT converters online. The opentype fonts work in Firefox 3.5+ and Safari, and the EOT fonts IE. Converting Macintosh-only font suitcases to TTF or OTF can be tricky.

Check that you have rights to embed this font on your site though, there are some legal issues more info here.

That's it from me for the first batch. Sorry if any of this is unclear, I wrote it in a hurry not knowing what would be of interest to you. Please let me know if you'd like more elaboration or clarity on any of these things...

I will close by saying that you can do all sorts of things with CSS, but you can do even more when paired with Javascript. I strongly recommend a toolkit such as Prototype (you Rails programmers should like the syntax of Prototype). At this point, I literally cannot live w/o Prototype (or at least I don't want to!)

PHP/MySQL, the NetMusician Webkit, WordPress, CodeIgniter, Prototype, Script.aculo.us, YUI History, Modalbox, Lightbox, an RSS parser to pull events from Instant Encore for the Calendar, and Flash (yuck!) for the mediaplayer. The site features a global mediaplayer that plays music uninterrupted on every page, a newsletter and story archive system, and other stuff. I'm happy to discuss any of these tools or techniques I used to make this site.

You can create these often used rotating banners that you find done in Flash so often using Javascript... For example, the Canadian Brass homepage: http://www.canadianbrass.com . I could have also added little icons to allow navigation between the banners. I define the paths to the banner graphics using my CodeIgniter config file so that one can add and define new banners without requiring Flash. Not requiring Flash results in faster performance overall, probably a faster page load, iPhone compatibility, and not having to deal with Flash

I will be so glad when rounded corners is IE supported. Of course by then my sites will probably not use rounded corners... til then I use two background graphics for the top and bottom curves. More markup for the other methods was annoying.