Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Chroniqueur Actualités
    Avatar de Patrick Ruiz
    Homme Profil pro
    Rédacteur technique
    Inscrit en
    février 2017
    Messages
    699
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Cameroun

    Informations professionnelles :
    Activité : Rédacteur technique
    Secteur : Communication - Médias

    Informations forums :
    Inscription : février 2017
    Messages : 699
    Points : 24 857
    Points
    24 857

    Par défaut CSS s’enrichit du support des fonctions trigonométriques jusqu'ici accessibles via JavaScript

    CSS s’enrichit du support des fonctions trigonométriques jusqu'ici accessibles via JavaScript
    Après l’approbation du World Wide Web Consortium

    Le langage CSS utile pour la mise en forme et l'organisation de la façon dont les éléments de page apparaissent sur un site Web s'enrichit du support des fonctions de trigonométrie telles que sinus, cosinus, tangente, et autres ; c’est le résultat d’une décision que le groupe CSS du World Wide Web Consortium (W3C) a prise à la fin du mois dernier.

    Nom : trigonometry in css.png
Affichages : 11711
Taille : 17,8 Ko

    Les nouvelles fonctions approuvées et en voie de rejoindre le standard CSS sont : sinus – sin() ; cosinus – cos() ; tangente – tan() ; arccosinus – acos() ; arcsinus – asin() ; arctangente – atan() ; arctangente (de deux nombres x et y) – atan2() ; racine carrée – sqrt() ; racine carrée de la somme des carrés de ses arguments – hypot() ; puissance – pow().

    Ces fonctions viennent s'ajouter au support existant de CSS pour les fonctions mathématiques qui inclut déjà : calc() – pour le calcul des expressions de base ; min() – pour obtenir la plus petite valeur au sein d'une série ; max() – pour obtenir la plus grande valeur au sein d'une série de nombres ; clamp() – pour déterminer la valeur moyenne de nombres situés entre une limite inférieure et une limite supérieure.

    Le groupe CSS du World Wide Web Consortium a approuvé l'ajout de ces nouvelles fonctions mathématiques à la demande de plusieurs développeurs web qui ont demandé un moyen simple de contrôler les animations en utilisant la syntaxe CSS native au lieu de JavaScript. Par exemple, l’exercice de l’affichage d’un arbre comme celui de la figure qui suit nécessitait jusqu’à présent de s’appuyer sur le langage JavaScript pour les calculs d’angles.

    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    <ul class="tree">
    	<li>
    		border
    		<ul>
    			<li>border-width
    				<ul>
    					<li>border-top-width</li>
    					<li>border-right-width</li>
    					<li>border-bottom-width</li>
    					<li>border-left-width</li>
    				</ul>
    			</li>
    			<li>border-style
    				<ul>
    					<li>border-top-style</li>
    					<li>border-right-style</li>
    					<li>border-bottom-style</li>
    					<li>border-left-style</li>
    				</ul>
    			</li>
    			<li>border-color
    				<ul>
    					<li>border-top-color</li>
    					<li>border-right-color</li>
    					<li>border-bottom-color</li>
    					<li>border-left-color</li>
    				</ul>
    			</li>
    		</ul>
    	</li>
    </ul>

    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    /* Just setting the page vars */
    html {
    	--font-mono: Consolas, Monaco, 'Andale Mono', monospace;
     
    	--color-magenta: #f06;
    	--color-green: yellowgreen;
    	--color-aqua: hsl(191, 100%, 40%);
    	min-height: 100vh;
    }
     
    body {
    	margin: 0;
    	min-height: 100%;
    	display: flex;
    	flex-flow: column;
    	align-items: center;
    	justify-content: center;
    	padding: 2.5rem;
    	background: radial-gradient(transparent, rgba(0,0,0,.7)) hsl(200, 15%, 20%);
    	color: white;
    	font-size: 180%;
    }
     
    ul.tree {
    	font: bold 160%/1 var(--font-mono);
    	--dx: 5rem;
    }
     
    ul.tree, ul.tree ul {
    	margin: 0;
    	padding: 0;
    }
     
    	ul.tree > li {
    		margin: 0;
    	}
     
    	ul.tree li {
    		position: relative;
    		display: flex;
    		align-items: center;
    		margin: .3em var(--dx);
    		font-size: 75%;
    	}
     
    	ul.tree span {
    		padding: .3em .5em .15em;
    		background: var(--color-green);
    		border-radius: .4rem;
    		text-shadow: 0 0 3px rgba(0,0,0,.4);
    		white-space: nowrap;
    	}
     
    		ul.tree li  li span::before {
    			content: "";
    			position: absolute;
    			top: 50%;
    			right: 100%;
    			width: var(--dx);
    			height: calc(.15rem + .05em);
    			transform: translateY(-50%) skewY(calc(var(--angle, 0) * 1deg))  scaleY(calc(1 / var(--cos-angle, 1)));
    			transform-origin: right;
    			background: inherit;
    			background-image: linear-gradient(to right, var(--parent-color), transparent);
    		}
     
    		ul.tree > li li span { /* Second+ level */
    			background: var(--color-magenta);
    			--parent-color: var(--color-green);
    		}
     
    		ul.tree > li li li span { /* Third+ level */
    			background: var(--color-aqua);
    			--parent-color: var(--color-magenta);
    		}

    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    var $ = Bliss, $$ = Bliss.$;
     
    $$("ul.tree").forEach(ul => {
    	// Wrap each text node with a span
    	$$("li", ul).forEach(li => {
    		if (li.childNodes[0].nodeType == 3) {
    			$.create("span", {
    				around: li.childNodes[0]
    			});
    		}
    	});
     
    	// Calculate angle
    	$$("li li > span", ul).forEach(span => {
    		var li = span.closest("ul").parentNode;
    		var lineCS = getComputedStyle(span, "::before");
     
    		var top = span.parentNode.offsetTop + span.parentNode.offsetHeight / 2;
    		var parentTop = li.offsetHeight / 2;
    		var dy = top - parentTop;
    		var dx = parseInt(lineCS.width);
     
    		var angle = Math.atan2(dy, dx);
    		var &#952; = angle * 180 / Math.PI;
    		span.style.setProperty("--angle", &#952;);
    		span.style.setProperty("--cos-angle", Math.cos(angle));
    	});
    });

    Nom : tree.png
Affichages : 9966
Taille : 100,6 Ko

    Le groupe de discussions CSS du World Wide Web Consortium a, dans la mesure du possible, décidé de s’aligner sur les conventions de nommage des fonctions mathématiques du langage JavaScript. Il précise en sus que les opérations mathématiques porteront sur des grandeurs dont les types collent avec les règles définies dans l’actuel modèle d’objets manipulables en CSS.

    Sur la toile, l’annonce de l’ajout de ces fonctions divise. Ce que l’on peut considérer comme les conservateurs estime que le langage CSS n’a pas besoin de tels ajouts. « Pourquoi diable le CSS doit-il être utilisé de cette façon ?! Pourquoi introduire de telles capacités ?! Je pensais que CSS était réservé à l’application de styles aux documents HTML. Les calculs, etc. doivent être effectués en JS. On nage une fois de plus dans de l’Electron », soulignent-ils. Seulement, le groupe des progressistes est d’avis que CSS est meilleur que JavaScript sur certains aspects. « CSS est beaucoup plus rapide que JS lorsqu’il s’agit d’effectuer des calculs », apprend-on. Il vient donc pour ces derniers que l’ajout de ces fonctions ne peut qu’être une bonne chose.

    Lesdites fonctions ne sont pour le moment disponibles pour aucun navigateur. On reste dans l’attente de dates ou d’annonces au cas par cas.

    Source : GitHub

    Et vous ?

    Que pensez-vous de l’ajout de ces fonctions ?

    Quels usages entrevoyez-vous ?

    Quels pourraient être les inconvénients d’intégrer ces fonctions à son code ?

    D’après vous quelle fonctionnalité à part la prise en charge des fonctions trigonométriques continue de faire défaut à CSS ?

    Pensez-vous que c'est un tort d'introduire de telles capacités à CSS ?

    Voir aussi :

    Next.js 8 est maintenant disponible avec une réduction de l'utilisation de la mémoire au moment de la construction
    Quelles sont les nouvelles fonctionnalités qui pourraient débarquer dans JavaScript en 2019 ? Un tour d'horizon des candidats pour ES2019
    PHP 7.4 devrait être rendu disponible vers la fin de cette année : voici un aperçu des nouveautés qui pourraient y figurer
    Parmi les sites CMS piratés en 2018, 90 % sont des sites WordPress et 97 % des sites PrestaShop piratés sont obsolètes, selon un rapport
    Contribuez au club : Corrections, suggestions, critiques, ... : Contactez le service news et Rédigez des actualités

  2. #2
    Membre expert Avatar de Zefling
    Homme Profil pro
    Développeur Web
    Inscrit en
    avril 2007
    Messages
    1 001
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : avril 2007
    Messages : 1 001
    Points : 3 592
    Points
    3 592

    Par défaut

    Ça ne me dérange pas. Quand on voir la Layout API et la Paint API, il y a déjà un lien de plus en plus fort entre le JS et le CSS. J'avais même fait une proposition de pouvoir accéder à l'index, il y a plusieurs année pour éviter de faire du JS, qui a été refusée. Je devrais peut-être la refaire.

    Il faudra que je m'occupe de mettre à jour CSS3test quand ça sera dans le draft. Mais c'est pour CSS Value 5, il y a le temps, déjà que le 4 n'est même pas supporté par les navigateurs.

  3. #3
    Membre éprouvé

    Profil pro
    Inscrit en
    janvier 2014
    Messages
    474
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : janvier 2014
    Messages : 474
    Points : 1 060
    Points
    1 060

    Par défaut

    Citation Envoyé par l'article
    Pourquoi diable le CSS doit-il être utilisé de cette façon ?! Pourquoi introduire de telles capacités ?! Je pensais que CSS était réservé à l’application de styles aux documents HTML. Les calculs, etc. doivent être effectués en JS.
    Que pensez-vous de l’ajout de ces fonctions ?
    C'était peut-être vrai pour CSS 1 & 2, mais depuis l'introduction d'animations et de transitions, l'usage de ces fonctions n'a-t-il pas tout son sens au sein du langage ? Je pense que oui.

    Pensez-vous que c'est un tort d'introduire de telles capacités à CSS ?
    non

    D’après vous quelle fonctionnalité à part la prise en charge des fonctions trigonométriques continue de faire défaut à CSS ?
    j'ai pas d'idée, j'y touche trop peu... mais j'aimerai bien en entendre parler.
    Pensez à utiliser les pouces d’appréciation, pour participer à la visibilité de l'apport d'un propos, ou l'intérêt que vous y prêtez... qu'il soit positif ou négatif.

  4. #4
    Futur Membre du Club
    Profil pro
    None
    Inscrit en
    septembre 2009
    Messages
    6
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : None

    Informations forums :
    Inscription : septembre 2009
    Messages : 6
    Points : 8
    Points
    8

    Par défaut

    => Que pensez-vous de l’ajout de ces fonctions ?
    Elles sont très pratique, je développe des IHM Web pour systèmes embarqués et pouvoir faire du positionnement/animation plus original en CSS au lieu du JS me semb

    => Pensez-vous que c'est un tort d'introduire de telles capacités à CSS ?
    Non bien au contraire il faut faire évoluer les technos vanilla afin de ne pas voir se multiplier des framework/polyfill plus ou moins fonctionnels faisant la même chose mais de manière, avec des API différentes, plus ou moins qualifié et surtout ayant une espérance de vie inconnue, quand la pérennité est au coeur de votre développement c'est ingérable.

    => D’après vous quelle fonctionnalité à part la prise en charge des fonctions trigonométriques continue de faire défaut à CSS ?
    La concaténation des variables (autre que des string) offrirai de nouvelles possibilités intéressantes comme par exemple la définition d'une couleur de base et pouvoir la décliner avec un alpha différent.

    Aujourd'hui il faut faire:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     
    :root {
      --base-color: 128, 128, 128;
      --alpha: 0.5;
    }
    body {
      background: rgba(var(--base-color), var(--alpha));
    }
    Ce n'est pas très pratique car les éditeurs comme VSCode ou les outils de debug pour proposer des colorpickers mais pas dans cette configuration, alors que dans le code ci-dessous ça serait possible:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     
    :root {
      --base-color: #A5A5A5;
      --alpha: B2;
    }
    body {
      background: var(--base-color) + var(--alpha);
    }
    C'est juste un exemple je pense qu'il y a pleins d'autres contextes ou ça serait pratique

  5. #5
    Membre du Club
    Homme Profil pro
    Inscrit en
    octobre 2013
    Messages
    29
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : octobre 2013
    Messages : 29
    Points : 52
    Points
    52

    Par défaut Ils ont raison...

    ... les dessinateurs de CommitStrip
    http://www.commitstrip.com/fr/2019/0...s-everywhere/?

Discussions similaires

  1. Réponses: 1
    Dernier message: 17/09/2018, 13h42
  2. Réponses: 0
    Dernier message: 25/12/2017, 08h52
  3. Réponses: 0
    Dernier message: 08/05/2016, 12h17
  4. Réponses: 3
    Dernier message: 03/12/2015, 12h26
  5. Implémentation des fonctions mathématiques
    Par mat.M dans le forum Mathématiques
    Réponses: 9
    Dernier message: 17/06/2002, 17h19

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo