HTML、CSS和Javascript的发展速度比以往任何时候都要快，使网页更适合开发和用户友好。

在这篇文章中，我们将看到5个新的HTML/CSS特性:

• 超级容易使用，通常只有一两行代码
• 在某些情况下，它是游戏规则的改变者，因为它们可以取代组件库、jQuery插件或复杂的服务器端呈现架构!

废话不多说，让我们看看这些特性。

1.表单元素的重音颜色CSS属性

表单一直以来都很难定制，因为它们依赖于本地浏览器实现和外观。

实现更多定制的第一步是添加accent-color CSS属性，它提供了一种简单的方法来定制表单元素到您的web应用程序的颜色:

上面的样式是通过一个简单的CSS规则实现的:

{形式
颜色:金;
｝

注意，浏览器会调整表单元素的其他颜色以匹配强调色。在上面的例子中，复选框的勾和我的范围和进度元素的背景颜色自动更改为黑色。

顺便说一下，用于范围选择的滑块和进度条也是常规的HTML元素:

<进展> > < /进展

所有主流浏览器都支持庄重的颜色自IE11在2022年6月被弃用：

2.滴管，方便颜色选择

这是使用颜色选择器从网页中选择颜色的另一种选择。滴管看起来像一个放大镜，在页面上选择一个非常特定的颜色:

一旦选择了颜色，我们通过一个承诺和一个回调函数得到它的值:

const eyeDropper =新的吸管();
eyeDropper.open ()
.then((result) => {
console.log (result.sRGBHex）;
})；

同样，只需几行代码就可以实现这种神奇的效果!你可以试试演示．

点眼药器目前还不能在所有浏览器上使用，但它正在实现:

3.对话框

Dialog是一个HTML元素，一开始是隐藏的，但可以使用Javascript打开:

<对话id = "对话" >
我是一个纯HTML对话框!
> < /对话框

要用Javascript打开一个对话框，下面是您需要的代码(这里是一个使用Angular打开一个对话框)：

. getelementbyid(对话框),告诉();

当然，我们也可以在HTML代码中添加一个简单的内容来结束对话框:

<对话id = "对话框"onClick = " this.close ()>
我是一个纯HTML对话框!
> < /对话框

对话框的默认外观是非常基本的，但可以用CSS自定义:

所有现代浏览器支持对话框．

4.取优先级

当一个页面有很多内容时，如图像和视频，优化页面加载时间就变得非常重要。

方法提供下载优先级提示fetchpriorityHTML属性。我们可以使用with属性链接，img，脚本,iframe标签。的fetchpriority属性接受以下三个值之一:

• 高:该资源具有高优先级，我们希望浏览器对其下载进行优先级排序。
• 低:该资源是低优先级的，我们希望浏览器对其进行优先级处理。
• 汽车:默认值，我们让浏览器决定适当的优先级。

下面是一个用法示例:

< img src = " /图片/ not_important.png”fetchpriority = "低"alt = "不重要的形象!”>

<链接的href = " / js / script.js”fetchpriority = "高">

浏览器的支持还不是最佳的，但正在接近:

5.延迟加载图像和帧框架

惰性加载有点类似于fetchpriority因为它允许我们控制资源何时被下载。

新加载属性允许浏览器推迟加载屏幕外的图像和iframes，直到用户滚动到它们附近。加载支持三种值:

• 懒惰的:是延迟加载的一个很好的候选者。
• 急切的:不是延迟加载的好候选对象。马上装载。
• 汽车:浏览器将决定是否惰性加载。

作为HTML属性，加载使用起来非常简单:

< img加载= "懒惰"src = " https://upload.wikimedia.org/wikipedia/commons/9/92/Big_Sur_Coast_California.JPG " / >

你可以试试这里的演示．向下滚动超过第一个灰色框，将加载一个图像。

大多数浏览器对该属性的支持都非常好:

在那篇文章中所有的功能演示都是可在Stackblitz上购买：

我叫betway必威滚球．我是Angular的谷歌开发专家，也是角训练在那里我帮助web开发团队学习和适应Angular。

如果你在网页开发方面需要任何帮助，请随时与我们联系!

如果你喜欢这篇文章，请为它鼓掌或分享。感谢您的帮助。你也可以点击这里订阅Medium．