精通css和css世界_现实世界中HTML5和CSS3

精通css和css世界

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.

以下摘自Alexis Goldstein，Louis Lazaris和Estelle Weyl编写的《现实世界HTML5和CSS3，第二版 》一书。 副本在世界各地的商店中都有出售，或者您可以在此处以电子书形式购买 。

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.

尽管HTML5标记内容的方式发生了重大变化，但值得注意的是，这些变化不会导致较旧的浏览器阻塞，也不会导致布局问题或页面错误。

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.

这意味着您可以使用任何包含有效HTML4或XHTML标记的旧项目，将doctype更改为HTML5(我们将在第2章中介绍)，并且页面在浏览器中的显示方式与以前相同。 HTML5中所做的更改和添加已以确保与旧版浏览器(甚至旧版Internet Explorer！)向后兼容的方式实现到该语言中！ 当然，这不能保证新功能会正常运行，仅表示它们不会破坏您的页面或引起任何可见的问题。

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.

即使是针对更复杂的新功能(例如API)，开发人员也提出了各种解决方案，以为不支持的浏览器提供同等的体验，同时还采用了HTML5和CSS3提供的令人兴奋的新功能。 有时，这就像提供后备内容一样简单，例如向没有本机视频支持的浏览器提供Flash视频播放器。 不过，在其他时候，有必要使用脚本来模仿对新功能的支持。

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.

这些“间隙填充”技术被称为polyfills 。 在构建高性能Web应用程序时，依靠脚本来模拟本机功能并不总是最好的方法，但是随着我们不断发展以包括新的增强功能和特性(例如我们将在本书中讨论的功能)，这是一个不断增长的痛苦。 。 幸运的是，截至撰写本文时，Internet Explorer 6至9之类的较旧的浏览器无法支持HTML5和CSS3的许多新功能，如今只有不到10％的Web访问者使用该浏览器。 越来越多的人正在使用所谓的常绿浏览器。 即自动更新的浏览器。 这意味着，随着旧版浏览器的日渐衰落，新功能将对更多的受众开放，最终对所有人开放。

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.

在本书中，我们有时会建议使用后备选项或polyfill，以填补浏览器不兼容方面的空白； 我们还将尽力警告您使用这些选项可能带来的弊端和陷阱。

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.

当然，值得注意的是，有时根本不需要回退或填充。 例如，当使用CSS3在设计中的框上创建圆角时，对于真正的旧浏览器看到方形框的用户来说，通常没有任何危害。 该网站的功能没有降级，并且这些用户对于他们所缺少的内容也不会更明智。

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.

在我们逐步学习这些课程并介绍新主题时，如果您计划在项目中使用其中的一个，我们强烈建议您参考浏览器支持参考，例如前面提到的“我可以使用... ”。这样，您将知道如何以及是否提供后备广告或polyfill。 必要时，我们有时会讨论确保不支持的浏览器具有可接受的体验的方法，但是好消息是，随着时间的流逝，它的问题越来越少。

不断增长的移动市场 (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的另一个令人信服的理由是爆炸式的移动市场。 一位消息人士称，2009年， 只有不到1％的网络使用量是在移动设备和平板电脑上。 到2014年中，这一数字已上升到35％以上！ 在五年多一点的时间内，这是一个惊人的增长率。 那么这对于学习HTML5和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.

许多移动Web浏览器都很好地支持HTML5，CSS3和相关的前沿技术。 例如，iPhone和iPad等iOS设备上的移动Safari，Opera Mobile，Android浏览器和UC浏览器都提供了对HTML5和CSS3的强大支持。 其中一些浏览器支持的新功能和技术包括CSS3动画，CSS flexbox，Canvas API，Web Storage，SVG，Offline Web Apps等。

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.

实际上，我们将在本书中介绍的一些新技术是专门针对移动设备而设计的。 之所以设计脱机Web应用程序和Web存储等技术，部分原因是越来越多的人使用移动设备访问网页。 此类设备通常在联机数据使用方面会受到限制，因此可以从脱机访问Web应用程序的功能中受益匪浅。

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.

我们将在第11章中讨论这些主题，以及在本书中涉及的其他主题，提供为各种设备和平台创建网页所需的工具。

真正的东西 (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.

推进新技术并期望仅针对一种浏览器编写页面和应用程序是不现实的。 在现实世界中，以及在我们希望HTML5和CSS3能够进一步发展的世界中，我们需要准备好开发可在各种环境中使用的页面。 这种情况包括现代浏览器，任何剩余的较旧版本的Internet Explorer以及Swift发展的移动设备市场。

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.

是的，在某些方面，为不同的用户代理提供不同的指令集类似于Web的早期，其浏览器杂乱无章，嗅探和代码分叉。 但是这一次，新代码更加面向未来：当较旧的浏览器不再通用时，您需要做的就是删除所有后备和填充，只保留针对现代浏览器的代码库。

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.

HTML5和CSS3是领先的技术，已经迎来了令人兴奋的网页创作世界。 因为所有现代浏览器都对许多HTML5和CSS3功能提供了出色的支持，所以创建功能强大且易于维护的面向未来的网页比以往任何时候都更加容易。

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

因此，对于“为什么”已经足够了，让我们开始研究“如何”！

翻译自: https://www.sitepoint.com/html5-css3-for-the-real-world/

精通css和css世界