Some web designers may not have fully knowledge to master CSS, and many of us are good enough with little bit of brushing and designing in PhotoShop. Now, I found a great website, PSD to CSS Online, which provide free service to convert PhotoShop creations into CSS pages online.

Although this tool may not appeal to big shot designer because they know CSS. It will for sure useful for those who know PhotoShop but do not know CSS. Try it out for your very own unique webpage and even template!

http://www.psd2cssonline.com/

The above code requests two separate stylesheets, one for global media styles (screen, print, handheld, tv…) and one for print only. There is nothing wrong with the above, but if load time is an issue you could save yourself a server request by combining your CSS files:

/*  all media  */
@media all
{
    body { color:#666; font:13px arial, helvetica, sans-serif; padding:20px 0 30px 0; }
}  

@media print
{
    body { color:#000; font:12px arial, helvetica, sans-serif; padding:0; }
}

What you need to do is just address each media by using “@media [media] { /* css here */ }”. This method is easier for us to do editing too.

1) Box Model Hack

The box model hack is used to fix a rendering problem in pre-IE 6 browsers, where the border and padding are included in the width of an element, as opposed to added on

padding: 4em;
border: 1em solid red;
width: 30em;
width/**/:/**/ 25em;

2) Conditional Comments

These conditional comments are for IE-only and they’re not supported by any other browser. For other browsers they are just an ordinary comments and therefor, they are safe to use.

The typical usage is as follows:

The above code applies to all versions of Internet Explorer, i.e. 5.01, 5.5 and 6.0, but now we want to apply it to versions of Internet Explorer, i.e. 5.01, 5.5 and 6.0, so we will apply the following condition:

After we finish testing, we remove all hacks to separate file(s), so the main CSS is clean and tidy. This separate file is then called in the header section of a file within conditional comments.

Condition is one of the following:

* IE (Any version of IE)
* lt IE version (Versions less than version)
* lte IE version(Versions less than or equal to version)
* IE version (Only version)
* gte IE version (Versions greater than or equal to version)
* gt IE version (Versions greater than version)

Version is the version of Internet Explorer, typically 5, 5.5, 6, or 7, you can read more info about this at Quirksmode.

3) Min-width and Max-width of an element

IE doesn’t understand this command, so we’ll need a new way of making this work in this browser. Let’s take a quick example, we need to apply this to a div with id=”wrapper”:

Next we create our CSS commands, so as to create a minimum width of 750px:

#wrapper{
    min-width: 750px;
    width:expression(document.body.clientWidth < 750? "750px": "auto" );
}

You might also want to combine this minimum width of 750px with a maximum width 1220px:

#wrapper{
    min-width: 750px;
    max-width: 1220px;
    width:expression(document.body.clientWidth < 750? "750px" : document.body.clientWidth > 1220? "1220px" : "auto");
}

Another Alternative for for min-height without javascript is to use Dustin Diaz’ nice hack: :

#id{
    min-height: 100px;
    height:auto !important;
    height:100px;
}

4) Easy Selectors

Most in-CSS hacks deal with selector bugs. Below is a list of different IE versions and the beginnings of selectors that are known to select elements in them. All of these selectors use valid CSS.

* IE 6 and below

* html {}

* IE 7 and below

*:first-child+html {} * html {}

* IE 7 only

*:first-child+html {}

* IE 7 and modern browsers only

html>body {}

* Modern browsers only (not IE 7)

html>/**/body {}

* Recent Opera versions 9 and below

html:first-child {}

5)Whatever: hover

The :hover selector enables you to have cool effect for html elements like and in tables.Most browsers have no problem with this, except IE which look at the stylesheets and each individual rule with javascript.
If :hover rules can be tracked, and .htc can be used to change an elements behavior, then it should be possible to create a behavior that enables :hover for any element.

You can read more about this here

6)Transparent PNGs

IE dosn’t handle transparent PNG too well. You’ll get an ugly grayish type background wherever it’s supposed to be transparent. And we cann’t just use GIFs because aren’t good for higher resolution images. So we need a CSS hack to fix this. Follow the following steps and you will be set:

* A HTC script and a transparent GIF will be used to solve this issue. You can download both files transparentpngs.zip
* Now just upload these 2 files to wherever you store your IE.css file.
* Add one simple line of CSS code to your ie.css file:

img.pngfix { behavior: url(pngHack.htc); }

Another solution can be found at Komodomedia

7) Stylegala- No More CSS Hacks

Stylegala’s method is to detect browser version and serve different CSS rules to different user agents, without using hacks or conditional comments. At the same time the end user or validator will never see the CSS rules specified for other browsers than the one they are using. He used some simple PHP code to detect browser type exactly as any CSS hack.

Just copy the following code and save as html file.

        
        
        
        
        
    

This is a simple way to create rounded corner without images. It is supported by IE, Firefox, Opera and etc.
This idea is to draw lines of certain length in rblocktop and rblockbottom divs.
Value of margin controls line length (width). - Office-it.orG

        
        
        
        
        
    

What is this?

Essentially what you have is an array of predefined stylesheets that are called and set to and from a cookie (this cookie stores a numerical value representing the stylesheet number that is selected). Make sure you advise visitors you use cookies in your terms and conditions. If the visitor has chosen to view the site in a style other than the one defined as default, then when they return to the site at a later date, it should be presented to them in the style that they were previously viewing in. Of course this is fine as long as your visitor has Javascript enabled in their browser so that the cookie can be set and retrieved, but what if they don’t? Well the script will still work by making use of PHP SESSION variables to store the same data. This does mean that the style sheet selected will not be stored on the clients machine for future use, but hey, we can’t have it all right?

The script has 3 distinct parts:

1. Stylesheet Array and Default Selection
2. Stylesheet Links
3. Style Switcher

that are described below, along with installation tips for each section.

1. Stylesheet Array and Default Selection

The above code can be broken down into parts as follows:

DEFINE STYLESHEETS

Here you have a two dimensional array named `styleSheets` that holds the references to the text you wish to appear in the anchor tag for the sheet , the text for the title of the anchor tag, and the code for the actual link to the sheet as it will appear on the page (these will be explained further on in this article). These are stored in ‘text’, ‘title’, and ‘sheet’ respectively. Obviously the array can be extended to account for as many stylesheets as you could wish to have by simply adding another ‘set’ and incrementing the numeric index accordingly.

DEFAULT STYLESHEET

This is just a variable to allow you to define a default style sheet for when there is no cookie to read. Set this to any numeric index from the style array.

SET STYLESHEET

This little code snippet looks to see if the visitor has chosen a different stylesheet than the default one by looking to see if a cookie (called STYLE) has been set (or by using PHP SESSION variables if Javascript is disabled). If the cookie is present then it sets the stylesheet accordingly by echoing out the value of ‘sheet’ (the actual link to the stylesheet) from the styleArray against the numeric value stored in the cookie to the page. If there is no cookie, then it uses the value assigned to defaultStyleSheet.

Installation

This piece of code really should be placed in an include file and named appropriately (e.g. stylearray.php) so that it can be called into any page of your site. To include this php file in any other php page use:

Warning:  include(path/to/file/stylearray.php) [function.include]: failed to open stream: No such file or directory in /home/icreativem/domains/office-it.org/public_html/wp-content/plugins/exec-php/includes/runtime.php(42) : eval()'d code on line 66

Warning:  include() [function.include]: Failed opening 'path/to/file/stylearray.php' for inclusion (include_path='.:/usr/local/lib/php') in /home/icreativem/domains/office-it.org/public_html/wp-content/plugins/exec-php/includes/runtime.php(42) : eval()'d code on line 66

It is worth noting that the best place to include this file would be in the head of the calling php document.

2. Stylesheet Links

Style 1 VersionStyle 2 Version

The above piece of code can be placed anywhere on your page where you wish to display the links for the different stylesheets. Quite simply, the code is a loop that runs through the `styleSheets` array and echo’s out an anchor tag with the values set in that array. The links will call a page called styleswitcher.php and will pass a numeric value through to it (via SETSTYLE) that will be used to set the cookie for the selected stylesheet. Of course these don’t have to be links, you could use a form element to achive the same thing.

Installation

This piece of code can either be written directly on any page that the style links are to appear on in the position in which the are to appear, or it can be be placed in an include file and called into a page in the same manor as described above.

3. Style Switcher

Warning:  Cannot modify header information - headers already sent by (output started at /home/icreativem/domains/office-it.org/public_html/wp-includes/feed-rss2.php:11) in /home/icreativem/domains/office-it.org/public_html/wp-content/plugins/exec-php/includes/runtime.php(42) : eval()'d code on line 102

The above code MUST be placed, on it’s own, in a seperate file called ‘styleswitcher.php’. This file can sit in the same directory/folder as the page calling for it.

Note: You may need to add a forward slash “/” before the closing bracket thus:

setcookie("STYLE",$_REQUEST["SETSTYLE"],time()+31622400,"/");

in order make the cookie available across the whole of the domain.

This code can be broken down again as follows:

SET COOKIE FOR 1 YEAR

Does exactly what it says on the tin! Checks to see if a value called ‘SETSTYLE’ has been passed to it from the caller link. If ‘SETSTYLE’ is there, the script will then test to see if a cookie can be set on the clients machine, if it can then a cookie is set, if not then the script will make use of a session variable. Both the cookie and the session are called ‘STYLE’ is are to the value of ‘SETSTYLE’.

RETURN TO CALLER PAGE

Quite simply this just redirects the user back to the page that they came from, which should now be displayed in the newly shosen style sheet.

Installation

This is a separate stand alone php file that has only the code listed and nothing else, and should sit in the same directory/folder as the page calling for it.

Final Thoughts

Phew! seems like quite a bit of work for something so small, but it is actualy very simple once you have used it. Obviously the script can be changed to fit your specific needs as with any script, but as a basic it should work fine, and indeed has proven to do so. Try it out yourself and please let us know how you get on.

Requirements: the replacement must solve the screen reader problem, and it must address the “images off, css on” problem. It is also hoped that a solution will be found that reduces the need for empty <span> elements. The successful technique must work in browsers back to 5.x, but as of the time of writing none of these appear to fail so browser support matrices will be spared.

The two most promising techniques, Phark and Gilder/Levin are available on a reduced page for screenreader testing.

Classic FIR

Using Doug Bowman’s original tutorial, we surround the text with empty spans to hide it with display: none;
Issues: most screen readers will not pick up the text when it is not rendered on-screen, nothing shows up under “images off, css on” scenarios, semantically meaningless <span>s necessary.

HTML code:

    Revised Image Replacement

CSS code:

/* css */
#header {
	width: 329px;
	height: 25px;
	background-image: url(sample-opaque.gif);
	}
#header span {
	display: none;
	}

Single-pixel <img> Replacement

Radu Darvas proposed adding a one-pixel, transparent GIF image to the header to restore alt text.
Issues: an extra meaningless element is added to the page.

HTML code:

  Revised Image Replacement

CSS code:

/* css */
#header {
	width: 329px;
	height: 25px;
	background-image: url(sample-opaque.gif);
	}
#header span {
	display: none;
	}

Radu Method

Radu has also conceived a method involving margin positioning to hide the text. Similar in theory to the Phark Method below, Radu’s method works in IE5.
Issues: doesn’t solve css on/images off problem.

HTML code:

 Revised Image Replacement

CSS code:

/* css */
#header {
	background: url(sample-opaque.gif) no-repeat top right;
	width: 2329px;
	height: 25px;
	margin: 0 0 0 -2000px;
	}

Leahy/Langridge Method

Seamus Leahy and Stuart Langridge independently discovered a method which allows dropping of the span and, theoretically (although this isn’t confirmed) restores accessibility thanks to overflow: hidden;
Issues: nothing shows up under “images off, css on” scenarios, box model hack required to work in IE5.

HTML code:

 Revised Image Replacement

CSS code:

/* css */
#header {
	padding: 25px 0 0 0;
	overflow: hidden;
	background-image: url(sample-opaque.gif);
	background-repeat: no-repeat;
	height: 0px !important;
	height /**/:25px;
	}

Phark Method

Greatly simplifying Leahy/Langridge, Mike Rundle of Phark offered a solution that uses text-indent to hide the text. This is confirmed to work in JAWS, solving the accessibility problem.
Issues: nothing shows up under “images off, css on” scenarios, doesn’t work in IE5.
HTML code:

	Revised Image Replacement

CSS code:

/* css */
#header {
	text-indent: -100em;
	overflow: hidden;
	background: url(sample-opaque.gif);
	height: 25px;
	}

Phark Revisited

Further probing has revealed weaknesses with the previous one, revolving around scrollbars in Safari, and breakage in IE5.
Issues: doesn’t solve images off/css on.

HTML code:

	Revised Image Replacement

CSS code:

/* css */
#header {
	text-indent: -5000px;
	background: url(sample-opaque.gif);
	height: 25px;
	}

Dwyer Method

From Leon Dwyer comes a twist on Classic FIR. Works in seemingly everything known at the present time, including screenreaders.
Issues: doesn’t solve images off/css on, still requires extra span.

HTML code:

	Revised Image Replacement

CSS code:

/* css */
#header {
	width: 329px;
	height: 25px;
	background-image: url(sample-opaque.gif);
	}
#header span {
	display: block;
	width: 0;
	height: 0;
	overflow: hidden;
	}

Gilder/Levin Method

Tom Gilder and Levin Alexander proposed a further variation that theoretically fixes the accessibility problems (verification needed, but it’s almost assured this works in JAWS et. al), and allows the text to show up even if images are turned off.
Issues: extra empty span, transparent images don’t hide text.

(note: header duplicated to illustrate transparency problem)

HTML code:

	Revised Image Replacement

CSS code:

/* css */
#header {
	width: 329px;
	height: 25px;
	position: relative;
	}
#header span {
	background: url(sample-opaque.gif) no-repeat;
	position: absolute;
	width: 100%;
	height: 100%;
	}

Lindsay Method

Russ Weakley writes that by setting your fonts to a tiny, 1px size and matching fore- and background-colours, you don’t even need to hide the text.
Issues: doesn’t solve images off/CSS on, doesn’t work on anything but flat-colour backgrounds.

HTML code:

	Revised Image Replacement

CSS code:

/* css */
#header {
	background: url(sample-opaque.gif) no-repeat;
	width: 329px;
	height: 25px;
	font-size: 1px;
	color: #xxxxxx;
	}

Shea Enhancement

And finally, no matter which method you use, you end up losing alt text tooltips on hover that you and your users might be used to seeing on images. Technically, you shouldn’t rely on this anyway, since title is far more appropriate for tool-tips. So by adding a title back to your header, you can restore these little hover effects to your site.

HTML code:

	Revised Image Replacement

CSS code:

/* css */
#header {
	width: 329px;
	height: 25px;
	position: relative;
	}
#header span {
	background: url(sample-opaque.gif) no-repeat;
	position: absolute;
	width: 100%;
	height: 100%;
	}

Source: http://www.mezzoblue.com/tests/revised-image-replacement/

I’m not going to talk about every aspect today but I will share with you some of the tools I like to use when it comes to CSS, bandwith and a faster loading. More exactly, how to compress a CSS code without making the code to look so ugly and unreadable. If your design is based on a lightweight css code than I guess you shouldn’t worry about this but if you like to impress your visitors with visual elements, you can’t get it done without a big css file.

There are many CSS compression tools to find on the Internet at this moment like CSSTidy which takes your input (it must be a valid CSS code otherwise the result might fail to impress) and removes blank lines, comments etc. It has many options to work with.

Ok … so what is the point. The point is one that I’ve experienced a lot lately. I often decided to “parse and optimize” my CSS code using this tools but I changed my mind short after. Why? Because I do like to update my CSS’s, to add things, delete things and so on and, after using a tool like CSSTidy, my code was so hard to follow. I had only 1 line and I couldn’t find anything without using the CTRL + F magic trick. You lose time, development time.

I’m going to share with you something else. Found here. This is a small trick to keep our code intact but to compress it the same time. You need to add some PHP lines right at the very top of your css file and another line at the bottom of it. The user’s browser will request the stylesheet like usual but the server will first read the lines that are at the top and compress it following our PHP code. The stylesheet will be compressed and outputted to the user’s browser.

This is an awesome tool if you ask me. I’m sure it will be a dream come true to many designers and web developers.

Here’s the code to put at the very start of your css file:

< ?php
  header('Content-type: text/css');
  ob_start("compress");
  function compress($buffer) {
    // remove comments
    $buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
    // remove tabs, spaces, newlines, etc.
    $buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);
    return $buffer;
  }
?>

Next, add this code to the very bottom of your CSS stylesheet:

< ?php ob_end_flush();?>

From the author’s website:

“The first line let’s the browser know that this is a CSS stylesheet. Next, it starts the overflow buffer collection for later processing with the “compress” function. The compress function is used to remove all comments and spacing. Finally, the compressed CSS is sent to the browser.”

“Basically, this tells PHP to stop collecting output, and to run the previously specified “compress” function. After that, the compressed CSS stylesheet is sent to the browser. You can download the PHP CSS Compressor Template file with the required PHP code included to get started quick.”

“If you want to reference the file using a file name such as “screen.css” and have the PHP code parsed, you could use SetHandler in your .htaccess file like this:”

  SetHandler  application/x-httpd-php

The first four pseudo classes are typically used on links, even though 3rd and 4th apply to elements in general. This is because in IE (as of IE6), “:hover” and “:active” don’t work on elements other than links.

CSS Example #1 (link pseudo-classes):

A:link    { color: red }     /* unvisited links */
A:visited { color: blue }   /* visited links   */
A:hover   { background-color: yellow } /* user hovers over link*/
A:active  { color: lime }   /* active links    */

This is a very common CSS definition to manipulate the look of links on the page. The order in which you define the four selectors is important, typically known as LVHA (link visited hover active). If you alter the order, some of your selectors will be suppressed and not take effect due to the way CSS handles cascade/ ordering.

CSS Example #2 (:first-child pseudo-class):

img:first-child{ border: 1px solid gray; }

This applies a border to any image that is the first child of another element.

CSS Example #3 (:lang pseudo-class):

:lang(fr) { font-weight: bold; }

This gives elements that are determined by the browser as French (using a variety of methods) a bold font.

Source: http://www.dynamicdrive.com/style/csslibrary/item/css-pseudo-classes/