Archive

Posts Tagged ‘CSS’

CSS Performance tips and Internet Explorer

January 31st, 2009
3 comments

I thought it might be useful to share some techniques I’ve started to adopt when building a website’s CSS. These range from reducing the number of requests to keeping it easy to develop for multiple browsers.

Performance topics:

Technique 1:
First know, your CSS less is always better. For example, a lot of times I find myself writing:

margin-left:0px;
margin-right:10px;
margin-top:5px;
margin-bottom:8px;

This can be converted to:

margin: 0px 10px 5px 8px; /* top, left, bottom, right */

Doing this can reduce the size of your CSS file, making it load faster.
Read more…

Software , , , ,

@font-face Coming to a browser near you

December 17th, 2008
2 comments

It’s been a long suat after feature of countless web developers and designers a like.  In the upcoming Firefox 3.1, this fancy web feature will return to the web.   There is one catch, the new browsers Safari and Firefox only work with truetype and opentype fonts, while existing IE supports embedded open type since 4.0.   This means you still have to go through some pain to get the fonts working in IE.  In IE 6 the font rendering is pretty bad as well, so don’t expect your fonts to be rendered clearly – they’ll be jagged looking.

Here I have taken screen shots of the embedded fonts rendering in IE 6, Safari 3.1, and Firefox 3.1 beta 2:

Internet Explorer 6, with embedded .eot font faces

Safari 3.1, with truetype .ttf font faces

Firefox 3.1 beta 2, with truetype .ttf font faces

Safari and Firefox look identical, and IE 6 looks a little broken.  I haven’t checked in IE 7, but it does have improved font rendering so, I imagine the fonts will look better.  Also, I have not tried in Google Chrome to see if they are using a new enough version of webkit to support the @font-face rule.

In order to have all three browsers rendering the new font, you will need to use a few tricks to get IE to choose it’s .eot font instead of the .ttf font.

<head>
...
<style type="text/css">
@font-face {
  font-family: "Delicious-Roman";
  src: url(/fonts/Delicious-Roman.otf) format("opentype");
}
@font-face {
  font-family: "Old Standard TT Regular";
  src: url(/fonts/OldStandard-Regular.ttf) format("truetype");
}
h1 { font-family: "Delicious-Roman", sans-serif }
h2 { font-family: "Old Standard TT Regular", sans-serif }
h3 { font-family: "Delicious-Roman", sans-serif }
</style>
<!--[if IE]>
  <style type="text/css">
@font-face {
  font-family: "Delicious-Roman";
  src: url(/fonts/DELICIO0.eot);
}
@font-face {
  font-family: "Old Standard TT Regular";
  src: url(/fonts/OLDSTAN0.eot);
}
  </style>
  <![endif]-->
</head>

Here’s a link to a demo page with the fonts embedded.  Try it out in IE and Safari or if you have Firefox 3.1; Try it.

Software ,

Understanding nsITreeView getCellProperties and getRowProperties

June 18th, 2006
No comments

You may have read the following text from xulplanet

An atomized list of properties for a given cell. Each property, x, that the view gives back will cause the pseudoclass :moz-tree-cell-x to be matched on the ::moz-tree-cell pseudoelement.



and start scratching your head wondering what it means. After searching through mozilla source for some examples of how getCellProperties or getRowProperties work, I finally figured it out and have a much greater respect for how the nsITreeView can really be customized. First an example of styling a specific cell and a complete row, assuming you already know how to setup your own nsITreeView:



The getCellProperties in our nsITreeView, checks the status column on a row and sets a property record_closed if the records status is closed:

 getCellProperties: function(row,col,props){
  this._fetchToRow(row);
  var record = this.records[row];
  if( record.status == "Closed" ){
    var aserv=CC["@mozilla.org/atom-service;1"].getService(CI.nsIAtomService);
    props.AppendElement(aserv.getAtom("record_closed"));
    if( col.id == "status_id" ){
      props.AppendElement(aserv.getAtom("record_status_closed"));
    }
  }
}

So, what is this property on the cell ‘record_closed’ and ‘record_status_closed’? It made sense to me once I found this using lxr, and realized I could control the style on the cell using it like this:

treechildren::-moz-tree-cell-text(record_closed,record_status_closed) {
text-decoration:line-through;
font-weight:bold;
}
treechildren::-moz-tree-cell-text(record_closed) {
color:gray;
}

Basically, it works like a CSS attribute selector.

So, now I can style the column that indicates the status as closed with a line through and color each of the cells with a gray font. getRowProperties works the same you just can’t effect the cell fonts, but you can effect the whole row background.

Software , , ,

smooth position:fixed in IE

February 20th, 2006
2 comments

After many hours of searching and hacking I finally found this document explaining how to avoid a flickering position:fixed in IE. Most documents will simply say you need:

#dashboard{
  position:fixed !important;
  position:expression('absolute');
  top:0px !important;
  top:expression('body.scrollTop');
}

This is leaving out one important part. The solution that seems to work is to add a background fixed to the body tag

body{
  background:url(foo) fixed;
}

Software ,