首页 > web前端 > css教程 > 拥抱平台

拥抱平台

Joseph Gordon-Levitt
发布: 2025-03-16 10:20:12
原创
674 人浏览过

拥抱平台

那么,人们可以做的一件事使他们的网站变得更好呢?为了回答这个问题,让我们回到过去…

这一年是1998年,网络正在上升。为了尝试对www的建筑进行高级概述,蒂姆·伯纳斯·李(Tim Berners-Lee) -的,蒂姆·伯纳斯·莱(Tim Berners-Lee) - 发表了一篇论文,称为“ 50,000英尺的网络建筑”。该报告涵盖了很多事情:内容谈判,语义网络,HTML,CSS和Cool Uris(不会改变)等。

在文章中,Berners-Lee也很早就指出了一些设计原则。这些原则之一是“权力最少的规则”。

权力最少的规则是这样的:

在设计计算机系统时,通常会在使用或多或少强大的语言发布信息,表达约束或解决某些问题之间面临选择。 […]“最小权力的规则”表明选择适合给定目的的最低强大语言。

我们的前端有三种主要语言:

html

语义描述内容

CSS

控制演示文稿和布局

JavaScript

增加互动和行为

权力最小的规则表明,在诉诸CSS之前,使用HTML尽可能多地尝试和做。一旦CSS不够,请抓住JavaScript,但前提是您确实必须这样做。

正如德里克·费瑟斯通(Derek Featherstone)很好地说的那样:

在Web前端堆栈中 - HTML,CSS,JS和ARIA-如果您可以使用堆栈中较低的解决方案解决问题,则应解决问题。它不那么脆弱,更万无一失,只是起作用。

举起:这并不意味着您应该通过标记设置字体尺寸和颜色,这是我们过去在网络的“旧日”中做的事情。例子:Berners-Lee作品所涵盖的规则之一是形式和内容的分离。

破损的网络

自Berners-Lee发表该文章以来已经将近25年了。但是,不知何故,他发送的信息没有通过,许多开发人员(但不是全部)都没有意识到这一点。采取这种情况,不久前遇到了Drew Devault:

在过去的28年中,我的浏览器在提交HTML表格方面非常有能力,但是出于某种愚蠢的原因,一些开发人员决定在JavaScript中重新实现该表格,现在,如果不开放Dev Tools,我就无法支付电费。

可悲的是,这不是孤立的案例,而是一种熟悉的现象。我经常看到试图变得聪明或试图重新发明轮子的网站和图书馆 - 主要是通过向其投掷一堆JavaScript。在尝试这样做的尝试中,他们实现了与他们的目标完全相反的相反:这些网站的功能较低,易于访问范围,或者(甚至更糟糕的是)在某些条件下根本不起作用。

虽然表格可能是一个熟悉的例子,但在其他情况下,应用最小功率的规则会带来更好的结果:

  • 光滑的滚动?
    ?不需要JavaScript,因为CSS可以做到这一点。
  • 需要从基于JSON的API传达错误吗?
    ?不要在响应主体中使用{error:true}的HTTP 200,而是使用HTTP状态代码来传达错误。
  • 通过JavaScript关闭?
    ?带有[method =“对话框”]的元素会很好。
  • 想要懒惰的负载图像吗?
    ?这很快将受到HTML标记中所有现代浏览器的支持,并具有属性。
  • 可自定义的?
    ?正如我们所说的那样。
  • 是否想将动画链接到滚动偏移量?
    ?现在不需要外部JavaScript库,因为现在是浏览器本机API,很快也只能使用CSS完成一些操作。
  • 需要防止某些字符以形式输入吗?
    ?不要禁用粘贴,而是选择适当的输入类型和/或使用模式属性。
  • 需要崩溃的部分吗?
    ? 和是您的朋友。
  • 等等…

在所有这些示例中,我们都可以将一些功能从上层移动到下层。 Berners-Lee会为我们感到骄傲。

弹力

通过在Web堆栈中选择较低的技术,更靠近Web平台的核心,我们还获得了内置弹性抵抗故障的好处。

JavaScript的失败很糟糕。一个未能加载或在过程中被弄脏的脚本,或一个错误的论点,您的整个应用程序可能不再起作用。如果像“无法读取属性x的属性x”这样的错误消息听起来很熟悉,那么您就会知道我在说什么。

另一方面,CSS非常擅长失败。即使您的样式表中有语法错误,其余的CSS仍然可以正常工作。与HTML相同。这些是宽容的语言。

如果您怀疑为什么要使用权力最小的规则,杰里米·基思(Jeremy Keith)在他的文章“评估技术”中为我们带来了答案:

我们倾向于问“它的工作状况如何?”,但是您应该真正问的是“它的失败程度?”

杰里米·基思(Jeremy Keith)

我们可以做得更好

耐克网站是一个备受瞩目的网站。当您使用JavaScript禁用的JavaScript访问他们的网站时,您不会看到任何图像,也不会订购任何鞋子。

对JavaScript的这种过度依赖是不需要的,因为所有这些损坏的功能都可以使用前端堆栈中的技术较低构建:

  • 为什么不立即包含拥抱平台元素以显示鞋子照片而不是通过JavaScript动态注入它们呢?
  • 为什么不将与

☝️如果您想知道为什么有人会禁用JavaScript浏览网络:这通常不是他们的选择,而是一个正在干扰的外部因素。请参阅“每个人都有JavaScript,对吧?”为该主题进行很好的解释。

此类别中的罪犯甚至更糟糕的是Instagram和Twitter等备受瞩目的网站。没有JavaScript这些网站根本不起作用。他们要么给您警告,要么只是空白。因为什么时候需要JavaScript在网络上显示文本和图像?

渐进式增强

它不一定像这个孤立的耐克示例那样糟糕。有时,当JavaScript失败时,较小的组件会拒绝工作。以选项卡式接口为例。即使您可以找到很多提供此功能的JavaScript库,启动器是您不需要JavaScript,因为HTML,CSS和ARIA本身已经有能力使您很远。

一旦拥有这些基层层,请使用JavaScript进一步改善体验。将JavaScript视为增强,而不是要求。

某些CSS功能可能也可能不可用的CSS功能也是如此。提供基本的样式,并在可用的功能(可使用@supports检测到)时增强您已经获得的结果。

这种方法被称为渐进式增强:随着更多功能可用,您可以添加功能,从而使结果更好,但没有太多的功能,以至于没有这些额外的繁荣就无法正常工作。

对于尚未支持特定新功能的浏览器,您可以尝试找到为浏览器提供该功能的多填充。

网络赶上

自网络早期以来,我们已经看到Web平台随着时间的推移获得了许多新功能。定义了新的HTML元素,JavaScript(语言)已经成熟,CSS获得了许多有力的新功能,用于构建布局,动画元素等。

几年前不可能的事情,只能通过像Flash这样的外部技术来完成浏览器本身。

一个经典的示例是引入jQuery的功能。十多年前,JQuery是进入一个项目的第一件事。今天,情况不再如此,因为网络平台已经赶上了,现在拥有document.clearselectorall(),element.ClassList等。您可以说jQuery是在多填充物被称为polyfills之前。

虽然jQuery可能是一个熟悉的例子,但网络还赶上了许多其他情况:

  • 在JavaScript中与非常糟糕的日期()API挣扎?
    ?暂时的API可以更好地使用。
  • 使用第三方JavaScript库在屏幕上进行动画元素?
    ?为什么不尝试内置的Web动画API?它真的很强大。
  • 需要彩色的无线电按钮和复选框吗?
    ?新的CSS口音色属性为您做到这一点。
  • 依靠预处理器以便使用CSS变量?
    ? CSS自定义属性是过去20年中CSS的最大补充。
  • 等等…

这里的中心主题是这些功能不再依赖于多填充或外部库,而是更靠近网络堆栈的核心。网络赶上了。

尽管其中一些新的API可以很抽象,但您可以将其插入代码中。一个示例是Redaxios,它在引擎盖下使用fetch,同时还可以暴露与Axios兼容的API的开发人员。如果这些便利方法最终将其滴入Web平台,这不会令我感到惊讶。

结束

伯纳斯·李(Berners-Lee)在大约25年前写的是时间的考验。开发人员要遵守我们的信息。通过拥抱Web平台给我们的东西(而不是试图与之抗衡),我们可以构建更好的网站。

保持简单。运用最少权力的规则。考虑到逐步增强的构建。

HTML,CSS和JavaScript - 按照此顺序。

以上是拥抱平台的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板