作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.
Demir Selmanovic的头像

Demir Selmanovic

Demir是一名开发人员和项目经理,在广泛的软件开发角色方面拥有超过15年的专业经验.

专业知识

工作经验

24

分享

20多年过去了 蒂姆•伯纳斯-李罗伯特•卡里奥发明万维网协议 指定的 HTML它成为了用于构建Internet的标准标记语言. 从那以后, HTML开发社区 请求对这种语言进行改进, 但这种呼声主要是被那些试图缓解他们同事的HTML问题的浏览器开发人员听到的. 不幸的是, 这导致了更多的问题,导致许多跨浏览器兼容性问题和重复的开发工作. 在这20年里, HTML升级了4次, 虽然大多数浏览器都有两位数的主要更新以及大量的小补丁.

HTML5应该最终解决我们的问题,并成为 一个标准统治所有(浏览器). 这可能是自万维网诞生以来最令人期待的技术之一. 发生过吗?? 我们最终得到了一种完全跨浏览器兼容的标记语言吗?它可以在所有桌面和移动平台上工作,提供我们所要求的所有功能? 我不知道! 就在几天前(9月10日). 我们收到了 再一次请求W3C审核 所以HTML5规范仍然不完整.

希望, 当某一天规范定稿时, 浏览器不会已经有重要的过时代码, 他们将很容易和适当地实现伟大的功能,如 网络 Workers, 多个同步的音频和视频元素,以及其他我们需要已久的HTML5组件.

给匆忙的开发人员一个不完整的规格说明,你就会有一个灾难的配方.

然而,我们确实有成千上万的公司将他们的业务建立在HTML5上,并且做得很好. 还有许多很棒的基于html5的应用程序和游戏被数百万人使用, 所以成功显然是有可能的,HTML5就是如此, 并将继续如此, 不论其规格状态如何均可使用.

然而, 我提到的配方很容易让我们大失所望, 因此我强调了一些可以避免的最基本的HTML5错误. 下面列出的大多数错误都是由于某些HTML5元素在不同浏览器中的执行不完整或缺失所致, 我们应该希望在不久的将来它们会被淘汰. 直到这一切发生, 我建议你在构建下一个HTML5应用程序时,无论你是HTML5初学者还是经验丰富的老手,都要阅读这些列表并牢记在心.

常见错误#1:信任本地存储

让他们吃蛋糕! 这种方法多年来一直是开发人员的负担. 由于合理的明智 担心安全漏洞 以及保护电脑, 在互联网被许多人恐惧的“黑暗时代”, 网络应用程序被允许在计算机上留下不合理的少量数据. 的确,有一些事情像 用户数据 “来自微软(r)的伟大的浏览器大师”给了我们, 或者Flash中的本地共享对象, 但这还远远不够完美.

因此,第一个基本的HTML5功能之一是合理的 开发人员网络存储. 但是,要注意网络存储并不安全. 它比使用cookie要好,因为它不会通过网络传输, 但它没有加密. 您绝对不应该在那里存储安全令牌. 你的 安全策略 永远不要依赖存储在网络存储中的数据,因为恶意用户可以很容易地修改它 localStoragesessionStorage 值。.

想要更深入地了解网络存储以及如何使用它,我建议阅读 这篇文章.

常见错误#2:期望浏览器之间的兼容性

HTML5不仅仅是一种简单的标记语言. 它已经足够成熟,可以将行为与布局结合起来, 你应该把HTML5看作是基于高级JavaScript的HTML扩展. 如果你看看我们之前为了让HTML+CSS的静态组合在所有浏览器上看起来都一样而遇到的所有麻烦, 我们可以公平地假设,复杂性越高,就意味着需要付出更多努力来确保跨浏览器的兼容性.

不同浏览器对HTML5的解释不尽相同, 就像JavaScript一样. 浏览器大战中的所有主要参与者都参与了HTML5规范的制定, 因此,可以合理地假设浏览器之间的差异会随着时间的推移而减少. 但即使是现在,一些浏览器决定完全忽略某些HTML5元素,这使得遵循基线和通用功能集变得非常困难. 如果我们在等式中加入更多的互联网连接设备和平台, 情况变得更加复杂, 导致HTML5的问题.

例如 网络动画 伟大的特性是否只有 Chrome和Opera,而 网站通知 允许在网页上下文之外提醒用户发生事件的功能, 比如发送电子邮件, 完全被忽略了 Internet Explorer.

要了解更多关于不同浏览器的HTML5特性和支持,请查看HTML5指南 www.caniuse.com.

所以事实仍然是,尽管HTML5是全新的且明确的, 我们应该预料到大量的跨浏览器兼容性问题,并提前做好计划. 浏览器需要填补的空白太多了, 当然,他们无法很好地克服平台之间的所有差异.

常见错误#3:假设高性能

尽管HTML5仍在不断发展, 这是一项非常强大的技术,与之前使用的替代平台相比,它具有许多优势. 但是, 权力越大,责任越大,特别是对于HTML5初学者. HTML5已经被桌面和移动平台上的所有主流浏览器所采用. 记住这一点, 许多开发团队选择HTML5作为他们的首选平台, 希望他们的应用程序能在所有浏览器上平等地运行. 然而, 假设在桌面和移动平台上都有合理的性能,只是因为HTML5规范这么说, 是不明智的. 很多公司(嗯! 脸谱网 博物馆!)将赌注押在手机平台的HTML5上,但HTML5并没有像他们计划的那样发挥作用.

然而,也有一些优秀的公司非常依赖HTML5. 看看那些将HTML5和浏览器推向极限的在线游戏开发工作室就知道了. 很明显, 只要您意识到性能问题并正在解决这些问题, 你可以在一个很棒的地方做出很棒的应用程序.

常见错误4:有限的可访问性

网络已经成为我们生活中非常重要的一部分. 使应用程序能够被依赖辅助技术的人访问是软件开发中经常被搁置的重要主题. HTML5试图通过实现一些高级的可访问性功能来克服这个问题. 不少开发人员认为这就足够了,并没有真正花时间在他们的应用程序中实现额外的可访问性选项. 不幸的是, 在这个阶段,HTML5还存在一些问题,使你的应用无法面向所有人,如果你想要包含更广泛的用户,你应该投入额外的时间.

你可以检查一下 这个地方 更多关于HTML5可访问性的信息,以及最常见的可访问性特性的当前状态.

常见错误5:未使用HTML5增强功能

HTML5极大地扩展了标准HTML/XHTML标记集. 除了新的标签,我们还增加了一些新的规则和行为. 太多的开发者只选择了一些增强功能,而忽略了HTML5的一些非常酷的新功能.

在HTML5中最酷的事情之一就是客户端验证. 这个功能可能是网页浏览器最早采用的HTML5元素之一. 但是,不幸的是,您可以发现很多开发人员添加 已经 属性默认设置为其窗体. 这样做的原因 我相信我们会就此展开一场辩论. 由于向后兼容性, 许多应用程序实现了自定义JavaScript验证器,在此基础上由浏览器完成开箱即用的验证是不方便的. 然而, 要确保两种验证方法不会发生冲突并不太难, 标准化用户验证将确保共同的体验,同时帮助解决我前面提到的可访问性问题.

另一个重要的特性与HTML5中处理用户输入的方式有关. 在HTML5出现之前,我们必须将所有表单字段都包含在

标签. 新的表单属性使得这样做是完全有效的:

First name:
Last name:

即使 lname 不在表格里面,会一起寄吗 .

有关新表单属性和增强的详细信息,可以查看 Mozilla开发者网络.

总结

我知道网页开发者在浏览器大战中是附带伤害,因为上述许多错误都是HTML5在不同浏览器上执行的直接后果. 然而, 避免常见的HTML5问题,花点时间了解HTML5的新功能仍然是至关重要的. 只要我们控制住一切, 我们的应用程序将利用新的增强功能,将网络带到一个新的水平.

网络开发人员是浏览器战争的附带牺牲品.
聘请Toptal这方面的专家.
现在雇佣
Demir Selmanovic的头像
Demir Selmanovic

位于 萨拉热窝,波斯尼亚-黑塞哥维那联邦,波斯尼亚-黑塞哥维那

成员自 2014年7月8日

作者简介

Demir是一名开发人员和项目经理,在广泛的软件开发角色方面拥有超过15年的专业经验.

Toptal作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.

专业知识

工作经验

24

世界级的文章,每周发一次.

订阅意味着同意我们的 隐私政策

> < /形式

世界级的文章,每周发一次.

订阅意味着同意我们的 隐私政策

> < /形式

Toptal开发者

加入总冠军® 社区.