#1

Polish your theme CSS files

2002/6/10 5:59 I'm getting ready to polish the theme for my site, and while there are things I like about phpkaox, I love the use of keyword font sizes in the blue thunder theme.

So, with that in mind, I have been digging into some CSS resources that shed some light on some cross-browser issues and give advice and tests on how to optimize your CSS code.

I thought I would share the links with you:
http://www.alistapart.com/stories/sizematters/
A List Apart: Size Matters -- Overview of accessibility advantages with font-size keywords versus px

http://www.webreview.com/style/
Cross-browser compatible CSS

http://www.utexas.edu/learn/css/
Very easy to read explanation of style sheets... from simple to advanced

http://www.expressnews.ualberta.ca/ualberta/Services/css.html
A nice, quick sample/test page

http://www.w3.org/TR/REC-CSS1
W3C CSS1 specification

http://www.csszengarden.com/
Dramatic example of the power of separating presentation from content... and some inspiring designs.

#2

Re: Polish your theme CSS files

2002/6/10 6:06 Thanks sunsnapper! I will definately look into this

Herko

#3

Re: Polish your theme CSS files

2002/7/4 15:25 Good point!
And as I found, most themes has suboptimized style.css file.
All theme developers should keep in mind that within CSS file, the order of tags is important. If you dont care about this, you may find the rendering is not as you expected. Also please note that within CSS file, same tag can be defined several times (as many as you like), and the latter will overwrite the former.

Example:

p td input {
font-size: 12px;
color: blue;
}

p {
background: #808080;
color: redl
}

when rendered, all p element (except that you have definitions for more concrete p elements (with class or id) will be rendered as red.

The general rule is following the html element tree, and the uplevel and general elements at the top, and class follows, and then id definitions.

The best practice:
1. the first definition should be always html, coz in the new standard, the parent of all the elements is html, not body. html can be viewed as canvas.
2. the second should be body element.
3. then general elements as div, p, td, input etc.
4. then specific definitions as
p.some
td.other
5. then comes id definitions as
div#content


I need reiterate one point:
please use all lower cases for elements (or tags as you like, though there are some different), which meands:
p instead of P
div instead of DIV

Seems i should post a normative css file as example. I'll do it a little later.

#4

Re: Polish your theme CSS files

2002/7/31 18:18 Hi,

When you said "a little later", how little later did you mean?


Jason

#5

Re: Polish your theme CSS files

2003/1/18 8:10 There are tons of little secrets that one learns along the line when using CSS and XSLT for cross browser support. Of course, the first of these little lessons is NOT to attempt to support too many browsers (or versions of browsers). Current site statistics (random sampling of .com, .net, and .edu) show that the vast majority of folks on the web now use M$ Internet Explorer (IE) 5.5 or newer (over 90%).

In regards to points verses pixels, my suggestion is to always use points. This accomplishes a few things, including putting Netscape users in a very close appearance to the IE users since Netscape has chosen another display method. Furthermore, the point sizes are a closer relative to the print versions and tend to present a better-printed version.

Oh, and many times, the CSS validators out there go too far back in their versioning schema, thus producing errors that are probably not valid with the current browsers. Just a suggestion, but you might want to take a good look at TopStyle Pro for your CSS management and cleanup.

#6

Re: Polish your theme CSS files

2003/2/24 0:31 Some more resources for good css.

W3C Schools CSS pages.

The w3c.org CSS ValidatorI run all my css through this.

The CSS forums at webmasterworld.

#7

Re: Polish your theme CSS files

2003/5/31 14:25 Making webpages look good cross-platform can be nightmare. I usually try and fix it with a little help from PHP and include a separate CSS file depending on which browser is used. This helps, me at least , to organize my stylesheets better. I make a version for each browser I wish to support and that does not comply with eachother and insert the following PHP code snippet:

if(strstr($HTTP_USER_AGENT, "Mozilla")){$user_agent = "Mozilla";}
if(strstr($HTTP_USER_AGENT, "Konqueror")){$user_agent = "Konqueror";}
if(strstr($HTTP_USER_AGENT, "IE")){$user_agent = "IE";}

and

echo("<link rel='stylesheet' type='text/css' href='stylesheets/stylesheet_".$user_agent.".css' />\n");

into the .php file. This way of course doesn't work if the user chooses to mask his/her browser as anotherone but that is more or less out of ones control. This also means that the CSS files have to be named like for instance "stylesheet_Mozilla".

Oh, and thanks sunsnapper for the tip about sizes. I was looking for that somewhere.

#8

Re: Polish your theme CSS files

2003/6/26 12:20 I've been looking for a fix for cross platform CSS support for awhile, and it's increasingly looking like I'm just going to have to byte the bullet and learn how to code CSS.

If I read it right, I see two methods mentioned above (browser detection and alteration within the CSS file itself, or detection via PHP which then directs the browser to the appropriate CSS file) , which is the better of the two for performance, scalability and reliability?

#9

Re: Polish your theme CSS files

2003/7/23 6:15 Greats hints, nice to try out a good CSS editor like TopStyle Pro, works real good when working with styles.

#10

Re: Polish your theme CSS files

2003/7/23 9:34 First of all,Thanks sunsnapper

Here are my recommedations...

Table-less Sites
CSS Tableless Web Sites

How to make Multi-Colum with StyleSheet
W3C Home Page Table-less Layout: HOWTO and FAQ

Oops,these are our rival CMS...lol Although these are good sites.
Tiki v1.6.1 -Tau Ceti-DEMO site
Tikiwiki