First, a quick preview for the over-caffeinated and impatient (try clicking on a rating):

Quite awhile back, I wrote and article entitled Creating a Star Rater using CSS. In fact, if the CSS for this article is a little confusing, you may want to visit my previous articles to get yourself acquainted. I wrote it to my best ability and I shared what I could with the growing CSS-loving community. It was pretty flippin’ cool if you ask me, but it needed more. So, out of that need was born CSS Star Rating Part Deux, a vast improvement to the first, but by no means perfection. Out of the many comments I received about the most recent version, there were still some lacking areas.

By now, people’s grasp as a whole has grown quite a bit I feel and I think that this time does not warrant a full-fledged tutorial (also, my lack of time doesn’t help either). However, there are some significant issues with my most current Star Rating tutorial and I have always wanted to take another go at it.

In my thoughts, here is what the CSS Star Rating, part Deux is missing:

• Cross-browser support: I received multiple emails and comments stating that it was pretty quirky in browsers like IE6 and even Firefox.
• Ajax & Back end code : This is a need, but I’m not gonna tackle it. Plenty of people have contributed to the creation of the ajax or back end code, including slim, jon, and an especially nice presentation and project over at masuga. Needless to say, these guys do a great job and I don’t need to replicate their work.
• Tables and other wierdness: I had tons of report that the rater didn’t work in table cells and only God knows how many other situations.
• Inline Ratings: People also wanted to place their ratings inline. The current rater didn’t allow for that at all. Also, my feeble attempts to coerce it to work were of no avail.
• Uber mini Ratings: People also wanted little mini raters. Well, guess what. Problems arose with those too :(
• Pseudo-State: I say pseudo, because using only CSS, I cannot create a rating system that will hold when you click it and when you refresh it. Back end scripts an databases are needed for that. Basically, it still would be nice when you click the 3rd star, for it to stay there for a little bit.
• Percentage-based widths: This wasn’t really a request, but It seemed if a person wanted to make a different sized rater, there was a lot of repeating of 20px. 40px, 60px….etc. There just was a lot of exact dimension redundancy.

Well, thats the list! No wonder I wasn’t really happy with the thing. I remember when I first created it, it was my baby. Now, I hate the previous version. Whatever. Ok, enough rant from me. Lets get you guys up into the nerdy stuff.

Ok, so for a refresher, here is the XHTML:

Basic Rater XHTML:

<ul class="star-rating">
<li class="current-rating" style="width:60%;">Currently 3/5 Stars.</li>
<li><a href="#" title="1 star out of 5" class="one-star">1</a></li>
<li><a href="#" title="2 stars out of 5" class="two-stars">2</a></li>
<li><a href="#" title="3 stars out of 5" class="three-stars">3</a></li>
<li><a href="#" title="4 stars out of 5" class="four-stars">4</a></li>
<li><a href="#" title="5 stars out of 5" class="five-stars">5</a></li>
</ul>

Inline Rater XHTML:

<span class="inline-rating">
<ul class="star-rating small-star">
<li class="current-rating" style="width:30%;">Currently 1.5/5 Stars.</li>
<li><a href="#" title="1 star out of 5" class="one-star">1</a></li>
<li><a href="#" title="2 stars out of 5" class="two-stars">2</a></li>
<li><a href="#" title="3 stars out of 5" class="three-stars">3</a></li>
<li><a href="#" title="4 stars out of 5" class="four-stars">4</a></li>
<li><a href="#" title="5 stars out of 5" class="five-stars">5</a></li>
</ul></span>

Small Rater XHTML:

<ul class="star-rating small-star">
<li class="current-rating" style="width:50%">Currently 2.5/5 Stars.</li>
<li><a href="#" title="1 star out of 5" class="one-star">1</a></li>
<li><a href="#" title="2 stars out of 5" class="two-stars">2</a></li>
<li><a href="#" title="3 stars out of 5" class="three-stars">3</a></li>
<li><a href="#" title="4 stars out of 5" class="four-stars">4</a></li>
<li><a href="#" title="5 stars out of 5" class="five-stars">5</a></li>
</ul>

No big shockers with the code. Basically new to the scene here is the fact that the inline rater is wrapped with a span and the small rater has an additional “small-star” class added. I’m sure you can imagine that you can call “small-star” any class you would like and adapt the CSS to your liking for the right size and image you would like.

Next, in true throw-it-in-your-face tutorial style, here is the CSS:

Basic Rater CSS

.star-rating,
.star-rating a:hover,
.star-rating a:active,
.star-rating a:focus,
.star-rating .current-rating{
background: url(star.gif) left -1000px repeat-x;
}
.star-rating{
position:relative;
width:125px;
height:25px;
overflow:hidden;
list-style:none;
margin:0;
padding:0;
background-position: left top;
}
.star-rating li{
display: inline;
}
.star-rating a,
.star-rating .current-rating{
position:absolute;
top:0;
left:0;
text-indent:-1000em;
height:25px;
line-height:25px;
outline:none;
overflow:hidden;
border: none;
}
.star-rating a:hover,
.star-rating a:active,
.star-rating a:focus{
background-position: left bottom;
}
.star-rating a.one-star{
width:20%;
z-index:6;
}
.star-rating a.two-stars{
width:40%;
z-index:5;
}
.star-rating a.three-stars{
width:60%;
z-index:4;
}
.star-rating a.four-stars{
width:80%;
z-index:3;
}
.star-rating a.five-stars{
width:100%;
z-index:2;
}
.star-rating .current-rating{
z-index:1;
background-position: left center;
}

The real difference between this CSS and my previous Star Rating tutorials has to do with the addition of :active and :focus pseudo states to hold the rating when clicked, percent-based widths, and the elimination of the use of floats to accomplish the CSS. It is important to mention also the use of overflow:hidden to keep the rater from spilling out over its set width and height as well as the use of a set pixel height line-height. I found that Internet Explorer really had issues with the rater CSS when resizing text, so if I set it to an exact pixel height, issues were resolved.

Inline Rater CSS

.inline-rating{
display:-moz-inline-block;
display:-moz-inline-box;
display:inline-block;
vertical-align: middle;
}

I found that if I wrapped the Star Rater unordered list with a span with a class of “inline-rating” and used the CSS rules above, I could achieve an inline rater. My apologies for the non-standard CSS attributes, but achieving an inline-block behavior in CSS is not an easy task. Most importantly to me is that it works and works in quite a few browsers.

Smaller Rater CSS

.small-star{
width:50px;
height:10px;
}
.small-star,
.small-star a:hover,
.small-star a:active,
.small-star a:focus,
.small-star .current-rating{
background-image: url(star_small.gif);
line-height: 10px;
height: 10px;
}

I’ve tried to make adapting the rater much easier for all of you. As you can see in the CSS above, you will not have to change a ton. Just add a class to your unordered list; In this case I used “small-star.” Update the width and height to the desired values. Make sure to change your image and line-heights as well. This makes creating other variations of the rater much more simple. If you need to make a 3 star, 4 star …N star rating system, you are gonna have to get your hands a little more dirty…sorry :(.

I am much more happy with the performance and support of this version and I feel that it will help to resolve the shortcomings that the previous versions had.

Show the love and share this:

This entry was posted on Saturday, January 20th, 2007 at 6:31 pm and is filed under CSS, Geekery, Nerdlab, Tutorials, howto. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.