Arrow button in CSS3(jsfiddle.net)
jsfiddle.net
Arrow button in CSS3
http://jsfiddle.net/czuxH/
4 comments
There is no problem with empty <b> and <i> tags which, by the way, are NO LONGER DEPRECATED in HTML5. (Learn the standards before becoming a standards Nazi.)
And anyway, guess what? This was, as you say, a proof of concept. It would work with different elements, or even pseudo-clases (and pseudo-classes in pseudo-classes), though then IE compatibility would be lost.
Anyone who copy/pastes this without changing the CSS selectors (styling all <b> tags as if they were triangles) clearly misses the point, you know?
And anyway, guess what? This was, as you say, a proof of concept. It would work with different elements, or even pseudo-clases (and pseudo-classes in pseudo-classes), though then IE compatibility would be lost.
Anyone who copy/pastes this without changing the CSS selectors (styling all <b> tags as if they were triangles) clearly misses the point, you know?
I read the HTML and wondered what I should be making of it. So I took a trip down to the old HTML5 specification at: http://www.w3.org/TR/html5/text-level-semantics.html
"The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, or a ship name in Western texts."
"The b element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood, such as key words in a document abstract, product names in a review, actionable words in interactive text-driven software, or an article lede."
And none of that markup made any sense to me.
"The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, or a ship name in Western texts."
"The b element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood, such as key words in a document abstract, product names in a review, actionable words in interactive text-driven software, or an article lede."
And none of that markup made any sense to me.
Hey, they’re empty — the markup is irrelevant. The only reason I didn’t just use pseudo-elements is so this would work in IE7 and older. <b> and <i> were quick and easy to type. I would not recommend copy and pasting any of the code on the page, just the technique, if a scalable, fast-loading arrow is desired :)
I've dealt with designers who do this before -- implement HTML and CSS approaches that are not quite ready for the big leagues, to the absolute detriment of sensible markup within a real web application, or even a simple website. It's not just a problem for implementation (since you often have to unnecessarily decorate the data you're displaying), but it's a problem in terms of intelligently applying semantic markup to improve the machine-readability of what's being displayed on your site.
It's important to keep in mind that effectively implemented markup is leveraged not only by search engines, but by individuals with disabilities. You should always aim for informative, compliant, and forward-thinking markup before bending basic rules to make something look nice.