3 ms·

Well, if you do it that way you can change the whole rating by just changing the class name, after you set up all the background-position rules for all the diff

• michaeldhopkins 15y ago
  With a loop you only need to pass in the rating. Get the modulus and then the floor. Render as many full stars as the floor, a half star if modulus was more than zero, then render an empty star as far as the number of full stars + half stars rendered was less than the number of stars that should be displayed (e.g. 5.) That's way less work than all that CSS.
  • ricardobeat 15y ago
    This method leaves all styling in your HTML/server-side code, which is a pita.
    • BerislavLopac 15y ago
      In an app I'm making, each group of items can have a different rating size, as defined by the group's admin. So the sprite with a fixed number of stars wouldn't work. Essentially, I see a number of stars as just a different sort of a "progress-bar"-like graphic, so it's not necessary to set individual stars in the HTML. Just set it as a horizontally-repeating background, with predefined "steps" od the overlay, and the only number you need to pass from the server is the step level. This can even show a partial star if you want. P.S. I haven't read the OP article prior to writing this comment; that's essentially what they're advising there.
    • michaeldhopkins 15y ago
      This is avoided by rendering each star/half star/empty star as an li or a div, defining common styles like width, height and positioning and then background images for each.
• kevindication 15y ago
  It's also only one GET request for the image instead of three.