8-bit style sheet for websites


Originally published at: https://boingboing.net/2018/11/29/8-bit-style-sheet-for-websites.html


I object to their use of the <i> tag for icons, when it is supposed to be for italics, especially since the <span> tag exists for explicitly the purposes they’re using <i> for, but otherwise this is a pretty nice bit of CSS.


Perhaps the developer adheres to sematic markup principles, and decided that since the <em> tag is preferred over italics, it would be OK to repurpose the <i> tag in this way. Just a guess.


Almost all the major icon libraries have standardized on using <i>, like FontAwesome and FlatIcons.
There are still a few holdouts that use <span> for this like IcoMoon, but it was largely agreed upon that <i> could be repourpsed for <i>con since <em> and <strong> are the semantically correct replacements for <i> and <b>.

<span> does not explicitly exist for this purpose, span is simply the inline equivalent of <div> originally intended for grouping. It predates the two things that allow it to be used for icons, css content replacement, and webfonts. So no, not explicitly for this purpose.


The problem is not with <em> and <strong> being semantically correct for things, the problem is that the <i> tag already has style attributes applied to it that must then be counter-acted if you intend to us it for something else. <span> has no pre-existing style attributes, and was explicitly added to the standards for the purpose of being a completely attribute-neutral inline tag to which any attribute set desired could be added without conflict to pre-existing function, attributes, and semantic meanings (which <i> has all three of). So yes, it does explicitly exist for the purpose of being “the tag you stick things onto without conflicting the previous purpose of that tag”.


in order to use any tag for an icon via a webfont several styles not attributes have to be applied to it regardless, even if you use span.

tags are not supposed to be used for styling at all full stop. that is the entire point of the semantic web. people are trying to fix this historical mistake. one would think that using <i> for italics would trigger your pendency a lot harder than using it in a character replacement capacity, both of which are proper valid html and css. If anyone is using <i> for italics they are the one "doing it wrong"™ and should reset the style regardless to discourage incorrect usage.

again this isn’t what span was created for, that is a misunderstanding of span and its origin. it can be used for this, but so can other tags, all correctly. it was the inline equivalent of div for grouping, that is what it was created for. it has been repurposed for a lot of things. any tag needs several styles applied to be used for this purpose, most the industry has standardized on <i> for this purpose for good reason, regardless if it gets your knickers in a twist or not. ¯\_(ツ)_/¯ you can always edit the css and tags to use any tag, that is super easy to do with any icon library.


This topic was automatically closed after 5 days. New replies are no longer allowed.