Steven Moseley

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 {color: blue;}
a:hover { color: red;}
a:visited {color: purple;}
a:visited:hover {color: orange;}

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

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.

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

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.

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.

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

Hope that helps.

This is the fourth post in a series of posts about how I went about building my blogging application.

1. Building a Blog Redux - Why Torture Myself (Part 1)
2. Building a Blog Redux - The tools for the trade (Part 2)
3. Building a Blog Redux - Entity Framework Code First (Part 3)

In previously blog sites that I have maintained, there wasn't much thought what fonts I should be using. The fonts that I would use were either Verdana or Tahoma, because they looked nice and were easy to read. However, in today's modern web, things have changed. People and companies want fonts to distinguish their sites from the crowd. They want a font style that is pleasing to the eye, that compliments their site theme, and when necessary, is easy to read.

I wanted that same things for my site, and I also wanted to learn a little bit on how to implement a fancy font, so I went about choosing a unique nice font for my blog site too.

Here are the requirements I had for my font selection:

• It had to be free.
• It had to be fairly simple to implement.
• It had to be clear and modern looking.
• It had to also look good on my iPhone.

Its Free

Obviously, when someone makes a font family, they would like to make money off their work so when selecting fonts you have consider the licensing that goes along with them. Fortunately, there are those out their who created their fonts with the intentions of making them free to use.  There is a very large selection, and  a lot great fonts to choose from.

Here are some of the free font sites I looked at.

• Google Web Fonts: They have a good selection of fonts, and even a way to reference their fonts remotely.
• The League of Movable Type: They have some really nice fonts, but not a large selection.
• Fontex: Good selection here.
• Font Squirrel: Another site with a good selection of free fonts and the site where I ultimately chose my font.

Easy to Implement ( using @font-face)...well Sort of.

@font-face is new rule (will actually it is an old rule that was dropped in CSS 2.1 and then added back in CSS 3) that allows you to add a custom font face to any text on a page simply by adding a CSS style. Unlike other rules, there is no JavaScript needed to get the font to display.

Here's where it gets a bit hairy. Different browsers support different font types, and not all browsers support the same ones. Currently the different types are WOFF, OTF, TTF, SVG, and EOT. Thankfully, sites like Font Squirrel have a @font-face kit generator that will generate all the needed font types for you, as well as generate the styles needed to reference those font types.

You simply choose (a legally obtained) font and then upload it to their site.

The site will churn for a few seconds and then you will receive a link to a font package to download. At that point, you can take the entire package, unzip it, and then place somewhere on your website. The picture below is something like the file package you will receive.

The CSS style that is generated looks like this:

@font-face {
    font-family: 'CantarellRegular';
    src: url('cantarell-regular-webfont.eot');
    src: url('cantarell-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('cantarell-regular-webfont.woff') format('woff'),
         url('cantarell-regular-webfont.ttf') format('truetype'),
         url('cantarell-regular-webfont.svg#CantarellRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

With the @font-face style reference in my CSS, I then use that font name like any other font on my page.

	font-family: 'CantarellRegular', Tahoma;

For older browsers that do not support the CSS3 @font-family rule, I am falling back to the Tahoma web font which is supported by virtually all web browsers.

Looks Nice

So what do you think? I think it looks pretty nice. Its clear, and has no jagged edges and easy to read, especially from a mobile device. It's quite handsome.

Looks good on my iPhone

I had to play around with my CSS to get the font sizes to look right, but that was more of problem with my CSS styles than with the font itself.

To be honest, I think the font looks nicer on my iPhone than it does on my laptop browser.

Take Note IIS Users:

When I deployed the font packages, one of the things I noticed is that although the font was being serviced, I was getting a 404 response on my WOFF file extension. Here is what I was getting when loaded up Fiddler.

After doing some searching around, it turns out that by default IIS 6 or higher (currently I am on IIS 7.5) does not have the MIME types for the .WOFF and .SVG fonts registered so I  had to open up IIS and add those changes. Below is a screenshot of where in IIS you go to make the change.

The MIME types are:

• .WOFF     application/x-woff
• .SVG       image/svg+xml

Once made those entries, I did not see the 404 errors anymore.

References

• Stunning CSS3
• The Essential Guide to @font-face
• Serving Web Fonts from IIS

Conclusion

I hope you found this post useful, and as always, you can see the code for this website on GitHub.