Archive for October, 2010

Print Meida CSS – Check List

October 25, 2010 Leave a comment

Print Friendly Page
(dark / black backgrounds won’t print)
avoid floating
colors to black
display none for pages you don’t to show

css code
<link rel=”stylesheet” href=”css/master.css” type=”text/css” media=”screen”>
<link rel=”stylesheet” href=”css/print.css” type=”text/css” media=”print”>

You can combine these two into one
@media screen {} //anything between these brackets is screen
@media print {} //nest the print rules

Categories: CSS

Finished Site Check List – CSS

October 25, 2010 Leave a comment

Finished Site Check List

CSS Usage – FireFox Addon (Detects Unused Css Rules)
Validate CSS
Validate HTML
Increase Font Size
Test WithOut Images – (White Text On White Background)
Turn Off CSS

Cross Browser Testing
Test Agreed Devices

Measure Page Load – specifically tests IE


Reduce Image Sizes
Add width and height to inline images (Improves Speed.. but presentational?)

Categories: CSS

CSS header – for neatness

October 12, 2010 Leave a comment

/* ——————————–
CSS author:
Updated by:

/* ———————————
brief description

Categories: CSS

yui-compressor before and after shot.

before yui-compressor (562 bytes):

AFTER (469 bytes)

Categories: CSS

Yui compressor – an easy way to minify your .css files

Yahoo!  open sourced, free of charge, an easy to use linux command line tool to minify your javascript and css.

The fantastic product I speak of is called “yui-compressor”. Yui compressor strips your .css or .js file of as much whitespace as possible. For javascript, yui-compressor shortens your variable names, usually making them only a single character long, or a little longer.

Another useful feature of yui-compressor that I found is that it can combine multiple.css or .js files, and then compress them.

For example, as I develop, I like to keep many .css files for the different elements of the page I’m working on. I’ll have “toolbar.css”, “hd.css”, “bd.css”…. and so on.Of course, it makes no sense for me to send several .css files over the wire,so I combine them in a combo file.

Here is how to combine multiple .css files with yui compressor

1. Fire up the terminal, go to the directory of your .css files

2. Find the files you want to compress, in our case y.css, u.css, i.css

3. Type  "yui-compressor --type css y.css, u.css, i.css -o combo.css --charset utf-8"

4. Your files are now combined, and minified in combo.css from yui-compressor

On ubuntu you can get yui-compressor from synaptic.

Here is a screen shot:

Categories: CSS

css tables – a simple 3 column layout

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ""> <html> <head> <style type = "text/css"> .table, .tr, .td {border:1px solid #ff0000;} .table {display:table; width:100%} .tr {display: table-row;} .td {display: table-cell;} </style> </head> <body> <div class="table"> <div class="tr"> <div class="td nav">left</div> <div class="td main">Content</div> <div class="td right-nav">right</div> </div> </div> </body> </html>
Categories: CSS