Hidden Features/Properties/Attribute/Tags of CSS3 and HTML

Question

In CSS and HTML world there are always features (Properties/Attribute/Tags) that would be useful in fringe scenarios, but for that very reason most people don't know them. I am asking for features that are not typically taught by the text books about CSS, CSS3 and HTML5.

What are the ones that you know?

[UPDATE] Which browsers adopt HTML tags and CSS3 element? And can i relay on this new technology (HTML5) for my business?

Answer 1

Most of the cool new features of CSS3 and HTML5 aren't implemented yet. This includes things like:

• CSS3 Template Layout
• CSS3 attr eg: [src]{content: attr(src, url); will replace the content of any item with the content of the url in the source attribute.
• HTML5 validator

Answer 2

• Cross Browser Support from Quirks Mode - you can drill down to the feature you like, it gets very detailed.
• When can I use - An interactive table that shows when features are (and will be) ready for public use. There's also a handy option to accept JavaScript replacements, like <Canvas> for IE6.

Answer 3

side note http://code.google.com/p/ie7-js/ will give you a capability to help ie browser to support css attributes that other browsers do, neat has its own down sides but still very neat

and now, i would not heavily rely on the upcoming technologies, at least for another year, year and half, but its getting there. As a developer it good practice to test the capabilities of those technologies on site to site basis. But then again generally speaking there is nothing out there that is a such incredible addition or change that just a must to incorporate.

by the way what do you mean by none typical features? none typical features are used on site to site basis, depending on your needs.

for example most of the blogs, forums, online stores, personal sites are kept in realm of minimal features that are very well established. these features are well documented and widely tested and used. standard of some sort.

Answer 4

For me one area of HTML and CSS that most people don’t discover is the extensive internationalisation support, with HTML elements like <ruby>, attributes like hreflang="", and CSS like {list-style-type: cjk-ideographic;}. Admittedly while I’ve used all of these, the vast majority of people won’t ever need to.

To answer your second (woops, updated) question, browsers are implementing different parts of the HTML5 and CSS3 specifications, and at differing rates. Generally Webkit browsers (Safari, Mobile Safari, Crome) and FireFox are implementing the fastest, Opera is doing a good job, and Internet Explorer is drunk in the corner. @Kobi’s answer has some links to what browsers support what.

Regarding when you can rely on these new specifications for a business site, that entirely depends on your users and what browsers they use. If your site is targeting iPhone users you can use a lot already. However this isn’t the best way to think about the issue. Most of the CSS3 properties that have been implemented, such as rounded corners, drop shadows, and CSS gradients, actually degrade really nicely so you can use them to reward users with good browsers right now. This idea is called progressive enhancement.

As for HTML5, it’s 90% HTML4 with defined error handling, so changing to HTML5 is as easy as changing your doctype—no other changes required. If you don’t use the new semantic elements then IE has no problem with HTML5. The benefits of the HTML5 doctype are a far better spec to refer to, two validators with more informative error messages (I think @Marius means HTML5 forms validation), and the ability to use ARIA roles. I wrote an article on changing from HTML4/XHTML1 to HTML5, and cover the benefits in doing so.

HTH