While working on a few of my clients pages, I’ve always used other methods for CSS hacks but mostly using PHP to detect the remote user User-Agent and come up with the specific CSS. Until I’ve discovered this one:

You can actually have IE6 specific lines in CSS, it’s as simple as prefixing them with an underscore. Sure, you might start complaining “STANDARDS!!11!” – If I had to choose from a site that works fine in every browser and standards, I’ll go with the more working one. That’s not all! You can actually have lines that are both IE6 & IE7 specific in CSS by prefixing them with a dot.

So to sum it up, let’s say if I use a left margin that has to be 5px in Firefox/Opera, 6px for IE6 & 7px for IE7 – Here’s how I would do it:

margin-left: 5px; /* Left margin for all browsers, mainly Opera, Firefox, etc. */
.margin-left: 7px; /* Left margin of 7px that can be readable by both IE6 & IE7, now other still think it’s 5 while IE6 & IE7 think it’s 7 */
_margin-left: 6px; /* Only IE6 reads this and changes the value to 6px */

I have to admit I was pretty happy upon discovering this hack; I’ll sure be using it for a while now that I have found a pretty good one.

Do you have any of your own do not need loads of JavaScript and/or PHP code to work? Comment on!

If you have never heard of SEO, it’s an acronym for Search Engine Optimization and according to wikipedia.org

Search engine optimization (SEO) is a set of methods aimed at improving the ranking of a website in search engine listings, and could be considered a subset of search engine marketing. The term SEO also refers to “search engine optimizers,” an industry of consultants who carry out optimization projects on behalf of clients’ sites. Some commentators, and even some SEOs, break down methods used by practitioners into categories such as “white hat SEO” (methods generally approved by search engines, such as building content and improving site quality)

Hidden links are a great way to boost your rank on a specific keyword. They are usually in a paragraph, then the keyword would have a link to the page you’re looking to boost it’s rank, but without an underline and the same color as the text.

As an example, I’ll take SEO. I would write a paragraph in my site about SEO and a link to my SEO page, though when you’ll read the text, you won’t notice SEO as a link because it’s the exact same color. The search engines consider that no problem as it’s a link with specific keywords to a page and we all know search engines love it!

If you have any questions about this — Just post a comment and I’ll help you!

Remove spaces, tabs, CR/LF from the HTML source code
It’s surprising how much people use tabs and spaces to make their code cleaner but what it does is add more pointless data to download which requires more data transfer which means longer download times. Try to not use a lot of HTML comments too. This alone can make your website faster from 7%-10%!

Minimize cookies
Of course, if you have a static site then you will have no problem with this. If your site is dynamic and uses cookies, I suggest using shorter values & names because cookies are added into each HTTP request which means longer transfer time. Try using “uname” instead of “user_name” and “pword” instead of “password”, etc. - Depending on your code, this can save from almost nothing to 10%.

Better Javascript
If you have long functions in Javascript such as “insert_to_database_and_remove_old_value” or you could name it “itdarov”. No one is going to care and your site will function never the less but you’ll cut a bit of transfer time. Same “Remove spaces, tabs, CR/LF” applies to Javascript, usually there are a few programs called “Crunchers” which will remove all the enters, spaces, tabs, comments to make a final smaller sized javascript.

HTTP compression
Obviously, this one has ups and downs. Compression can make huge size differences because there is a lot of repetition in the source code, however it causes your CPU to have much higher load. It’s a choice of high CPU load with small files or big files with no CPU load.

Force image size
If you add a picture to your website and the width/height are not specified, the client has to render the image a first time with no size, then once the whole page is downloaded, re-render it once again to decide the final size.

GIF/PNG compression
So, your page has several GIFs and/or JPG? It is very likely that those could be compressed even more without any loss! GIF/PNG mainly have a very compact data structure, but most applications like Corel Photo-Paint and Adobe PhotoShop don’t optimize it well. Go to Download.com and find yourself a good set of tools to compact your image files. You will be surprised that one of your GIFs had 900 bytes and after compacting it, end up being just 80 bytes.