6 ms·
It's the only way to do it with pure CSS. A more sane approach would be to use a raster or vector image. It is pretty silly.
by artursapek 13y ago
It's the only way to do it with pure CSS. A more sane approach would be to use a raster or vector image. It is pretty silly.
- ux-app 13y agoIt is a bit insane, however this allows you to change the color, dimensions, transparency at runtime. A raster doesn't allow you to do this, and, while SVG is scriptable, browser support is spotty. This hack on the other hand will work in every browser all the way back to Netscape Navigator or earlier.
- michaelbuddy 13y agoBetter to use Arial unicode characters like ▲ or ▼ ASCII encodings and UTF-8 More logical and you can apply all the text styling like color, shadows, skewing, rotate, jquery prepends etc. Put it inside a div and it can go it wherever you want. And it wouldn't be a hack. Some hacks are awesome.. and others are nice playful things but not to be taken with any kind of serious inquiry.
- kalleboo 13y agoPositioning that accurately would be a massive nightmare due to font rendering differences between OSes and browsers.
- psychometry 13y agoI've found that right combination of display: inline-block, position: relative, positioning and margins will get it where you need every time.
- cheald 13y agoWhat happens when a user agent overrides your preferred font size?
- SiVal 13y agoSerious problem. I usually have my page magnification jacked up to reduce eye strain, and it's amazing how many things go wrong on the pages I browse. Don't use a clever hack without testing how it looks after a few cmd-+ (ctrl-+) resizings.
- psychometry 13y agoJust don't use font-size and line-heights that references pixels for the <span> containing your arrow and you should be fine. It might not be perfectly aligned, but it won't break.
- psychometry 13y agoNo, having to open an image editor to create a simple shape you can make in CSS is silly. So is an additional, unnecessary HTTP request.
- tinco 13y agoNo, making a shape in CSS is silly. CSS is for styling not drawing. If you want to make a triangle, without an additional (unnecessary) HTTP request, you should use the appropriate web tech which is SVG. Just like all other resources you can easily embed an SVG in your HTML if you're being stingy on the requests (which is a good thing).
- viggity 13y agonot all browsers support SVG (namely IE8). for folks who have to support LOB, this is still an issue.
- lambda 13y agoSure, you can treat this as a hack to support older browsers. But with modern browsers, or once those older browsers fall to low enough market share, just embed SVG.
- ryanbrunner 13y agoOn the other hand, callout arrows seem like a perfectly good case of something that doesn't necessarily need to be present for the site to function. If your compatibility goals are pixel-perfect compatibility with IE8, this is an issue (and my thoughts and prayers are with you), but if your site simply needs to be functional, callout triangles wouldn't be on my top 10 things to worry about.
- psychometry 13y agoBack in the real world, however, we can't use the ideal solution every time because of browser support. Thus, the easiest, most flexible option is CSS.