您不会没有注意到我们在新博客设计中使用的首字母缩略词效果,以及大多数浏览器显示的第一行大写字母(除了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