7 propriétés CSS dont vous n'avez jamais entendu parler (et comment les utiliser)

Même si vous êtes un concepteur de sites Web expert, il existe de nombreuses propriétés CSS obscures que vous n'aurez jamais utilisées. En fait, avec des centaines de propriétés soutenues, il y a des parties de CSS que vous n'apprenez probablement jamais. Certains méritent d'être connus malgré le fait d'être rare.

Grâce au rapport d'état de la plate-forme de Google, vous pouvez savoir quelles propriétés sont les moins utilisées et peut-être en savoir plus sur une nouvelle propriété puissante pendant que vous y êtes. J'ai retiré certains des plus intéressants. Certaines de ces propriétés CSS sont expérimentales, spécifiques au navigateur ou non largement mises en œuvre. Mais toutes les propriétés présentées ici sont bien soutenues par les navigateurs actuels; Ils sont rarement utilisés.

1

cellules vides

Cette propriété est spécifique aux tables, et vous pouvez l'utiliser en conjonction avec la bordure de la frontière: séparé. Il contrôle si les cellules sans contenu visible montrent leur arrière-plan et leurs frontières.

Voici un exemple de table, avec une cellule vide et une autre qui couvre la cellule en dessous:

        <table>
    <tr>
        <td>Applestd>
        <td>4td>
    tr>
    <tr>
        <td>Grapestd>
        <td>td>
    tr>
    <tr>
        <td rowspan="2">Bananastd>
        <td>4td>
    tr>
    <tr>
        <td>9td>
    tr>
table>

    

Parce que la cellule vide n'a aucun contenu, il peut être contrôlé avec le cellules vides propriété:

        td {
    empty-cells: hide;
}

    

Maintenant, toutes les cellules de table sans contenu visible cesseront d'afficher une couleur ou une bordure d'arrière-plan:

Cet effet peut être particulièrement utile avec des tables plus grandes, contribuant à identifier clairement les données manquantes ou inhabituelles. Notez qu'un tableau avec les frontières qui s'effondrera continuera à afficher à la fois les bordures et l'arrière-plan, même si les cellules vides sont cachées à l'aide de cette propriété.

2

Position de texte-Underline

Plus de quatre sites Web sur cinq utilisent la propriété textuelle-décoration, souvent pour contrôler la façon dont les liens sont soulignés. Mais la valeur soulignée de cette propriété peut être accompagnée d'une propriété moins utile, Position de texte-Underline:

        a {
    text-decoration: underline;
    text-underline-position: under;
}
    

Avec une valeur «sous», le soulignement va pousser de manière à ce qu'il ne se croise pas avec les descendants dans des lettres comme J et G. Cela peut améliorer la lisibilité, en particulier avec des paramètres de hauteur de ligne plus courts.

Avant cette propriété, une solution de contournement commune était d'imiter le soulignement avec une bordure inférieure. Cette approche a cependant des effets secondaires indésirables et peut être gênant à gérer, il est donc chanceux que vous n'ayez plus besoin d'y recourir.

3

colonne

Les colonnes sont une propriété CSS assez peu utilisée, avec un peu moins de 3% de toutes les pages Web. Longré imité à l'aide de solutions de contournement comme l'affichage: le flotteur, les colonnes ont également souffert d'incohérences de croisement et d'un manque de compréhension claire; Ils ne sont pas pour la mise en page générale, les gens!

Cependant, lorsqu'il est utilisé pour recréer des colonnes traditionnelles de style journal, cette propriété peut ajouter un intérêt aux conceptions de texte et améliorer la lisibilité. Ils sont particulièrement utiles lorsque vous souhaitez utiliser toute la largeur des écrans plus grands, tels que ceux utilisés pour les écrans de bureau.

Le colonne La propriété répond à la nécessité de se décomposer de la disposition des colonnes au milieu d'un bloc, provoquant un élément sur les colonnes, les ignorant efficacement:

Dans cet exemple, l'étendue est simple:

        h1, h2 { column-span: all }

    

Cette propriété est simple, avec seulement deux valeurs significatives: aucune (la valeur par défaut) ou toutes. La valeur toutes indique qu'un élément doit ignorer les colonnes et s'étirer sur tout ce qui est présent. Contrairement à l'attribut HTML similaire pour les cellules de table, ColSpan, il n'y a pas de support pour une valeur numérique pour s'étendre sur quelques colonnes; C'est tout ou rien.

Curieusement, la propriété Colonne-Gap est utilisée par plus de 30% des pages Web dix fois le nombre qui utilise la propriété Colonnes. En effet, la colonne a élargi (TK) pour s'appliquer aux dispositions au-delà des colonnes, comme Flexbox et Grid.

4

grille

Le grille La propriété est un cas intéressant. Les dispositions de grille sont désormais très populaires en général, comme en témoignement par l'utilisation de Grid-Template-Colonnes dans 42% des pages. Mais le sténographie simple de la grille est profondément impopulaire, utilisé par moins d'un demi-pour cent de pages.

C'est peut-être parce que Grid est une sténographie compliquée, combinant toutes les propriétés de la grille en une seule. Voici quelques exemples de déclarations que cette propriété accepte:

        grid: "a" 100px "b" 1fr;
grid: minmax(400px, min-content) / repeat(auto-fill, 50px);
grid: 30% / auto-flow dense;
grid: auto-flow dense 40% / (line1) minmax(20em, max-content);

    

Il n'est pas étonnant que les concepteurs favorisent les propriétés individuelles comme les colonnes de saignement grille (42%), la colonne de grille (23%) et la grille (19%). Mais, comme toutes les propriétés raccourcis, la grille peut gagner du temps et de la complexité et peut rendre votre CSS plus maintenable. Soyez prudent, cependant: la surutilisation pourrait également être déroutante, alors envisagez d'utiliser des propriétés de forme longue comme la grille-flux de la grille pour clarification, le cas échéant.

5

lettre initiale

Un capuchon de dépôt (Capital abandonné) fait référence à un style spécifique pour la première lettre d'un paragraphe ou d'un bloc de texte. Vous pouvez voir ce style dans des livres ou des magazines, où la lettre initiale est beaucoup plus grande, plus lourde et est souvent livrée avec une décoration ornée ou d'autres style.

Cet effet était possible, mais uniquement en utilisant la propriété Float avec quelques ajustements minutieux aux styles connexes. Le lettre initiale La propriété simplifie cela, avec une valeur simple indiquant l'échelle de cette lettre:

        p {
    
    initial-letter: 3;
}

    

Vous pouvez également fournir une deuxième valeur qui détermine la base de référence de la lettre coiffée:

        p {
    
    initial-letter: 2 1;
}

    

En utilisant ces valeurs, vous pouvez contrôler la taille et la position verticale des lettres coiffées:

6

texte-imasse

Le texte-imasse La propriété n'a rien à voir avec l'étiquette EM (emphase) ou la valeur italique du style de police qui peut être utilisée pour imiter l'apparence du texte souligné. Au lieu de cela, c'est une façon de marquer du texte pour le souligner, un peu comme le souligner. La principale différence est que le texte-inscripteur dessine un caractère spécifique au-dessus ou en dessous des caractères individuels.

p {
text-emphasis: filled double-circle red;
}
.info {
text-emphasis: "!";
}

Vous pouvez utiliser la propriété de position de la position du texte pour afficher les marques sur ou sous Le texte en mode d'écriture horizontale. Mais c'est la propriété de style text-imphasis qui devient vraiment intéressant (le texte-inscripteur est un sténographie pour les deux). Vous pouvez utiliser une valeur comme «triangle» ou «cercle» pour utiliser un symbole générique. Vous pouvez également utiliser n'importe quel caractère Unicode, dans des marques de devis, y compris les emojis:

Un «sésame» est une marque typographique utilisée dans les langues d'Asie de l'Est pour l'accent mis. Étant donné que l'emphasie du texte prend en charge ce personnage, votre CSS peut désormais inclure légitimement la valeur «Open Sesame».

7

style Text-wrap

Le style Text-wrap La propriété est la plus récente de cette liste, avec le support dans les derniers navigateurs atterrissant en octobre 2024. Lorsque le texte à l'intérieur d'un élément s'enroule, cette propriété laisse entendre au navigateur quelle devrait être sa priorité.

Les deux valeurs les plus significatives sont joli et équilibre. Le premier suggère que le navigateur devrait optimiser la mise en page sur la vitesse. Il devrait inclure des améliorations telles que le maintien du nombre d'éléments orphelins au minimum. En attendant, l'équilibre devrait garantir que le nombre de caractères sur chaque ligne est aussi proche que possible.

Puisqu'il est instructif et que le soutien est encore nouveau, vous ne remarquez peut-être pas une énorme différence lorsque vous utilisez cette propriété. La meilleure façon de l'essayer est d'expérimenter sur les pages existantes et de voir à quoi ressemblent les différents effets. Quoi qu'il en soit, cependant, il est totalement sûr à utiliser car l'effet est subtil, avec un défaut raisonnable.