HTML5 & CSS3 for the Real World

Share this article

Key Takeaways

  • HTML5 and CSS3 are designed to ensure backwards compatibility with older browsers, meaning changes to markup won’t cause layout issues or errors. Even if older browsers don’t fully support new features, they won’t break pages or cause visible problems.
  • HTML5 and CSS3 are well-supported in many mobile web browsers, making them ideal for the rapidly growing mobile market. Some new technologies introduced in HTML5 and CSS3, like Offline Web Apps and Web Storage, have been specifically designed with mobile devices in mind.
  • HTML5 and CSS3 allow for the creation of powerful, easy-to-maintain, future-proof web pages. As older browsers fall out of use, developers simply need to remove any fallbacks and polyfills, leaving a code base aimed at modern browsers.
htmlcss2thumb

The following is an extract from our book, HTML5 & CSS3 for the Real World, 2nd Edition, written by Alexis Goldstein, Louis Lazaris, and Estelle Weyl. Copies are sold in stores worldwide, or you can buy it in ebook form here.

Although HTML5 presents significant changes in the way content is marked up, it’s worth noting that those changes won’t cause older browsers to choke, nor result in layout problems or page errors.

What this means is that you could take any old project containing valid HTML4 or XHTML markup, change the doctype to HTML5 (which we’ll cover in Chapter 2), and the page will appear in the browser the same as it did before. The changes and additions in HTML5 have been implemented into the language in such a way as to ensure backwards-compatibility with older browsers—even older versions of Internet Explorer! Of course, this is no guarantee that the new features will work, it simply means they won’t break your pages or cause any visible problems.

Even with regards to the more complex new features (for example, the APIs), developers have come up with various solutions to provide the equivalent experience to non-supporting browsers, all while embracing the exciting new possibilities offered by HTML5 and CSS3. Sometimes this is as simple as providing fallback content, such as a Flash video player to browsers without native video support. At other times, though, it’s been necessary to use scripting to mimic support for new features.

These “gap-filling” techniques are referred to as polyfills. Relying on scripts to emulate native features isn’t always the best approach when building high-performance web apps, but it’s a necessary growing pain as we evolve to include new enhancements and features, such as the ones we’ll be discussing in this book. Fortunately, as of writing, older browsers such as Internet Explorer 6 through 9 that fail to support many of the new features in HTML5 and CSS3, are used by less than 10% of web visitors today. More and more people are using what has been termed evergreen browsers; that is, browsers that automatically update. This means that new features will be functional to a larger audience, and eventually to all, as older browser shares wane.

In this book we may occasionally recommend fallback options or polyfills to plug the gaps in browser incompatibilities; we’ll also try to do our best in warning you of potential drawbacks and pitfalls associated with using these options.

Of course, it’s worth noting that sometimes no fallbacks or polyfills are required at all; for example, when using CSS3 to create rounded corners on boxes in your design, there’s often no harm in users of really old browsers seeing square boxes instead. The functionality of the site has no degradation, and those users will be none the wiser about what they’re missing.

As we progress through the lessons and introduce new subjects, if you plan on using one of these in a project we strongly recommend that you consult a browser-support reference such as the aforementioned Can I use… That way, you’ll know how and whether to provide fallbacks or polyfills. Where necessary, we’ll occasionally discuss ways you can ensure that non-supporting browsers have an acceptable experience, but the good news is that it’s becoming less and less of an issue as time goes on.

The Growing Mobile Market

Another compelling reason to start learning and using HTML5 and CSS3 today is the exploding mobile market. According to one source, in 2009 less than 1% of all web usage was on mobile devices and tablets. By the middle of 2014, that number had risen to more than 35%! That’s an astounding growth rate in a little more than five years. So what does this mean for those learning HTML5 and CSS3?

HTML5, CSS3, and related cutting-edge technologies are very well supported in many mobile web browsers. For example, mobile Safari on iOS devices such as the iPhone and iPad, Opera Mobile, Android Browser, and UC Browser all provide strong levels of HTML5 and CSS3 support. New features and technologies supported by some of those browsers include CSS3 animations, CSS flexbox, the Canvas API, Web Storage, SVG, Offline Web Apps, and more.

In fact, some of the new technologies we’ll be introducing in this book have been specifically designed with mobile devices in mind. Technologies such as Offline Web Apps and Web Storage have been designed, in part, because of the growing number of people accessing web pages with mobile devices. Such devices can often have limitations with online data usage, and thus benefit greatly from the ability to access web applications offline.

We’ll be touching on those subjects in Chapter 11, as well as others throughout the course of the book, providing the tools you’ll need to create web pages for a variety of devices and platforms.

On to the Real Stuff

It’s unrealistic to push ahead into new technologies and expect to author pages and apps for only one level of browser. In the real world, and in a world where we desire HTML5 and CSS3 to make further inroads, we need to be prepared to develop pages that work across a varied landscape. That landscape includes modern browsers, any remaining older versions of Internet Explorer, and an exploding market of mobile devices.

Yes, in some ways, supplying a different set of instructions for different user agents resembles the early days of the Web with its messy browser sniffing and code forking. But this time around, the new code is much more future-proof: when older browsers fall out of general use, all you need to do is remove any fallbacks and polyfills, leaving only the code base that’s aimed at modern browsers.

HTML5 and CSS3 are the leading technologies that have ushered in a much more exciting world of web page authoring. Because all modern browsers provide excellent levels of support for a number of HTML5 and CSS3 features, creating powerful and simple-to-maintain future-proof web pages is easier than ever before.

So, enough about the “why,” let’s start digging into the “how”!

Frequently Asked Questions about HTML5 and CSS3

What are the key differences between HTML5 and CSS3?

HTML5 and CSS3 are both essential tools for web development, but they serve different purposes. HTML5 is a markup language used for structuring and presenting content on the web. It introduces new elements and attributes that reflect the typical usage on modern websites. On the other hand, CSS3 is a style-sheet language that is used to describe the look and formatting of a document written in HTML. It introduces new features like rounded corners, shadows, gradients, transitions, animations, and much more.

How can I start learning HTML5 and CSS3?

There are several resources available online to start learning HTML5 and CSS3. Websites like Codecademy, Udemy, and Khan Academy offer interactive courses. You can also refer to online documentation and tutorials. Practice is key in mastering these languages, so try building your own website or improving an existing one.

What are the benefits of using HTML5 and CSS3?

HTML5 and CSS3 come with several benefits. They allow for cleaner and more efficient coding, improved performance, and better accessibility. They also offer more advanced features and greater flexibility in designing and customizing websites. Moreover, they are supported by all modern browsers.

Can I use HTML5 and CSS3 for mobile web development?

Yes, HTML5 and CSS3 are excellent tools for mobile web development. They offer features like viewport meta tag, which allows control over the viewport’s size and scale, and media queries, which allow content rendering to adapt to conditions such as screen resolution. They also support touch events, which are essential for mobile interfaces.

What are some common challenges when working with HTML5 and CSS3?

Some common challenges include browser compatibility issues, as not all browsers support all HTML5 and CSS3 features. Also, as these are still evolving technologies, keeping up with the latest changes can be challenging. Moreover, achieving the desired layout and design can sometimes be complex and time-consuming.

How can I ensure my HTML5 and CSS3 code is valid and error-free?

You can use online tools like the W3C Markup Validation Service to check your HTML5 code, and the CSS Validation Service for your CSS3 code. These tools will identify any errors or issues in your code.

What are some best practices for writing HTML5 and CSS3 code?

Some best practices include using semantic elements in HTML5 for better accessibility and SEO, keeping your CSS3 code DRY (Don’t Repeat Yourself), and organizing your code in a way that makes it easy to read and maintain. Also, always ensure your code is valid and error-free.

Can I use HTML5 and CSS3 with other programming languages?

Yes, HTML5 and CSS3 can be used in conjunction with other programming languages like JavaScript, PHP, and Ruby. They are used to structure and style the content, while the other languages handle the functionality and behavior of the website.

How can I make my website responsive using HTML5 and CSS3?

You can make your website responsive using CSS3’s media queries. These allow you to apply different styles depending on the device’s screen size. You can also use flexible layouts and flexible images to ensure your content scales and resizes correctly.

What are some advanced features of HTML5 and CSS3?

HTML5 introduces advanced features like video and audio elements for multimedia, canvas element for drawing, and form controls like date pickers, color pickers, and sliders. CSS3 introduces features like transitions and animations, gradients, and 2D/3D transformations.

Louis LazarisLouis Lazaris
View Author

Louis is a front-end developer, writer, and author who has been involved in the web dev industry since 2000. He blogs at Impressive Webs and curates Web Tools Weekly, a newsletter for front-end developers with a focus on tools.

book excerpt
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week