[Résolu] Juste les coins arrondis, mais sans le reste des bordures

Ahah.
Merci beaucoup, c'est parfait !
Le problème d'avoir appris les CSS il y a 10 ans et de ne jamais s'être vraiment remis au gout du jour, c'est que le jour où l'on se remet à devoir coder un peu tout a vraiment changé
Je ne connaissais pas CurrentColor, merci.

@Zelena : qu'entends-tu par "utiliser les variables pour coordonner la couleur, le style et l'épaisseur" ? C'est justement du CurrentColor ?

@Olivier C : si vraiment tu veux essayer de répondre en premier sur ce topic, une autre chance : je suis en train de m'attaquer à cette mise en page (très élégante, mais je crois que je vais vite caler dessus, pour quelque chose d'élégant en tout cas

jabric a écrit :
@Zelena : qu'entends-tu par "utiliser les variables pour coordonner la couleur, le style et l'épaisseur" ? C'est justement du CurrentColor ?

Les variables css ressemblent à ceci mais ne sont pas encore très bien supportée :

:root {
  --font-size-xxl: 5em;
  --bg-color: Red;
}
.one {
  color: var(--bg-color);
}
.one,
.two {
  font-size: var(--font-size-xxl);
}

Voir ici mon CodePen d'exemple : Variables CSS.

La variable CurrentColor, en réalité un nom de couleur fonctionnant par héritage, est, elle, très bien supportée mais aussi très méconnue, voir cet article sur le blog La Cascade.
Modifié par Olivier C (02 Sep 2017 - 11:47)

jabric a écrit :
j'étais finalement tombé sur ces var(), je trouve ça super cool.
Tu en déconseilles l'usage pour le moment, au niveau du support ?

Pour le support des règles CSS sur les navigateurs, un site à connaitre absolument pour tout dev' front : Can I use, variables,
à comparer avec le support de CurentColor.
Modifié par Olivier C (02 Sep 2017 - 18:01)

@OlivierC merci infiniment !
Ca fonctionne nickel... et le rendu est très propre.
Merci merci merci
C'est ma femme qui va être contente

Je trouve ça fascinant les css.
Je trouve toujours dommage de ne pas pouvoir prendre le temps de rentrer un peu plus dans leur magie... Mais on peut maintenant faire des choses hallucinantes avec cet outil, je suis tout le temps épaté

Du coup, j'ai une question vraiment toute nulle à côté, mais il doit y avoir une réponse toute simple : mes ::before et ::after ne s'affichent pas comme je voudrais (ils devraient être centrés, ils sont ferré sur les bords).
J'ai l'impression qu'il doit me manquer un bout de compréhension du fonctionnement de ces pseudo classes, mais je sèche un peu
=> page en cours de déclinaison css visible ici

Bonjour.

Oh, c'est pas mal non plus… avec des traits un peu plus épais peut-être.

Sinon, si vous voulez les centrer :

left : 50%; 
transform : translateX(-50%);

Le 'left : 50% ' décale de la moitié de l'élément 'parent' (je ne sais pas si c'est le terme exact dans ce cas-là).
Comme le décalage a lieu à partir du bord gauche de l'élément, un recentrage est nécessaire et c'est ce que fait : 'transform : translateX(-50%)'.

Le right ne sert à rien.


Modifié par Zelena (04 Sep 2017 - 09:06)

Bonjour,

auto est la valeur par défaut, très différent de 0.
Il n'est pas utile de préciser "right: auto" à moins que ce soit pour écraser une valeur existante et right: 0 va en général forcer le bord droit à occuper la position right: 0; (sinon l'élément "prend la place dont il a besoin", quelque chose dans ce goût-là)

Zelena a écrit :
Le 'left : 50% ' décale de la moitié de l'élément 'parent' (je ne sais pas si c'est le terme exact dans ce cas-là).

C'est le 1er ancêtre positionné c'est-à-dire en remontant tous les ancêtres du parent direct à body : le 1er a avoir une valeur de position différente de static et s'il n'y en a aucun alors body lui-même.

EDIT : concernant currentColor, il y a aussi inherit pour hériter du parent. Sur 4 fois où j'arrive à me servir de l'un ou l'autre, 3 fois c'est inherit et 1 fois currentColor. Très pratique pour des sites où des déclinaisons de couleur existent pour chaque composant.
Modifié par Felipe (04 Sep 2017 - 19:10)