节目信息

Shop Talk Show | 整理时间：2026年2月2日
版本: 剪辑版

本期嘉宾：Jeremy Keith (Clear Left 创始人，网页标准倡导者)
主持人：Dave Rupert & Chris Coyier

---

节目简介

本期节目围绕”什么才是真正的网页”这一核心话题展开深度讨论。三位主持人从互联网开发者与网页开发者的区别入手，深入探讨了 URL 作为网页核心属性的重要性，批评了当前平台隐藏链接的趋势，并介绍了即将举行的 Web Day Out 技术会议。节目还涵盖了 CSS 锚点定位、浏览器原生 API 等前沿技术话题。

---

核心话题讨论

话题 1：互联网开发者 vs 网页开发者

Chris: 你能想象吗，可能有些人长期从事互联网相关工作，他们是真正的互联网人士，却与网页毫无关联。是的，他们可能只是专注于某些其他协议，这些协议虽然通过互联网的线路传输数据，但并不真正关心 HTTP 部分。

Jeremy: 每一位原生应用开发者从技术上讲都是互联网开发者，但并非网页开发者。

Chris: 我们已经身处其中。尽管你的网页并非基于 Web 视图，而是使用 Swift 或其他技术，或 Java，但仍然很可能在发起 fetch 请求，就像 Swift 与你的小型服务、Drizzle 以及 PostgreSQL 之间进行通信一样。这些操作实际上都是通过互联网地址来访问数据，对吧？所以这部分具有网页特性。

💡 要点: 互联网开发者只是利用互联网传输数据，而网页开发者关心 HTTP 协议、URL 和 Web 标准。原生应用虽然通过互联网传输数据，但不一定是”网页”。

---

话题 2：URL 是网页的核心

Jeremy: 你完全可以使用 HTTP 协议，但这些都不重要。那些都不重要，重要的是我能否链接到它。它是否有网址，正是网址让它成为网页。

Chris: 心中有网页。是的。

Jeremy: 这是我的观点。如果大家对网址的保护程度没有达到应有的标准，我们就需要建立一种网址游戏机制，一旦内容缺少网址就会感到非常不满。

Chris: 直到今天，这仍然让我感到困扰，尽管我偶尔也会使用 Instagram 等平台，至少这些内容都有网址，除非是动态或类似的内容。有时候故事确实会这样，但有时它们却突然消失，试问有谁愿意花时间和精力把内容发到网上，结果它却瞬间消失得无影无踪。

💡 要点: Jeremy 提出了”心中要有网页”（The Web in Mind）的理念。URL 是网页的核心属性，没有 URL 就不是网页。这是区分网页应用和原生应用的关键标准。

---

话题 3：平台隐藏链接的趋势

Jeremy: 这使得操作变得非常困难，他们试图隐藏自己的链接，例如在应用内，复制链接的功能已被移出常规界面，如今被深藏在某个角落里。

Dave: 当人们在照片中添加自己内容的链接时，这些链接不会从 Instagram 泄露出去。

Jeremy: 人们通常会在常规网站的简介中放置链接，他们会直接添加链接，他们会说我的链接在简介里。

Chris: 不，他们确实无法做到。真可惜。

Dave: 我刚说的正是 Facebook 的整个模式，嗯，对大学生来说很受欢迎，这真是令人反感。但随后是链接，正是这些链接构建了 Facebook 的帝国。然后他们说不行，实际上你们得留下来。

💡 要点: Instagram、Facebook 等平台刻意隐藏链接功能，将用户锁定在平台内。这与 Facebook 早期依靠链接构建帝国的历史形成了鲜明对比。

---

话题 4：新闻媒体的链接问题

Chris: 这情况确实如此，意思是这种现象已渗透到新闻业中。我相信这种做法在当地由来已久，但以纽约时报为例，对于一篇包含明确网址的新闻报道，他们几乎肯定不会在文中链接到相关网站，这究竟是为什么？

Chris: 从概念上我能够理解，我们不希望链接具备某种互联网货币属性，至少过去是这样。例如纽约时报链接到某个内容时，该链接可能具有较高的搜索引擎优化价值，这或许会影响报道的新闻专业性，因为有人可能在幕后操纵以获取链接。

Jeremy: 我认为这因地区而异。比如我认为英国广播公司偶尔会附上链接，但他们会确保注明免责声明，表示对任何外部链接不承担责任。但客观来说，至少他们有时会在文章中提供链接。

Chris: 非常正确，我觉得如果你要写关于国家公园更新了开放时间之类的内容，最好附上国家公园官网的链接。就像把链接放进去一样，对吧？

💡 要点: 纽约时报等主流媒体逐渐取消文章中的外部链接，理由是 SEO 价值和新闻专业性。但 BBC 等媒体仍然保留链接并附加免责声明。链接应该是新闻业的基本功能。

---

话题 5：Web Day Out 会议

Chris: 杰里米将会担任主持人，因为他经常在许多大会上主持，但这一次格外特别，因为会议即将在布赖顿举行。布赖顿，也就是你居住的地方，没错吧？

Jeremy: 确实是英格兰布赖顿，而不是布赖顿消息。

Chris: 在英国布赖顿，二零二六年三月十二日即将举行，不到两个月的时间，活动名为 Web Day Out。我就不直接告诉你们网址了，是 web dayout dot com，活动即将举行。

Jeremy: 是的，这有点像是我的心头好。我一直都想尝试一下，某种程度上也是一次赌注，一种假设验证，看看是否真的存在这样的需求。我真心希望会有。

💡 要点: Jeremy 将在2026年3月12日于英国布赖顿主持 Web Day Out 会议。这是一场聚焦浏览器原生功能的技术活动。

---

话题 6：浏览器原生 API 的价值

Jeremy: 我所在的地方由 Clear Left 运营，已经持续了整整二十年。我们一直举办一些规模较大的旗舰活动。此外我们还举办一些我称之为经济实惠又充满活力的小型会议，每次为期一天，聚焦特定主题。

Jeremy: 我认为直接使用浏览器原生 API，无论是 JavaScript、CSS 还是 HTML，都未在各类网络活动中得到应有的重视，包括技术会议、培训课程等场合。所以我的目的大概是打开大家的视野，让大家了解现在就能实现的事情。

Jeremy: 或者更准确地说，我想到不如直接聚焦那些周一早上回到工作岗位就能立即投入使用的实用技术，开发者可以马上在生产环境中应用。我也喜欢那些通过疯狂演示来展示技术的会议，但我认为这次应该更聚焦于需要实际应用的前端开发者。

Chris: 我喜欢这种用法，因为确实可以实际使用。我也容易陷入这个陷阱，想要写点东西，更别说举办一场关于它的大会了，但你又会想，这太新了，我真想展示一下。我在考虑一些事情，比如我一直在尝试玩转弹出提示功能，我认为这个功能很酷。这是 HTML 首次支持类似悬停交互的功能，现在可以直接在 HTML 中实现悬停效果，这还是前所未有的，不过这还远未达到周一早晨的实用程度。

💡 要点: 许多技术会议偏爱”炫酷演示”，但忽视了实际可用的浏览器原生 API。Jeremy 希望聚焦”周一早上就能用”的技术，让开发者了解无需框架或库就能实现的功能。

---

话题 7：CSS 锚点定位（Anchor Positioning）

Chris: 我几乎觉得可能会去某个地方参加 Web Day 活动，看看情况，也许我会现身。超级粉丝，超级粉丝，非常非常非常酷的内容，会悄然改变你的思维方式。你几乎需要经历一个时刻，那种感觉很难准确描述。

Chris: 我想到一个例子，你一直以来都习惯写 margin left，但在某个时刻，你的手指突然开始输入 margin inline，你自己也不太清楚究竟是如何或为何如此。你已经了解得足够多，内心也足够信服，但还是觉得该试试看。我打算直接开始行动。锚点定位也会出现同样的情况。

Jeremy: 一开始总是很难，你知道的，但经历过两到三个项目之后，就会觉得如果再想回到以前的方式，反而会感觉不自然。

Chris: 你明白我的意思吗，当我输入 position absolute 时，心理上会有一个转变，我会立刻想到，我这是锚定在哪个元素上呢，而不是随便找一个最近的相对定位父元素，而是要明确那个真正相关的父元素，以此为基础进行布局。我现在的心态是，要找最近的相对定位父元素。

💡 要点: CSS 锚点定位是一种思维方式转变。就像从 margin-left 到 margin-inline 的转变，一旦习惯了新的思维方式，就很难回到旧的方式。锚点定位让你明确指定元素之间的锚定关系。

---

话题 8：CSS 历史与技术演进

Dave: 偶尔会派上用场，比如 border collapse 属性，就是那种效果。有时候你得知道这些知识，比如没有重置样式，或者没有像这样，你知道的，创建表格时，你会疑惑它怎么变成这样了，为什么会出问题，明明是自己弄坏了表格，其实只需要这个老式的魔法。

Chris: 总有一天你得了解这些，我很喜欢这一点。是的，我总是会忘记表格单元格的固定尺寸设置，就是那种你必须明确指定大小，别搞那些花里胡哨的，就按我说的尺寸来。

Jeremy: 我来告诉你当时的情况，Clear Left 二十岁那年我们发现了 clear left，那时候它在每个人脑海中都根深蒂固，写 CSS 时都会用到这个声明。这个名字清晰地留在每个人脑海中，每当编写 CSS 时，都会写下这个声明。现在我必须解释一下，我必须解释左侧的原因。

Chris: 更糟糕的是这甚至不是一个逻辑属性，对吧？我们正在清除左侧。

Jeremy: 更糟糕的是这甚至不是一个逻辑属性，对吧？我们正在清除左侧。

Chris: 不是的，大家一开始都没有这么做，你知道的，后来都清理干净了。

💡 思考: 技术在不断发展，许多曾经根深蒂固的知识（如 clear: left、浮动布局）已经过时。开发者需要不断学习新方法，同时保留一些基础知识以应对特殊情况。

---

话题 9：border-image-slice 的实际应用

Dave: 你知道吗，你可以使用边框图像切片，这是大家最喜欢的属性。

Jeremy: 我记得，我记得。

Dave: 我认为是 border-image-slice，然后直接传入 100% 或者数值组合，比如 5 22 像素，你只需将图像切分即可。

Chris: 昨天我发布了一个带有边框图像的项目。虽然它偶尔仍然有用，但我并不想过多思考。因为这确实是一种近期流行的风格，可能类似于人工智能生成的效果，我认为是渐变边框。如果你不想深入思考，只需在边框图像上设置线性渐变，它就能起到一定作用，你就会觉得不错，我不需要费心思考，但这个方法似乎奏效了。

Jeremy: 如果你真的想深入思考，就需要使用图像切片，通过选取图像的一部分来实现。

Chris: 无法设置边框圆角，对吧？

Jeremy: 那不是有点像吗？

Chris: 如今或许已不再如此了，好吧，深入得太远了。

Jeremy: 我们已经深入到这个兔子洞太深了，我有点害怕。

💡 要点: border-image 配合 linear-gradient 可以快速实现渐变边框效果，虽然无法设置 border-radius，但在某些场景下仍然实用。这是一个”古老而晦涩”的 CSS 属性，但至今仍有应用价值。

---

📚 技术术语

• URL（统一资源定位符）: 网页的核心属性，有了 URL 才能被链接和访问，是区分”网页”和”互联网应用”的关键标准。
• Fetch API: 现代 JavaScript 用于发起 HTTP 请求的标准接口，原生应用也可以用它通过互联网传输数据。
• CSS 锚点定位（CSS Anchor Positioning）: 一种新的 CSS 布局技术，允许元素相对于其他元素进行定位，而不是相对于父元素。可以解决绝对定位的局限性。
• CSS 逻辑属性: 如 margin-inline 替代 margin-left，支持从左到右和从右到左的语言，是现代 CSS 的推荐做法。
• border-image-slice: CSS 属性，用于将图像分割成九宫格，应用于元素的边框。可以配合 linear-gradient 实现渐变边框效果。
• Web Platform（网页平台）: 指浏览器原生的 HTML、CSS 和 JavaScript API，不包括框架或库。
• Popover API: HTML 中新增的悬停交互功能，首次允许在纯 HTML 中实现类似悬停的效果。
• Clear Left: 英国一家拥有20年历史的前端咨询公司，以举办技术会议（如 Patterns Day、Web Day Out）闻名。

---

💬 金句摘录

“那些都不重要，重要的是我能否链接到它。它是否有网址，正是网址让它成为网页。” —— Jeremy Keith

“心中要有网页。” —— Chris Coyier

“如果大家对网址的保护程度没有达到应有的标准，我们就需要建立一种网址游戏机制，一旦内容缺少网址就会感到非常不满。” —— Chris Coyier

“试问有谁愿意花时间和精力把内容发到网上，结果它却瞬间消失得无影无踪。” —— Chris Coyier

“正是这些链接构建了 Facebook 的帝国。然后他们说不行，实际上你们得留下来。” —— Dave Rupert

“我认为直接使用浏览器原生 API，无论是 JavaScript、CSS 还是 HTML，都未在各类网络活动中得到应有的重视。” —— Jeremy Keith

“我想到不如直接聚焦那些周一早上回到工作岗位就能立即投入使用的实用技术，开发者可以马上在生产环境中应用。” —— Jeremy Keith

“你几乎需要经历一个时刻，那种感觉很难准确描述。你一直以来都习惯写 margin left，但在某个时刻，你的手指突然开始输入 margin inline。” —— Chris Coyier

“当我输入 position absolute 时，心理上会有一个转变，我会立刻想到，我这是锚定在哪个元素上呢。” —— Chris Coyier

---

🤔 思考与启发

本期节目展现了对于”网页本质”的深度思考：

1. URL 是网页的生命线: Jeremy 强调”有 URL 才是网页”，这一观点看似简单，却深刻揭示了网页与其他互联网应用的区别。URL 赋予了内容可链接性、可发现性和可访问性，是开放 Web 的基础。当平台隐藏链接、媒体取消链接时，我们实际上是在破坏 Web 的核心价值。
2. 技术选择的实用主义: 节目中多次提到”周一早上就能用”的技术，反映了开发者对实用性的重视。虽然炫酷的技术演示很有吸引力，但真正推动行业进步的是那些能立即应用到生产环境的实用技术。这也解释了为什么浏览器原生 API 虽然不如框架花哨，却具有长期价值。
3. 思维方式的转变: 从 margin-left 到 margin-inline，从相对定位到锚点定位，这些变化不仅仅是语法改变，更是思维方式转变。CSS 锚点定位的讨论特别有启发性——它要求开发者明确元素之间的关系，而不是依赖 DOM 层级。这种思维方式可以推广到其他技术选择上。

延伸思考:

• 在当前”围墙花园”盛行的时代，如何保护和推广开放 Web 的价值观？
• 作为开发者，我们应该如何在使用现代框架和掌握浏览器原生 API 之间找到平衡？
• 当我们设计产品时，是否优先考虑了链接和可访问性？还是默认将用户锁定在平台内？
• “周一早上就能用”的技术标准是否过于保守？会不会阻碍创新？如何在实用性和前瞻性之间取得平衡？