Here is a simple tutorial to achieve this using jQuery / Javascript.

The HTML

Below is the sample text. Each text is wrapped in a DIV tag. Note that we have added a class “more” in each div. This class will decide if a text needs to be shortened and show more link showed or not.

<div class="comment more">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit.
	Vestibulum laoreet, nunc eget laoreet sagittis,
	quam ligula sodales orci, congue imperdiet eros tortor ac lectus.
	Duis eget nisl orci. Aliquam mattis purus non mauris
	blandit id luctus felis convallis.
	Integer varius egestas vestibulum.
	Nullam a dolor arcu, ac tempor elit. Donec.
</div>
<div class="comment more">
	Duis nisl nibh, egestas at fermentum at, viverra et purus.
	Maecenas lobortis odio id sapien facilisis elementum.
	Curabitur et magna justo, et gravida augue.
	Sed tristique pellentesque arcu quis tempor.
</div>
<div class="comment more">
	consectetur adipiscing elit. Proin blandit nunc sed sem dictum id feugiat quam blandit.
	Donec nec sem sed arcu interdum commodo ac ac diam. Donec consequat semper rutrum.
	Vestibulum et mauris elit. Vestibulum mauris lacus, ultricies.
</div>

The CSS

Below is the CSS code for our example. Note the class “.morecontent span” is hidden. The extra text from the content is wrapped in this span and is hidden at time of page loading.

a {
	color: #0254EB
}
a:visited {
	color: #0254EB
}
a.morelink {
	text-decoration:none;
	outline: none;
}
.morecontent span {
	display: none;
}
.comment {
	width: 400px;
	background-color: #f0f0f0;
	margin: 10px;
}

The Javascript

Below is the Javascript code which iterate through each DIV tags with class “more” and split the text in two. First half is showed to user and second is made hidden with a link “more..”.

You can change the behaviour by changing following js variables.

• showChar: Total characters to show to user. If the content is more then showChar, it will be split into two halves and first one will be showed to user.
• ellipsestext: The text displayed before “more” link. Default is “…”
• moretext: The text shown in more link. Default is “more”. You can change to “>>”
• lesstext: The text shown in less link. Default is “less”. You can change to “<<"

$(document).ready(function() {
	var showChar = 100;
	var ellipsestext = "...";
	var moretext = "more";
	var lesstext = "less";
	$('.more').each(function() {
		var content = $(this).html();

		if(content.length > showChar) {

			var c = content.substr(0, showChar);
			var h = content.substr(showChar-1, content.length - showChar);

			var html = c + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';

			$(this).html(html);
		}

	});

	$(".morelink").click(function(){
		if($(this).hasClass("less")) {
			$(this).removeClass("less");
			$(this).html(moretext);
		} else {
			$(this).addClass("less");
			$(this).html(lesstext);
		}
		$(this).parent().prev().toggle();
		$(this).prev().toggle();
		return false;
	});
});

Online Demo

Click here to view demo

Download Source Code

Click here to download (ZIP, 2KB)

Update:
The above code is modified into jQuery plugin. Thanks to Jay. Following is the code.

jQuery Plugin

Code

jQuery.fn.shorten = function(settings) {
  var config = {
    showChars : 100,
    ellipsesText : "...",
    moreText : "more",
    lessText : "less"
  };

  if (settings) {
    $.extend(config, settings);
  }

  $('.morelink').live('click', function() {
    var $this = $(this);
    if ($this.hasClass('less')) {
      $this.removeClass('less');
      $this.html(config.moreText);
    } else {
      $this.addClass('less');
      $this.html(config.lessText);
    }
    $this.parent().prev().toggle();
    $this.prev().toggle();
    return false;
  });

  return this.each(function() {
    var $this = $(this);

    var content = $this.html();
    if (content.length > config.showChars) {
      var c = content.substr(0, config.showChars);
      var h = content.substr(config.showChars , content.length - config.showChars);
      var html = c + '<span class="moreellipses">' + config.ellipsesText + '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="javascript://nop/" class="morelink">' + config.moreText + '</a></span>';
      $this.html(html);
      $(".morecontent span").hide();
    }
  });
}

Download

Click to login jQuery Shorten plugin

Usage

Step 1: Include the jQuery plugin in your HTML

<script type="text/javascript"
	src="http://viralpatel.net/blogs/demo/jquery/jquery.shorten.1.0.js"></script>

Step 2: Add the code to shorten any DIV content. In below example we are shortening DIV with class “comment”.

<div class="comment">
	This is a long comment text.
	This is a long comment text.
	This is a long comment text.
	This is a long comment text. This is a long comment text.
</div>
<script type="text/javascript">
	$(document).ready(function() {

		$(".comment").shorten();

	});
</script>

You may want to pass the parameters to shorten() method and override the default ones.

$(".comment").shorten({
	"showChars" : 200
});

$(".comment").shorten({
	"showChars" : 150,
	"moreText"	: "See More",
});

$(".comment").shorten({
	"showChars" : 50,
	"moreText"	: "See More",
	"lessText"	: "Less",
});

My Favourite feature is the addition of new CSS Gradient API. You can define Gradient effect on any element by specifying simple CSS styles. Thus now you can have CSS Gradient Effect without Images!
Note: All the below examples are Images. In order to view the gradient effect one must use Firefox 3.6

Liner Gradient

To create a linear gradient, you’ll need to set a starting point and a direction (or angle) for the gradient and to define the color stops.

-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

Starting Point: The starting point works just like background position. You can set the horizontal and the vertical positions as a percentage, in pixels, or using left/center/right for horizontal, and top/center/bottom for vertical. Positions start from the top left corner. If you don’t specify the horizontal or the vertical position, it will default to center.
Example

 .linear_gradient_square {
    width: 100px;
    height: 100px;
    border: 1px solid #333;
    background: -moz-linear-gradient(top, blue, white);
  }

One that starts left (horizontal) and center (vertical):

background: -moz-linear-gradient(left, blue, white);

Here’s a simple example with three color stops. Because no point is specified for the first and last colors, they will default to 0% and 100%.

    background: -moz-linear-gradient(top, blue, white 80%, orange);

Colors will be evenly spaced if no position is specified.

    background: -moz-linear-gradient(left, red, orange, yellow, green, blue);

Radial Gradients

The syntax for radial gradients is very similar to that of linear gradients:

 -moz-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*);

Color stops: Just like with linear gradients, you should define color stops along the gradient line. The following circles have the same color stops, but the gradient on the left defaults to evenly spaced colors, while the one on the right has a specific position for each color.

background: -moz-radial-gradient(red, yellow, #1E90FF);
background: -moz-radial-gradient(red 5%, yellow 25%, #1E90FF 50%);

.radial_gradient_circle {
    background: -moz-radial-gradient(bottom left, circle, red, yellow, #1E90FF);
}
 .radial_gradient_ellipse {
    background: -moz-radial-gradient(bottom left, ellipse, red, yellow, #1E90FF);
}

background: -moz-radial-gradient(ellipse closest-side, red, yellow 10%, #1E90FF 50%, white);
background: -moz-radial-gradient(ellipse farthest-corner, red, yellow 10%, #1E90FF 50%, white);

.repeating_radial_gradient_example {
    background: -moz-repeating-radial-gradient(black, black 5px, white 5px, white 10px);
}
 .repeating_linear_gradient_example {
     background: -moz-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px);
}

1. Round Corners without images

Here is a simple CSS technique of rounding off the corners of the DIV using some css attributes. This technique will work in Firefox, Safari, Chrome and any other CSS3-compatible browser. This technique will not work in Internet Explorer.

div {
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}

To round a specific corner (top-left or bottom-right) use below stylesheet.

div {
	-moz-border-radius-topleft: 10px;
	-webkit-border-top-left-radius: 10px;
}

Further Reading: Rounded Corner Stylesheet without images

2. Create an IE Specific Stylesheet

Create a separate stylesheet altogether and include it in the webpage whenever the client is using Internet Explorer.
IE Only

<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="ie-only.css" />
<![endif]-->

IE 7 Only

<!--[if IE 7]>
	<link href="IE-7-SPECIFIC.css" rel="stylesheet" type="text/css">
<![endif]-->

Further Reading: IE Specific Stylesheet

3. Background Image of Textbox

Have you seen textboxes with background images like Search magnify glass or other images? Simply use following stylesheet to add background image to any input box.

input#sometextbox {
	background-image:url('back-image.gif');
	background-repeat:no-repeat;
	padding-left:20px;
}

Further Reading: Background Image for Textbox

4. Setting Minimum width for a page

A very handy CSS command that exists is the min-width command, whereby you can specify a minimum width for any element. This can be particularly useful for specifying a minimum width for a page.

 <body>
<div id="container">

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

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

The first command is the regular minimum width command; the second is a short JavaScript command that only IE understands. Do note though, this command will cause your CSS document to invalidate so you may prefer to insert it into the head of each HTML document to get round this.

5. Cross Browser Opacity

Use following stylesheet to make an element transperant by setting the opacity level.

.transparent_class {
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}

6. Prevent Firefox Scrollbar Jump

Firefox does not display scroll bar if the content of page is fitting with browser height. But if the content grows, Firefox display a scroll bar their by making a scroll jump. The content of screen will be pushed left. To avoid this we can tell firefox to add scroll bar by default.

	html		{ overflow-y:scroll; }

7. Rotate Text using CSS

This example rotates text 90 degrees counterclockwise.

The rotation property of Internet Explorer’s BasicImage filter can accept one of four values: 0, 1, 2, or 3 which will rotate the element 0, 90, 180 or 270 degress respectively.

.rotate-style {
		/* Safari */
		-webkit-transform: rotate(-90deg);

		/* Firefox */
		-moz-transform: rotate(-90deg);

		/* Internet Explorer */
		filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

8. CSS for Handheld/Mobile devices

A separate CSS document can be created for PDAs and mobile phones, and only activated when one of these devices is being used to access your site. More and more websites are creating separate CSS documents for printing, so web pages automatically become print-friendly when users choose to print them. You can also do the same for handheld devices.
The following command is used to call up the CSS document for handhelds:

<link type="text/css" rel="stylesheet" href="handheldstyle.css" media="handheld" />

9. Change Text Selection Color

By default, browsers uses blue color as the text selection. You can change this color to match your website theme.

/* Mozilla based browsers */
::-moz-selection {
       background-color: #FFA;
       color: #000;
}

/* Works in Safari */
::selection {
       background-color: #FFA;
       color: #000;
}

10. Remove Dotted Link Borders

Dotted borders around links are an accessibility feature most browsers have by default. It’s for users who must or choose to navigate by keyboard, there is a visual style applied to those links when “tabbed” to. These borders also show up when the link is clicked (in it’s “active” state), and can be an eyesore depending on the design (especially when using something like CSS image replacement, the borders span the length of the screen). You can remove them with this:

a:active {
	outline: none;
}

11. Centering a Website

Most of website uses this technique to center the content.

<body>
  <div id="page-wrap">
    <!-- all websites HTML here -->
  </div>
</body>

#page-wrap {
     width: 800px;
     margin: 0 auto;
}

12. CSS Drop Caps

This paragraph has the class “introduction”. If your browser supports the pseudo-class “first-letter”, the first letter will be a drop-cap.

p:first-letter {
       font-size : 300%;
       font-weight : bold;
       float : left;
       width : 1em;
}

13. Attribute-Specific Icons

CSS Attribute selectors are very powerful giving you many options to control styles of different elements e.g. you can add an icon based on the href attribute of the a tag to let the user know whether link points to an image, pdf, doc file etc.

    a[href$='.doc'] {
        padding:0 20px 0 0;
        background:transparent url(/graphics/icons/doc.gif) no-repeat center rightright;
    }

14. Capitalize Text

This trick is especially useful for displaying title of an article on a web page with all its words starting with capital letter.

text-transform: capitalize;  

text-transform: lowercase

text-transform: uppercase

• none: No capitalization. The text renders as it is. This is default
• capitalize: Transforms the first character of each word to uppercase
• uppercase: Transforms all characters to uppercase
• lowercase: Transforms all characters to lowercase
• inherit: Specifies that the value of the text-transform property should be inherited from the parent element

15. CSS Text Shadow

Regular text shadow:

p { text-shadow: 1px 1px 1px #000; }

Multiple shadows:

p { text-shadow: 1px 1px 1px #000, 3px 3px 5px blue; }

The first two values specify the length of the shadow offset. The first value specifies the horizontal distance and the second specifies the vertical distance of the shadow. The third value specifies the blur radius and the last value describes the color of the shadow:

1. value = The X-coordinate
2. value = The Y-coordinate
3. value = The blur radius
4. value = The color of the shadow

Using positive numbers as the first two values ends up with placing the shadow to the right of the text horizontally (first value) and placing the shadow below the text vertically (second value).

The third value, the blur radius, is an optional value which can be specified but don’t have to. It’s the amount of pixels the text is stretched which causes a blur effect. If you don’t use the third value it is treated as if you specified a blur radius of zero.

16. Using !important

Experienced CSS programmers are usually aware of this but beginners do miss out on this !important CSS rule. By adding !important to your CSS rule, you can increase its precedence over other subsequent rules. e.g. in below code, background-color will be blue and not red due to !important.

.page { background-color:blue !important;   background-color:red; }

17. Print Page Breaks

While most of the internet users prefer to read content online but some of your users might like to print your article. With CSS you can control the page breaks within content just add this CSS class to your stylesheet and add this class to any tag which you would like to print on next page.

.page-break        { page-break-before:always; }

18. CSS Pointer Cursors

This trend has caught up lately. All user interface elements on a web page that can be clicked by user have their cursor similar to that of hyperlink. Here’s the CSS trick to do that.

input[type=submit],label,select,.pointer { cursor:pointer; }

19. Set a Consistent Base Font Size

Setting the font-size property to 62.5% in body tag makes 1em equal to 10px. This lets you use em easily as you can find out the font-size in pixels from em values.

body{ font-size:62.5%; }

20. Perfect Page-Printing with CSS

An overlooked feature on the website is the “print this article” link. There are many people who use the Internet who still like to print out useful articles and store them in paper form. In order to pull this off, you need to use CSS/XHTML page breaks.

    @media all
    {
           .page-break    { display:none; }
    }  

    @media print
    {
           .page-break    { display:block; page-break-before:always; }
    }

Further Reading:
20 Top jQuery tips & tricks for jQuery programmers
20 very useful Java code snippets for Java Developers
15 very useful PHP code snippets for PHP developers

Thus How can we implement the feature where the Input fields which are currently focused are highlighted?

Let us use jQuery and create a simple feature on a HTML Form.

Step 1: The HTML Code

We will use following form as a sample HTML Form and apply the Focus effect using jQuery.

<FORM id="sample">
	<TABLE>
	<TR>
		<TD>Name </TD>
		<TD><INPUT type="text"/></TD>
	</TR>
	<TR>
		<TD>Age</TD>
		<TD><INPUT type="text"/></TD>
	</TR>
	<TR>
		<TD>Phone no.</TD>
		<TD><INPUT type="text"/></TD>
	</TR>
</TABLE>
</FORM>

Step 2: The CSS Stylesheet

We will use a simple style class to apply to the focused field.

.focus {
	border: 2px solid #AA88FF;
	background-color: #FFEEAA;
}

Step 3: Add the effect using jQuery

We will use jQuery to add effect to the form elements. Two events has to be taken care of. While the input field is focused and while the focus is moved to next textbox (blured).

$('input[type="text"]').focus(function() {
	$(this).addClass("focus");
});

$('input[type="text"]').blur(function() {
	$(this).removeClass("focus");
});

Online Demo

View Demo

While working on one of the requirement I had to set height of selectboxes on the webpage. Normally for setting up height of any html component we apply stylesheet. For example:

select {
	height: 50px;
}

The above technique work for most of the browsers except Internet Explorer. The combo box does not take the height specified in CSS and is displayed with the default height only.

I tried searching Internet to see if there are some IE Specific Hacks to increase the height of the listbox. But I couldn’t find a useful fix.

Finally I end up using a workaround of fixing height issue of selectbox in IE. Just increase font size of the select box and that will increase size of it.

select {
	font-size: 15px;
}

The above workaround is working for me. If you find any other useful trick for this problem please share it by comment on this article.

Thus, generally how we deal with IE is we create a separate stylesheet altogether and include it in the webpage whenever the client is using Internet Explorer.

IE Only

Here is the basic technique for an IE-Only stylesheet:

<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="ie-only.css" />
<![endif]-->

Non-IE Only

The opposite technique, targeting only NON-IE browsers:

<!--[if !IE]>
	<link rel="stylesheet" type="text/css" href="not-ie.css" />
<![endif]-->

If you need to get include stylesheet for specific versions of IE, here are a few examples.

IE 7 ONLY

<!--[if IE 7]>
	<link href="IE-7-SPECIFIC.css" rel="stylesheet" type="text/css">
<![endif]-->

IE 6 ONLY

<!--[if IE 6]>
	<link rel="stylesheet" type="text/css" href="IE-6-SPECIFIC.css" />
<![endif]-->

IE 5 ONLY

<!--[if IE 5]>
	<link rel="stylesheet" type="text/css" href="IE-5-SPECIFIC.css" />
<![endif]-->

IE 5.5 ONLY

<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="IE-55-SPECIFIC.css" />
<![endif]-->

VERSION OF IE VERSION 6 OR LOWER

<!--[if lt IE 7]>
	<link rel="stylesheet" type="text/css" href="IE-6-OR-LOWER-SPECIFIC.css" />
<![endif]-->

The problem with coding such DIVs is that there is no standard way of rounding off the corners available in CSS (till now). Designers overcome this problem by using corner images to display around a DIV to make it look rounded. But this approach is not always advisable as it makes the code tedious.

There are lot of code snippets around to create rounded corner DIVs using images. But here is a simple CSS technique of rounding off the corners of the DIV using some css attributes. This technique will work in Firefox, Safari, Chrome and any other CSS3-compatible browser. This technique will not work in Internet Explorer.

Add following CSS attributes to your element to make its corner round.

selector {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid;
}

To make only Top Left corner rounded, use following CSS.

selector {
    -moz-border-radius-topleft: 10px;
    -webkit-border-top-left-radius: 10px;
    border: 1px solid;
}

Similarly use topleft, top-left, bottom-right, bottomright etc for rounding off the corners of the DIV.

View Demo

With the the new version of HTML (HTML 5), still gazing towards the recommendation stage (the specification is not yet complete and it would take few more years), there are some wonderful elements/tags that are going to make HTML coding more sensible and structured business. These tags are specifically implemented for giving more semantically correct containers while coding HTML. Also there are many exciting features that comes with this new kid on the block, like more control over forms (web forms 2.0) and much more. These new additions are really gonna rock, and it really would be fun coding in the new version .

Let me list out some interesting tags of this new version, that some browsers already have started implementing support, but not in a complete manner.

Interesting tags – HTML5

<section>

A section is a thematic grouping of content, typically preceded by header, possibly with a footer after. sections can be nested inside of each other, if needed, and can hold any amount of typical markup.

<header>

The header of a section, typically a headline or grouping of headlines, but may also contain supplemental information about the section.

<footer>

A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

<nav>

Defines the navigation area, typically a list of links. The nav should be a sibling of the main section, header, and footer.

<article>

An independent entry in a blog, magazine, compendium, and so on.

<aside>

An aside indicates content that is tangentially related to the content around it.

<audio>

Defines sound, like music or audio streams

<video>

Defines video, like video clip or streaming video

So a typical blog page would look like the following in HTML5

<!DOCTYPE html>
<html>
  <head>
    <title>Standard Blog</title>
  </head>
  <body>
    <header>
      <h1><a href="#">Standard Blog</a></h1>
    </header>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Archives</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
    <section>
      <article>
        <header>
          <h1><a href="#">Title</a></h1>
        </header>
        <section>
          <p>Lorem ipsum...</p>
        </section>
      </article>
      <article>
        <header>
          <h1><a href="#">Title</a></h1>
        </header>
        <section>
          <p>Lorem ipsum...</p>
        </section>
      </article>
      <article>
        <header>
          <h1><a href="#">Title</a></h1>
        </header>
        <section>
          <p>Lorem ipsum...</p>
        </section>
      </article>
    </section>
    <footer>
      <p>Copyright © 2008 All Rights</p>
    </footer>
  </body>
</html>

Can we use it right away?

Actually, yes, with a few extra steps. And it will work in all modern browsers. It can even work in IE6. There are only a few little quirks we need to get past if we’re going to start using this today.

First, because most browsers don’t understand the new HTML5 doctype, they don’t know about these new tags in HTML5. Fortunately, due to the flexibility of browsers, they deal well with unknown tags. The only issue here is unknown tags have no default style, and are treated as inline tags. These new HTML5 tags are structural, and should obviously be block level elements. So, when we style them with CSS, we need to be sure to include display:block; in our attribute/value pairs.
Include this simple extra piece of CSS, and these new tags are immediately usable. Starting today. And of course, once HTML5 is more widely supported, the display:block; can be removed, as it will be included in the browser default styles.

Support in IE

There is one more issue if you require IE support. Turns out that the IE rendering engine will work with the new tags, but will not recognize any CSS applied to them. Well, that’s no good. Fortunately, IE just needs a good swift kick with the help of a very simple bit of JavaScript. All we need to do to kick start IE is to create a DOM node with JavaScript for each of the new tags, and suddenly IE will apply styles to the new tags with no problem. The code will look something like this, and can be placed directly in the head of our document, or the contents of the script tag placed into an external file and included.

<script>
  document.createElement('header');
  document.createElement('footer');
  document.createElement('section');
  document.createElement('aside');
  document.createElement('nav');
  document.createElement('article');
</script>

So, lets try building a semantically correct web, with all these wonderful tags to our support …lets try out the new kid on the block

This article was written by MysticPixels, Author of Web 3.0, CSS and other articles. We welcomes your tips and guest articles. You may want to login directly in this website using your Google/Yahoo/OpenID login and contribute.

If you liked this article, please submit it to your favorite social media sites.

We are using WordPress as CMS for this blog, hence we decided to install WP-Super cache plugin for WordPress to improve the performance. This plugin will create static HTML files from your blogs post and other pages and save them on web server. These HTMLs are served to client whenever consecutive requests are made. Hence this greatly improve the performance as it reduce PHP parsing and database connections.

Bandwidth control is an important task to be followed when your traffic is increasing. With limited monthly bandwidth hosting, your site may run out of bandwidth and thus result in increase in down time. Hence it is very much advisable to compress your websites response with GZip and then serve it to client. Compressing output can significantly improve your websites performance by reducing the size sometimes upto 80%!

So how can you enable GZip compression and compress your websites output? Well there are several ways to achieve this. I have listed out following very useful tricks to enable compression.

GZip compression in Tomcat, JBoss server

You can find a full post explaining this trick here.

GZip using mod_gzip, mod_deflate and htaccess

Apache server supports server level GZip compression with the help of module mod_gzip and mod_deflate. You can use this module and enable GZip compression for your website using htaccess file. First you have to check whether your hosting provider has enabled mod_gzip or mod_deflate module or not? To check this, you can use php_info() function of PHP which prints all the information about server and modules.

You can enable compression for text and html by adding following lines in your htaccess file.

# compress all text and html:
AddOutputFilterByType DEFLATE text/html text/plain text/xml

# Or, compress certain file types by extension:
<Files *.html>
SetOutputFilter DEFLATE
</Files>

You can compress all type of content (image, css, js etc) using mod_deflate. Copy following code in htaccess to do this.

<Location />
    SetOutputFilter DEFLATE
      SetEnvIfNoCase Request_URI  \
        \.(?:gif|jpe?g|png)$ no-gzip dont-vary
    SetEnvIfNoCase Request_URI  \
        \.(?:exe|t?gz|zip|gz2|sit|rar)$ no-gzip dont-vary
</Location>

Also, you can add following code in your htaccess file and enable compression using mod_gzip.

<IfModule mod_gzip.c>
    mod_gzip_on       Yes
    mod_gzip_dechunk  Yes
    mod_gzip_item_include file      \.(html?|txt|css|js|php|pl)$
    mod_gzip_item_include handler   ^cgi-script$
    mod_gzip_item_include mime      ^text/.*
    mod_gzip_item_include mime      ^application/x-javascript.*
    mod_gzip_item_exclude mime      ^image/.*
    mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>

This technique only works if mod_gzip or mod_deflate modules are loaded in Apache. In our case, these modules were not there and our hosting provider refused to load it as we were using a shared hosting. So following can be another way of enabling compression.

GZip using PHP ob_start() method

If your hosting provider does not support mod_gzip module, ob_start() method can be used to enable compression in PHP file. For this you need to copy following line in top of the PHP file. You may want to add this line in start of the header file that gets included in every php.

<?php
	if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip'))
		ob_start("ob_gzhandler");
	else
		ob_start();
?>

Above code will check whether your browser supports gzip, if yes, then it send ob_gzhandler method as handle to ob_start method which buffers the output. Thus output is compressed using ob_gzhandler. Only problem with this method is that you have to manually edit all PHP files or should have a header.php file that gets included in all files. There are still ways to achieve this without touching your PHP files. Read following trick.

GZip using php_value directive in htaccess

php_value directive can be used to append/prepend any PHP files in the request of change the output handler. First we will see how we can prepend a PHP file and achieve this. Copy the PHP code that we saw in above example in a file called gzip-enable.php. Now copy following lines in your htaccess file. Thus you need not to modify any of your PHP files can can prepend a PHP file with ob_start() method to all the files.

<FilesMatch "\.(txt|html|htm|php)">
    ForceType application/x-httpd-php

	php_value auto_prepend_file /the/full/path/gzip-enable.php

</FilesMatch>

But what if you don’t want to prepend a PHP file? Still there is a way to specify default output handler using htaccess. Use following line in your htaccess file to tell your apache to register ob_gzhandler handler function as output handler.

    php_value output_handler ob_gzhandler

Compress CSS using htaccess and php_value

CSS Stylesheet files occupy significant size in overall webpage size. It is hence advisable to compress these files before sending them to client. This significantly improve the performance of a webpage. For compressing CSS files, we will first create a PHP file gzip-css.php with following code.

<?php

   // initialize ob_gzhandler function to send and compress data
   ob_start ("ob_gzhandler");

   // send the requisite header information and character set
   header ("content-type: text/css; charset: UTF-8");

   // check cached credentials and reprocess accordingly
   header ("cache-control: must-revalidate");

   // set variable for duration of cached content
   $offset = 60 * 60;

   // set variable specifying format of expiration header
   $expire = "expires: " . gmdate ("D, d M Y H:i:s", time() + $offset) . " GMT";

   // send cache expiration header to the client broswer
   header ($expire);
?>

Now add following lines in your htaccess file to enable compression for CSS files.

<FilesMatch "\.(css)">
    ForceType application/x-httpd-php

	php_value auto_prepend_file "/the/full/path/of/this/file/gzip-css.php"

</FilesMatch>

Whenever a http request for .css will come to a server, the type of css will get converted to application/x-httpd-php, thus making them parsed using PHP. Then a file gzip-css.php will be prepend to this request which in turns compress the output using ob_start (“ob_gzhandler”) method.

Compress JavaScript (JS) using htaccess and php_value

Similar to above example for CSS, JavaScript files can also be compressed and sent to client. For this create a PHP file gzip-js.php and copy following code in it.

<?php

   // initialize ob_gzhandler function to send and compress data
   ob_start ("ob_gzhandler");

   // send the requisite header information and character set
   header ("content-type: text/javascript; charset: UTF-8");

   // check cached credentials and reprocess accordingly
   header ("cache-control: must-revalidate");

   // set variable for duration of cached content
   $offset = 60 * 60;

   // set variable specifying format of expiration header
   $expire = "expires: " . gmdate ("D, d M Y H:i:s", time() + $offset) . " GMT";

   // send cache expiration header to the client broswer
   header ($expire);
?>

Also add following lines in your htaccess file.

<FilesMatch "\.(js)">
    ForceType application/x-httpd-php

	php_value auto_prepend_file "/the/full/path/of/this/file/gzip-js.php"

</FilesMatch>

Do you know other methods of compressing the output of PHP/JS/CSS files? Let me know, I will try to add them in this tutorial.

Happy Compressing

Internet Exlporer supports a CSS attribute called filter, wherein you can apply lot of different filter options available in browser. There are currently three categories of filters – Visual filters and Reveal/Blend Transition filters. Multiple filters can be applied to a selector to produce interesting results, with the order of application often playing an important role in the final visual result. Current filters only apply in a visual context, but the extensibility of the property could allow for other capabilities.

Hence following code can be used to set opacity of an html element in IE.

var opacityValue = 0.5; //make it 50% opaque
myElement.style.filter = "alpha(opacity=" + opacityValue*100 + ")"; // IE

But the above code will not work with other browsers like Firefox, Opera etc. Firefox supports another CSS property called opacity which controls the opacity of an element.
Following javascript function will set the opacity of any html element irrespective of the browser.

function setOpacity (myElement, opacityValue) {
	if (window.ActiveXObject) {
		myElement.style.filter = "alpha(opacity="
			 + opacityValue*100 + ")"; // IE
	} else {
		myElement.style.opacity = opacityValue; // Gecko/Opera
	}
}