Reputation: 149

Making a star with html

I'm creating a script and want to make the featured listings appear with a star right next to the listing, like here, cardealerscript.com/demo/

Although it works in some browsers, it does not work in mobile browsers.

I would like to keep it in html though, I dont want to use images.

Can anybody suggest another way to keep the star in html? I'm using this ★ at the moment.

Thanks Anton

Upvotes: 4

Answers (4)

Patrick M

Reputation: 10989

You can implement it in pure CSS without a character entity needed at all. Check out ShapesOfCSS with the 6 and 5 pointed star (and beyond). Browser compatibility will still need to be checked, however.

For a not-quite-a-star but very well supported, you could use a diamond, which is an html entity &diams; ♦ (or ♦). (List)

I'm going to take a crack at answering the browser compatibility question. The 5-point start uses a few widely supported properties: margin, position, display, color, width, height, border, and top/left/right are all css 2.0 properties and haven't changed much (if at all?) for css 3. Css 2.1 reached 'recommended' status in 1998, so these properties should all be uniformly supported in mobile browsers released for any phone that's still running. The original iPhone was released in 2007 with a mobile version of Safari 3. Browser support on Android is much sketchier, since manufacturers and end-users have many different options of which browser to use.

That just leaves the following properties:

-moz-transform:    rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform:     rotate(35deg);
-o-transform:      rotate(35deg);

-moz-transform refers to Mozilla, which means the Gecko layout engine. Support for -moz-transform starts in 13.5 with the -moz prefix and 16.0 for the standard CSS3 property transform.

Now, Safari uses the webkit rendering engine, which it shares with Chrome and many other browsers. Support for -webkit-transform:

Availability The -webkit-transform property is available in:

For 2D transforms:

Safari 3.1 and later

iOS 2.0 and later

Google Chrome 1.0 and later

-ms-transform is supported in IE9.0 and later. It is deprecated in IE10, which favors the CSS3 standard transform property instead. (Source.) How that translates into windows mobile support, I don't know. But rest easy that Windows still captures single digits of marketshare in the mobile sphere.

-o-transform refers to Opera, which has actually transitioned to the webkit rendering engine. But that property was added in 'Presto 2.4', which was released with Opera 10 for both desktop and mobile, which appears to have been released on December 10, 2009.

Oh, and if you do decide to use the css star, you should add the CSS3 transform property to any rule that requires it. I.e. add

transform:      rotate(35deg);

To the star-five rules,

transform:      rotate(-35deg);

To the star-five:before rules, and

transform:      rotate(-70deg);

To the star-five:after rules.

Upvotes: 3

Jukka K. Korpela

Reputation: 201728

Font support to BLACK STAR is limited, so the situation depends on installed fonts in a system more than on the browser. To overcome this limitation, you can use a suitable font (at least for the star) as a downloadable font via @font-face. There are several free fonts that contain BLACK STAR, such as DejaVu fonts, Linux Libertine, and Symbola. For general notes on using special characters, see my Guide to using special characters in HTML.

There are other approaches, too, of course. The simplest, and probably best, of the alternative solutions would be to use just an image, or a small set of images (containing varying number of stars), with adequate alt attributes.

Upvotes: 3