![](_gb_images/_gb_sitenav_spacer.gif) |
![](_gb_images/_gb_clear.gif) |
CSS tips
|
![](_gb_images/_gb_clear.gif) |
|
![](_gb_images/_gb_clear.gif) |
Clinically Insane
Join Date: Mar 2001
Location: yes
Status:
Offline
|
|
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.
To extend existing rules:
Code:
#mywidgetwrapper #mywidget {
font-weight:bold;
}
#mywidgetwrapper #mywidget {
background:url(styles/images/myimage.jpg) no-repeat;
}
To override rules:
Code:
#mywidgetwrapper #mywidget {
background:none;
}
or:
Code:
#mywidgetwrapper #mywidget {
background:url(styles/images/mydifferentimage.jpg) no-repeat !important;
}
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:
Code:
var cfg = {
base: '/path/to/yui/',
insertBefore: 'styleoverrides',
modules: {
'photogallery': {
requires: ['photogallerycss','lightwindow'],
fullpath: ('/path/to/gallery.js')
},
'photogallerycss': {
fullpath: ('/path/to/photogallery_defaults.css'),
type: 'css'
},
'lightwindow': {
requires: ['lightwindowcss'],
fullpath: ('/path/to/lightwindow/javascript/lightwindow.js')
},
'lightwindowcss': {
fullpath: ('/path/to/lightwindow/css/lightwindow.css'),
type: 'css'
}
}
};
YUI(cfg).use('photogallery', function(Y) {
widgetclass.initPhotoGallery();
})
You can further abstract this by putting the configuration and initialization of your widget into its own Javascript class (in this case "widgetclass"), and creating your own JS function to init it:
Code:
function yourclass.initModule = function(module) {
cfg = ... snipped ...
switch (module) {
case 'photogallery':
YUI(configObj).use('photogallery', function(Y) {
Y.log('init photogallery');
widgetclass.initPhotoGallery();
});
}
}
|
|
|
|
|
|
![](_gb_images/_gb_clear.gif) |
|
![](_gb_images/_gb_clear.gif) |
Clinically Insane
Join Date: Mar 2001
Location: yes
Status:
Offline
|
|
Tip #2: Prototype is your friend
HTML elements can be assigned multiple classes. E.g.:
Code:
<div id="album1" class="photogallery redtheme toplevelalbum"></div>
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:
Code:
if ($('album1').hasClassName('photogallery')) {
$('album1').removeClassName('redtheme');
$('album1').addClassName('bluetheme');
}
element.hasClassName is extremely useful for verifying state to various HTML elements (e.g. grayed out, selected, clicked on, visibility, etc.)
|
|
|
|
|
|
![](_gb_images/_gb_clear.gif) |
|
![](_gb_images/_gb_clear.gif) |
Clinically Insane
Join Date: Mar 2001
Location: yes
Status:
Offline
|
|
tip #3:
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:
Code:
.column1 {
display:inline-block;
*display:inline;
zoom:1;
width:500px;
vertical-align:top;
}
*display:inline and zoom:1 are the secret sauce you need to get this to work in IE.
2) use display:table and create yourself a JS function to convert these to HTML tables for IE browsers which don't support this option.
|
|
|
|
|
|
![](_gb_images/_gb_clear.gif) |
|
![](_gb_images/_gb_clear.gif) |
Clinically Insane
Join Date: Mar 2001
Location: yes
Status:
Offline
|
|
tip #4:
RGBA is a great way to define a background color with an alpha channel/transparency, but this doesn't work in IE browsers. However, you can accomplish the same thing with this obscure trick:
Code:
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ddc3bfbf,endColorstr=#ddc3bfbf); /*AARRGGBB*/
zoom:1;
background-color: rgba(174,174,172,.9); /* RGBA */
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.
|
|
|
|
|
|
![](_gb_images/_gb_clear.gif) |
|
![](_gb_images/_gb_clear.gif) |
Mac Elite
Join Date: Apr 2003
Location: Hong Kong
Status:
Offline
|
|
Good stuff, keep the tips coming.
Perhaps the powers that be (mods) may make this a sticky.
|
|
|
|
|
|
![](_gb_images/_gb_clear.gif) |
|
![](_gb_images/_gb_clear.gif) |
Clinically Insane
Join Date: Mar 2001
Location: yes
Status:
Offline
|
|
tip #5:
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:
Code:
a:active {
outline-color:-moz-use-text-color;
outline-style:none;
outline-width:medium;
}
a:focus {
outline-style:none;
}
|
|
|
|
|
|
![](_gb_images/_gb_clear.gif) |
|
![](_gb_images/_gb_clear.gif) |
Clinically Insane
Join Date: Mar 2001
Location: yes
Status:
Offline
|
|
tip #6:
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:
Code:
#mything {
border:2px #690000 solid;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}
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.
|
|
|
|
|
|
![](_gb_images/_gb_clear.gif) |
|
![](_gb_images/_gb_clear.gif) |
Clinically Insane
Join Date: Mar 2001
Location: yes
Status:
Offline
|
|
tip #7:
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)
|
|
|
|
|
|
![](_gb_images/_gb_clear.gif) |
|
![](_gb_images/_gb_clear.gif) |
Clinically Insane
Join Date: Mar 2001
Location: yes
Status:
Offline
|
|
tip #8:
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.
Here is what the CSS looks like:
Code:
@font-face {
font-family: " your FontName ";
src: url( /location/of/font/FontFileName.eot ); /* IE */
src: local(" real FontName "), url( /location/of/font/FontFileName.ttf ) format("truetype"); /* non-IE */
}
/* THEN use like you would any other font */
.yourFontName { font-family:" your FontName ", verdana, helvetica, sans-serif;
}
|
|
|
|
|
|
![](_gb_images/_gb_clear.gif) |
|
![](_gb_images/_gb_clear.gif) |
Clinically Insane
Join Date: Mar 2001
Location: yes
Status:
Offline
|
|
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!)
For example, I just completed a redesign for the Canadian Brass: http://www.canadianbrass.com (programming is mine, graphic design is not). You can find a ton of Javascript throughout the site, all driven via a ton of Prototype here: http://www.canadianbrass.com/js/main.js
This site makes use of:
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.
|
|
|
|
|
|
![](_gb_images/_gb_clear.gif) |
|
![](_gb_images/_gb_clear.gif) |
Clinically Insane
Join Date: Mar 2001
Location: yes
Status:
Offline
|
|
I lied, one more tip:
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 ![Smilie](https://forums.macnn.com/images/smilies/oldschool/smile.gif)
|
|
|
|
|
|
![](_gb_images/_gb_clear.gif) |
|
![](_gb_images/_gb_clear.gif) |
Moderator ![](https://forums.macnn.com/_gb_images/_img_ranks/star_5_moderator.png)
Join Date: Jun 2000
Location: inside 128, north of 90
Status:
Offline
|
|
Originally Posted by Andy8
Good stuff, keep the tips coming.
Perhaps the powers that be (mods) may make this a sticky.
oh, hay, I can do that!
Thanks for the tips Besson!
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.
|
|
|
|
|
|
![](_gb_images/_gb_clear.gif) |
|
![](_gb_images/_gb_clear.gif) |
Clinically Insane
Join Date: Mar 2001
Location: yes
Status:
Offline
|
|
background graphics do indeed work, although it gets to be a PITA when it comes to making the width of these blocks fluid and stuff like that.
It's incredible how far IE fell behind the other browsers and how to this day it still lacks support for some fairly basic stuff.
|
|
|
|
|
|
![](_gb_images/_gb_clear.gif) |
![](_gb_images/_gb_clear.gif) |
|
![](_gb_images/_gb_clear.gif) |
|
|
|
![](_gb_images/_img_misc/_gb_mb_previousthread-off.gif)
|
|
![](_gb_images/_gb_clear.gif) |
Forum Rules
|
![](_gb_images/_gb_clear.gif) |
![](_gb_images/_gb_clear.gif) |
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
|
HTML code is Off
|
|
|
|
|
|
![](_gb_images/_gb_clear.gif) |
![](_gb_images/_gb_clear.gif) |
![](_gb_images/_gb_clear.gif) |
![](_gb_images/_gb_clear.gif) |
|
![](_gb_images/_gb_sitenav_spacer.gif) |