Web Designing: Getting CSS pseudo-classes to work with Internet Explorer

26 June, 2010 | | 0 comments |

Share |
One of the best advent in CSS 2.0 (check my post on it here) are pseudo-classes. These classes come into act on mouse hover/focus/active events on any HTML elements including links, images and text. Mind you, this isn’t similar to Javascript events but does the same thing. Some of the scenarios where you can use it:

  • Getting a mouse hover effect on an image
  • Getting a <div> or say a HTML region to be highlighted on mouse hover
  • Getting a text link to depict a particular color when it has been visited or active

Using CSS pseudo-classes for the above named scenarios is very apt for a designer coz it is not only easy to use it but also easy to maintain the code from maintenance and readability point-of-view. As fate might have it, different browsers react in a different way to CSS pseudo-classes. Fortunately, since Firefox, Chrome, Opera and Safari are Webkit based browsers, they don’t have any issues working with it. This leaves behind – Internet Explorer, which behaves awkwardly to CSS pseudo-classes. Following are some scenarios which I’ve personally witnessed in which CSS pseudo-classes cease to work in IE:

  • If applied the :hover class to an image, it doesn’t work sometimes.
  • If applied the :link, :visited, :hover and :active class to a text anchor, it behaves awkwardly.

Taking the above issues into consideration and knowing the fact that Internet Explorer runs on more than 65% on computers worldwide, designers have taken back to using special JavaScripts and jQuery to get their effects running on all browsers. But truth be told, this isn’t fair afterall! Not using pseudo-classes for the sake of a browser’s exceptional behavior isn't justified.

So enter – whatever:hover, an open-source project to fix up this quirk with Internet Explorer. It uses the behavior attribute in CSS (works only in IE) to refer a '.htc' file which is a script defining a special behavior to perform. This behavior attribute has to be declared for the <body> tag so that it runs for the entire web-page.

A short example you can try for a Horizontal Menu using CSS pseudo-classes Here.

CODE Snippet:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
  2. <html>
  4. <head>
  5.     <title>Sample Web-Page</title>
  7.     <style type="text/css">
  8.         body
  9.         {
  10.             behavior:url('./csshover3.htc');
  11.         }
  13.         /* --- Your CSS pseudo-classes come Here --- */
  15.     </style>
  17. </head>
  19. <body>
  21. <!-- Your HTML CODE comes Here -->
  24. </body>
  25. </html>

  • You can download the .htc file (behavior file) Here.
  • Read more on CSS 'behavior' attribute Here.
  • More on the whatever:hover project and its progress Here.

Why you should start blogging ...

14 June, 2010 | | 2 comments |

Share |
For all those who don’t know the reasons why you should start blogging or intend to take up blogging as a hobby/part-time job and have now realized (too late infact) the power of Web (not Internet to be precise) to appeal to the masses - Blogging is indeed one of the best and the most powerful means. I’ve got a lot of points to prove the title of this post so just read on ...

" Human thoughts, skills and imagination are priceless even if they might be stupid. Don't loose your thoughts, skills and imagination for free coz some of the elite businessmen are highly paid for spilling their thoughts and imaginations during a meeting.

A blog is a central repository where all your thoughts, skills and imagination stay recorded and preserved. Some day someone or probably you might just go by your posts and smile happily over your own thoughts.

-- Hardik Shah

Categories of blogs and which one you should focus :

1.    Evangelism

You know a skill (might be technical or something other) and would like to share the same by enlightening people about it. The Web can be the best medium to do that coz a post of yours can reach hundreds of people (actually more) and get them in touch with you with their comments. Also, people can be made to contribute to an existing idea in the form of BETA programs or say PLATFORM PREVIEWS.

Some of the brands which do that : Microsoft, Google, Apple

Example : Chakkaradeep’s Blog, Aviraj’s Blog

2.    Reviews/Updates

You might have attended an event/exhibition/road-show/showcase where you were introduced to some cool gadgets, like-minded people, etc or probably you just had the best time of your life. You would like more people to know about it and join the same. Blogging on the same would not only update them with it, it might also make them to think whether they would like to join you the next time.
Now this has actually become a trend which can be witnessed in the form of Online Marketing with a view to get more business over the web. If combined with a regime of search-engine analytics, follower/visitor statistics with a monetary budget over a particular duration it’s known as SEM (Search Engine Marketing).

Example : CNN iPhone App Review

3.    Publishing

Now this might sound similar to evangelism but it actually differs in motive and the way-of-writing and presenting. Evengelism is moreover from an enlightenment P.O.V. whearas this means providing a comprehensive coverage on a particular topic (which is in most of the case small). The primary intent is to provide a kind of how-to/what-is-it guides or articles which covers everything right from the title to its sub-topics and case-studies involving the topic. The secondary intent is to keep your published article on record. A google on a keyword based on your topic will be handy for the audience.

Example : Microsoft KB Article

4.    Being myself or multi-faceted
Now this category is quite interesting and actually may include all of the above three types. Depending on an individual, his/her likes/dislikes and his interests he might want to focus on myriad of topics spanning across deferent subjects. You might want to just express your thoughts over a particular cricket final or say a product or one of the best trips you just had. My take on this – this is one of the most difficult categories of blogs to manage but if done well you can literally get yourselves hoards of honest followers and fans. Add to it you can get acclaim and respect (infact, over the web as well).
A point to remember, you’ll be promoting yourself more and not your brand/company. So do keep this thing in mind before you realize your audience is diverging its interest into what you don’t want them to !

Example : My Blog

The above were some classic reasons and examples why you want to blog if you haven’t started. It also gives you a reason while reading this to rethink your strategy again if you have been writing for long and haven’t got your dues paid from your readers.

Winding back the clock for some time, blogging had officially started (as far as the Web guys claim) by folks at CNN and ZDNet to promote their softwares put up for paid/free download on their portals. And then came blogging services like Wordpress, Blogger, LiveSpace, etc which offers free blogs with content management and moderation features which put blogging open for all on the web. More and more audiences came to know and then followed more blogs.

So how has blogging evolved now ? How will it be in the future ? Is it just about writing coz I need some more fun attached to this activity!

The answer makes the question even interesting coz there lies more than just blogging. Just read on ...

•    Social Networks integration – Allows to update all you contacts on Facebook, Twitter, etc with your recently published post with a view to get more readers and comments.

•    Search Engine Optimization (SEO) – Its optimizing your code of your blog (coz afterall whatever you write and see on your blog is HTML and CSS) with a view to comply to search-engine standards so it gets indexed and gets reflected in search results. A point which you’ll realize later in your blogging cycle – Search Engines is the primary source of readers and followers.

•    Web Analytics – It’s basically the web-science pertaining to how your readers ended up reading your blog post and what he clicked, visited, viewed. Depending on the results, you decide your future course of actions like new blog posts, the topics, links to be posted, ADS to be posted, etc. A point which you’ll realize later in your blogging cycle – Better visualization of analytics means more readers and hence business (if you’re into SEM as well).

•    Search Engine Marketing (SEM) – It’s a science based on promoting your brand/business on the web, afterall it’s the biggest medium, even bigger than TV, Newspapers and Radio. You can get your Web Analytics results into account plus focus on the right keywords and content on the page, based on which ADS will be rotated which a user might click-on. The client is billed on the per-keyword rate basis and this is how the client will get readers on its portal/blog. So it’s business for both parties.

If you’ve read carefully the above points, understood it and still do not have a blog than you should be scratching your head by now …. ☺☺☺