Un simple CSS Drop Cap

Vous ne pouvez pas avoir échoué à remarquer l'effet Drop Cap que nous utilisons dans la nouvelle conception de blogs, ainsi que la première ligne que la plupart des navigateurs affichent (sauf Safari, pour des raisons que je vais expliquer dans un instant).

Il existe pas mal de méthodes de piratage pour implémenter cet effet, mais le plus propre et le plus maintenable est Pure CSS , en utilisant: la première lettre et les pseudo-classes de première ligne.

Cette approche ne signifie pas de balisage supplémentaire, pas d'images et pas besoin de connaître le contenu - quelle que soit la première lettre et la première ligne, ils auront l'effet appliqué.

Voici le CSS qui le fait se produire:

#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;
}

Vous remarquerez comment deux sélecteurs différents tentent d'appliquer l'effet, au premier paragraphe à l'intérieur de la zone de contenu. Il fallait être suffisamment flexible pour permettre la présence ou le manque, d'une ad immédiatement avant le paragraphe, marqué comme

. Donc, idéalement, j'aurais utilisé: premier de type, qui sélectionne le premier élément d'un type spécifié dans son contexte parent:

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

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

Mais ce n'est pas aussi largement soutenu; Les sélecteurs que nous utilisons signifient que nous obtenons un support pour IE8 que nous ne le ferions pas autrement.

Pour la première ligne, nous n'obtenons malheureusement pas le soutien de Safari. Ce n'est pas à cause des sélecteurs - il prend en charge tous les exemples indiqués ici et applique d'autres propriétés dans ces règles - elle n'applique tout simplement pas la transformation de texte. C'est quelque chose que j'ai remarqué dans un certain nombre de situations différentes, où Safari n'applique pas la transformée, pour aucune raison facile. Je l'ai vu échouer à s'appliquer à un élément où il a fonctionné pour un correspondant, et ici nous voyons qu'il ne s'applique pas à la première ligne du paragraphe même si cela fonctionnerait s'il était appliqué à l'ensemble du paragraphe! Allez figurer.

Pour la capitaine lui-même, vous pouvez voir qu'il est assez simple à implémenter. La chose notable dans cette règle est la combinaison de marge et de hauteur de ligne qui met la lettre en position. Si nous omettons ces deux propriétés, nous obtenons ceci:

La plongeon avant la hauteur de ligne est appliquée.

Ce que vous voyez là-bas, de gauche à droite, c'est Firefox, l'opéra et le safari. Et en fait, c'est Firefox qui rend cela incorrectement, tandis que l'opéra et le safari font les choses correctement - Firefox applique toujours la hauteur de la ligne du paragraphe parent à la première lettre, ignorant sa taille de police très lancier, tandis que les autres navigateurs appliquent correctement une hauteur de ligne qui correspond à la taille de la mort de la lettre.

Nous pouvons donc profiter de la différence pour égaliser le résultat entre les navigateurs - réduisant progressivement la hauteur de ligne, ce qui ne fait aucune différence pour Firefox, jusqu'à ce que nous obtenions un résultat similaire dans l'opéra et le safari (et IE8 ):

La capo-goutte après la hauteur de ligne est appliquée.

Ensuite, c'est simplement un cas d'ajout de marge jusqu'à ce que la position verticale soit correcte.

Ce n'est pas la première fois que je vois ce comportement de rendu dans Firefox. Et puisque nous n'avons pas de pirates CSS qui ne peuvent s'appliquer qu'à Firefox, des différences comme celle-ci sont vraiment la seule façon dont nous pouvons appliquer des ajustements du navigateur. Et au fur et à mesure que les ajustements du navigateur disparaissent, celui-ci est entièrement à l'épreuve des futurs - si Firefox corrige jamais sa mise en œuvre et applique la bonne hauteur de ligne, elle sortira comme les autres en premier lieu.

C'est vraiment ironique que nous devrions finir par réparer chaque navigateur sauf Firefox, lorsque Firefox est le seul navigateur qui se trompe! Mais c'est ainsi que notre industrie fonctionne - Firefox, comme votre missus, est «toujours juste».

Crédit miniature: Thoth

Les questions fréquemment posées (FAQ) sur CSS Drop Cap

Qu'est-ce qu'un capuchon de dépôt CSS et pourquoi est-il utilisé?

Un capuchon de chute CSS est un style typographique où la première lettre d'un paragraphe est plus grande que le reste et tombe pour s'étendre sur plusieurs lignes. Il est utilisé pour attirer l'attention sur le début d'une pièce, ce qui le rend plus attrayant visuellement et plus facile à lire. Ce style est souvent vu dans les livres, les magazines et les sites Web pour améliorer l'expérience utilisateur et l'engagement.

Comment puis-je créer un capuchon de dépôt CSS?

La création d'un capuchon de dépôt CSS implique l'utilisation du CSS Pseudo-Element :: First-Letter. Ce pseudo-élément cible la première lettre d'un élément de niveau bloc. Vous pouvez ensuite appliquer des styles tels que la taille de la police, la hauteur de ligne et flotter pour créer l'effet de capuchon de dépôt.

Puis-je personnaliser l'apparence de mon capuchon de dépôt CSS?

Oui, vous pouvez personnaliser l'apparence de votre capuchon de dépôt CSS. Vous pouvez modifier la police, la couleur, la taille et même ajouter un fond ou une bordure. Cela vous permet de créer un design unique et visuellement attrayant qui correspond au style et à l'image de marque de votre site Web.

Y a-t-il des problèmes de compatibilité du navigateur avec CSS Drop Cap?

Le pseudo-élément CSS :: Pseudo-Element est largement soutenu par tous les navigateurs modernes. Cependant, il peut y avoir des incohérences dans la façon dont les différents navigateurs rendent le capuchon de chute, en particulier en ce qui concerne l'alignement vertical et le rembourrage. C'est toujours une bonne idée de tester votre conception dans plusieurs navigateurs pour vous assurer qu'il semble aussi prévu.

Puis-je utiliser le capuchon de dépôt CSS avec n'importe quel élément texte?

Le capuchon de dépôt CSS peut être appliqué à n'importe quel élément texte au niveau de bloc, tels que des paragraphes, des titres et des div. Cependant, cela peut ne pas fonctionner comme prévu avec des éléments ou des éléments en ligne avec une valeur d'affichage de la ligne.

Pourquoi mon capuchon de chute CSS ne fonctionne-t-il pas?

Si votre capuchon de dépôt CSS ne fonctionne pas, il pourrait y avoir plusieurs raisons. Les problèmes les plus courants sont la syntaxe CSS incorrecte, l'application du style à un élément en ligne ou des problèmes de compatibilité du navigateur. Assurez-vous que votre CSS est correct, l'élément est un élément au niveau du bloc et que votre navigateur prend en charge le pseudo-élément pseudo-élément.

de la première lettre. Cela garantit que votre capuchon de dépôt semble bon sur tous les appareils, des ordinateurs de bureau aux téléphones mobiles.

Puis-je animer mon capuchon de dépôt CSS?

Oui, vous pouvez animer votre capuchon de dépôt CSS à l'aide d'animations ou de transitions CSS. Vous pouvez créer des effets tels que fondu, rebond ou rotation pour rendre votre capuchon de dépôt plus dynamique et engageant.

Comment puis-je ajouter un arrière-plan à mon capuchon de dépôt CSS?

Vous pouvez ajouter un fond à votre capuchon CSS en utilisant la propriété d'arrière-plan dans votre CSS. Vous pouvez spécifier une couleur, une image ou un dégradé comme arrière-plan. Vous pouvez également ajuster la taille et la position de l'arrière-plan pour s'adapter à votre conception.

Puis-je utiliser CSS Drop Cap avec des polices Web?

Oui, vous pouvez utiliser CSS Drop Cap avec des polices Web. Vous pouvez spécifier la famille de police dans votre CSS pour utiliser une police personnalisée pour votre capuchon de dépôt. Cela vous permet de créer un design unique et personnalisé qui correspond au style et à la marque de votre site Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!