Can I use... Support tables for HTML5, CSS3, etc

/#search=background-clip

  • Ah, une #CSS que je ne connaissais pas : appliquer une image de fond au texte lui-même. Je suis tombé dessus sur les nouvelles pages de chez Apple :
    https://i.imgur.com/lghM5pK.jpg

    On voit que le paragraphe de texte a une texture orangée. Celle-ci est attribuée avec un très classique background :

    background-image: url(http://zinc.mondediplo.net/"/v/iphone-xs/a/images/overview/copy_texture_1_large.jpg");

    L’astuce pour que ce fond ne s’applique aux caractères du texte, c’est cette CSS :
    -webkit-background-clip: text;
    color: transparent !important;

    La CSS #background-clip indique que l’image de fond devra s’appliquer uniquement au texte, et la seconde ligne force la couleur du texte à transparent, de façon à laisser apparaître l’image de fond.

    D’après CanIUse :
    https://caniuse.com/#search=background-clip

    Firefox, Chrome and Safari support the unofficial -webkit-background-clip: text (only with prefix)

    Du coup, c’est plutôt assez largement répandu.

    Le hic, malheureusement, c’est que ça se dégrade particulièrement mal quand background-clip n’est pas interprété :
    https://i.imgur.com/mHOEbFi.jpg
    Je ne vois pas d’autre solution qu’un test Javascript, du coup, beurk (à moins que quelqu’un ait une meilleure solution).

    https://seenthis.net/messages/721697 via ARNO*