L'argument de la closure ?

Et si tu remplaces :

const $ = require('jquery');


par :

const jQuery = require('jquery');


ps : Je viens de parcourir la doc de stimulus. Je ne suis pas convaincu de cette librairie (Decorator passablement utile.). il faudrait que je la teste sur un Command. Dans la doc, il y a un exemple de slider. En Vanilla, tu peux le faire et d'une manière encore plus propre (séparation des couches).
Modifié par niuxe (27 Mar 2023 - 23:26)
Je me rappelais plus comment ça fonctionnait la mise en forme ! Smiley lol
Et pis j'ai pas vu que l'indentation suivait pas au copier/coller
Désolé je recommence :

Alors donc, je disais que j'ai un souci, dans mon application Symfony 5.4 avec webpack Encore, j'utilise des controleurs Stimulus pour exécuter le javascript directement sur les éléments concernés, et j'ai donc ce contrôleur, qui doit afficher un texte avec un effet "typescript" :


import { Controller } from '@hotwired/stimulus';

export default class extends Controller {
connect() {

   console.log("animationDuTexte OK");

   const $ = require('jquery');
   require('bootstrap');


   (function ($) {

     var defaults = {
     typeSpeed: 10,
     inline: true,
     cursorChar: '█',
     cursorBlinkSpeed: 300,
     delayBeforeType: 1000,
     delayAfterType: 3000,
     onComplete: false,
     onBeforeType: false,
     onAfterType: false,
     expansions: [
       ' ',
       '>',
       '<',
       '"',
       '&'
     ]
   };

   $.fn.coolType = function (text, options) {
      var $this = this,
      settings = $.extend({}, defaults, options),
     $container = $('<span>'),
     $cursor = $('<span>')
     .css({
        paddingLeft: 3,
        display: settings.inline ? 'inline' : 'block'
      })
      .html(settings.cursorChar)
      .hide();

      $container.appendTo($this);
      $cursor.appendTo($this);


   function startBlinking() {
      $cursor.data('intervalId', setInterval(function () {
      $cursor.toggle();
      }, settings.cursorBlinkSpeed));
   }


   function stopBlinking() {
   clearInterval($cursor.data('intervalId'));
   }


   function expandChar(charIndex) {
      var char = text[charIndex];
      for (var expansionIndex in settings.expansions) {
         var expansion = settings.expansions[expansionIndex];
         if (expansion[0] === char) {
            var textToCompare = text.substr(charIndex, expansion.length);
            if (textToCompare === expansion)
            return { char: expansion, charIndex: charIndex + (expansion.length - 1) };
         }
      }
   return { char: char, charIndex: charIndex };
   }

   function typeText() {
      if (settings.onBeforeType) settings.onBeforeType();
      var charIndex = 0;
      var intervalId = setInterval(function () {
         var expanded = expandChar(charIndex),
         char = expanded.char;
         charIndex = expanded.charIndex;
         $container.append(char);
         charIndex++;
         if (charIndex === text.length) {
            clearInterval(intervalId);
            if (settings.onAfterType) settings.onAfterType();
            if (settings.delayAfterType > 0) {
                  startBlinking();
                  setTimeout(function () {
                     stopBlinking();
                     $cursor.remove();
                     if (settings.onComplete) settings.onComplete();
                 }, settings.delayAfterType);
             }
            else {
               $cursor.remove();
               if (settings.onComplete) settings.onComplete();
            }
         }
      }, settings.typeSpeed);
   }

   if (settings.delayBeforeType > 0) {
      $cursor.show();
      startBlinking();
      setTimeout(function () {
         stopBlinking();
         $cursor.show();
         typeText();
      }, settings.delayBeforeType);
   }
   else {
      $cursor.show();
      typeText();
   }
};
})(jQuery);

}
}


et ce HTML (Twig) :

% block body %}

<div class="d-flex flex-column transition-fade" id="qui-suis-je">
   <div class="box_quiSuisJe1">
      <h1 class="text-center">Qui suis je ?</h1>
      <img class="photo" src="{{'../assets/images/photo.png'}}" width="200">
   </div>
   <div id="textToType" style="display: none" data-controller="animationDuTexte">
Lorem ipsum .
   </div>
</div>

{% endblock %}



et ça ne marche pas .

Dans la console, le console.log s'affiche et j'ai bien les notifs de connexion du Stimulus, mais la fonction ne marche pas, elle semble pourtant correcte.
Par ailleurs j'utilise d'autres Stimulus ailleurs qui eux fonctionnent ! Mais même par comparaison, je n'arrive pas à trouver d'où vient le problème.

Est ce que vous avez une idée d'où ça peut venir ?
Merci pour votre attention big up !
boteha_2 a écrit :

Accessoirement j'avais bien pensé à déclarer justify-items: start (il me semble que la valeur par défaut est stretch ?)

En fait c'est aussi "normal", mais tu l'as effectivement écrasé en mettant "start"

boteha_2 a écrit :
Mais si je te suis c'est la propriété justify-content qui était la cause de mes déboires.

Oui l'ensemble de la grille correspond bien à justify-content. Tu peux tester en écrasant sa valeur par défaut par "start" aussi et ça devrait fonctionner aussi.
Bonjour Raphaël,

Merci de ton suivi.

Ça, tu pourras en parler dans ton prochain livre...

Accessoirement j'avais bien pensé à déclarer justify-items: start (il me semble que la valeur par défaut est stretch ?).

Mais si je te suis c'est la propriété justify-content qui était la cause de mes déboires.

Mon problème est résolu avec max-content.
J'attends d'avoir le temps d'examiner avec attention le code d'Olivier C avant de cocher Résolu.
Je ne suis pas sûr d'avoir bien compris : il faut que le lien passe tout à fait à droite ?
ul:has(> a[href$=".pdf"]) {
  display: flex;
}
a[href$=".pdf"] {
  order: 1;
}

J'ai fait un truc un peu tordu parce que le <ul> ne comporte pas de classe, j'ai donc fait en sorte de ne cibler que les ul ayant un lien direct avec ".pdf" dedant.

Ce qui en soit est faux déjà : l’élément enfant d'un <ul> devrait toujours être un <li>.

Edit : grillé par parsimonhi, et sa solution est sans doute meilleure, car moi je cible tout le lien. En reprenant sa solution :
ul:has(> a[href$=".pdf"]) { /* ce sélecteur ne fonctionne pas encore sous Firefox */
  position: relative;
}
.ref-interne {
  position: absolute;
  right: 0;
}

Modifié par Olivier C (27 Mar 2023 - 18:54)
bonjour,

sur mes dizaines de centaines de fiches joomla (avec du HTML que je souhaite ne pas reprendre !) et de lien sous la forme suivante,

<ul>
<a href="monFichier.pdf">Libellé du pdf<span class="ref-interne">BTA3708</span></a><span class="poids-fichiers">Poids</span> : 470Ko<br><span class="fic-date">20/09/2022</span>
</ul>


je cherche sans retoucher le HTML (trop chronophage, à cadrer le span "ref-interne" uniquement, à droite.

Quelqu'un saurait il m'aider en CSS pour ca ?

Avec tous mes remerciements

Lien vers mon codepen :
https://codepen.io/seb-lh/pen/ZEMPOPp
Modifié par slhuilli (27 Mar 2023 - 18:26)
boteha_2 a écrit :
Il faudra que je comprenne la différence entre max-content et auto.

max-content = la taille de l'élément le pus grand

auto = la taille définie par le contenu.
Mais pourquoi cette taille n'est-elle pas celle de l'élément le plus grand ?

En fait, dans Grid Layout il y a un point qui est rarement bien compris, je vais tenter de l'expliquer...

Spoiler : à la fin de mon histoire, il y a bien un rapport avec ton "auto" récalcitrant.

La valeur par défaut des propriétés d'alignements (par exemple pour justify-content) vaut... normal (et non start comme beaucoup de monde le croit), et là ça se complique parce que ce "normal" est variable selon... la taille des colonnes/rangées :
- si les tailles sont définies en "auto", alors "normal" vaut "stretch"
- sinon, "normal" vaut "start"

C'est drôle non ?

Concrètement, si tu définis tes largeurs de colonnes en "auto", ce sera un auto qui correspond à la taille du contenu puis qui sera étiré car justify-content vaudra "stretch".

Si tu utilises par exemple des tailles en max-content, alors justify-content vaudra "start" et tes contenus seront bien calé sur la gauche.

Bonne aspirine !
Modifié par Raphael (27 Mar 2023 - 17:34)
Salut,

aide forum alsacreations a écrit :

#### Conventions d'écriture

L'emploi des majuscules est à utiliser avec parcimonie dans les titres de sujet comme dans les messages. En effet, un texte entièrement rédigé en majuscules donne l'impression que la personne crie sur un ton agressif, sur internet. Veuillez donner un titre de sujet évocateur lorsque vous en rédigez un nouveau, et non pas simplement Question, HELP, Problème! ou URGENT!!!!. À question bien posée, réponse vite trouvée. Le forum n'étant pas équipé d'un vérificateur d'orthographe, veuillez vous relire afin que votre message soit bien compris par tous et qu'on vous prenne au sérieux.

Merci de bien vouloir prendre le temps de présenter correctement vos messages, surtout si ces messages doivent inciter les autres membres à vous dépanner sur un problème. Utilisez les boutons de mise en forme (gras, italique, code source, etc.). N'hésitez pas à fournir une image explicative et une adresse où les membres auront un aperçu de votre situation. Il faut toujours donner un maximum de détails pour que les autres membres puissent vous comprendre et vous aider.


je suis quasi sûr que si tu retournes l'écran, le code reste attaché sur l'écran. Il est tellement compact qu'il est illisible. Peux tu utiliser la mise en forme des messages du forum stp ? l'indentation du code ne sera pas du luxe.
Modifié par niuxe (27 Mar 2023 - 17:08)
Salut des dev !

Alors moi j'ai un souci, dans mon application Symfony 5.4 avec webpack Encore, j'utilise des controleurs Stimulus pour exécuter le javascript directement sur les éléments concernés.
J'ai ce contrôleur, qui doit afficher un texte avec un effet "typescript" :


import { Controller } from '@hotwired/stimulus';

export default class extends Controller {
connect() {

console.log("animationDuTexte OK");

const $ = require('jquery');
require('bootstrap');


(function ($) {

var defaults = {
typeSpeed: 10,
inline: true,
cursorChar: '&#9608;',
cursorBlinkSpeed: 300,
delayBeforeType: 1000,
delayAfterType: 3000,
onComplete: false,
onBeforeType: false,
onAfterType: false,
expansions: [
'&nbsp;',
'&gt;',
'&lt;',
'&quot;',
'&amp;'
]
};

$.fn.coolType = function (text, options) {
var $this = this,
settings = $.extend({}, defaults, options),
$container = $('<span>'),
$cursor = $('<span>')
.css({
paddingLeft: 3,
display: settings.inline ? 'inline' : 'block'
})
.html(settings.cursorChar)
.hide();

$container.appendTo($this);
$cursor.appendTo($this);

function startBlinking() {
$cursor.data('intervalId', setInterval(function () {
$cursor.toggle();
}, settings.cursorBlinkSpeed));
}

function stopBlinking() {
clearInterval($cursor.data('intervalId'));
}

function expandChar(charIndex) {
var char = text[charIndex];
for (var expansionIndex in settings.expansions) {
var expansion = settings.expansions[expansionIndex];
if (expansion[0] === char) {
var textToCompare = text.substr(charIndex, expansion.length);
if (textToCompare === expansion)
return { char: expansion, charIndex: charIndex + (expansion.length - 1) };
}
}
return { char: char, charIndex: charIndex };
}

function typeText() {
if (settings.onBeforeType) settings.onBeforeType();
var charIndex = 0;
var intervalId = setInterval(function () {
var expanded = expandChar(charIndex),
char = expanded.char;
charIndex = expanded.charIndex;
$container.append(char);
charIndex++;
if (charIndex === text.length) {
clearInterval(intervalId);
if (settings.onAfterType) settings.onAfterType();
if (settings.delayAfterType > 0) {
startBlinking();
setTimeout(function () {
stopBlinking();
$cursor.remove();
if (settings.onComplete) settings.onComplete();
}, settings.delayAfterType);
}
else {
$cursor.remove();
if (settings.onComplete) settings.onComplete();
}
}
}, settings.typeSpeed);
}

if (settings.delayBeforeType > 0) {
$cursor.show();
startBlinking();
setTimeout(function () {
stopBlinking();
$cursor.show();
typeText();
}, settings.delayBeforeType);
}
else {
$cursor.show();
typeText();
}
};
})(jQuery);

}
}


et voici le HTML : % block body %}

<div class="d-flex flex-column transition-fade" id="qui-suis-je">
<div class="box_quiSuisJe1">
<h1 class="text-center">Qui suis je ?</h1>
<img class="photo" src="{{'../assets/images/photo.png'}}" width="200">
</div>
<div id="textToType" style="display: none" data-controller="animationDuTexte">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta consectetur pretium. Ut scelerisque, quam eget tempor sollicitudin, ipsum nunc molestie risus, non cursus lacus tortor sed metus. Fusce varius, risus a convallis hendrerit, nisl metus porttitor tellus, eget venenatis metus tellus tincidunt est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas sollicitudin porta leo ac suscipit. Donec dictum laoreet tristique. In hac habitasse platea dictumst. Nunc nulla odio, malesuada eu pellentesque sit amet, vestibulum a ipsum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor, massa id egestas feugiat, purus erat semper massa, sit amet venenatis nunc nisi at justo. Cras posuere commodo fermentum. Integer non est nibh, sit amet tincidunt nibh. Curabitur imperdiet mauris vitae ipsum malesuada a mattis nisi suscipit.
</div>
</div>

{% endblock %}


et ça ne MARCHE PAS Smiley sweatdrop .
Dans la console, le console.log s'affiche, et j'ai bien les notifs de connexion du Stimulus, mais la fonction ne marche pas, elle semble pourtant correcte.
Par ailleurs j'utilise d'autres Stimulus ailleurs qui eux fonctionnent ! Mais même par comparaison, je n'arrive pas à trouver d'ou vient le problème.

Quelqu'un aurait il une idée ?
Merci pour votre attention les copains
Olivier C a écrit :
Je n'ai jamais compris l'intérêt de coder des éléments en dur, ou tout au moins de manière fixe : pourquoi ne pas faire en sorte que les éléments soient adaptatifs dès le départ ?


Je ne comprends pas ta remarque.
Dans ma mise en page la taille des éléments est définie par leur contenu.

PS : je réponds à _laurent en fin de journée.
Modifié par boteha_2 (27 Mar 2023 - 15:15)
boteha_2 a écrit :
auto = la taille définie par le contenu.

Défini par le contenu oui mais pas forcément le plus grands. Ca prend en compte les autres colonnes etc. Voila la spec :
mozilla a écrit :
auto
As a maximum represents the largest max-content size of the items in that track.
As a minimum represents the largest minimum size of items in that track (specified by the min-width/min-height of the items). This is often, though not always, the min-content size.
If used outside of minmax() notation, auto represents the range between the minimum and maximum described above. This behaves similarly to minmax(min-content,max-content) in most cases.

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
boteha_2 a écrit :
En l’occurrence je ne peux pas faire deux colonnes fluides mais je lis avec profit.

Qu'est-ce que tu appelles une colonne fluide ? C'est pas fluide la ?

Olivier C a écrit :
Je n'ai jamais compris l'intérêt de coder des éléments en dur, ou tout au moins de manière fixe : pourquoi ne pas faire en sorte que les éléments soient adaptatifs dès le départ ?
Adaptatif ? C'est a dire ? Qu'ils se colle els uns aux autres ? C'est le taff du flex ça.

Bonne aprem
Je crois que c'est bon, il y avait un petit problème sur le script php, j'ai corrigé. Smiley smile
Maintenant, le contenu du formulaire arrive directement dans la boîte de destination, pas dans les spams. J'ai même tenté en mettre sur le script une adresse gmail de provenance, ça n'a rien changé.
Restera à voir en production, quand se présenteront des envois venant d'autres domaines. Mais ça fonctionne, le responsive aussi. Ce qui n'empêchera pas de continuer sur ce sujet, il reste à installer un anti-spam, pour le formulaire cette fois, et ajouter une fonction "effacer le formulaire", bien pratique pour celui qui rédige.
J'attends des essais venus d'ailleurs avant de mettre résolu.
PapyJP a écrit :
Attention, je constate que depuis quelques mois les messages envoyés par la fonction mail de php sont souvent considérés comme spam par de nombreux serveur de messagerie. On ne peut pas être sûr que la personne à laquelle le message est envoyé va effectivement lui parvenir.


ça dépend de plein de facteurs.... la fonction mail n'est pas considéré comme spam mais le les paramètres du smtp, le dns de l'email VS dns smtp, etc. Smiley cligne
Bonjour,

max-content est la solution.

Il faudra que je comprenne la différence entre max-content et auto.

max-content = la taille de l'élément le pus grand

auto = la taille définie par le contenu.
Mais pourquoi cette taille n'est-elle pas celle de l'élément le plus grand ?

Autrement le code d4olivier_C est très intéressant comme toujours.

En l’occurrence je ne peux pas faire deux colonnes fluides mais je lis avec profit.
Bonjour,

Ci-dessous quelques tests variés pour ceux qui veulent aller plus loin. Attention, il y a quelques passages non-triviaux, en particulier pour forcer les éventuelles animations des icônes à être rejouer quand on rafraîchit la page. La variable css --s sert à zoomer les icônes. Je n'ai pas réussi à faire fonctionner l'exemple "Inline svg (<view>) + <use>" sous firefox. S'il y en a un qui y arrive, je suis preneur.

EDIT: j'ai finalement trouvé une manière de faire fonctionner l'exemple "Inline svg (<view>) + <use>" sous firefox. Il fallait remplacer :
svg.svgViewIcons g {
	transform: scale(var(--s));
}
par
g[id$="G"] {
	transform: scale(var(--s));
}
Les raisons pour lesquelles ça ne marchait pas sous firefox sont un peu complexes. En gros, la manière de styler quelque chose qui est dans le shadow DOM est délicate (pour ceux qui veulent tout comprendre, ils peuvent essayer de lire https://stackoverflow.com/questions/27866893/svg-fill-not-being-applied-in-firefox pour avoir un aperçu des difficultés à ce propos). J'ai fait la modification dans le code ci-dessous qui est donc prêt à l'emploi.

1) le fichier html (qui est en fait du php et doit donc avoir l'extension .php)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
:root {
  --s: 3;
}
body {
	margin: 0;
	padding: 1em;
}
svg, span, img, object {
	display: inline-block;
	width: calc(var(--s) * 32px);
	height: calc(var(--s) * 32px);
	border-radius: 50%;
	background: #eee;
}
svg.hidden {
	display: none;
}
span.triangle,
span.square,
span.disk,
span.animatedTriangle,
span.animatedSquare,
span._L {
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
span.triangle {
	background-image: url("icons-view.svg#triangle");
}
span.square {
	background-image: url("icons-view.svg#square");
}
span.disk {
	background-image: url("icons-view.svg#disk");
}
span.animatedTriangle {
	background-image: url("icons-view.svg?z=<?=rand()?>#animatedTriangle");
}
span.animatedSquare {
	background-image: url("icons-view.svg?z=<?=rand()?>#animatedSquare");
}
span._L {
	background-image: url("icons-view.svg?z=<?=rand()?>#_L");
}
span::before {
	display: inline-block;
	width: 32px;
	height: 32px;
	transform: scale(var(--s));
	transform-origin: top left;
	border-radius: 50%;
}
span.pseudoTriangle::before {
	content: url("icons-view.svg#triangle");
}
span.pseudoSquare::before {
	content: url("icons-view.svg#square");
}
span.pseudoDisk::before {
	content: url("icons-view.svg#disk");
}
span.pseudoAnimatedTriangle::before {
	content: url("icons-view.svg?z=<?=rand()?>#animatedTriangle");
}
span.pseudoAnimatedSquare::before {
	content: url("icons-view.svg?z=<?=rand()?>#animatedSquare");
}
span.pseudo_L::before {
	content: url("icons-view.svg?z=<?=rand()?>#_L");
}
g[id$="G"] {
	transform: scale(var(--s));
}
</style>
</head>
<body>
<h1>Svg &lt;symbol&gt; vs &lt;view&gt;</h1>
<h2>Inline svg (&lt;symbol&gt;) + &lt;use&gt;</h2>
<?php include "icons-symbol.svg";?>
<svg><use href="#triangleS"/></svg>
<svg><use href="#squareS"/></svg>
<svg><use href="#diskS"/></svg>
<h2>Inline svg (&lt;view&gt;) + &lt;use&gt;</h2>
<?php include "icons-view.svg";?>
<svg><use href="#triangleG"/></svg>
<svg><use href="#squareG"/></svg>
<svg><use href="#diskG"/></svg>
<h2>External svg (&lt;view&gt;) + &lt;span&gt; + css background-image</h2>
<span class="triangle"></span>
<span class="square"></span>
<span class="disk"></span>
<span class="animatedTriangle"></span>
<span class="animatedSquare"></span>
<span class="_L"></span>
<h2>External svg (&lt;view&gt;) + &lt;span&gt; + css pseudo-element</h2>
<span class="pseudoTriangle"></span>
<span class="pseudoSquare"></span>
<span class="pseudoDisk"></span>
<span class="pseudoAnimatedTriangle"></span>
<span class="pseudoAnimatedSquare"></span>
<span class="pseudo_L"></span>
<h2>External svg (&lt;view&gt;) + &lt;img&gt;</h2>
<img src="icons-view.svg#triangle">
<img src="icons-view.svg#square">
<img src="icons-view.svg#disk">
<img src="icons-view.svg?z=<?=rand()?>#animatedSquare">
<img src="icons-view.svg?z=<?=rand()?>#animatedTriangle">
<img src="icons-view.svg?z=<?=rand()?>#_L">
<h2>External svg (&lt;view&gt;) + &lt;object&gt;</h2>
<object type="image/svg+xml" data="icons-view.svg#triangle"></object>
<object type="image/svg+xml" data="icons-view.svg#square"></object>
<object type="image/svg+xml" data="icons-view.svg#disk"></object>
<object type="image/svg+xml" data="icons-view.svg#animatedSquare"></object>
<object type="image/svg+xml" data="icons-view.svg#animatedTriangle"></object>
<object type="image/svg+xml" data="icons-view.svg#_L"></object>
</body>
</html>

2) Le fichier icons-symbol.svg
<svg class="hidden svgSymbolIcons" width="32" height="32" xmlns="http://www.w3.org/2000/svg">
	<symbol id="triangleS" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
		<path d="M8 24H24L16 8z"/>
	</symbol>
	<symbol id="squareS" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
		<path d="M8 8H24V24H8z"/>
	</symbol>
	<symbol id="diskS" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
		<circle cx="16" cy="16" r="8"/>
	</symbol>
</svg>

3) Le fichier icons-view.svg
<svg class="hidden svgViewIcons" width="32" height="32" xmlns="http://www.w3.org/2000/svg">
<style>
<![CDATA[
@keyframes a {
	to {
		stroke-dashoffset:0;
	}
}
.animated path {
	animation:a 5s linear forwards 1s;
	stroke-dasharray:104;
	stroke-dashoffset:106;
	fill:#0ff;
	stroke:#f00;
	stroke-width:2;
	stroke-linecap:round;
	stroke-linejoin:round;
}
]]>
</style>
<!-- square icon -->
<view id="square" viewBox="0 0 32 32"/>
<g id="squareG"><path d="M8 8H24V24H8z"/></g>
<!-- triangle icon -->
<view id="triangle" viewBox="0 32 32 32"/>
<g id="triangleG" transform="translate(0,32)"><path d="M8 24H24L16 8z"/></g>
<!-- animated colored square icon -->
<view id="animatedSquare" viewBox="0 64 32 32"/>
<g id="animatedSquareG" class="animated" transform="translate(0,64)"><path pathLength="100" d="M8 8H24V24H8z"/></g>
<!-- animated colored triangle icon -->
<view id="animatedTriangle" viewBox="0 96 32 32"/>
<g id="animatedTriangleG" class="animated" transform="translate(0,96)"><path pathLength="100" d="M8 24H24L16 8z"/></g>
<!-- _L icon -->
<style>
<![CDATA[
.animated path[clip-path="url(#_Lclip)"] {
	stroke-width:33;
	fill:none;
	stroke:#1cace4;
	stroke-linecap:butt;
	stroke-linejoin:miter;
}
#_Lshape {fill:none;stroke:none;}
}
]]>
</style>
<view id="_L" viewBox="0 128 200 200"/>
<g id="_LG" class="animated" transform="translate(0,128)">
<path id="_Lshape" d="M 28,58H172L162,75H57L100,150L131,96H150L100,183Z"/>
<defs><clipPath id="_Lclip"><use href="#_Lshape"/></clipPath></defs>
<path pathLength="100" d="M172,58H28L100,183L150 96" clip-path="url(#_Lclip)"/>
</g>
<!-- disk icon -->
<view id="disk" viewBox="0 328 32 32"/>
<g id="diskG" transform="translate(0,328)"><circle cx="16" cy="16" r="8"/></g>
</svg>

Amicalement,
Modifié par parsimonhi (27 Mar 2023 - 12:12)
Salut,

Si tu veux faire deux colonnes égales mais fluides quand même tu peux faire comme ça :
grid-template-columns: minmax(0, 1fr)), minmax(0, 1fr));

Et pour éviter de te répéter ça donne même cela :
grid-template-columns: repeat(2, minmax(0, 1fr));

Enfin, par sécurité pour les petites largeurs de fenêtre je propose même ceci :
<div class="grid2 gap">
  <div></div>
  <div></div>
</div>

[class^=grid] {
  display: grid;
  grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); /* la variable CSS ne prévoit qu'une colonne par défaut */
}
@media (min-width: 35em) {
  .grid2 {
    --n: 2; /* pour les largeurs suffisantes la variable est incrémentée à 2 colonnes */
  }
}
[class^=grid].gap { /* pour rappel, c'est la largeur des gouttières */
  gap: 1em;
}

Modifié par Olivier C (27 Mar 2023 - 08:03)
Salut,

boteha_2 a écrit :
Pourquoi les éléments de la colonne 2 sont-ils stupidement décalés vers la droite.?
Je les veux collés contre la première colonne, sans aucune marge.

"Stupidement" ? Parce que tu leur as demandé... Smiley lol
grid-template-columns: auto auto;

Tente plutôt max-content ou une largeur en dur.

drphilgood a écrit :
sais pas mais c'est quoi ce charabia dans ton code?
Quantit&amp;eacute
R&amp;eacute
&amp;rsaquo
C&amp;acirc
Apa&amp;amp;h

Les Unicode des caractères spéciaux genre accents
Oui en effet, c'est un risque à envisager.
On peut utiliser un captcha, à condition de le tester avant, afin qu'il ne soit pas trop compliqué à remplir et comporte une option sonore.
Dans le formulaire, il faut choisir un email d'expéditeur en rapport avec son domaine d'hébergement, sinon les anti SPAM du destinataire risquent de le mettre dans les indésirables.
------------
Après quelques essais, il semble bien que tu ai raison. Malgré mes précautions, le contenu du formulaire arrive dans les SPAMS de mon client mail. Et contrairement à ce que j'avais dit, le captcha n'y changera rien, ça ne contrôle pas les SPAMS. De plus, le message met du temps pour arriver, il passe sans doute dans des filtres avant. Arriver dans les SPAMS n'est pas un problème pour moi, mais est-ce que ça va être constant ?
Modifié par Bongota (27 Mar 2023 - 11:36)
Bonjour,

Olivier C a écrit :
@Laurent : j'y vois un intérêt pour traiter les pseudo éléments (que n'arrivent pas à atteindre les sprites SVG).


Il me semble que ça peut aussi servir quand on utilise la propriété css background-image. D'une manière générale, ça sert partout où on peut utiliser un url() comme valeur d'une propriété dans le css.

Amicalement,
Bonjour,

PLGPPUR a écrit :
Par contre, qu'est-ce qui fait que la vidéo est centrée verticalement ?

C'est un coup de chance que la vidéo soit centrée verticalement ! Smiley lol
PLGPPUR a écrit :
Je tente de faire pareil (ou avec un vertical align) pour des images se trouvant dans le même slider que la vidéo, mais elles restent alignées en haut Smiley ohwell

La propriété vertical-align est rarement la solution. Je te conseillerais presque d'oublier qu'elle existe. Pour centrer verticalement quelque chose voir https://www.alsacreations.com/tuto/lire/1032-Comment-centrer-verticalement-sur-tous-les-navigateurs-.html

Amicalement,
Salut,
j'ai suivi ton lien pour le responsive. En effet, ça fonctionne, mais je trouve que 100 % est énorme, même en mode desktop. J'ai mis à 60 %. Par contre, avec le @media, j'ai choisi 96 % pour les mobiles.
J'ai fait le choix pour le moment de l'envoi d'un formulaire avec la fonction mail de php, inutile de s'embarquer dans les bases de données avant de les maîtriser. Pour les tests, c'est sûr qu'il faut avoir un serveur local.
Bonjour,

PLGPPUR a écrit :
Mais je me creuse la tête depuis hier pour un autre souci lié à l'iframe :
Sur le code que j'ai posté le 24 Mars à 17:58, ainsi que le dernier que tu as posté (et qui fonctionne Smiley biggrin , je n'ai plus la suite de mon site; contrairement à avant.
J'ai tout vérifié, tout est bien fermé Smiley murf incompréhensible Smiley hum
Aurait-tu une idée ?


Tout dépend de ce que tu as dans ta page par ailleurs. Impossible de répondre comme ça.

Amicalement,
SUPER !!!
Bonjour parsimonhi,
MERCI !!!!
Mais je me creuse la tête depuis hier pour un autre souci lié à l'iframe :
Sur le code que j'ai posté le 24 Mars à 17:58, ainsi que le dernier que tu as posté (et qui fonctionne Smiley biggrin , je n'ai plus la suite de mon site; contrairement à avant.
J'ai tout vérifié, tout est bien fermé Smiley murf incompréhensible Smiley hum
Aurait-tu une idée ?
En tous cas, encore merci. Bonne fin de week-end,
P.
@Laurent : j'y vois un intérêt pour traiter les pseudo éléments (que n'arrivent pas à atteindre les sprites SVG).

Parce qu'ensuite, pour tous les autres cas de figure, les sprites SVG restent extrêmement simples dans leurs mise en œuvre :
<svg class="icon" role="img" focusable="false">
  <use href="/sprites/util.svg#ampersand"></use>
</svg>
Bonjour,

PLGPPUR a écrit :
100% de la hauteur de l'écran


Dans ce cas, il faut envisager d'utiliser l'unité vh (100vh = 100% de la hauteur de l'écran). Et je conseille d'utiliser la propriété min-width au lieu de width car si l'on impose à la vidéo de faire 80% de la largeur de son conteneur, elle peut ne pas avoir assez de place en hauteur pour s'afficher correctement.

Un exemple complet minimal :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
	margin:0;
	padding:0;
	background:#000;
}
.kern {
	width: 80%;
	min-height: 100vh;
	margin: 0 auto;
	display: flex;
}
.iframeContainer
{
	position: relative;
	flex: 1;
	padding: 56.25% 0 0 0;
	background: #cbb2a3;
}
iframe {
	 position:absolute;
	 top:0;
	 left:0;
	 width:100%;
	 height:100%;
	 border:0;
}
</style>
</head>
<body>
<div class="kern">
	<div class="iframeContainer">
		<iframe src="https://player.vimeo.com/video/347119375?h=1699409fe2"></iframe>
	</div>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>
</body>
</html>

Amicalement,
Bonjour,

_laurent a écrit :

Ca fait beaucoup de bazar a coté d'un :
<span class="icon-firefox"></span>

.icon-firefox:before {
    content: '\e801';
}

Hum, tu triches un peu, là ! Smiley cligne

D'abord tu oublies de préciser qu'il faut bien "aussi" pour une font-icon mettre au point et charger le fichier de la police de caractères. Et en gros le contenu de ce fichier correspond au contenu du fichier icons.svg que j'ai indiqué un peu plus haut.

Et ensuite, on peut très bien avec les images svg se contenter de :
<span class="iconSquare"></span>

.iconSquare::before {
	content:url("icons.svg#square");
}
Le reste de ce que j'avais mis n'était qu'un exemple de style qu'on pouvait appliquer pour adapter la présentation.

Et enfin, comme tu l'écrivais, les font-icons sont assez limitées par rapport aux images svg. Par exemple :

1) On ajoute du css et 2 icônes animées au fichier icons.svg précédent (dont on peut envisager qu'il soit mis au point par des organisations tierces comme l'est la police fontAwesome) :
<svg width="32" height="32" xmlns="http://www.w3.org/2000/svg">
<style>
<![CDATA[
@keyframes a {
	to {
		stroke-dashoffset:0;
	}
}
.animated path {
	animation:a 5s linear forwards 1s;
	stroke-dasharray:104;
	stroke-dashoffset:106;
	fill:#0ff;
	stroke:#f00;
	stroke-width:2;
	stroke-linecap:round;
	stroke-linejoin:round;
}
]]>
</style>
<!-- square icon -->
<view id="square" viewBox="0 0 32 32"/>
<g><path d="M8 8H24V24H8z"/></g>
<!-- triangle icon -->
<view id="triangle" viewBox="0 32 32 32"/>
<g transform="translate(0,32)"><path d="M8 24H24L16 8z"/></g>
<!-- animated colored square icon -->
<view id="animatedSquare" viewBox="0 64 32 32"/>
<g class="animated" transform="translate(0,64)"><path pathLength="100" d="M8 8H24V24H8z"/></g>
<!-- animated colored triangle icon -->
<view id="animatedTriangle" viewBox="0 96 32 32"/>
<g class="animated" transform="translate(0,96)"><path pathLength="100" d="M8 24H24L16 8z"/></g>
</svg>
Note : on remarquera que le css peut être commun à plusieurs icônes.

Ensuite, le développeur d'un site a juste à mettre quelque chose du genre :
2) Dans le code css :
span.iconAnimatedSquare::before {
	content:url("icons.svg#animatedSquare");
}
3) Dans le code html :
<span class="iconAnimatedSquare"></span>

Note : évidemment, l'utilisation des images svg du fichier icons.svg n'est pas limitée aux pseudo-elements. Elles peuvent aussi être utilisées dans une balise <img>, dans un background css, etc.

Amicalement,
Modifié par parsimonhi (26 Mar 2023 - 12:50)
parsimonhi a écrit :
Bonjour,
Pour les pseudo-éléments, on peut utiliser la balise &lt;view&gt; au lieu de &lt;symbol&gt;. Par exemple, si on a 2 icônes qui seraient un triangle et un carré, on met dans le svg (qu'on va nommer par exemple "icons.svg") :
&lt;svg width="32" height="32" viewBox="0 0 32 64" xmlns="http://www.w3.org/2000/svg"&gt;
&lt;!-- triangle icon --&gt;
&lt;view id="triangle" viewBox="0 0 32 32"/&gt;
&lt;g&gt;&lt;path d="M8 24H24L16 8z"/&gt;&lt;/g&gt;
&lt;!-- square icon --&gt;
&lt;view id="square" viewBox="0 32 32 32"/&gt;
&lt;g transform="translate(0,32)"&gt;&lt;path d="M8 8H24V24H8z"/&gt;&lt;/g&gt;
&lt;/svg&gt;

Le html peut être :
&lt;span class="pseudoTriangle"&gt;&lt;/span&gt;
&lt;span class="pseudoSquare"&gt;&lt;/span&gt;

Et le css peut être :
span::before {
	display:inline-block;
	width: 32px;
	height: 32px;
	overflow:hidden;
}
span.pseudoTriangle::before {
	content:url("icons.svg#triangle");
}
span.pseudoSquare::before {
	content:url("icons.svg#square");
}
Si le pseudo-élément doit avoir une taille différente de la taille des icônes, on peut s'en sortir en utilisant la propriété transform dans le css. Dans l'exemple ci-dessus, si on veut des pseudo-éléments carrés de 16px de côté, on rajoutera :
span::before {transform: scale(0.5) translate(0, 16px);}

Amicalement,

Ca fait beaucoup de bazar a coté d'un :
<span class="icon-firefox"></span>

.icon-firefox:before {
    content: '\e801';
}


Smiley lol Smiley lol Smiley lol
Bongota a écrit :
Par contre, je me heurte à un autre problème, rendre les formulaires responsive. Pour moi, c'est la surprise, je m'aperçois que ce n'est pas aussi facile que je le croyais.

Si si ça se fait. Ce sont tes conteneurs et la grille éventuelle qui doivent déterminer le comportement adaptatif, pas les inputs qui, eux, doivent être définis avec un width de 100%.

Non, avec les formulaires, le problème vient dès que l'on cherche à les personnaliser en profondeur, alors là, oui, il faut du lourd en documentation.
upload/1679767064-48192-capturedaeacran2023-03-25aa18.png Bonjour parsimonhi Smiley smile
J'ai bien copié 100 fois Smiley cligne
Après corrections, la vidéo se retrouve à top: 0 et le fond crème de la div a disparu (pour info, je n'arrive pas à avoir cette div à height:100%. sa hauteur (de la div fond crème) dépend du padding. Une petite capture (pour être plus compréhensible) ou on peut constater que la vidéo est bien centrée verticalement dans la div, mais que la div n'est pas "fullscreen"
Merci et bon werek-end,
P. upload/1679767103-48192-capturedaeacran2023-03-25aa18.png
Modifié par PLGPPUR (25 Mar 2023 - 18:58)
Merci pour toutes ces infos, elles vont me permettre d'y voir plus clair et d'avancer petit à petit.
Linux... bon ça fait plus de 25 ans que je suis dessus.
J'ai aussi une Ubuntu pour la MAO (en réalité une QX Studio, basée sur Ubuntu), elle est optimisée dès le départ pour la MAO, pas besoin d'installer un noyau faible latence, de paramétrer la priorité des interruptions et d'installer tout ce qui est nécessaire pour la production musicale. Je ne fais que de la MAO dessus.
Bonne journée.
50 Dernières réponses