HTML5

借助HTML5 details,summary无JS实现各种交互效果

<details>标签在Chrome,Firefox等浏览器下默认是有展开收起行为的;通过在<details>标签上添加布尔类型的open属性,可以让我们的详情信息默认就是展开状态;<summary>标签如果缺省,则<details>元素会在内部自动创建一个<summary>内容,默认的文案是“详细信息”。本文主要通过一些示例,介绍了HTML5中的<details><summary>在不需要借助任何JavaScript就可以实现一些常见的交互效果。

静态网站剖析

静态网站是Web站点中较为简单的一种,因为它们没有传统的服务器。所涉及的唯一服务器是一个静态资源服务器,你不必对其监控和维护。但是这些所谓的静态网站通过JavaScript可以在客户端上实现很多动态的功能。这使得它们根本不是真正的静态网站——也许它们应该被称为无服务器站点。这种功能通常是用复杂的工具创建的,比如Webpack、Babel和NPM。有效地使用这些工具并不简单。

HTML5 History API

HTML5 History API是HTML5提供对history栈中内容的操作。DOM window对象通过history对象提供了对浏览器历史的访问。它暴露了很多有用的方法和属性,允许你在用户浏览历史中向前和向后跳转。另外也提供了一些很有意思的API。在这篇文章中简单的来了解history相关的知识。

output元素

昨天晚上,我在一个特别大的代码库中四处游荡,偶然发现了我们平时使用的normalize.css文件用于重置HTML元素在不同浏览器中的样式。在这个过程中,我发现了一个名为<output>的特殊元素的样式,这是我以前从未见过的,甚至从未听说过的。根据MDN上的相关描述,它代表计算或用户操作的结果,通常用于表单。让我感到尴尬的是,自从Chris在2011年在一篇文章中使用它之后,这并不是一个新的,花哨的附加功能。

表单验证第四部分: MailChimp订阅表单中的验证

在这个系列的上几篇文章中, 我们已经学会了如何使用输入类型和验证属性本地进行表单验证。我们也学会了如何使用约束验证 API 来提高浏览器原生的验证能力以提供更好的用户体验。 并且我们写了一个 polyfill 将支持一直延伸到IE9(并在一些较新版本中添加了几个功能)。现在, 让我们把学到的知识运用到一个真实的例子中:MailChimp注册表单。

表单验证第三部分: 一个Validity State API Polyfill

在这个系列的上一篇文章中, 我们创建了一个轻量级的脚本 (6kb, 2.7kb缩小后) 使用这个 Validity State API 来提高原生的表单验证体验。 这个脚本可以在所有的现代浏览器上运行,并且支持 IE10版本以下的浏览器。但是,浏览器本身仍然具有一些缺陷。

表单验证第二部分: 约束验证 API

上一篇文章中, 我向大家展示了如何通过组合输入类型 (例如, <input type='email'>) 和验证属性 (像requiredpattern)来使用原生的浏览器表单验证机制。诚然,这种方式非常的简单而且轻量级。但是它仍然具有一些缺点 。

表单验证第一部分:使用 HTML 和 CSS技巧对表单进行约束验证

大多数的JavaScript表单验证类库体积都非常庞大,而且往往需要引入其他的库,像jQuery。 例如,MailChimp的嵌入式表单,包含了140kb的 验证文件(压缩后)。它引入了整个jQuery库,以及一个第三方的表单验证插件,还有一些原生的MaiChimp代码。实际上,正是MailChimp的嵌入式表单引发了我对于现代表单验证的一系列思考。我们现在有哪些新工具可以进行表单验证?哪些是可行的?哪些又是仍然需要的?

10个HTML 5.1的新功能

在几个星期前,W3C在2016年11月发布了新的 HTML 5.1 recommendation,HTML规范得到了重大改进,在最近的博客中,W3C将新的主版本称为黄金标准,因为HTML 5.1为我们提供了新的方法,我们可以使用HTML来创建更灵活的网络体验。

伟德19463331的学习

思考许久才动笔写这篇文章。那么问题来了?为什么要写这篇文章呢?其实有一定的原因。自从录制伟德19463331视频上线之后,也有一些同学问我类似的问题,而且也有同学问,应不应该购买视频,或者说参加线下伟德19463331培训班,或者说还是自己自学等等。那么今天来聊聊这些个话题。

页面

返回顶部