{"id":40,"date":"2012-09-18T08:17:55","date_gmt":"2012-09-18T08:17:55","guid":{"rendered":"http:\/\/www.w3.org\/community\/html5spec\/?p=40"},"modified":"2012-09-18T08:23:30","modified_gmt":"2012-09-18T08:23:30","slug":"a-propusal-for-a-new-pseudo-element-icon","status":"publish","type":"post","link":"https:\/\/www.w3.org\/community\/html5spec\/2012\/09\/18\/a-propusal-for-a-new-pseudo-element-icon\/","title":{"rendered":"A Propusal for A New  Pseudo Element Called :icon"},"content":{"rendered":"<p>Take a look to this HTML5 code as shown <a title=\"here\" href=\"http:\/\/www.w3.org\/TR\/html5\/the-command-element.html\">here<\/a>:<\/p>\n<pre>&lt;menu type=\"toolbar\"&gt;\r\n\t&lt;command type=\"radio\" radiogroup=\"alignment\" checked=\"checked\"\r\n\t\tlabel=\"Left\" icon=\"icons\/alL.png\" onclick=\"setAlign('left')\"&gt;\r\n\t&lt;command type=\"radio\" radiogroup=\"alignment\"\r\n\t\tlabel=\"Center\" icon=\"icons\/alC.png\" onclick=\"setAlign('center')\"&gt;\r\n\t&lt;command type=\"radio\" radiogroup=\"alignment\"\r\n\t\tlabel=\"Right\" icon=\"icons\/alR.png\" onclick=\"setAlign('right')\"&gt;\r\n&lt;hr&gt;\r\n\t&lt;command type=\"command\" disabled label=\"Publish\" icon=\"icons\/pub.png\" onclick=\"publish()\"&gt;\r\n&lt;\/menu&gt;<\/pre>\n<p>The question is: Isn\u2019t <code>icon=\"\"<\/code> attribute here a presentation attribute?<br \/>\nYou might say yes, and it should be set using CSS like this:<\/p>\n<pre>command.align-right{icon: '....'}<\/pre>\n<p>However, this presentation attribute in turn needs presentation attributes! (position, padding&#8230;).<\/p>\n<p>So, we need something in between: A Pseudo Element.<br \/>\nA Pseudo Element is simply an attribute has attributes.<\/p>\n<pre>&lt;command class=\"page-about\"...&gt;&lt;\/command&gt;\r\n&lt;command class=\"domain-settings\"...&gt;&lt;\/command&gt;\r\n\r\n.page-about:icon {\r\n\tcontent: char(\u2139);\r\n\tfont: 10pt RichStyle;\r\n\ticon-position: top;\r\n}\r\n\r\n.domain-settings:icon {\r\n\tcontent: char(\u2699);\r\n\tfont: 10pt RichStyle;\r\n\ticon-position: top;\r\n}<\/pre>\n<p>Thus, <code>icon=\"\"<\/code> as an HTML attribute for <code>&lt;command&gt;<\/code> should be deprecated.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Take a look to this HTML5 code as shown here: &lt;menu type=&#8221;toolbar&#8221;&gt; &lt;command type=&#8221;radio&#8221; radiogroup=&#8221;alignment&#8221; checked=&#8221;checked&#8221; label=&#8221;Left&#8221; icon=&#8221;icons\/alL.png&#8221; onclick=&#8221;setAlign(&#8216;left&#8217;)&#8221;&gt; &lt;command type=&#8221;radio&#8221; radiogroup=&#8221;alignment&#8221; label=&#8221;Center&#8221; icon=&#8221;icons\/alC.png&#8221; onclick=&#8221;setAlign(&#8216;center&#8217;)&#8221;&gt; &lt;command type=&#8221;radio&#8221; radiogroup=&#8221;alignment&#8221; label=&#8221;Right&#8221; icon=&#8221;icons\/alR.png&#8221; onclick=&#8221;setAlign(&#8216;right&#8217;)&#8221;&gt; &lt;hr&gt; &lt;command type=&#8221;command&#8221; disabled label=&#8221;Publish&#8221; icon=&#8221;icons\/pub.png&#8221; onclick=&#8221;publish()&#8221;&gt; &lt;\/menu&gt; The &hellip; <a href=\"https:\/\/www.w3.org\/community\/html5spec\/2012\/09\/18\/a-propusal-for-a-new-pseudo-element-icon\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":891,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_s2mail":"yes","footnotes":""},"categories":[1],"tags":[],"class_list":["post-40","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.w3.org\/community\/html5spec\/wp-json\/wp\/v2\/posts\/40","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.w3.org\/community\/html5spec\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.w3.org\/community\/html5spec\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.w3.org\/community\/html5spec\/wp-json\/wp\/v2\/users\/891"}],"replies":[{"embeddable":true,"href":"https:\/\/www.w3.org\/community\/html5spec\/wp-json\/wp\/v2\/comments?post=40"}],"version-history":[{"count":3,"href":"https:\/\/www.w3.org\/community\/html5spec\/wp-json\/wp\/v2\/posts\/40\/revisions"}],"predecessor-version":[{"id":43,"href":"https:\/\/www.w3.org\/community\/html5spec\/wp-json\/wp\/v2\/posts\/40\/revisions\/43"}],"wp:attachment":[{"href":"https:\/\/www.w3.org\/community\/html5spec\/wp-json\/wp\/v2\/media?parent=40"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.w3.org\/community\/html5spec\/wp-json\/wp\/v2\/categories?post=40"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.w3.org\/community\/html5spec\/wp-json\/wp\/v2\/tags?post=40"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}