css3 speech bubble question: for the “triangle”‘s border color, how can I set it to whatever its parent div’s bgcolor is automagically?

— Jin Yang (@jzy) February 1, 2012

By “css3 speech bubble”, Jin means using a pseudo element on a container to add a little pointer arrow (triangle). Not really CSS3, but that’s pedantic.

Let’s say that pink color isn’t practical to set in an external CSS file. Perhaps is a user setting, or perhaps its set dynamically somehow.

<div class="speech-bubble" style="background: pink;">
   I like bananas, because they have no bones.
</div>

Setting the container with an inline style is all well and good, but unfortunately there is no inline style for pseudo elements. So we might end up with something like this:

Bummer.

There is a solution though! While we are setting the inline style for the container, we can set an inline style for border-color too. Even though the container actually has no border, we can rely on inheritance to pass that color down to the pseudo element, which is treated like a child element.

<div class="speech-bubble" style="border-color: pink; background: pink;">
   I like bananas, because they have no bones.
</div>

Then in our code for the pseudo element, we’ll specifically have it inherit the color:

.speech-bubble:after {
   content: "";
   position: absolute;
   top: 100%;
   left: 20px;
   border-top: 20px solid black;
   border-top-color: inherit;
   border-left: 20px solid transparent;
   border-right: 20px solid transparent;
}

Notice that I’ve applied inherit to border-top-color rather than the shorthand property border-top. For some reason (feel free to enlighten me) inherit doesn’t work in the shorthand. Also note that when you override the the color with inherit, it doesn’t “inherit” from the color set just above it (black), it inherits from its parent. So if you need a default, you’ll need to set the border-color on the parent.

View Demo

Speech Bubble Arrows that Inherit Parent Color is a post from CSS-Tricks

Direct Link to Article — Permalink

Digging Into WordPress 3.3 is a post from CSS-Tricks

Direct Link to Article — Permalink

A proposal to drop browser vendor prefixes is a post from CSS-Tricks

You should vote not based on if there will be any attempt at it, which there certainly will be and already has. But instead if you think one of those attempts will actually make it into native support by a browser with significant market share and see a significant number of web workers building web sites in it.

Poll is in the sidebar (or, down pretty far if on a small screen).

New Poll: In The Next 10 Years, Will We See CSS Competitor? is a post from CSS-Tricks

Sponsored by LessAccounting.

Direct Link to Article — Permalink

ShopTalk Episode 4 is a post from CSS-Tricks

Direct Link to Article — Permalink

Better Box Sizing is a post from CSS-Tricks

Direct Link to Article — Permalink

Real-World CSS is a post from CSS-Tricks

Direct Link to Article — Permalink

Firefox 10 is a post from CSS-Tricks

The results show a pretty even distribution across all the choices.

Interesting, no? If we take anything from this, it should be that we can’t assume anything about what peoples internet connection speed is. There is a pretty darn sizeable group of folks with very slow internet. Optimizing our sites to load fast makes a very big difference to those folks. Whether they actively think about it or not, they’ll be much more likely to visit and stay on your fast loading site than a competitor’s slower loading one.

New poll soon.

Poll Results: Internet Connection Speed is a post from CSS-Tricks

The markup uses the unicode entity for a star (?) right in it. If you have a UTF-8 charset that should be no big deal. Alternatively you could use ☆ (Calculator for that kind of thing). You could use as many stars as you like:

<div class="rating">
<span>?</span><span>?</span><span>?</span><span>?</span><span>?</span>
</div>

Now we need to flop out that “hollow” star with a “solid” star on hover (Gallery for finding those sorts of characters). Easy, just drop a pseudo element of a solid star (?) over it on :hover

.rating > span:hover:before {
   content: "\2605";
   position: absolute;
}

Just by virtue of being it being absolutely positioned, the top: 0; left: 0; are implied (in modern browsers, anyway). So the solid star just sits directly on top of the hollow star. You could even change the color or size if you wished.

But what we have so far only works on individual stars. The UX pattern demands that all the stars be filled in. Fo instance, if we hover over the 4th star, the 4th star becomes solid, but also the 1st, 2nd, and 3rd.

Through CSS, there is no way to select a preceding child element. However, there is a way to select succeeding child elements, through the adjacent or general sibling combinators. If we literally reverse the order of the characters, then we can make use of the general sibling combinator to select all the stars that appear before the hovered star visually, but after the hovered star in the HTML.

.rating {
  unicode-bidi: bidi-override;
  direction: rtl;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
   content: "\2605";
   position: absolute;
}

That’s it! The whole star ratings UX pattern with very little code. Here’s the entire bit of CSS to make it work:

.rating {
  unicode-bidi: bidi-override;
  direction: rtl;
}
.rating > span {
  display: inline-block;
  position: relative;
  width: 1.1em;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
   content: "\2605";
   position: absolute;
}

View Demo

And here’s a Dabblet if you wanna mess with it.

Actual Usage

Chances are, JavaScript is going to be involved with rating stars anyway. When a user clicks a star, the rating is reported back via Ajax, and the widget itself gains a class to permanently display their selected number of stars. With JavaScript already involved, wouldn’t it be OK to lean on it for flip-flopping classes around on the stars to make them work? If your app is absolutely dependent on JavaScript to work, then sure, that’s fine. If you are interested in building a website that still works without JavaScript, then these Star Ratings are going to need more work. You should look into Lea Verou’s example which uses radio buttons, which could be a part of a form that can be submitted to “rate” whatever it is without JavaScript.

Others

After first sharing this on Twitter, a couple of other folks took a crack at it in slightly different ways. @dmfilipenko‘s Dabblet. @mprogano’s Dabblet

Star Ratings With Very Little CSS is a post from CSS-Tricks