Palette-mix() - Fonction CSS

palette-mix()

Résumé des caractéristiques de la fonction palette-mix()

Description rapide
Établit le mélange de deux palettes de couleurs issus de deux polices de caractères différentes.
Statut
Problèmes de compatibilité ⚠
Module W3C
Module CSS - Polices de caractères

Schéma syntaxique de palette-mix().

palette-mix() - Syntax DiagramSyntax diagram of the palette-mix() CSS function. Merge two color palettes (in fonts) in colorspace , in colorspace , palette palette % % palette palette % %palette-mix()palette-mix()
Schéma syntaxique de la fonction palette-mix().
Cliquez sur les termes du diagram pour plus de précision.
Télécharger le schéma en SVG.

Description de la fonction palette-mix().

⚠
La fonction palette-mix() n'est pas encore reconnue par tous les navigateurs. Firefox   en particulier.

Les polices colorées peuvent comporter plusieurs palettes de couleurs. La directive @font-palette-values attribue un identifiant à chacune des palettes à utiliser sur la page, et la propriété font-palette les utilise le moment venu.

La fonction palette-mix() effectue le mélange de deux palettes de couleurs. Les deux palettes doivent avoir été définies par la directive @font-palette-values.


Reportez-vous également aux pages sur les termes suivants :

Définit une palette de couleurs applicable ensuite à une police de caractères.
Définit la palette de couleurs utilisable pour les polices de caractères colorées.

La valeur palette-mix() peut être utilisée avec les propriétés suivantes :

  • font-palette : Définit la palette de couleurs utilisable pour les polices de caractères colorées.

Syntaxes de la fonction palette-mix().

  • font-palette: palette-mix(in lch, palette1, palette2);

    Dans cette syntaxe, cs est un espace de couleurs dans lequel doit se faire le mélange. Cela peut être srgb, srgb-linear, a98-rgb, etc. La liste complète est consultable sur la page de la fonction color().

    Dans l'exemple ci-dessous, --palette1 et --palette2 sont deux propriétés personnalisées (encore appelées variables) définies avec la directive @font-palette-values.

    ⚠ Cet exemple ne fonctionne pas sur Firefox  .

    Palette 1
    font-palette:--palette1;
    Résultat
    font-palette:palette-mix(...);
    Palette 2
    font-palette:--palette2;
  • font-palette: palette-mix(in lch, palette1 25%, palette2 50%);

    Il est possible d'indiquer des pourcentages après les noms de palette, compris entre 0% et 100%. Lorsqu'il sont omis, ils sont pris tous les deux égaux à 50%.
    Si un seul est précisé, l'autre est calculé pour que la somme des deux fasse 100%.
    Si les deux pourcentages sont indiqués et que leur somme est supérieure à 100%, ils sont tous les deux diminués proportionnellement pour atteindre 100%. Si leur somme est inférieure à 100%, la mélange est fait mais le résultat est une police semi-transparente.

    Si les deux valeurs de pourcentages sont à 0%, la fonction est invalide.

    Palette 1
    font-palette:--palette1;
    Résultat
    font-palette:palette-mix(...);
    Palette 2
    font-palette:--palette2;

Animation avec la fonction palette-mix().

Les animations avec la fonction palette-mix()peuvent donner de jolis effet sur les polices de caractères colorées.

⚠ L'animation ne fonctionne pas sur Firefox   puisque ce navigateur ne reconnaît pas la fonction.

Animation

Simulateur avec la fonction palette-mix().

Le simulateur vous permet de tester tous les paramètres de la fonction palette-mix(). Il y a trois palettes définies. Le fond texturé vous aide à visualiser les polices semi-transparentes.

font-palette :
Mélange

Support de la fonction palette-mix().

La fonction palette-mix() est reconnue par certains grands navigateurs comme Chrome   ou Edge  , mais pas encore par Firefox   ni Safari  .

Colonne 1
Support de la fonction palette-mix() pour mixer les couleurs de deux polices différentes.
1
Fonction
palette-mix()
Estimation de la prise en charge globale.
72%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Opéra

Firefox pour Androïd

Chrome

Firefox

Edge

Safari

Chrome pour Androïd

Safari sur IOS

Androïd Brower

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse

Historique de la fonction palette-mix().

  • Module CSS - Polices de caractères - Niveau 4

    Ce niveau 4 de la spécification sur les polices de caractères reprend ce qui est défini dans le niveau 3. Il ajoute la possibilité de définir ce qui se passe quand une police est longue à charger ou absente. Il ajoute également le support des polices colorées et précise de nombreux points encore mal définis dans le niveau 3.

    Concernant palette-mix(). Première définition de la fonction palette-mix() pour obtenir des couleurs à partir de deux palettes issues d'une police de caractères.
    WD
    11 Juillet 2017
    Document de travail.
    CR
    PR
    REC

Voir aussi, au sujet des polices de caractères.

La fonction palette-mix() est issue du module module CSS - Polices de caractères qui décrit tous les termes concernant les polices de caractères. C'est à dire, entre autres, les définition suivantes :

Propriétés :

font
Raccourci pour définir la plupart des propriétés concernant les polices de caractères.
✗
font-effect
Permet d'appliquer quelques effets au texte : relief, bordure...
font-family
Sélectionne une police de caractères parmi celles qui sont disponibles ou celles qui sont téléchargées.
⚠
font-feature-settings
Permet d'exploiter les fonctionnalités spécifiques des polices de caractères OTF, WOFF, etc.
font-kerning
Ajustement du crénage entre caractères.
⚠
font-language-override
Définit le langage à prendre en compte lors du choix des caractères.
⚠
font-optical-sizing
Optimise la forme des caractères en fonction de leur taille.
font-palette
Définit la palette de couleurs utilisable pour les polices de caractères colorées.
font-size
Ajuste la taille des caractères, ce qui impacte aussi les units comme em, ex, etc.
font-size-adjust
Définition du coefficient d'aspect de la police.
✗
font-smooth
Définit si un algorithme de lissage doit être utilisé et lequel.
font-stretch
Modifie l'étirement ou la compression des caractères.
font-style
Sélectionne les styles italique ou oblique de la police de caractères.
font-synthesis
Autorise ou non le calcul des styles manquants dans la police de caractères.
⚠
font-synthesis-position
Autorise ou non le navigateur à synthétiser les caractères en exposant ou en indice.
⚠
font-synthesis-small-caps
Autorise ou non le navigateur à calculer le glyphes des caractères en petites capitales.
⚠
font-synthesis-style
Définit si le navigateur est autorisé à synthétiser les formes italiques des caractères.
⚠
font-synthesis-weight
Définit si le navigateur peut calculer ou non le glyphe des caractères gras.
font-variant
Raccourci permettant de définir les attributs typographiques évolués : ligatures, substitution de caractères, etc.
font-variant-alternates
Définit la substitution de caractères (polices OTF, WOFF).
font-variant-caps
Applique une capitalisation des caractères.
font-variant-east-asian
Typographie spécifique aux caractères chinois ou japonais.
⚠
font-variant-emoji
Choisit entre une présentation en emoji ou en texte.
font-variant-ligatures
Active ou désactive la ligature des caractères.
font-variant-numeric
Définit le mode d'affichage des nombres évolués : fractions, numéros, etc.
font-variant-position
Mise en exposant ou en indice des caractères.
⚠
font-variation-settings
Donne accès aux possibilités stylistiques des polices OTF.
font-weight
Sélectionne une graisse pour les caractères.
font-width
Synonyme de font-stretch (largeur/élargissement des caractères).

Fonctions :

Palette-mix()
Établit le mélange de deux palettes de couleurs issus de deux polices de caractères différentes.

Directives :

@font-face
Définit tous les paramètres d'une police de caractères téléchargeable.
⚠
@font-feature-values
Définit les variantes typographiques à utiliser.
@font-palette-values
Définit une palette de couleurs applicable ensuite à une police de caractères.

Descripteurs :

ascent-override
Descripteur pour @font-face. Définit la hauteur des caractères au dessus de la ligne de base.
descent-override
Descripteur pour @font-face. Définit la hauteur des caractères au dessous de la ligne de base.
⚠
font-display
Descripteur pour @font-face. Détermine le comportement du navigateur face aux polices de caractères longues à charger.
line-gap-override
Descripteur pour @font-face. Définit l'interligne de la police.
src
Définit la source d'un fichier de police de caractères à télécharger, ou d'une image à afficher.
unicode-range
Descripteur pour @font-face. Définit la plage des codes de caractères à télécharger dans une police.