The HTML 5 and CSS 3 thread!

This is a sticky topic.
  • Filter
  • Time
  • Show
Clear All
new posts

    The HTML 5 and CSS 3 thread!

    HTML 5 is still under active development. The sooner the better for standardisation, but many web browsers already support many of the new major features that are drafted for HTML 5 - one of which being the ability to embed videos without requiring any additional browser plugins by the use of the <video> tag. The <video> tag is supported by Internet Explorer 9 and above, Firefox 4 and above, Opera 10.6 and above, Google Chrome 6 and above and Apple Safari 5 and above. However, certain browsers only support certain video formats.

    HTML5 Video Formats
    • MP4 - Safari, Chrome and Internet Explorer 9
    • WebM - Firefox, Chrome and Opera
    • Ogg - Firefox, Chrome and Opera

    Some other great new features hopefully to be seen in the standardised version of HTML 5 include:

    Simpler Doctype Declaration
    The doctype declaration in HTML5 is this:

    HTML Code:
    <!DOCTYPE html>
    Presentational HTML elements found in HTML 4.01 Transitional have been dropped entirely in HTML 5 including <font> and <s> - even though they are deprecated in HTML 4.01 Strict.

    Some other new HTML 5 elements include <header>, <nav> and <footer>, which are purely structural HTML elements and have no materialistic differences to other structural HTML elements such as <div>.

    CSS Gradients
    Although CSS gradients are also supported by most major web browsers, because CSS 3 is not a standardised specification yet, many web browsers have their own properties for creating CSS gradients such as -webkit-linear-gradient for Webkit-based browsers including Safari and Chrome, -ms-linear-gradient for Internet Explorer and -moz-linear-gradient for Firefox. For older versions of Internet Explorer, you have to make use of the proprietary CSS filter property that is specific to IE - filter: progid: DXImageTransform.Microsoft.gradient - although the current CSS property for linear gradients in draft CSS specification is linear-gradient (for specifying linear gradients specifically).

    Are you using certain HTML 5 and CSS 3 new features on your website?