容器查询 现在还不存在，但许多 Web 开发人员最近一直在为它辩论。 乍一看，这个想法似乎很简单：媒体查询允许我们根据浏览器宽度进行样式更改，而容器查询将允许我们在元素父级宽度发生更改时进行样式更新。

这是一个重要的区别，它可能会解决大多数 Web 开发人员每天遇到的许多问题，特别是那些在大型设计系统上工作的开发人员，这些系统中的组件旨在在没有周围元素的任何上下文的情况下使用。

继续阅读 →

Anil Dash:

如果 Instagram 用户可以随意发布链接，他们甚至可以与用户直接连接，获取他们的电子邮件地址或找到与他们交流的其他方式。 链接对封闭系统构成了威胁。

在 CodePen 上，我们有一个 TextExpander 代码段，我们将其用于通过 Buffer 安排的每条 Instagram 帖子，它扩展到以下内容

寻找代码？ 它是 CodePen 上的开源，关注我们个人资料中的链接 🔗 并找到作者的 Pen。

继续阅读 →

我最近在南加州当地的一所大学接受了一个教学职位，在那里我将讲解我所知道的一切（或者更可能是不知道的！）关于 HTML 和 CSS。 不用说，当 Rachel Andrew 最近发表了一篇关于 CSS 教学 的文章时，我一直在倾听（实际上是看）。

display 属性是理解 CSS 布局可能性（特别是正如 Rachel 指出的那样，外部值（block 和 inline）和内部格式化上下文（以网格、弹性盒和普通流形式提供））的核心部分。 理解这种差异是我个人的 CSS“Aha！”时刻 的原因。

因此，我很高兴看到 Rachel 发布她本月在旧金山 An Event Apart 上的演讲幻灯片。

继续阅读 →

我认为 Adam 的第一个预测是最大胆的，甚至超过了他的 Hail Mary 预测。 CSS 网格 很棒，gap 可能是它最好的特性之一，但 gap 取代 以其他方式（例如边距）来间隔事物是一个大胆的预测，尤其是考虑到 Firefox 是唯一支持弹性盒中它的浏览器。

来自 Postlight 的“聊天室”的有趣 想法

1. 创建一个 Yap 聊天室。
2. 邀请其他人加入并聊天。
3. 分享几乎任何东西的 URL。
4. 所有参与者都可以对您分享的内容发表评论。
5. 如果您认为您的对话应该有一个观众，请公开分享您的聊天 URL。
6. 只有六个人可以加入。 如果你邀请他们，很多人可以观察。 但只有六个聊天者。

Yap。

标准的复制粘贴 YouTube 嵌入在您的页面上作为 <iframe></iframe>，它加载一大堆其他内容来播放该视频。 但它的 UX 基本上仍然是图像和播放按钮。 点击播放按钮，视频就会播放。 您可以使用包裹图像的锚链接构建基本上相同的东西！

不久前，我们介绍了 Arthur Corenzan 的一个非常巧妙的“延迟加载”技术，它正是这样做的，后来被 Remy Sharp 和 Adrian Roselli 进一步改进。

继续阅读 →

我不再看到图像精灵被那么多地使用，但它仍然是一种很好的技术，可以减少在页面上有多个装饰性图像资产时下载的资产。 主要思想是将所有图形组合成一个，然后围绕大小和 background-position 进行移动，以一次揭示一个。

假设您的网站需要几十甚至数百个国家国旗 - 这是使用精灵的绝佳机会。 Michael P. Cohen 构建了一个生成器网站来帮助构建您需要的任何东西。

我的第一个想法是……为什么不使用 SVG？ Michael 说

为什么不使用 SVG？ 许多旗帜非常适合这种格式。 我是 SVG 的粉丝，但这并不是此任务的正确工具。 问题是太多旗帜在徽章、图标和图像中有很多细节，这些细节会迅速提高 svg 文件大小，远远超过索引颜色文件。

我们刚刚介绍了 2019 年样式选择器的现状，但我们没有像 Julie Grundy 在 这里 所做的那样深入和花哨。 有一部分 JavaScript 为它提供了动力，所以我仍然非常关注浏览器最近对我们提供 更强大的选择器 的兴趣（可能）仅仅通过 HTML 和 CSS 实现。

我将 一个分支添加到 CodePen，以防您只想查看最终结果。

查看 Pen
自定义选择输入 by Chris Coyier (@chriscoyier)
on CodePen.

这也是 2019 年版 24 Ways 的第一篇文章，这是一个长期运行的、精彩的开发者年度降临日历，值得每年阅读。

您是否曾经看到过一个网站并确切地知道为其提供动力的 CMS？ 您可能会看到一种独特的设计美学，它会将其泄露出来。 或者也许是更不明显、甚至更难以表达的东西，但您在看到它时就会知道。

这似乎适用于几乎所有平台，特别是那些依赖于一组模板的平台。 如果你从一个平台上的一个网站跳转到另一个网站，你可以看到相似之处，就像走在一条街道上，所有房屋都是由同一个建筑师设计的。

这不是一件坏事。 但就像房屋一样，我们倾向于想要个性化的网站，这些网站感觉独特。 这就是让 WordPress.com 成为一个不错的托管平台选择的原因之一。

继续阅读 →

Dylan Paulus:

Facebook 实际上在“赞助”文本之间隐藏了“虚拟”DOM 节点。 这些值完全是随机字符，在它们之间有随机数量的 DOM 节点。 无形字符。 此时，我们的 CSS 广告拦截器完全崩溃了。 我们不可能用 CSS 编写所有可能的值。

我们之前介绍过这个话题，当时 Mike Pan 提到了它。 看起来它从那时起已经有所发展，变得更加狡猾。

我刚刚打开我的 Facebook 并选择“复制外部 HTML”到“赞助”一词上

继续阅读 →