Ryan Boudreaux shares 26 resources that he thinks will help you stay ahead of the curve in web design with the latest in HTML5 and CSS3 advances.
With over twenty-six previous posts on the subjects of HTML5 and CSS3 in the web developer blog, I thought it would be suitable to provide a quick list of Internet resources which educate, inspire, and motivate web developers to make the move into the next generation of web design.
Specifications are always a good place to start, especially for those interested in learning more about the current status of particular modules, properties, and elements. One thing to keep in mind is that the HTML5 specifications are a work in progress; for the latest updates from the HTML Working Group, and possibly including important bug fixes, remember to look at the editor's draft. There may also be a more up-to-date Working Draft with changes based on resolution of Last Call issues. The Working Draft and Editor's Draft listed below, show the latest updates as of this writing.
The Web Hypertext Application Technology Working Group (WHATWG) is a growing community of people interested in evolving the Web, and focuses primarily on the development of HTML and APIs needed for Web applications. The WHATWG was founded by individuals of Apple, the Mozilla Foundation, and Opera Software in 2004, after a W3C workshop. Apple, Mozilla, and Opera were becoming increasingly concerned about the W3C's direction with XHTML, lack of interest in HTML, and apparent disregard for the needs of real-world authors. So, in response, these organizations set out with a mission to address these concerns and the Web Hypertext Application Technology Working Group was born.
- Web Hypertext Application Technology Working Group
- Web Dev Edition - The HTML5 specification designed for web developers
- WHATWG Forums
Browser support and accessibility
Need to check which browser supports which HTML5 element? These resources offer recent updates and provide information about which new HTML5 user interface features are accessible and supported in browsers. They also help in knowing which browsers are usable by people who rely upon assistive technology (AT) to use the web.
Elements, templates, tips
Several quick references and guides for elements that are new or have been redefined in the HTML5 specification.
The next generation of styling offers new possibilities for creating dynamic impact to your web designs, allowing for a diversity of properties and a variety of applications to kick up your websites. This list will help guide you in finding all that is possible with the next generation of web styling design. Including links from the W3C stylesheet snapshot, CSS3 info, Chris Coyer and his CSS Tricks, Mozilla CSS support chart, CSS content and browser compatibility, and more.
- W3C Cascading Style Sheets (CSS) Snapshot 2010
- Mozilla CSS support chart
- Sass - Syntactically Awesome Stylesheets
- Using CSS3 Transitions, Transforms and Animation
- CSS contents and browser compatibility
- Posh CSS
- Site Point CSS Reference
CCS3 tools and code generators
Highlighted below are several links to CSS generators and tools that can assist web developers with a variety of tasks and projects for styling with CSS3. See my detailed post on this category from earlier in the week.
- CSS3 Selectors Test, CSS3 .info
- Layer Styles
- CSS3 Please! The Cross-Browser CSS3 Rule Generator
- CSS3 Generator | CSS3 Tools and Snippets | CSS3Gen
- CSS3.0 Maker | CSS3.0 Generator | CSS 3.0 Generator | css3 generator
And lastly, CssFx is a standalone polyfill that inserts the vendor-specific CSS3 properties necessary for old and new browsers. This saves you tons of time, maintenance, and bandwidth!
This list of twenty-six resources is just scratching the surface, as I am sure there are several that I left out. In future posts, I will highlight several of the tools and resources presented in this list with a more in depth and detailed discussion. Do you have a favorite HTML5 or CSS3 resource that is in your web developer's tool kit?