一个简单的CSS首字下沉

您不会没有注意到我们在新博客设计中使用的首字母缩略词效果，以及大多数浏览器显示的第一行大写字母（除了Safari，我将在稍后解释的原因）。

有很多hacky方法可以实现这种效果，但是最干净，最可维护的方法是纯CSS ，它使用:first-letter和:first-line伪类。

这种方法意味着不需要额外的标记，没有图像，也不需要了解内容-无论首字母和第一行是什么，它们都会生效。

这是实现它的CSS ：

#post-content > p:first-child:first-line, 
#post-content > .ad:first-child + p:first-line
{
    text-transform:uppercase;
    position:relative;
    font-size:0.95em;
    letter-spacing:1px;
}

#post-content > p:first-child:first-letter, 
#post-content > .ad:first-child + p:first-letter
{
    letter-spacing:0;
    text-transform:uppercase;
    color:#628fbe;
    font-family:times,serif;
    font-size:3.5em;
    float:left;
    margin:0.13em 0.2em 0 0;
    line-height:0.7;
}

您会注意到在内容区域内的第一段中，如何有两种不同的选择器试图应用效果。 它需要足够灵活，以允许在紧接该段落之前标记为<div class="ad">的广告的存在或缺失。 因此，理想情况下，我会使用:first-of-type ，它在其父上下文中选择指定类型的第一个元素：

#post-content > p:first-of-type:first-line
{
}

#post-content > p:first-of-type:first-letter
{
}

但这还没有得到广泛支持。 我们使用的选择器意味着我们将获得对IE8的支持，否则我们将不会提供支持。

不幸的是，对于第一线的大写，我们没有获得对Safari的支持。 这不是因为选择器的原因-它支持此处显示的所有示例，并且确实在这些规则中应用了其他属性-只是不应用text-transform 。 我在许多不同的情况下都注意到了这一点，其中Safari出于显而易见的原因不应用转换。 我已经看到它无法应用于<input>元素（该元素在相应的<button>起作用），并且在这里我们看到它无法应用于该段的第一行，即使将其应用于整个段落也可以！ 去搞清楚。

对于首字下沉本身，您可以看到它非常容易实现。 该规则中值得注意的是，将页margin-top和line-height结合起来使字母定位。 如果省略这两个属性，则会得到以下结果：

应用行高之前的首字下沉。

从左到右，您所看到的是Firefox，Opera和Safari。 实际上是Firefox渲染错误 ，而Opera和Safari却正确显示了Firefox – Firefox仍将父段的行高应用于第一个字母，而忽略了其大得多的字体大小，而其他浏览器正确地应用了一行-高度，与字母的字体大小相对应。

因此，我们可以利用差异来平衡浏览器之间的结果-逐步减小行高，这与Firefox毫无区别，直到我们在Opera和Safari（和IE8 ）中得到相似的结果：

行高后的首字下沉被应用。

然后，这只是在垂直位置看起来正确之前添加margin-top的情况。

这不是我第一次在Firefox中看到这种渲染行为。 而且，由于我们没有只能适用于Firefox的CSS hack，因此这种差异实际上是我们可以应用浏览器调整的唯一方法。 而且随着浏览器调整的进行，这完全是面向未来的-如果Firefox修复其实现并应用正确的行高，则它会像其他浏览器一样出现。

具有讽刺意味的是，当Firefox是唯一会出错的浏览器时，我们应该修复除Firefox外的所有浏览器！ 但这就是我们行业的运作方式– Firefox，就像您的小姐一样，“永远是对的”。

缩图： Thoth

From: https://www.sitepoint.com/a-simple-css-drop-cap/