27801 sujets

CSS et mise en forme, CSS3

Modérateur
Bonjour,

C'est quoi ton code ? De quelle illustration tu parles ? Et qu'est-ce qui ne fonctionne pas ?

Edit: j'ai modifié la manière dont tu avais inclus le lien dans ton post

Amicalement,
Modifié par parsimonhi (16 Feb 2022 - 12:41)
Modérateur
Bonjour @cpalo , il y a apparemment un bug dans la demo2 , les styles annoncés dans le tuto ne figurent pas dans le fichier.

Cela me rappelle aussi un sujet similaire: https://forum.alsacreations.com/topic-5-88455-1-Insertion-de-lignes-en-JS.html avec son codepen : https://codepen.io/exercices/pen/qBRvBVY (javascript sans incidence sur l'histoire de la puce)

note que tu peut modifier le font-size et la couleur de la puce seule via summary::marker{}

Cdt

edit:
note que display:list-item est la valeur par défaut de summary dans de nombreux navigateurs. changer la puce, peut donc se faire de la même maniere q'un element de list via https://developer.mozilla.org/fr/docs/Web/CSS/list-style-type ou https://developer.mozilla.org/fr/docs/Web/CSS/list-style-image .
Pour switcher , l'attribut open dans le selecteur te permet d'afficher une puce différente.
exemple basique:
summary {
  list-style-type: square; 
}
[open] summary {
  list-style-type: circle; 
}

Modifié par gcyrillus (16 Feb 2022 - 16:06)
Meilleure solution
Modérateur
Bonjour,

cpalo a écrit :
Modifier le style de l'icone

L'article a 10 ans ! Ça a évolué depuis.

gcyrillus a écrit :
@cpalo , il y a apparemment un bug dans la demo2 , les styles annoncés dans le tuto ne figurent pas dans le fichier.

Il me semble que les styles y sont bien pourtant. Par contre il y a bien un bug.

Si le but est de faire afficher le petit triangle à gauche de "Caractéristiques techniques" (ça aurait été tellement plus simple de nous le dire si c'est bien ça), le problème semble venir de display:block; pour la balise <summary>. Il suffit de retirer ce display:block; (ça n'a plus d'intérêt de toute façon en 2022 de continuer à supporter les navigateurs anciens via cet artifice qui était requis en 2012).

Amicalement,
Bonsoir,
J'avais bien vu que l'article date d'une dizaine d'années, d'où ma recherche sur le summary::-webkit-details-marker, qui dans cette demo n'a pas l'air de fonctionner.
Je vais donc tester summary::marker{}.
Ce que je cherchais à reproduire, c'était le carré blanc.
Modérateur
Bonjour,

cpalo a écrit :
Ce que je cherchais à reproduire, c'était le carré blanc.

Ha, enfin !

Je ne cherchais donc pas du tout ce qu'il fallait chercher. Misère !

gcyrillus t'avait donc donné les bonnes pistes.

Dans ce qui suit, j'ai supposé que tu voulais afficher un carré plein au départ et un carré vide quand le contenu de la balise <details> est affiché.

A) Une solution à https://jsfiddle.net/parsimonhi/s908cbhf/ :

1) où on supprime la propriété css display:block de la balise <summary> (comme je l'avais déjà indiqué précédemment, parce que sinon, le marqueur ne pourra pas s'afficher),

2) et où, dans le code css après /* Styles pour l'icône */, on utilise des marqueurs personnalisés comme le suggérait gcyrillus. J'ai mis des caractères représentant des carrés pleins et vides suivis d'un espace, mais on peut mettre ce qu'on veut (attention à la police de caractère : ce n'est pas toujours pareil d'une police à l'autre pour ce genre de caractères),

3) et où le reste du code peut être identique à la demo 2.

Note : cette solution ne marchera sans doute pas avec tous les navigateurs.

B) Une autre solution (à l'ancienne) à https://jsfiddle.net/parsimonhi/g6a80q1w/ :

1) où on laisse si on veut display:block pour la balise <summary> parce que de toute façon, on va cacher les marqueurs,

2) et où, dans le code css après /* Styles pour l'icône */, on utilise le pseudo-élément :before pour afficher un carré plein ou vide selon que les détails sont affichés ou pas. On pourrait afficher à peu près n'importe quoi d'autre si on le voulait avec cette technique,

3) et où le reste du code peut être identique à la demo 2.

Amicalement,
Modifié par parsimonhi (17 Feb 2022 - 07:11)
Bonjour,
Je souhaiterai des précisions quand à l'usage d'une solution ou l'autre :

.demo3 summary::marker {
    content: "\f07b";
    font-family: 'Font Awesome 5 Free';
    font-weight: bold;
    margin-right: 16px;
}
.demo3 [open] summary::marker {
    content: "\f07c";
    font-family: 'Font Awesome 5 Free';
}


.demo4 summary {
    font-weight:bold;
    list-style: none;
}
.demo4 summary:before {
    /* content: "+"; */
    content: "\f07b";
    font-family: 'Font Awesome 5 Free';
    float: left;
    font-weight: bold;
    margin-left: 16px ;
    text-align: center;
    width: 20px;
}
.demo4 [open] summary:before {
    /* content: "-"; */
    content: "\f07c";
}

J'obtiens le résultat escompté dans les deux cas.
Excepté que dans la demo4 je peux gérer l'espacement entre le marker et l'intitulé du summary.
Est-ce que dans la solution demo3 ( summary::marker{} ) c'est possible? car je n'ai pas réussi.
Modifié par cpalo (17 Feb 2022 - 12:18)
Modérateur
Bonjour,

pour le premier, tu peut ajouter un padding à summary, ou l'unicode \0020 espace derrière l'autre caractère dans le summary::marker.

L'alignement peut aussi être gérer en repositionnant la puce à l'extérieur et un margin sur summary. Les icônes de fontawesome ne sont pas toujours de la même tailles/largeur.
exemple:
summary::marker {
    content: "\f07b\0020";
    font-family: 'Font Awesome 5 Free';
    font-weight: bold;
}
summary{
  list-style-position:outside;/* ou bien inside */
  padding-inline-start:2.5ch;/* a voir ce qui est necessaire *//* ou bien margin */
}
 [open] summary::marker {
    content: "\f07c\0020";
    font-family: 'Font Awesome 5 Free';
}


Pour le second exemple, qui utilise un flottant, un padding au lieu du margin serait plus efficace me semble t-il. Le plus simple serait d'utilisé display:inline-block en lieu et place du flottant à mon avis (sauf si besoin d'un shape-outside par la suite) . En gardant <del>la puce</del> l'icône dans le flux, cela permettra aussi de régler l'alignement vertical au besoin .

Cdt
Modifié par gcyrillus (17 Feb 2022 - 15:03)
Bonsoir,
pour la demo4, un oubli mais effectivement un inline-block convient mieux.
Pour la demo3, l'unicode \0020 génère bien un espace mais même plusieurs unicodes ne génèrent qu'un seul espace.
Padding ne crée pas d'espace entre le marqueur et l'intitulé, mais déplace l'ensemble.
Mais déjà avec l'unicode \0020 le marqueur ne touche plus l'intitulé.
Merci
Cordialement
\0020,correspond à un espace en HTML.
En HTML les espaces et ruptures de lignes sont toujours remplacés par un seul espace.
Essaie \00A0 qui correspond à "l'espace insécable", ça devrait marcher.
Modérateur
cpalo a écrit :

Padding ne crée pas d'espace entre le marqueur et l'intitulé, mais déplace l'ensemble.

J'aurais du préciser avec list-style-position:outside de façon a pouvoir gérer l'alignement des puces et du texte . (par défaut c'est list-style-position:inside pour summary)
Cdt
@PapyJP
Merci.. avec \00A0 j'obtiens le résultat souhaité
@gcyrillus
Cela ne crée pas un espace entre le marqueur et l'intitulé.
Modérateur
cpalo a écrit :

@gcyrillus
Cela ne crée pas un espace entre le marqueur et l'intitulé.


Je parlais de l'alignement, c'est vrai que je n’était pas très clair, j'aurais du laisser des exemples.
gcyrillus a écrit :

L'alignement peut aussi être gérer en repositionnant la puce à l'extérieur et un margin sur summary. Les icônes de fontawesome ne sont pas toujours de la même tailles/largeur.

Voici un petit récapitulatif visuel concernant la partie avec ::marker en jouant sur la position et le padding, exemple doublé avec un font-size plus important. (petit sauts visuel concernant soit le l'icône, soit le texte)

https://codepen.io/gc-nomade/pen/KKyZBmQ

Cordialement
Modifié par gcyrillus (18 Feb 2022 - 10:02)
Bonjour,
Merci à tous pour ces échanges qui m'ont permis de bien avancer et d'évoluer sur l'utilisation de details - summary ( que j'avais négligés) et sur la personnalisation des listes.
@gcyrillus
super ce petit récapitulatif visuel
Depuis hier je me suis fait aussi un modèle pour tester les différentes solutions
Un lien dont je me suis également servi.
http://
https://web.dev/css-marker-pseudo-element/
[/url]
Très cordialement
Modifié par cpalo (18 Feb 2022 - 10:48)