28111 sujets

CSS et mise en forme, CSS3

[Résolu] Nth-letter(non)

Bonjour/Bonsoir à tous,

J'essaie vainement d'obtenir ce résultat :

upload/1590005432-51817-capturedancran2020-05-2022-09.png

Et avec ce code :
<!DOCTYPE html>
<html lang="fr" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>nth letter de mes poules</title>
<style media="screen">
.bricks {
color:#fff;
}
.bricks.less {
color:red;
}
.bricks.more {
color:green;
}
.one:nth-letter(1),
.one:nth-letter(2)
{
color:#fff !important;
}
.two:nth-letter(1) {
color:#fff !important;
}

</style>

  </head>
  <body>
    <span class='bricks'>???</span> &nbsp; petit<br>
<span class='bricks less one'>???</span> &nbsp; pet<br>
<span class='bricks more one'>???</span> &nbsp; pitie<br>
<span class='bricks less two'>???</span> &nbsp; pie<br>
<span class='bricks more three'>???</span> &nbsp; paradoxalement <br>
<span class='bricks less three'>???</span> &nbsp; petite <br>
  </body>
</html>


J'obtiens ceci :
upload/1590005486-51817-capturedancran2020-05-2022-11.png

Qu'est ce que je fais de travers, selon vous ? Smiley ohwell Smiley sweatdrop

Merci pour votre aide !
Modérateur
Et l'eau,

Tu te prends la tête.... Fait un sprite en svg (l'utilisation de symbole, c'est pas mal Smiley cligne ). Tu englobes le texte dans un élément <span>. Tu lui ajoutes surement un display inline-block et surtout tu mets padding-left en conséquence. Bien sûr tu appelles ton svg background-image avec les coordonnées adéquates.
Modifié par niuxe (21 May 2020 - 03:05)
Meilleure solution
Bonjour,
Reka a écrit :
J'essaie vainement d'obtenir ce résultat : ... Et avec ce code : ...

Ça va être difficile car :nth-letter n'existe pas (encore) en CSS.

Regardez plutôt du côté de :nth-child ou de :nth-of-type. Avec ces méthodes il faudra mettre des span à la place des caractères "?".
Modifié par Olivier C (21 May 2020 - 07:49)
Olivier C a écrit :
Bonjour,

Ça va être difficile car :nth-letter n'existe pas (encore) en CSS.

Regardez plutôt du côté de :nth-child ou de :nth-of-type. Avec ces méthodes il faudra mettre des span à la place des caractères "?".


Il était tard.
A force de voir des gens parler de son attendue arrivée, j'avais compris que ça existait :
https://www.bram.us/2012/04/13/css-nth-letter/

Bon... On va chipoter avec les sprites ou trouver autre chose alors...
Merci Smiley cligne
Modifié par Reka (21 May 2020 - 11:28)
C'est dégueu, mais ça marche comme ça Smiley ravi 

<!DOCTYPE html>
<html lang="fr" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>nth letter de mes poules</title>
<style media="screen">
.bricks {
  color:#fff;
}
.bricks.less {
  color:red;
}
.bricks.more {
  color:green;
}

.one span:nth-child(1),
.one span:nth-child(2)
{
  color:#ffffff !important;
}
.two span:nth-child(1) {
  color:#ffffff !important;
}

</style>

  </head>
  <body>

    <span class='bricks'><span>?</span><span>?</span>?</span></span> &nbsp; petit<br>
    <span class='bricks less one'><span>?</span><span>?</span>?</span></span> &nbsp; pet<br>
    <span class='bricks more one'><span>?</span><span>?</span>?</span></span> &nbsp; pitie<br>
    <span class='bricks less two'><span>?</span><span>?</span>?</span></span> &nbsp; pie<br>
    <span class='bricks more three'><span>?</span><span>?</span>?</span></span> &nbsp; paradoxalement <br>
    <span class='bricks less three'><span>?</span><span>?</span>?</span></span> &nbsp; petite <br>

  </body>
</html>


#coderproprement #owi
Plutôt que blanc pour les éléments invisibles j'aurais plutôt choisis transparent pour la portabilité du code, en cas de background qui change, mais bon...

Sinon j'ai concocté un truc à partir d'une simple liste et de pseudos éléments with data-* : Code Pen.
Modifié par Olivier C (21 May 2020 - 18:52)
Merci pour le codepen.
Si je ne l'ai pas fait ainsi...c'est que j'en suis incapable Smiley langue
Mais je vais étudier le code pour m'approprier la technique.
Merci encore Smiley smile
Pas de quoi Smiley cligne

Je suis infirmier et il n'y avait quasiment rien à faire cet après-midi au taf' alors une petite problématique pour stimuler les neurones...

J'ai mis à jour / optimisé le Code Pen (eval) avec quelques commentaires dans le code, si vous aviez forké il vaut mieux recommencer à partir de maintenant. Le code est écrit en stylus et en pug mais vous pouvez voir l'interprétation de celui-ci en cliquant sur les roues crantées.

Cordialement.
Modérateur
Hello,

Justement vu cette semaine, cette vidéo de Chris Coyier (créateur de Codepen et css-tricks) sur la difficulté à avoir une liste avec des "préfix" de tailles automatique. Sans vouloir spoiler, la solution parfaite pour ne pas avoir à gérer manuellement un padding est `subgrid` (mais pas encore assez bien supporté Smiley ohwell ).

Bref, ça rejoint carrément cette problèmatique, ça peut parraitre super con comme problème mais c'est un vrai problème et puis ça peremettra de peut-être faire découvrir de nouvelles techniques pour certains.
Modifié par Yordi (22 May 2020 - 10:19)
Modérateur
@Olivier C : Bien vu pour ta font/police Smiley smile . J'avais pas pensé à cette solution Smiley confused

@Reka: Jette un coup d'oeil à ceci. Fait un peu à l'arrache. Mais ça donne une bonne idée.
Modifié par niuxe (22 May 2020 - 15:19)
ul li.bricks.three:after {
  content: "?" "?" "?";
}

A bah mince alors ! Je ne savais pas que l'on pouvait mettre plusieurs valeurs entre guillemets pour une même propriété content. Faut que je regarde ça de plus près...

@Reka : pour l'interprétation du code sur CodePen j'ai dis une bêtise : ce n'est pas sur l'engrenage mais sur un "chevron down" en haut à droite du code qu'il faut cliquer.
Modifié par Olivier C (22 May 2020 - 15:48)
Modérateur
Olivier C a écrit :

A bah mince alors ! Je ne savais pas que l'on pouvait mettre plusieurs valeurs entre guillemets pour une même propriété content. Faut que je regarde ça de plus près...


Comme je l'ai dit, j'ai fait ça à l'arrache et j'ai vu que ça fonctionner (je suis pas allé plus loin). Comme chez moi, je suis avec des sytème Unix / Unix-like, je peux pas consulter si ça fonctionne partout. Cependant, le but étant de proposer quelque chose de pas mal partant de ton idée de police de caractères. Dans mon code, il faut peut être spécifier la font-family.
Modifié par niuxe (22 May 2020 - 18:38)
niuxe a écrit :
Comme je l'ai dit, j'ai fait ça à l'arrache et j'ai vu que ça fonctionne.

Je viens de vérifier et effectivement ce n'est pas prévu. Il vaut mieux éviter de l'utiliser dans ces conditions...

[horsSujet]Tu es sous unix ? Quel système exactement ? Du BSD ?[/horsSujet]
Modérateur
Olivier C a écrit :
[horsSujet]Tu es sous unix ? Quel système exactement ? Du BSD ?[/horsSujet]


[ hs ]
Mac book pro(machine du boulot que j'ai en ce moment ==> télétravail) et OpenSuse 15.1 (ma station de travail). J'ai un win10 en double boot. Mais je m'en sers pas. J'ai un netbook qui tourne avec une Ubuntu 16.04.
[ /hs ]
Modifié par niuxe (22 May 2020 - 19:04)
[horsSujet]Ah oui, il me semblait que tu étais sous OpenSuse, tu m'en avais parlé... Après avoir testé quelques distros Linux (rolling release... bof) finalement je reste sous Ubuntu (v.19.10) il faut que je me mette à jour d'ailleurs : la nouvelle LTS est sortie le mois dernier.[/horsSujet]
Modifié par Olivier C (24 May 2020 - 06:02)
Sujet clos
Aller à