Un simple CSS lettrines - SitePoint
Vous ne pouvez pas avoir manqué de remarquer l'effet lettrine que nous utilisons dans la nouvelle conception de blogs, ainsi que la uppercasing première ligne que la plupart des navigateurs affichent (sauf Safari, pour des raisons que je vais vous expliquer dans un instant).
Il y a assez peu de méthodes aki pour la mise en œuvre cet effet, mais les plus propres et les plus maintenable est pur CSS. en utilisant la: première lettre et pseudo-classes de première ligne.
Voici le CSS qui fait se produire:
Mais ce n'est pas aussi largement pris en charge; les sélecteurs que nous utilisons dire que nous obtenir un soutien pour IE8, que nous ne le serait pas.
Pour la première ligne uppercasing malheureusement nous ne recevons pas de soutien pour Safari. Ce n'est pas à cause des sélecteurs - il prend en charge tous les exemples présentés ici, et ne s'applique d'autres propriétés dans ces règles - il ne vient pas appliquer le texte de transformation. Ceci est quelque chose que j'ai remarqué dans un certain nombre de situations différentes, où Safari ne s'applique pas la transformation, sans raison apparente aisément-. Je l'ai vu ne parviennent pas à appliquer à un élément dans lequel il a travaillé pendant un correspondant
Ce que vous voyez là-bas, de gauche à droite, est Firefox, Opera et Safari. Et en fait, il est Firefox qui est rendu que de manière incorrecte. tandis que Opera et Safari obtiennent droit - Firefox applique toujours le de paragraphe parent hauteur de ligne à la première lettre, en ignorant sa taille de police très grande, alors que les autres navigateurs appliquent correctement une hauteur de ligne qui correspond à la police la taille de la lettre .
Ainsi, nous pouvons tirer profit de la différence de pair le résultat entre les navigateurs - réduisant la hauteur de ligne progressivement, ce qui ne fait aucune différence pour Firefox, jusqu'à ce que nous obtenons un résultat similaire dans Opera et Safari (et IE8):
Ce n'est pas la première fois que je l'ai vu ce comportement de rendu dans Firefox. Et puisque nous n'avons pas hacks CSS qui ne peut concerner que Firefox, les différences de ce genre sont vraiment la seule façon que nous pouvons appliquer quelques réglages de votre navigateur. Et comme tweaks navigateur aller, celui-ci est tout à fait à l'épreuve - si Firefox fixe toujours sa mise en œuvre et applique la hauteur de ligne correcte, il viendra-out comme les autres, en premier lieu.
Il est ironique vraiment, que nous finissons par fixer tous les navigateurs sauf Firefox, lorsque Firefox est le seul navigateur qui se trompe! Mais c'est à quel point notre industrie fonctionne - Firefox, comme votre missus, est « toujours raison ».