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

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

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

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

1.窗体元素的重音颜色CSS属性

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

实现更多自定义的第一步是添加重音颜色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.延迟加载图像和iframe

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

新加载属性允许浏览器延迟加载离屏图像和iframe，直到用户滚动到它们附近。加载支持三个值:

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

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

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

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

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

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

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

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

如果你喜欢这篇文章，请鼓掌或分享。你的帮助我永远感激。你也可以点击此处订阅Medium．