跳到主要内容

你不知道用HTML做的5件事

让我们面对现实吧,网页开发很容易变得一团糟。 HTML,CSS和JavaScript的所有这些都是从多年来的卑微起源演变而来的,并且在你应该如何使用它们方面基本上是模棱两可的。结果,构建一个难以维护的混乱太容易了。遵守标准并利用规范的最新改进并不能保证良好的代码,但它肯定会有所帮助。

在任何类型的软件开发中,模块化在构建可维护代码时都是最重要的。因此,您需要密切关注Web组件。浏览器支持不是很好,但如果你抓住自己一些Polyfills,您可以领先于曲线并开始利用自定义元素来立即构建代码。这种发展方式是未来,所以现在值得熟悉它。

Keep code streamlined for clearer understanding

保持代码简化以便更清楚地理解

HTML5本身引入了许多新元素(并弃用了几个),以帮助鼓励良好的编码实践。您可能听说过语义标记,它指的是使用HTML5的描述性元素,例如

表明它们包含的内容类型。

这可以真正有助于代码的清洁,因为HTML元素将立即识别,例如,哪些部分代表菜单栏,您的内容部分,页脚等。

如果您利用最新的JavaScript标准,它也会有所帮助。 JavaScript也可能变得混乱,但近年来使用起来变得更加容易。 ES6语法在浏览器中得到广泛支持,箭头函数和类等功能可以让您的生活更轻松 - 但许多开发人员要么不熟悉也不警惕使用它们。

继续模块化开发的主题,JavaScript现在还支持模块加载,它可以帮助您干净地管理依赖项。

01.承认并综合演讲

The sound of things to come

事情的声音来了+$(Image credit: Photo by Jason Rosewell on Unsplash)

这些曾经是需要专门软件的复杂功能,但它们现在直接构建到浏览器中。 Web Speech API具有支持文本到语音和语音到文本的组件。后者将使用在线服务(Chrome使用Google Cloud Speech API)或设备的本机语音识别服务。预计将来会在移动设备上广泛使用它。

02.显示颜色选择器

Choosing the right colour

选择正确的颜色+$(Image credit: Photo by Scott Webb on Unsplash)

听起来很简单,这是一个很好的例子,说明HTML5如何简化以前需要自定义编码相当复杂的UI组件的常见任务。单击时将显示可视颜色选择器,使用设备本机的颜色选择器。这对于HTML Canvas尤其有用。它受到移动版Safari的广泛支持。

03.重新着色浏览器UI

Colour themes for browsers

浏览器的颜色主题+$(Image credit: Photo by Marko Blažević on Unsplash)

这可以在移动平台上提供良好的美感。旨在指示浏览器在查看您的站点时重新着色工具栏。不幸的是,它有点非标准化,所以同时“主题色”适用于iOS,您需要的Chrome,Firefox和Opera“苹果的移动web应用程序状态栏式”(仅适用于全屏模式)。

04.不同屏幕的不同图像

Specifying the image and the resolution

指定图像和分辨率+$(Image credit: Photo by Tran Mau Tri Tam on Unsplash)

希望您已经实现了响应式设计,在这种情况下,您的图像将调整大小以适应视口。这并不完美,因为您将强制用户下载最大版本的图像,然后对其进行下采样。输入HTML5Element,使您可以指定要显示的不同图像,具体取决于正在查看网站的屏幕分辨率。

05.振动你的手机

Shakin' all over

沙金'到处都是+$(Image credit: Photo by Gilles Lambert on Unsplash)

明确命名的Vibration API暴露了一个函数vibrate(),它将完全按照它在支持它的设备上所做的那样。该函数采用描述振动模式的列表作为其参数。它适用于Chrome,Firefox和Opera,尽管你在Edge或Safari上运气不佳。据报道,有些广告正在利用这一点来吸引用户的注意力,因此评委会了解这是否真的是一个好主意。

这篇文章最初出现在 网页设计者 问题266。 在这里购买

相关文章:



翻译字数超限