用户激活 API
作为 Web 开发人员，您可能已经注意到某些 API 仅在最终用户单击或点击 HTML 元素时才起作用。例如，如果您尝试在 Safari 的 Web Inspector 中运行以下代码，则会导致错误：…
立即尝试 CSS 嵌套
早在去年 12 月，我们就写了一篇文章，详细介绍了 CSS 嵌套的三种不同选择。在其中，我们解释了选项 3、选项 4 和选项 5 之间的区别，并通过一系列示例演示了每个选项的工作原理。然后我们问了一个简单的问题：“哪个选项最适合 CSS 的未来？”
Web 开发人员非常清楚地回应了民意调查。选项 3 以压倒性优势获胜。
所以现在，Safari 和 Chrome 都实现了选项 3。两周前，也就是 1 月 25 日，CSS Nesting在Safari Technology Preview 162中默认启用。如果您有 Mac，只需下载并打开 …
如何在 url 中存储应用程序的整个状态
2023年1月
我正在开发一个在浏览器中运行的流程图编辑器，我想要一种方法让人们无需登录或在我们的服务器上存储任何数据即可使用它。我想让他们控制自己的数据，并能够将其存储在本地以便稍后打开和编辑。并且还可以轻松地与其他人分享。通过支持文件上传/下载很容易做到这一点，但我想要更简单的东西，比如通过发送 url 进行共享的能力。我也不想在后端存储任何东西（至少对于免费层）。…
-webkit-text-size-adjust的用法
-webkit-text-size-adjust的用法如下：
1、之前可以设置一个百分比然后可以在网页上（pc）显示小于12px的字体，但后来谷歌新版本已经不支持这个属性了。如果还想实现小于12px的字体，要用-webkit-transform:scale(0.8)
2、在移动设备上如手机和平板横屏会导致字体变大，-webkit-text-size-adjust: 100%可以禁止字体变化。
3、-webkit-text-size-adjust放在body上会导致页面缩放失效
4、body会继承定义在html的样式
5、用-webkit-text-size-adjust不要定义成可继承的或全局的
…
拖放列表中的元素
在此示例中，我们将创建一个可排序列表，其项目可以在其中拖放：…
拖放表格行
在查看此示例之前，建议访问此帖子以了解我们如何在列表中拖放元素。
现在我们可以使用相同的技术应用于表格行。基本思想是
- 当用户开始移动表行时，我们创建一个项目列表。每个项目都是从表的每一行克隆的。
- 我们在与表格相同的位置显示列表，并隐藏表格。
- 在这一步，移动行实际上是移动列表项。
- 当用户拖动一个项目时，我们确定目标项目在列表中的索引。并将原始拖动的行移动到与结束索引关联的行之前或之后。
HTML 中的模板
在 Twitter 上根据Manuel Matuzović 最近的一篇文章进行了热烈的讨论之后，我认为值得在这里写一些简短的想法。今天，我们快速浏览一下该<template>元素以及它如何派上用场。
所以简单来说，<template>HTML元素就是用来存放还没有被使用的HTML的。元素本身及其所有内容都是不可见的，因此它基本上可以出现在文档中的任何位置而没有太大风险。尽管您通常会在根级别拥有模板。…
使用 tcpflow 跟踪 HTTP 请求
PagerDuty 早上很早就出发了，我们的英雄诅咒自己倒霉并接到了电话。他让 PagerDuty 将消息重复两次，但无法理解消息。他按下号码以确认这件事。他打开 MacBook，发现来自 PagerDuty 机器人的 slack 消息信息量更大。他单击了链接，然后将他带到了 Grafana 仪表板。
他盯着红色的心形图标看了几秒，其中一个微服务故障率很高。有一秒钟，他很想更新错误阈值，这样他就可以回去睡觉了。勉强地，他打开 Graylog 并查看日志，注意到 401 响应。他在日志中查找更多信息，但没有找到有用的信息。…
DOM 对象的 Javascript 集合 – 为什么我不能使用 Array.reverse() 反转？
这个问题实际上可以用数组扩展运算符轻松解决。
let elements = document.querySelectorAll('button');
elements = [...elements];
console.log(elements) // Before reverse
elements = elements.reverse(); // Now the reverse function will work
console.log(elements) // After reverse<html>
<body>
<button>button1</button>
<button>button2</button>
<button>button3</button>
<button>button4</button>
<button>button5</button>
</body>
</html>…
document.querySelectorAll和querySelector用法
querySelectorAll和querySelector用法
querySelector() 方法返回文档中匹配指定 CSS 选择器的第一个元素,并且找到后就返回节点对象。
querySelectorAll() 找出所有匹配的节点并返回数组。…
近期评论