《HTML5移动开发》—— 第1章 学习移动HTML5、CSS3和Java Script API之前的准备工作

简介:

本节书摘来异步社区《HTML5移动开发》一书中的第1章,作者:【美】Estelle Weyl(埃斯特尔 韦尔),更多章节内容可以访问云栖社区“异步社区”公众号查看。

第1章 学习移动HTML5、CSS3和Java Script API之前的准备工作

HTML5移动开发
如果你跟我多少有点类似的话,你肯定已经痛恨旧版IE浏览器很多年了。那些浏览器满是失败。然而,它们在整个生命周期内在任何地方失败的方式是一样的[1]。我们都知道IE6非常糟糕,但是它糟糕的方式是一样的。一旦我们搞清楚了如何填IE6的坑(polyfill[2]),我们就已经把它搞清楚了。

在移动世界,我们同样面临一些问题,不同的是这些问题以一种更新、更多样化且不断变化的方式存在。在不同设备上的不同浏览器版本可能支持很多新的特性,但实现方式可能不同。或者说,它们可能确实支持某个特性,但是这个特性可能并用不了。举个例子,一个现代浏览器可能支持也可能不支持localStorage。支持localStorage的设备可能允许也可能不允许对其写入。即使浏览器允许从localStorage读取数据,但这个读取操作可能非常耗时从而阻碍了性能。并且,即使浏览器通常情况下允许你对其写入,但localStorage本身可能已经达到了存储上限。

我们在这里无法涵盖所有操作系统和设备上所有浏览器的全部非标准情况(quirk)。即使我了解所有的这些非标准情况(而且我也不了解),这些非标准情况可以装满一个大部头,并且在我完成这个大部头之前它就过期了。这本书呢,实际上也过期了。浏览器支持以及规范等周边环境都在不断发生变化。没有办法制作一本最新的书出来,因为到其交付印刷之际——或者甚至在你刚完成一章的时候——周边环境已经变了。虽然某些浏览器、特性、电话以及提到的网站可能已经过时了,但本书带出的最佳实践在未来几年还是有意义的。本书的一个指导原则是:如果你采用最佳实践,并且依照标准编写代码,你的代码将能够在当前及以后所有的设备上运行。

我把针对特性的浏览器支持包含在内了,而且也没有缺少针对浏览器特性的支持,因为所有的浏览器将沿着正确的方向前进正是大家所期望的。今天在浏览器中的那些非标准模式(quirk)明天也许就解决了。

基于以上原因,在使用一个特性时,你不仅确实要做特性检测,而且需要进行测试以确保能够成功地使用这些支持的特性。

本书将使用与设备、操作系统以及浏览器无关的标记并且不使用JavaScript类库。我选择不使用类库仅使用普通JavaScript进行编码以确保你学到真正的代码。通过使用普通JavaScript编码,希望就不会存在一个方法到底属于原生方法还是框架提供的方法这样的困惑了。

但这不意味着你不应该使用类库。恰恰相反!开源类库是弄清楚浏览器不标准情况的最佳选择之一。开源项目拥有成百上千甚至成千上万的贡献者。这些成千上万的贡献者们密切地在大量的设备上进行开发和测试,他们找出那些不标准的情况,报告问题,并且给类库提交修正来处理这些情况或者提供解决方法和腻子脚本。这成千上万双眼睛同时也在报告bug,提醒浏览器厂商注意那些没有遵循标准运行的东西,以便这些bug可以在浏览器后续发布中得以修正。

流行的开源类库和HTML5 JavaScript API腻子脚本是快速发现各种各样的浏览器不标准情况及其解决方案的最佳资源。它们应被视为你的开发工具箱中的一个重要组成部分。即使你不使用它们,也一定要阅读这些源码来学习别人已经发现了的那些移动浏览器的bug。

在你阅读HTML5、CSS3以及相关的JavaScript API时,学习的最佳方法就是编写代码。让我们开始编码吧。

相关文章
|
1天前
|
JavaScript 前端开发
js和css以及js制作弹窗
js和css以及js制作弹窗
7 1
|
1天前
|
移动开发 前端开发 JavaScript
:掌握移动端开发:HTML5 与 CSS3 的高效实践
:掌握移动端开发:HTML5 与 CSS3 的高效实践
9 1
|
7天前
|
缓存 移动开发 前端开发
【专栏:HTML与CSS前端技术趋势篇】HTML与CSS在PWA(Progressive Web Apps)中的应用
【4月更文挑战第30天】PWA(Progressive Web Apps)结合现代Web技术,提供接近原生应用的体验。HTML在PWA中构建页面结构和内容,响应式设计、语义化标签、Manifest文件和离线页面的创建都离不开HTML。CSS则用于定制主题样式、实现动画效果、响应式布局和管理字体图标。两者协同工作,保证PWA在不同设备和网络环境下的快速、可靠和一致性体验。随着前端技术进步,HTML与CSS在PWA中的应用将更广泛。
|
7天前
|
前端开发 JavaScript 开发者
【专栏:HTML与CSS前端技术趋势篇】前端框架(React/Vue/Angular)与HTML/CSS的结合使用
【4月更文挑战第30天】前端框架React、Vue和Angular助力UI开发,通过组件化、状态管理和虚拟DOM提升效率。这些框架与HTML/CSS结合,使用模板语法、样式管理及组件化思想。未来趋势包括框架简化、Web组件标准采用和CSS在框架中角色的演变。开发者需紧跟技术发展,掌握新工具,提升开发效能。
|
7天前
|
前端开发 JavaScript UED
【专栏:HTML 与 CSS 前端技术趋势篇】Web 性能优化:CSS 与 HTML 的未来趋势
【4月更文挑战第30天】本文探讨了CSS和HTML在Web性能优化中的关键作用,包括样式表压缩、选择器优化、DOM操作减少等策略。随着未来趋势发展,CSS模块系统、自定义属性和响应式设计将得到强化,HTML新特性也将支持复杂组件构建。同时,应对浏览器兼容性、代码复杂度和性能功能平衡的挑战是优化过程中的重要任务。通过案例分析和持续创新,我们可以提升Web应用性能,创造更好的用户体验。
|
7天前
|
移动开发 前端开发 UED
【专栏:HTML与CSS前端技术趋势篇】渐进式增强与优雅降级在前端开发中的实践
【4月更文挑战第30天】前端开发中的渐进式增强和优雅降级是确保跨浏览器、跨设备良好用户体验的关键策略。渐进式增强是从基础功能开始,逐步增加高级特性,保证所有用户能访问基本内容;而优雅降级则是从完整版本出发,向下兼容,确保低版本浏览器仍能使用基本功能。实践中,遵循HTML5/CSS3规范,使用流式布局和响应式设计,检测浏览器特性,并提供备选方案,都是实现这两种策略的有效方法。选择合适策略优化网站,提升用户体验。
|
17小时前
|
机器学习/深度学习 人工智能 前端开发
移动应用开发的未来:跨平台框架与原生系统协同进化
【5月更文挑战第7天】 在当今快速发展的数字时代,移动应用已成为日常生活的延伸。本文旨在探讨移动应用开发领域的最新趋势,特别是跨平台开发框架的兴起以及它们如何与原生移动操作系统相互作用。我们将分析Flutter、React Native等流行的跨平台解决方案,并考察它们在性能、用户体验和生态系统中的地位。同时,我们也将关注Android和iOS两大阵营的最新进展,以及开发者应如何在这两者间做出选择或寻求平衡。最后,文章将提供对未来移动应用开发可能走向的见解,尤其是人工智能和机器学习技术对移动应用的影响。
|
2天前
|
机器学习/深度学习 Android开发 开发者
移动应用开发的未来趋势:跨平台与原生之争
【5月更文挑战第5天】随着移动设备的普及,移动应用开发已成为技术创新的前沿阵地。本文将探讨移动应用开发的两大主流模式——跨平台与原生开发,分析各自的优势与局限,并预测未来发展趋势。文章还将深入讨论移动操作系统的演进如何影响开发策略,以及开发者如何在快速变化的市场中保持竞争力。
|
3天前
|
机器学习/深度学习 开发框架 前端开发
探索移动应用开发的未来:跨平台框架与原生操作系统的融合
【5月更文挑战第4天】在本文中,我们将深入探讨移动应用开发的当前趋势和未来展望,特别关注跨平台开发框架和原生操作系统之间的相互作用。随着技术的不断进步,开发者面临着选择最佳开发策略的挑战,以确保他们的应用能够在不同的移动设备上提供无缝的用户体验。我们将分析跨平台工具如React Native、Flutter和Xamarin的优势与局限,同时考察它们如何与iOS和Android等原生系统协同工作,以及这种协同对移动应用生态系统的潜在影响。
|
3天前
|
人工智能 安全 物联网
移动应用开发的未来趋势:跨平台与原生之争
【5月更文挑战第4天】 随着移动互联网的高速发展,移动应用已成为日常生活的重要组成部分。本文探讨了当前移动应用开发领域的两个主要方向——跨平台与原生开发——的优势与挑战,并预测了未来可能的技术走向。通过分析不同移动操作系统对开发实践的影响,文章指出了移动应用开发在性能、用户体验和技术选择上的权衡。同时,探讨了新兴技术如人工智能和物联网如何重塑移动应用开发的生态。最后,提供了对未来移动应用开发者的建议。