Débuter avec les fonctions mathématiques CSS niveau 4

Les notations fonctionnelles font partie du module Valeurs et unités CSS, qui héberge également des fonctions mathématiques utiles telles que calc (), et à partir du niveau 4 min () et max (). Ces fonctions puissantes ouvrent des portes incroyables aux auteurs de CSS nécessitant des capacités de logique mathématique au sein de CSS. Dans cet article, nous allons discuter calc (), min () et max () et comment tous les trois peuvent être utiles dans votre travail en ce moment. Commençons!

Qu'est-ce que c'est que les notations fonctionnelles?

Les notations fonctionnelles sont l’une des neuf sections parent (la huitième pour être exact) du module Valeurs et unités CSS du W3C. Depuis le brouillon de l'éditeur de niveau 4, les notations fonctionnelles contiennent désormais d'autres sous-sections telles que basculer() qui permet de basculer entre les valeurs et d'attribuer des références grâce à l'utilisation de attr (). Il existe également une autre sous-section intéressante appelée «Expressions mathématiques» qui englobe nos fonctions mathématiques conviviales. calc (), min () et max (). 

Passons maintenant à la définition du W3C pour nous aider à comprendre ce que sont les notations fonctionnelles:

«Une notation fonctionnelle est un type de valeur de composant pouvant représenter des types plus complexes ou appeler un traitement spécial. La syntaxe commence par le nom de la fonction immédiatement suivie d'une parenthèse gauche, suivie du ou des arguments de la notation suivie d'une parenthèse droite. ”

En termes simples, ils disent que c'est un «nom de fonction», tel que calc, suivi de l'ouverture ( et fermeture ) parenthèses. Mais qu'est-ce qui se passe entre eux?

Introduction aux expressions mathématiques

Comme mentionné précédemment, «expressions mathématiques» est une sous-section des «notations fonctionnelles», mais que sont-elles et que font-elles? De nouveau, passons au W3C, où ils sont définis comme suit:

“Les fonctions mathématiques, calc (), min () et max (), permettent d'utiliser des expressions mathématiques avec addition (+), soustraction (-), multiplication (*) et division (/).”

Cela signifie calc (), min () et max () sont des «fonctions mathématiques» qui permettent aux «expressions» entre parenthèses de «calculer des valeurs». Ok, c'est clair maintenant. Le terme «expressions» n’est qu’une manière sophistiquée de dire «la logique mathématique est totalement autorisée entre parenthèses».

Introduit au niveau 4, une définition récemment mise à jour complète ce que nous savons jusqu'à présent:

«Les composants d’une fonction mathématique peuvent être des valeurs littérales, d’autres fonctions mathématiques ou d’autres expressions, telles que attr (), dont le résultat est un type d’argument valide (comme ). " 

Pour clarifier davantage, les «autres fonctions mathématiques» mentionnées ici sont: calc (), min () et max (), mais ils indiquent également que ces fonctions peuvent être imbriquées les unes dans les autres. Tu pourrais écrire calc (min ()), min (calc ()), calc (max (min ())), calc (min (attr ())) etc. Cependant, ma suggestion est de faire de votre mieux et d'éviter le vortex de nidification, même avec la possibilité de le faire, comme le suggère la spécification.

Maintenant, disons bonjour à deux fonctions mathématiques exceptionnelles qui ont presque perdu leur chance de serrer la main du groupe de travail CSS..

Nous saluons le retour min () et max ()

Les fonctions min () et max () Deux fonctions mathématiques font leur marque, mais seulement après avoir été presque retirées du brouillon Valeurs et unités de niveau 4 de l'éditeur. Grâce à Lea Verou, le vent du changement a forcé son chemin et je ne pouvais pas être plus heureux.

"Peut-être que maintenant que Values ​​3 est passé à CR, il est temps de reconsidérer l'ajout min () et max () retour aux valeurs 4?

Les auteurs font des hacks extrêmement étranges avec calc () les imiter taille de police et hauteur de la ligne, qu'ils appellent des "verrous CSS". Si vous google Serrures CSS vous verrez à quel point ces hacks se répandent, indiquant un besoin clair de l'auteur.

De plus, à mesure que les variables CSS sont de plus en plus utilisées, la nécessité de min () et max () deviendra encore plus grand. Je me souviens que certains des problèmes qui nous ont amenés à les abandonner il y a 6 ans peuvent maintenant être résolus avec le invalide à l'heure de la valeur calculée concept introduit par les variables. »- Lea Verou

Depuis la suggestion de Lea sur GitHub, min () et max () ont été officiellement réintégrés dans le brouillon de l'éditeur de valeurs et d'unités CSS de niveau 4, y compris une adoption rapide par WebKit. Les développeurs peuvent personnellement expérimenter et explorer en utilisant WebKit Nightly (à partir du 24/10/17). Voici le WebKit unique destiné aux curieux où le soutien était accordé comme par magie à min () et max ().

Un coup d'oeil sur serrer()

Un autre morceau de potins intrigant dans ce même fil de GitHub commencé par Lea Verou était le commentaire où Tab Atkins suggère un vrai serrer() une fonction. serrer() serait littéralement "pincer" une valeur entre les valeurs limites.

“… Je suis d'accord que serrer(), bien que techniquement superflu, il est souvent utile qu'il mérite d'exister. "

Oh mon! Ce serait tout à fait l'ajout d'expressions mathématiques. Une fonction telle que serrer() est une victoire définitive pour les besoins réactifs d’aujourd’hui et serait certainement un ami bienvenu pour la langue.

pince (minN, midN, maxN)

Les discussions actuelles tournent autour de ce type de syntaxe ci-dessus et il se trouve que je suis en accord avec la suggestion; cela a du sens et se lit de manière logique. Je me demande simplement ce qu'il adviendra de l'utilisation de min () et max () si serrer() fait effectivement une apparition à l'avenir.

Avec nos discussions sur les refroidisseurs d’eau, concentrons-nous sur les fonctions mathématiques dont nous sommes venus discuter ici; calc (), min () et max ().

Maintenant rencontrer calc ()

C’est l’une de mes fonctions mathématiques préférées pour aider les CSS et faire toutes sortes de magie. La syntaxe n'est pas trop approximative non plus, une fois que vous avez compris, et le support est stellaire.

.my-element width: calc (50% - 10rem); 

Dans cet exemple ci-dessus, nous avons le nom de la fonction (calc) suivies de nos parenthèses contenant des «expressions», ou autrement dit… la logique mathématique.

"La fonction calc () permet d'utiliser des expressions mathématiques avec addition (+), soustraction (-), multiplication (*) et division (/) (/)." - W3C

Encore une fois, c’est chic de dire «tu peux faire les maths entre parenthèses».

En ce qui concerne les expressions, les auteurs peuvent transmettre des valeurs génériques telles que 50%, 2em, 40, et peut utiliser calc () partout où , , , , , , ou  les valeurs sont autorisées. Mes unités préférées à utiliser et à examiner à l’état sauvage sont les unités de viewport (vh,vw, vmin, vmax). Ce sont les valeurs de dimension d'écran particulièrement utiles pour la typographie et la mise en page, comme nous allons le voir..

calc () Dans la nature

L'exemple ci-dessus n'est qu'un moyen de gérer une typographie sensible. En utilisant une combinaison de requêtes multimédia, Sass, calc () et les unités de visualisation, Mike nous prouve à quel point une typographie réactive peut parfaitement s'adapter à des valeurs de pixels spécifiques.

Voici une autre démo de typographie à utiliser calc () et des unités de visualisation par Tim Brown. Cette démo a été utilisée pour son article sur les verrous CSS que je vous encourage à lire si vous vous souciez de la typographie..

Unités de visualisation et calc () peut également aider à créer certains de nos modèles de disposition les plus préférés. Dans la démo ci-dessus, calc () est utilisé pour soustraire la hauteur du pied de page de la hauteur de la fenêtre (vh). Une solution astucieuse de Chris Coyier pour notre vieil ami «The Sticky Footer» si souvent demandé. Cette démo fonctionne également très bien lorsqu'elle est combinée à des variables CSS.

Il y a certainement d'autres cas en ce qui concerne les applications et les états dynamiques dans cette démo de David Khourshid. David utilise calc () pour les arrière-plans, les valeurs de décalage, les transformations, les filtres, l'opacité et même la largeur. C’est également une excellente démo pour ceux qui souhaitent se plonger dans React avec les variables CSS.

Examinons maintenant deux fonctions mathématiques supplémentaires que vous apprécierez certainement, actuellement connues sous le nom de min () et max ().

min () et max (): Définir les contraintes

Comme mentionné précédemment, ces fonctions n'en sont encore qu'à leurs balbutiements. Les démonstrations présentant des cas d'utilisation sont donc sombres, mais ne vous laissez pas impressionner. Pour enquêter min () et max () vous devrez télécharger WebKit tous les soirs. Une fois téléchargé, vous êtes libre d'ouvrir Nightly (icône noire) et de vous mettre au travail..

min (expression, [expression]) max (expression, [expression])

Rappelez-vous quand nous avons appris quelles expressions étaient? C'était juste une façon élégante de dire «logique mathématique». Par exemple:

min (1 * 10vw, 2 / 50vw) max (1 * 10vw, 2 / 50vw)

Chaque expression est séparée par des virgules avec une expression supplémentaire qui suit. Nous pouvons également nous tourner vers la spécification qui énonce explicitement cette même règle:

"La valeur calculée d'une fonction min () ou max () est la liste d'expressions séparées par des virgules" - W3C

Au cas où vous auriez manqué cette partie très importante de l'explication, la spécification vient d'indiquer un liste d'expressions séparées par des virgules comme nous l'avons fait précédemment dans l'extrait de code.

"Une fonction min () ou max () représente le calcul le plus petit (le plus négatif) ou le plus grand (le plus positif), respectivement, séparé par des virgules." - W3C

Avez-vous attrapé tout ça? Ils ont juste dit le plus petit (le plus négatif) ou le plus grand (le plus positif). Le W3C vient de nous donner la permission d'écrire des nombres négatifs dans nos expressions.

Prenons ce temps maintenant pour voir comment min () et max () faire ses preuves dans une démonstration de travail; tiens tes chapeaux.

min () et max () Dans la vraie vie

Voici une démo qui présente quelques cas d'utilisation pour min () et max () en utilisant des composants largeur et taille de police. le largeur a une contrainte minimale et une contrainte maximale alors que notre composant taille de police est également bridé avec une valeur minimale et maximale. Rappelez-vous que cela ne fonctionnera que dans WebKit Nightly à partir de cette date; si vous souhaitez voir une animation de celui-ci en action, jetez un coup d'œil à ce GIF (trop lourd pour être intégré à la page).

Dans l'exemple ci-dessus, je commence les choses en contraignant le largeur et le faire en une seule ligne.

largeur: min (max (100px * 2, 70vw), 500px);

En utilisant l'approche ci-dessus, je suis en mesure d'inclure une contrainte moyenne par rapport à un minimum et à un maximum. Cette ligne de code indique au navigateur "Essayez de régler la largeur sur 70vw, mais ne la laissez pas passer à une résolution inférieure à 200px (100px * 2) ou supérieure à 500px. ” Il y a aussi une autre route que vous pouvez emprunter pour atteindre un résultat similaire.

min (max (minN, midN), maxN)

Pour expliquer plus en détail, cela équivaut à une valeur de contrainte minimale, moyenne et maximale. Nidification max () dans min () aide à coincer entre les contraintes souhaitées.

largeur minimale: 200px largeur maximale: 500px

Si on utilisait largeur min et largeur maximale nous arrivions à une destination équivalente que nous réalisions par le biais de min () et max (). Je suis curieux de savoir si des propriétés telles que largeur min deviendra obsolète en faveur de fonctions mathématiques telles que min () et max () Dans les années à venir.

En ce qui concerne taille de police J'utilise la même approche min / max pour créer une typographie réactive et verrouillable.

taille de police: min (max (1rem, 4vw), 2rem);

Je dis au navigateur “Essayez de définir la taille de la police sur 4vw, mais ne la laissez pas passer plus bas que 1rem ou plus haut que 2rem. ” Malheureusement, il n'y a pas d'équivalent tel que min-font-size et taille-police-max comme nous en avions pour la largeur, mais à partir des spécifications du module de polices CSS du niveau 4, cela pourrait devenir une réalité.

C'est certainement une nouvelle passionnante et les auteurs sont tout aussi enthousiastes à propos des valeurs contraignantes en CSS.

Avoir min () et max () signifie NO MORE “CSS Locks”! Vous pouvez créer une paire de chiffres en imbriquant min (max ()) ☛ font-size: min (max (30px, 10vw), 60px); pic.twitter.com/hMxAt0iu2K

- Tommy H🎃dgins (@innovati) 19 septembre 2017

Il suffit de chercher "CSS Locks"

Si vous utilisez un moteur de recherche pour traquer les verrous CSS, vous trouverez des tas d'articles et de démos. CodePen affiche également une variété de stylos sous une autre recherche CSS Locks. Pour ceux qui sont nouveaux à l'idée de CSS Locks, laissez-moi vous expliquer plus en détail.

La technique de verrouillage permet d’effectuer une transition en douceur entre deux valeurs, en fonction de la taille actuelle de la fenêtre. Tim Brown l'a surnommée "CSS Locks" dans son article "Typographie flexible avec des verrous CSS", mais cette technique a été introduite pour la première fois par Mike Riethmuller dans son article "Contrôle précis de la typographie réactive". 

Cela peut être utile lorsque vous utilisez calc () et des unités d'affichage pour les en-têtes et les copies de corps qui augmentent ou diminuent en fonction des dimensions de l'écran. Ce type de contrainte est ce que nous connaissons maintenant sous le nom de «serrures CSS»..

Il existe de nombreux articles sur les verrous CSS, voici donc quelques-uns de mes articles préférés à lire dans votre temps personnel.

• Typographie basée sur l'unité de visualisation par Zell Liew
  
• Le calcul des serrures CSS par Florens Verschelde
  
• CSS “locks” par Chris Coyier
  
• Typographie fluide de Geoff Graham
  
• Typographie fluide et sensible avec les unités vh et vw de Michael Riethmuller
• Typographie sensible aux fluides avec le dimensionnement des fluides en polyéthylène par Jake Wilson

Verrouillage avec EQCSS

Dans la démonstration ci-dessus de Tommy Hodgins, EQCSS est utilisé afin de bloquer taille de police avec JavaScript à la barre, tandis que CSS est à l’arrière. Je vous laisse décider vous-même de votre opinion sur le fait que JavaScript se mélange avec CSS.

Verrouillage avec des variables CSS et JavaScript

J'ai écrit un assistant JavaScript qui utilise des variables CSS et l'aide de JavaScript pour «verrouiller» la taille de la police des en-têtes, la copie du corps et la hauteur de ligne, car les dimensions de l'écran varient en fonction des événements de redimensionnement et de chargement de page.

Ces propriétés ciblent le «verrouillage» sur les valeurs définies, mais ce n'est pas quelque chose qui vient sans réserves. En matière de développement, chaque approche présente des avantages et des inconvénients. En raison des événements qui se produisent et de la modification des propriétés CSS, il est fort probable que vous rencontriez des problèmes de peinture et de mise en page lors du redimensionnement. Il est donc préférable d'utiliser avec parcimonie ou autrement. ne l'utilisez pas pour tout sur votre page.

Voici quelques conseils en matière de style JS.

1. Chaque fois que vous utilisez JavaScript pour aider à appliquer des styles, cela sera plus lent que le CSS seul. Faire tout ce qui est possible en CSS.
2. Lorsque vous utilisez JavaScript pour appliquer des styles, les performances sont déterminées par la complexité des tests et par le nombre d'éléments de la page à tester. Essayez d'écrire vos styles de manière à limiter le nombre de tests effectués par JS afin de déterminer les styles à appliquer et essayez de limiter le nombre d'éléments de votre code HTML analysés ou testés par une feuille de style alimentée par JS..
3. Comprendre quels événements déclenchent des recalculs des styles. Vous voulez que les styles restent au courant des événements du navigateur, mais vous souhaitez également limiter le nombre d'écouteurs d'événements en cours d'exécution à un moment donné. C’est ici qu’il est vraiment important de limiter le nombre d’éléments auxquels ces tests s’appliquent. Si vous utilisez une bibliothèque d'interface utilisateur, il se peut que des événements et des rappels intégrés directement dans votre infrastructure vous permettent de déclencher des recalculs dans vos styles basés sur JS. Sachez quels écouteurs d'événement seront présents dans votre navigateur sur la page où les styles basés sur JS que vous écrivez seront exécutés et essayez de trouver des moyens de limiter le nombre d'auditeurs d'événement requis; limitez le nombre d'éléments que vous écoutez, insérez des écouteurs similaires dans des événements globaux, utilisez des événements spécifiques au framework pour une intégration plus étroite et envisagez d'utiliser de nouvelles API de navigateur telles que Resize Observer et Mutation Observer si elles peuvent vous aider..
   

Conclusion

Maintenant que vous avez eu un aperçu des fonctions mathématiques CSS, j'espère qu'elles vous inspireront ou vous convaincront de commencer à utiliser des propriétés stables et à expérimenter celles qui sont à la pointe de la technologie. Si vous utilisez calc () ou ont expérimenté min () et max () s'il vous plaît laissez-nous savoir dans les commentaires. Bonne codage!