2020年的网络：可扩展性和互操作性

在过去的几年中，我们看到了有关网络技术的许多变化和转移。在2020年，我预计我们是一个朝着两个主要趋势/目标的网络社区，可扩展性和互操作性。让我们分解这些。

可扩展性

可扩展性描述了某人可以采用特定技术并将其扩展到他们自己的需求。在过去的几年中，我们已经建立了一个基于组件的网络（ReactComponents！Vue组件！Svelte组件！Web组件！）和Design Systems（DesignSystems！）。有趣的形式如何遵循功能，不是吗？

现在，我们正在尝试使该组件系统看起来和感觉更加独特。网络上的可扩展性使我们能够根据自己的需求量身定制平台，并尝试结果。

CSS本身变得越来越可扩展……

CSS Houdini

使用CSS Houdini，开发人员将能够扩展CSS对象模型中当前可能的内容，并教授浏览器如何阅读和渲染CSS。

这意味着以前在网络上不可能的事情，例如倾斜的角落或圆形布局，现在变得有可能。

如果您还不熟悉Houdini，那是一个伞术语，描述了一些不同的浏览器API，旨在提高浏览器性能。ItmakessTyTymingMore Extensibleand letsusers ussusers signerssusers决定了自己的CSS功能。 Houdini的电流包括：

• 属性和价值
• 油漆API
• 动画工作
• TypedObjectModel
• 布局API

使用这些API，用户可以利用有意义的语义CSS（得益于键入对象模型），甚至可以将语义应用于其CSS变量（属性和值）。使用PAPERT API，您可以绘制画布并将其应用于边框图像（Hello hiell，渐变边框），或创建动画的Sparklesthat接受动态参数，并通过单个CSS来实现。

 .sparkles {
  背景：油漆（火花）
}

您可以建立圆形菜单，而无需通过边距（通过Layoutapi）手动放置项目，并且可以集成自己的互动，这些互动与主线程（使用AnimationWorklet）。

Houdini绝对是新年观看的人，如果您还没有，现在是开始尝试它的好时机。

可变字体

另一种符合使网站更具性能的目标同时提供更多用户可扩展性的技术是可变的字体。随着许多新的字体串联（以及Google Fonts的Casterbeta启动）现在更可用且易于使用。

可变字体是基于向量的，并且允许为各种字体轴（例如重量和倾斜）设置的广泛值。这些斧头字体的插值在点之间顺利过渡。

这是一个例子：

可变字体还允许新的Axesto帮助设计师和开发人员的作品更具创造力。这是一些来自出色资源的名为v-fonts的示例：

可变字体得到相对良好的支持，其中87％的现代浏览器支持所需的字体格式。

自定义属性

自定义属性（如变量字体）也得到很好的支持。虽然它们并不新鲜，但我们会发现我们可以使用自定义属性来完成的事情。

自定义属性允许真正动态的CSS变量，这意味着我们可以以JavaScript进行调整，从而将逻辑和样式分开。一个很好的例子是来自david khourshid，他向我们展示了如何刺激动画，并在不出汗的情况下同步样式。

我们还开始在样式表中尝试更多逻辑。我最近发表了一篇博客文章，该文章解释了如何使用本机CSS Calc（）函数以及自定义属性创建动态颜色主题。

这消除了需要其他工具来处理我们的CSS的需求，并确保该技术在任何技术堆栈中都起作用，这使我进入了下一个2020 Vision：互操作性。

互操作性

根据我的定义，互操作性意味着技术与人类需求之间的工作能力。从技术的角度来看，由于网络碎片，许多公司在最近的过去迁移了堆栈，或者有多个内部堆栈，现在很可能有兴趣保护其技术堆栈免受未来的Changesto保持一定的统一性。

Web组件

Web组件从网络标准的角度攻击基于组件的架构的问题来解决此问题。愿景是引入一种标准格式，该格式可以在或不带有图书馆的情况下使用，从而使开发人员体验和设置UnimoriSulityBetweencomponents受益。

每个Web组件都封装，并在无依赖项的现代浏览器中工作。这项技术仍在不断发展，我认为我们将在2020年看到很多增长。

逻辑属性

逻辑属性挑战我们，以调整我们如何在页面上应用布局尺寸的心理模型，以便我们使我们的页面跨语言和阅读模式更加友好。它们允许我们的布局与用户体验互操作。

在英语和其他从左到右的语言中，我们从高度和宽度方面想到了布局世界，并使用指南针型表达式来边缘，边框和填充（顶部，左，底部，右）。但是，如果我们以这种方式进行样式，然后将语言调整为左键的语言，例如阿拉伯语，padding-leftof我们的段落，则更长的是从我们阅读的开始时开始填充。这打破了布局。

如果您要写入邮政局的范围内，填充将在切换到左侧语言时，将填充到页面的另一侧（一个人将要读取的地方），并保持布局完整性。

偏好媒体查询

偏好媒体查询也正在上升，2020年的功能更大。它们可以定制网站与喜欢高对比度或黑暗模式的人一起工作，以及那些喜欢较少动画体验的人。

theupcoming偏好媒体查询包括：

• 喜欢彩色颜色
• 喜欢对比
• 喜欢减少动作
• 偏爱降低的透明度

在thisVideo中，我使用自定义属性进行样式来创建“黑暗模式”的优先介质查询：

亚军：速度

速度也是我认为是2020年网络世界的重点的一个主题。我上面提到的几种技术已经有了改善网络性能的好处，即使这不是主要重点（Eghow可变字体可能会减少下载的字体的总重量）。当我们考虑到下一个数十亿个用户在网上速度速度可能缺少的领域时，表现越来越重要。

此外，Web Assembly是一个包装器，可以使用户更靠近浏览器金属，这一包装材料变得越来越受欢迎。 IALSoforesee在来年与Withwithwithbgllin的工作量更多，该技术使用类似的技术来用于高级和快速的图形渲染。编写低级代码可以提供更快的体验，在某些情况下，可能需要进行预防可视化的浏览器。我认为我们将看到这两种技术在2020年看到Morewebgldemos。

网络正在不断发展，这就是使成为一部分的令人兴奋的原因。您认为2020年要观看的目标或技术是什么？在评论中告诉我们！

以上是2020年的网络：可扩展性和互操作性的详细内容。更多信息请关注PHP中文网其他相关文章！