<span>L</span><span>e</span><span>t</span><span>t</span><span>e</span><span>r</span><span>s</span>

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 200 美元的免费额度!

你看到 Facebook 的这个垃圾了吗?

我访问了 Facebook 以进行验证,我看到的是一个更加混乱和嵌套的结构

他们试图对抗你的广告拦截器浏览器扩展。 当然他们会这么做。我相信,在他们这样的规模下,如果不这样做,就会损失数百万美元。但我很好奇,当你考虑到失去信任以及可能完全失去平台上的用户时,是否真的会“损失”金钱。

这感觉太粗鲁了,不是吗?就像用户专门在他们的电脑上安装技术,以便对他们允许进入他们的电脑和眼球的东西进行一些控制。而他们却说:“不,我们不尊重这种选择。我们将用我们的技术对抗你的技术,并将这些东西强加到你的电脑和眼球上。” 这让人无法接受。

我并非不知道广告拦截器对网站赚钱能力有不利影响。这确实是我赚钱的方式。但我不想在争斗中以及以破坏信任为代价地这样做。我想在建立信任的同时,优雅地做到这一点。

无论如何。


我想知道编写 HTML 来帮助广告拦截器会是什么样子

<!-- start: advertisement -->
<div class="ad sponsor paid" id="ad-1" data-ad="true">
  <div>Sponsor:</div>
  <a href="https://sponsor.com" rel="nofollow">Company</span>
</div>
<!-- end: advertisement -->

好的广告拦截器已经做了很多年了。


这种基于 span 的字母样式让我联想到像 Splitting.jsLettering.js 这样的库,它们出于样式原因将文本分解成单独的 <span>

事实证明,这不会影响页面内搜索(例如,如果你搜索“dog”,你会找到 <span>d</span><span>o</span><span>g</span>),但它确实会影响一些屏幕阅读器,因为它们会将每个字母都视为不同的元素,这会导致非常糟糕的音频输出,例如在字母之间出现你意想不到或不希望出现的停顿。

不过,这完全可以解决!

我刚刚在 Web Platform News 上阅读了关于 aria-label 的强大功能,引用了 Amelia Bellamy-Royds 的话

按钮或链接上的 aria-label 属性有效地将该元素的文本内容替换为新的标签。

很高兴看到 Lettering.js 默认情况下就是这么做的!而 Splitting.js 正在 寻找最佳方法,其中涉及 aria-label


哦,还有,像往常一样,::nth-letter() 会很酷。 2018 年回顾 2011 年的请求