That's so funny... just yesterday I built my own sass mixin to create custom triangles to do the little arrow pointer on a dialog box like this. Two triangles (border color and background color) with an offset. I toyed with using :before and/or :after to create the second background-color triangle, but the specs said you could only do text or an image so I didn't even try to make the triangle. My version required something like <div class="arrow arrow-left"><div class="arrow-inner arrow-inner-left"></div></div>. This is so much more semantic, elegant, and awesome. I love it!
It is definitely a very cool and clean hack (more of these on HN, please), but not semantic at all: in the source there is not indication that the box is pointing at something or where it is pointing.
Looking at the domain name I thought it was a public request for a new CSS property like
p {
border-bottom-right-cap: solid-arrow-outward;
}
I think it's more semantic than a non-content div or image that has no real semantic content, which is what my solution (and most I've seen) amounted to. I suppose ideally some property on the dialog container like 'data-refersto="#indicatedContent"' would be a little more semantic. And eventually that could be implemented directly in HTML and stylable in CSS. That'd be neat.
Comments
That's so funny... just yesterday I built my own sass mixin to create custom triangles to do the little arrow pointer on a dialog box like this. Two triangles (border color and background color) with an offset. I toyed with using :before and/or :after to create the second background-color triangle, but the specs said you could only do text or an image so I didn't even try to make the triangle. My version required something like <div class="arrow arrow-left"><div class="arrow-inner arrow-inner-left"></div></div>. This is so much more semantic, elegant, and awesome. I love it!
I would not call this _more semantic_.
It is definitely a very cool and clean hack (more of these on HN, please), but not semantic at all: in the source there is not indication that the box is pointing at something or where it is pointing.
Looking at the domain name I thought it was a public request for a new CSS property like
I think it's more semantic than a non-content div or image that has no real semantic content, which is what my solution (and most I've seen) amounted to. I suppose ideally some property on the dialog container like 'data-refersto="#indicatedContent"' would be a little more semantic. And eventually that could be implemented directly in HTML and stylable in CSS. That'd be neat.