Debugging The Web - Using Chrome To Show CSS Element State - Part 1

Tuesday, May 15, 2012

Introduction

As a developer working on ecommerce and corporate websites, I have had to become somewhat proficient in debugging styles. I'm no designer, but just out of the fact that at times I have often not had the luxury to work with a designer on projects, I have to go it on my own and make sure the web pages met all the style guide lines that were given to me as a part of the project. In so doing, I have come to rely on the debugging tools of the trade to assist me in making sure I get it right.

Over the years, I have gravitated to using the Chrome and Firefox/Firebug tools, and even on some occasions Internet Explorer to assist me in debugging. These tools have really evolved, and made it so producing nice looking website pages is not out of reach for the classic, old school back, end developer. It takes some practice and learning, and its not easy, but it definitely not out of reach either.

So with this in mind, I thought it would be useful to share some of my favorite development features in these browsers that I use when I want to debug styles on a web page. As I stated, most browsers, now a days, have a lot of good debugging features, but some browsers add a nice little nugget that the others don't have that really become life savers.  I'll blog some more on other tools at a later time, but this week, I would like to focus on how to debug the different states of an element. Specifically, the different states of an anchor tag.

The Different States of an Element

In some cases, I have had to work on web pages that have specified styles for links that are on a page. These styles will sometimes include what the different states of a link will look like. For example,  a link could be in some of the following states:

  • link: the normal state of a link
  • hover: the state of the link when a user mouses over the top of it.
  • visited: the state of the link when a user has visited referenced URL.
  • hover:visited: the combination of both a visited link and the user hovering over it at the same time.

Using Chrome to Debug

Here is a quick example I put together of some links. If a link on a page was supposed to be a different color based on what state the link was in, I would put these rules in a style sheet like such:

 

a {colorblue;}
a:hover { colorred;}
a:visited {colorpurple;}
a:visited:hover {colororange;}

If I want to know what a link will look like given a certain state, and make a style for that state, I use Chrome's state feature. As far as I know, Chrome is the only browser that has this feature, or at least its the most obvious to use of the other browsers, and even Chrome has this feature in a not so obvious place.

Here is where the button is located

Chrome State Button

When I click on that button I get for states. I could turn on and off on an element. Doing this I can then see what style is being used for the link.

So if I didn't have any buttons checked, I would see something like this.

link in normal state

If I wanted to see what style is being used when a particular link has been visited, I could click the visited checkbox.

chrome state visited link

Notice that I know have a different style. The one where I specified the visited state.

The tricky one in all this is the hover state. In other browsers, I can see what the hover state is by obviously hovering over the link on the page. However, if the hover appearance is not as expected and is being overridden by a rule that is way down on the list of rules, I can't scroll down and see what that list is while still hovering over the link. That's where this tool is a beauty! I can just click on the hover checkbox, and now my link is permanently in the hover state.

chrome state link hover

The style for hover is now being used.

Another area where this feature becomes useful, is when your link is in multiple states, and it is not using the style you specified. For example, what if you did not want the hover style to take affect when when link was visited? In this case you would have to specify both states in the style.

chrome state visited hover

I checked both visited, and hover, and now I can see that the style being used is specifically for that combination.

Hope that helps.

comments powered by Disqus