Display New HTML5 Code in Many Browsers - dummies

Display New HTML5 Code in Many Browsers

When you focus a design on the iPhone, iPod touch, or iPad, you have the advantage of knowing that your visitors will be using the Safari web browser. It’s based on the WebKit layout engine, which can render CSS 3 as well as any desktop browser can.

WebKit is also used in Google Chrome. Thus, most sites that look good in Safari for the desktop also look good in Chrome. (As with most elements of web design, though, you might see exceptions.)

Apple created the operating system, iOS, which runs on the iPhone, iPad, and iPod touch and in a special version in Apple TV 2. Safari, the default iOS browser, supports nearly the entire CSS specification as described by the World Wide Web Consortium (W3C), the open international organization that develops web standards.

Led by the inventor of the web, Tim Berners-Lee, it brings together browser creators, leaders, and users to create the specifications for the protocols that define the World Wide Web.

Similar to HTML5, CSS 3 is still under development. The specification won’t reach its final Proposed Recommendation stage until 2022, according to the W3C’s timeline. Even if the specification may not be final for many years, browser developers typically implement parts of the working drafts of new versions of HTML and CSS as they update their browsers.

Developers implementing parts of a working draft refer to it as experimental CSS and usually insert the browser name in the rule. That’s why you see multiple versions of the same style rules, as you can see in the example we show you in the next section for creating rounded corners.

Many designers shy away from using experimental CSS, preferring to wait until the standards are approved, or at least until most web browsers support them consistently. Implementing experimental CSS is easier when every browser plays by the same rules, and it can lead to problems if the specification is changed again later.

However, CSS 3 offers so many exciting new features and so few negative side effects — if you design your pages carefully — that you have little reason to hold back. CSS naturally degrades in browsers. (If the browser doesn’t support a CSS style, it’s ignored.)

Assume that not all visitors to your sites may be using Safari. To create CSS 3 styles that work in Firefox or Internet Explorer or another browser, you may need to add special code for those browsers.