Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Aide | Shop Recherche
2996 connectés 

 



 Mot :   Pseudo :  
  Aller à la page :
 
 Page :   1  2  3  4  5  ..  1433  1434  1435  1436  1437  1438  1439  1440  1441
Auteur Sujet :

blabla@web

n°2351180
Aewil
Posté le 07-04-2020 à 21:51:04  profilanswer
 

Reprise du message précédent :

youmoussa a écrit :


 
Tu as parlé de poules aux œufs d’or. On casse rarement la poule aux œufs d’or. Donc il y a une volonté de laisser son client dépendant, ce que j’appelle une sangsue  :jap:


 
Tu découvres l'IT en fait ?

mood
Publicité
Posté le 07-04-2020 à 21:51:04  profilanswer
 

n°2351186
skylight
Made in France.
Posté le 07-04-2020 à 23:26:53  profilanswer
 

flo850 a écrit :


Le truc qui n'est maintenable que si c'est fait par des experts, ça ne te semble pas un avertissement ?
Comme le PHP de l'air 3-4-5 ou du js pré react/Vue/ember


Ça peut être du code spaghetti en PHP5 et Vanilla JS, ça n'empeche pas que si le code est propre, documenté, et logique, ça reste maintenable.
Maintenant je suis d'accord, on voit un peu de tout dans WP (malheureusement)

n°2351187
flo850
moi je
Posté le 07-04-2020 à 23:45:58  profilanswer
 

skylight a écrit :


Ça peut être du code spaghetti en PHP5 et Vanilla JS, ça n'empeche pas que si le code est propre, documenté, et logique, ça reste maintenable.
Maintenant je suis d'accord, on voit un peu de tout dans WP (malheureusement)


j'aime beaucoup cet article : https://blog.codinghorror.com/falli [...] f-success/
 

Citation :

I've often said that a well-designed system makes it easy to do the right things and annoying (but not impossible) to do the wrong things.


Mes derniers contacts avec WP ne m'ont pas laissé cette impression, mais j'ai probablement beaucoup à apprendre dessus


---------------

n°2351189
skylight
Made in France.
Posté le 07-04-2020 à 23:58:56  profilanswer
 

WP n'est pas fait pour faire des webapps comme ça, c'est sûr
Je fais du WP, j'aime bien pour la simplicité, et ça répond aux besoins de 80% de mes clients :
- Un thème avec quelques templates
- Un plugin sur mesure pour ajouter des fonctionnalités (espace privé, hooks, champs perso, editing de backoffice, etc)
Si c'est bien fait, tout est en surcouche, 0 soucis avec les autres plugins et MAJ

n°2351190
youmoussa
Ecrou-vis
Posté le 08-04-2020 à 00:13:43  profilanswer
 

skylight a écrit :


Ça peut être du code spaghetti en PHP5 et Vanilla JS, ça n'empeche pas que si le code est propre, documenté, et logique, ça reste maintenable.
Maintenant je suis d'accord, on voit un peu de tout dans WP (malheureusement)


 
Dans quel language/environnement on voit le moins de tout ?
 
Perso, j’ai l’impression que n’importe quel code qui a plus de x années et vu passé plus de y développeurs est moisi si un effort n’a pas été fourni.


---------------
Galerie HFR - Photoblog San Francisco - American Cars Photos
n°2351191
Aewil
Posté le 08-04-2020 à 00:18:58  profilanswer
 

youmoussa a écrit :


 
Dans quel language/environnement on voit le moins de tout ?
 
Perso, j’ai l’impression que n’importe quel code qui a plus de x années et vu passé plus de y développeurs est moisi si un effort n’a pas été fourni.


 
Pas besoin de revenir en arrière hein. Lors d'une mission, j'ai vu une appli angular sans components :o

n°2351193
Jubijub
Parce que je le VD bien
Posté le 08-04-2020 à 00:36:15  profilanswer
 

Aewil a écrit :

 

En même temps si tu mélanges les trucs devops avec le frontend ...

 

Celui qui encense React est sympathique mais oublie le SEO. Malheureusement en l'état (Google qui prend pas en charge le coté client), ça coûte 3 fois plus de temps de faire la même chose qu'avec les templates.

 

J'ai essayé de passer un site WP en headless et react est juste pas adapté, ça te rajoute une couche backend pour gérer le SEO et ça devient tout de suite problématique. De plus dans le secteur, les 3/4 des devs React n'ont jamais touché au rendering côté server donc pour faire reprendre ton travail ...

 

C'est vraiment pour ça que je déteste le monde des devs, dès qu'on y arrive pas, ça devient de la merde :o


Le SEO c'est vraiment un repère de croyances dans fondement :o
Le crawler Google interprète le JS : https://developers.google.com/searc [...] seo-basics grâce à un chromium headless

 

Donc ta page react sera indexée tant que tu déconnes pas sur le temps de chargement :)

 


---------------
Jubi Photos : Flickr - 500px
n°2351195
Aewil
Posté le 08-04-2020 à 00:50:06  profilanswer
 

Jubijub a écrit :


Le SEO c'est vraiment un repère de croyances dans fondement :o
Le crawler Google interprète le JS : https://developers.google.com/searc [...] seo-basics grâce à un chromium headless

 

Donc ta page react sera indexée tant que tu déconnes pas sur le temps de chargement :)

 


 

Le crawler Google seulement, et encore. Donc tu écartes tous les autres moteurs de recherche. Par ailleurs, l'efficacité est très limitée, j'ai testé une de mes webapp justement, page blanche alors que le chargement est instantané.

Message cité 1 fois
Message édité par Aewil le 08-04-2020 à 00:54:29
n°2351196
Shinuza
This is unexecpected
Posté le 08-04-2020 à 01:23:18  profilanswer
 

Aewil a écrit :

 

En même temps si tu mélanges les trucs devops avec le frontend ...

Le seul "truc devops" de la liste, c'est docker. T'es vraiment sûr de savoir de quoi tu parles?

Aewil a écrit :

 

Tu découvres l'IT en fait ?

... parce que t'es bien condescendant.

Message cité 1 fois
Message édité par Shinuza le 08-04-2020 à 01:24:18

---------------
Uplay/Steam/Origin: Shinuza, Live: Shinuza San, PSN: Shinuza Sama
n°2351197
Aewil
Posté le 08-04-2020 à 01:31:10  profilanswer
 

Shinuza a écrit :

Le seul "truc devops" de la liste, c'est docker. T'es vraiment sûr de savoir de quoi tu parles?

 
Shinuza a écrit :

... parce que t'es bien condescendant.

 

Webpack c'est aussi devops. Puis tant qu'à être précis, WP, il n'y a presque rien de frontend hormis le templating.

 

Je ne suis pas condescendant, je réponds aux gens qui insultent WP sous prétexte que ça ne correspond pas à leurs besoins ...


Message édité par Aewil le 08-04-2020 à 03:13:42
mood
Publicité
Posté le 08-04-2020 à 01:31:10  profilanswer
 

n°2351199
youmoussa
Ecrou-vis
Posté le 08-04-2020 à 05:08:01  profilanswer
 

Aewil a écrit :


 
Tu découvres l'IT en fait ?


 
En partie, j’ai jamais bossé pour ce département   [:perco_35:4]  
 
J’ai fait que des éditeurs de logiciel personnellement et pas au service IT  :o


---------------
Galerie HFR - Photoblog San Francisco - American Cars Photos
n°2351207
ratibus
Posté le 08-04-2020 à 08:54:30  profilanswer
 

Jubijub a écrit :


Le SEO c'est vraiment un repère de croyances dans fondement :o
Le crawler Google interprète le JS : https://developers.google.com/searc [...] seo-basics grâce à un chromium headless
 
Donc ta page react sera indexée tant que tu déconnes pas sur le temps de chargement :)
 


 
Le crawler JS de Google passe avec une fréquence et un débit bien moindre que le crawler standard.

n°2351208
gzii
court-circuit
Posté le 08-04-2020 à 09:10:04  profilanswer
 

Aewil a écrit :


 
[...] Donc tu écartes tous les autres moteurs de recherche. [...]


Ça existe encore ?
(Celui de MS je l'ai installé pour avoir des points rewards, qui font des réductions sur les jeux xbox, mais c'est une plaie. Je suis systématiquement obligé de relancer ma recherche dans google)

n°2351215
ricardm3
Posté le 08-04-2020 à 09:59:08  profilanswer
 

Aewil a écrit :


 
Pas besoin de revenir en arrière hein. Lors d'une mission, j'ai vu une appli angular sans components :o


 
Je confirme, pas besoin de remonter bien loin pour trouver des horreurs :D  
 
Je bosse sur une "webapp" ou chaque page est un "composant" React de 2000+ lignes blindé de jQuery [:japonais_skater:1]
Une vraie oeuvre d'art, chaque framework / lib / outil est tordu au max pour faire ce qui est voulu sans se demander si l'outil est le bon  [:rsh:9]  
Et un petit process "maison" par dessus tout ça où on a l'air d'être partis pour réinventer un SCRUM bancal  [:sharky-billy:3]

n°2351217
mechkurt
Posté le 08-04-2020 à 10:03:38  profilanswer
 

youmoussa a écrit :

Tu as parlé de poules aux œufs d’or. On casse rarement la poule aux œufs d’or. Donc il y a une volonté de laisser son client dépendant, ce que j’appelle une sangsue  :jap:


Tu as l'air d'impliqué que faire du wordpress rend les gens captif, ce qui est un peu antinomique avec le fait que toutes les boites ont eu a un moment ou un autre a faire du wordpress...
 
Ce qui rend captif c'est au contraire de faire un dev spécifique sur un technologie de pointe, dans ma bousie t'auras plus de mal a te faire reprendre un projet avec vos technos de hipster, alors que les clients qui font le tour des agences avec leur wordpress existant, c'est monnaie courante !
 
NB: Ou alors j'ai rien compris a ce que tu voulais dire par sangsue... :o


---------------
D3
n°2351218
flo850
moi je
Posté le 08-04-2020 à 10:05:38  profilanswer
 

ricardm3 a écrit :

 

Je confirme, pas besoin de remonter bien loin pour trouver des horreurs :D

 

Je bosse sur une "webapp" ou chaque page est un "composant" React de 2000+ lignes blindé de jQuery [:japonais_skater:1]
Une vraie oeuvre d'art, chaque framework / lib / outil est tordu au max pour faire ce qui est voulu sans se demander si l'outil est le bon [:rsh:9]
Et un petit process "maison" par dessus tout ça où on a l'air d'être partis pour réinventer un SCRUM bancal [:sharky-billy:3]


Ho putain, le truc casse gueule et qui tue les perfs


---------------

n°2351224
Aewil
Posté le 08-04-2020 à 10:22:07  profilanswer
 

ricardm3 a écrit :


 
Je confirme, pas besoin de remonter bien loin pour trouver des horreurs :D  
 
Je bosse sur une "webapp" ou chaque page est un "composant" React de 2000+ lignes blindé de jQuery [:japonais_skater:1]
Une vraie oeuvre d'art, chaque framework / lib / outil est tordu au max pour faire ce qui est voulu sans se demander si l'outil est le bon  [:rsh:9]  
Et un petit process "maison" par dessus tout ça où on a l'air d'être partis pour réinventer un SCRUM bancal  [:sharky-billy:3]


Délicieux !

n°2351230
Blackyell
$question = $to_be || !$to_be;
Posté le 08-04-2020 à 10:38:47  profilanswer
 

ricardm3 a écrit :

 

Je confirme, pas besoin de remonter bien loin pour trouver des horreurs :D

 

Je bosse sur une "webapp" ou chaque page est un "composant" React de 2000+ lignes blindé de jQuery [:japonais_skater:1]
Une vraie oeuvre d'art, chaque framework / lib / outil est tordu au max pour faire ce qui est voulu sans se demander si l'outil est le bon  [:rsh:9]
Et un petit process "maison" par dessus tout ça où on a l'air d'être partis pour réinventer un SCRUM bancal  [:sharky-billy:3]

 

Ah oui pas mal.

 

Du coup je viens de vérifier la webapp sur laquelle je bosse, mon plus gros fichier (loin devant les autres) fait 1020 lignes.

 

C'est un composant Vue (un formulaire un peu complexe) qui contient HTML (438) + JS (410) + CSS (172).

 

Tout le reste est largement plus petit.

 

(edit: Par contre pas de jQuery hein, 'videmment :o )

Message cité 1 fois
Message édité par Blackyell le 08-04-2020 à 10:39:12
n°2351242
gatsu35
Posté le 08-04-2020 à 11:01:00  profilanswer
 

Blackyell a écrit :


 
Ah oui pas mal.
 
Du coup je viens de vérifier la webapp sur laquelle je bosse, mon plus gros fichier (loin devant les autres) fait 1020 lignes.
 
C'est un composant Vue (un formulaire un peu complexe) qui contient HTML (438) + JS (410) + CSS (172).
a ce niveau là regarde s'il n'y a pas moyen de découper un poils plus,  
Tu peux pas Out le HTML et le CSS dans vueJS ?  
 
Tout le reste est largement plus petit.
 
(edit: Par contre pas de jQuery hein, 'videmment :o )


n°2351245
Blackyell
$question = $to_be || !$to_be;
Posté le 08-04-2020 à 11:09:51  profilanswer
 

Citation :

a ce niveau là regarde s'il n'y a pas moyen de découper un poils plus,


 
Oh t'en fait pas, je maitrise plutôt pas mal ^^ J'adore fonctionne en petits composants.
 
Là c'est un peu particulier, il y a certes beaucoup de code, mais rien d'anormal. Je ne verrais pas trop l'intérêt de découper ce formulaire en plusieurs composants, ça ne s'y prête pas du tout et ça rajouterait en complexité au niveau de la validation.
 

Citation :

Tu peux pas Out le HTML et le CSS dans vueJS ?


 
Si, mais je préfère justement fonctionner avec des Single File Components.
 
Je trouve que c'est un très gros avantage d'avoir tout dans le même fichier, surtout avec les scoped styles (après, tout est compilé lors du build).
 
https://fr.vuejs.org/v2/guide/singl [...] nents.html
 
Si tu as une modif à faire sur un composant... il te suffit d'ouvrir son fichier et tu as directement accès à tout le nécessaire.

n°2351267
ricardm3
Posté le 08-04-2020 à 12:04:07  profilanswer
 

Je vous ai parlé de l'implémentation Redux? Le pattern habituel pour fetch de la data est bien folklo aussi
 

Code :
  1. // composant
  2. getInitalState() {
  3.  return {
  4.    MachinId: this.props.MachinId,
  5.  };
  6. },
  7.  
  8. componentDidMount() {
  9.  const self = this;
  10.  store.dispatch({ type: 'FETCH_MACHIN', id: self.state.MachinId });
  11. }
  12.  
  13. // reducer
  14. case 'FETCH_MACHIN':
  15.  MachinAPI.fetchMachin(action.id);
  16.  return state;
  17. case 'UPDATE_MACHIN':
  18.  let stateCopy = { ...state };
  19.  stateCopy.machin = action.json;
  20.  return stateCopy;
  21.  
  22. // api
  23. // je vous passe la validation
  24. function listMachins(MachinId) {
  25.  // const url = ...; const options = ...;
  26.  fetch(url, options)
  27.    .then(function(response) {
  28.      return response.json();
  29.    })
  30.    .then(function(json) {
  31.       store.dispatch(type: 'UPDATE_MACHIN', json: json);
  32.    });
  33. }


 
 [:nanoleweeb:1]  [:nanoleweeb:1]  [:nanoleweeb:1]  [:nanoleweeb:1]  [:nanoleweeb:1]

Message cité 1 fois
Message édité par ricardm3 le 08-04-2020 à 12:08:47
n°2351269
gatsu35
Posté le 08-04-2020 à 12:15:15  profilanswer
 

ricardm3 a écrit :

Je vous ai parlé de l'implémentation Redux? Le pattern habituel pour fetch de la data est bien folklo aussi
 

Code :
  1. // composant
  2. getInitalState() {
  3.  return {
  4.    MachinId: this.props.MachinId,
  5.  };
  6. },
  7.  
  8. componentDidMount() {
  9.  const self = this;
  10.  store.dispatch({ type: 'FETCH_MACHIN', id: self.state.MachinId });
  11. }
  12.  
  13. // reducer
  14. case 'FETCH_MACHIN':
  15.  MachinAPI.fetchMachin(action.id);
  16.  return state;
  17. case 'UPDATE_MACHIN':
  18.  let stateCopy = { ...state };
  19.  stateCopy.machin = action.json;
  20.  return stateCopy;
  21.  
  22. // api
  23. // je vous passe la validation
  24. function listMachins(MachinId) {
  25.  // const url = ...; const options = ...;
  26.  fetch(url, options)
  27.    .then(function(response) {
  28.      return response.json();
  29.    })
  30.    .then(function(json) {
  31.       store.dispatch(type: 'UPDATE_MACHIN', json: json);
  32.    });
  33. }


 
 [:nanoleweeb:1]  [:nanoleweeb:1]  [:nanoleweeb:1]  [:nanoleweeb:1]  [:nanoleweeb:1]


 
avec les hooks react et le context + usestate dans le context je me fais 10x moins chier à écrire.
Idem pour fetch de la data, j'enrobe le fetch d'un hook et hop magie

n°2351302
Devil'sTig​er
Jee & Cee on the rock !
Posté le 08-04-2020 à 14:00:50  profilanswer
 

Blackyell a écrit :

Citation :

a ce niveau là regarde s'il n'y a pas moyen de découper un poils plus,


 
Oh t'en fait pas, je maitrise plutôt pas mal ^^ J'adore fonctionne en petits composants.
 
Là c'est un peu particulier, il y a certes beaucoup de code, mais rien d'anormal. Je ne verrais pas trop l'intérêt de découper ce formulaire en plusieurs composants, ça ne s'y prête pas du tout et ça rajouterait en complexité au niveau de la validation.
 

Citation :

Tu peux pas Out le HTML et le CSS dans vueJS ?


 
Si, mais je préfère justement fonctionner avec des Single File Components.
 
Je trouve que c'est un très gros avantage d'avoir tout dans le même fichier, surtout avec les scoped styles (après, tout est compilé lors du build).
 
https://fr.vuejs.org/v2/guide/singl [...] nents.html
 
Si tu as une modif à faire sur un composant... il te suffit d'ouvrir son fichier et tu as directement accès à tout le nécessaire.


 
Le mono fichier je suis fan, ca force les équipes a pas faire des composants qui font tout mal, mais qui sont plus spécialisés. Par contre le scoped styles j'ai toujours entendu que niveau perf c'était a bannir...

Message cité 1 fois
Message édité par Devil'sTiger le 08-04-2020 à 14:06:01

---------------
JunZZi | Jee & Cee
n°2351306
Blackyell
$question = $to_be || !$to_be;
Posté le 08-04-2020 à 14:24:28  profilanswer
 

Devil'sTiger a écrit :


 
Le mono fichier je suis fan, ca force les équipes a pas faire des composants qui font tout mal, mais qui sont plus spécialisés. Par contre le scoped styles j'ai toujours entendu que niveau perf c'était a bannir...


 
J'aimerais bien voir un vrai benchmark pour ça, parce que j'ai un gros doute sur le fait que ce soit suffisamment significatif pour ne pas l'utiliser.

n°2351309
Devil'sTig​er
Jee & Cee on the rock !
Posté le 08-04-2020 à 14:30:59  profilanswer
 

Blackyell a écrit :


 
J'aimerais bien voir un vrai benchmark pour ça, parce que j'ai un gros doute sur le fait que ce soit suffisamment significatif pour ne pas l'utiliser.


C'est genre... Dans la doc :o
 

Code :
  1. Scoped styles do not eliminate the need for classes. Due to the way browsers render various CSS selectors, p { color: red } will be many times slower when scoped (i.e. when combined with an attribute selector). If you use classes or ids instead, such as in .example { color: red }, then you virtually eliminate that performance hit. Here's a playground where you can test the differences yourself.


 
https://vue-loader.vuejs.org/guide/ [...] -selectors
 
Apres le lien est broken... Mais quand j'ai lu ca perso j'ai juste dit "ok les scopes CSS sont banni", ben au final ca pose 0 soucis, c'est juste être plus que flemmard de pas prendre 2sec pour prendre un nom jamais utilisé :o


---------------
JunZZi | Jee & Cee
n°2351313
Blackyell
$question = $to_be || !$to_be;
Posté le 08-04-2020 à 14:38:00  profilanswer
 

Nan mais je sais que c'est dans la doc :o Et déjà lu ce débat par-ci, par-là.
 
Ce que je veux dire, c'est que je n'ai jamais vu personne arriver avec une vraie raison concrète d'arrêter d'utiliser scoped. Dire "c'est moins bon pour les perfs", OK... mais je n'ai pas trop envie de me prendre la tête à ne pas utiliser les scoped et trouver des noms uniques à chaque fois pour avoir le loisir de me masturber le soir en me disant "ouaiiiis j'ai gagné 2 millisecooonndes hummmm" :D

n°2351329
Devil'sTig​er
Jee & Cee on the rock !
Posté le 08-04-2020 à 17:01:54  profilanswer
 

C'est pas 2ms, c'est environ 3x plus lent, et ca peut viter grimper.
 
Maintenant je t'invite a voir le fonctionnement interne de PostCSS (puisque Vue base son scoped style dessus) pour voir que non, c'est pas transparent, pas du tout meme:
 
https://github.com/postcss/postcss/tree/master/lib
 
Enfin si c'était 3 lignes de code je dirais que oui, la je dirais plutot que tu as de la chance que les PCs soient pas encore des vieux 486 :D.
 
Apres chacun place la barre ou il veut, mais perso perdre du temps de rendu pour un truc si facile (enfin trouver un nom c'est pas la fin du monde hein), clairement marqué dans le doc -en plus-, et qui n'apporte vraiment pas grand chose au final, ben simplement non, trouve un nom, tu peux mettre un truc purement random ca me va, mais au moins tu declenches pas tout ce code pour rien...


Message édité par Devil'sTiger le 08-04-2020 à 17:02:19

---------------
JunZZi | Jee & Cee
n°2351331
Blackyell
$question = $to_be || !$to_be;
Posté le 08-04-2020 à 17:25:25  profilanswer
 

En fait je ne suis pas sûr qu'on parle de la même chose.
 
Dans la doc, ils expliquent que (en scoped), un p { color: red } sera beaucoup plus lent qu'un .example { color: red }.
 
Et ils disent bien que "If you use classes or ids instead, such as in .example { color: red }, then you virtually eliminate that performance hit"... et non pas qu'il faut arrêter d'utiliser scoped.
 
Enfin c'est ce que je comprends.
 
Pour moi, il faut juste éviter d'utiliser un p {} (ou div {} ou whatever{}) mais plutôt utiliser des noms de classe.

Message cité 1 fois
Message édité par Blackyell le 08-04-2020 à 17:29:11
n°2351350
SekYo
Posté le 08-04-2020 à 19:17:36  profilanswer
 

Blackyell a écrit :

Dans la doc, ils expliquent que (en scoped), un p { color: red } sera beaucoup plus lent qu'un .example { color: red }.

 


 

Je pense que tu fais un malentendu sur la doc :

 
Citation :

Due to the way browsers render various CSS selectors, p { color: red } will be many times slower when scoped (i.e. when combined with an attribute selector)


Pour moi tu as oublié la deuxième partie de la phrase. Parce que dans le contexte de VueJS, le fait d'être "scoped", ça veut dire que PostCSS te rajoute automatiquement à ton élément HTML, dans le DOM, un data attribute aléatoire, qui va également aussi être ajouté à ton sélecteur CSS. Et c'est le fait d'avoir ce sélecteur attribut dans le CSS qui rend ça plus lent.

Message cité 1 fois
Message édité par SekYo le 08-04-2020 à 19:18:08
n°2351354
Blackyell
$question = $to_be || !$to_be;
Posté le 08-04-2020 à 20:07:20  profilanswer
 

SekYo a écrit :

 

Je pense que tu fais un malentendu sur la doc :

 
Citation :

Due to the way browsers render various CSS selectors, p { color: red } will be many times slower when scoped (i.e. when combined with an attribute selector)


Pour moi tu as oublié la deuxième partie de la phrase. Parce que dans le contexte de VueJS, le fait d'être "scoped", ça veut dire que PostCSS te rajoute automatiquement à ton élément HTML, dans le DOM, un data attribute aléatoire, qui va également aussi être ajouté à ton sélecteur CSS. Et c'est le fait d'avoir ce sélecteur attribut dans le CSS qui rend ça plus lent.

 

Non, je ne pense pas :D

 

Moi ce que je comprends c'est que p[data-v-xxxx] c'est beaucoup plus lent que p.toto, mais p.toto[data-v-xxxx] c'est aussi rapide que p.toto

n°2351363
Devil'sTig​er
Jee & Cee on the rock !
Posté le 08-04-2020 à 21:27:05  profilanswer
 

Blackyell a écrit :

Non, je ne pense pas :D
 
Moi ce que je comprends c'est que p[data-v-xxxx] c'est beaucoup plus lent que p.toto, mais p.toto[data-v-xxxx] c'est aussi rapide que p.toto


Parce que "c'est aussi rapide" est parfaitement faux.
Peut etre ton pc est suffisamment rapide pour que ca t'apparaisse avoir la même vitesse, mais c'est absolument et strictement impossible que ce soit la même vitesse, parce que p[whatever] c'est pas magique, tu dois:
 
  - généré un id unique (et donc prendre de la ram pour savoir si tu as déjà vu ou non cet id)
  - Parser le CSS a la rechercher de tous les éléments "root", et leur coler ca juste apres (que p { } devienne p[data...] {}). MAIS tu peux pas juste partir du principe que le premier sera le bon, vu que le scoped CSS demande que tous les roots soient scoped, et le CSS t'autorise a mettre autant de root que tu veux dans ton doc. Ce qui veut dire que tu dois te tapper TOUT le CSS, t'a pas le choix.
  - Faire la même chose sur le document HTML, et lui coller les attributes qui vont bien. Mais pour l'HTML c'est rapide car tu peux construire le DOM en ram et juste coller au root de ce DOM l'attribut.
 
Tout ça en pure JS car plein de navigateurs ne supportent pas (d'ailleurs je crois que le CSS scoped a été retiré du standard).
 
Et tout ca, c'est purement inexistant si tu te mets pas en scoped et trouve un nom assez unique pour passer le tout en CSS global ;)
 
Maintenant je pense qu'ils disent que c'est aussi rapide car avec Vue, quand tu arrives en prod, tu vas build tes fichiers en statiques, et donc en fait tu vas te tapper toutes ces étapes a ce moment, donc en gros ton build sera plus lent, mais le résultat pareil car pré-buildé (PS: j'ai check des vieux codes Vue, c'est le cas il pré-build ca).
Sur de petits projets ca le fait easy, sur de gros ca peut commencer a avoir un impact...
 
 
Et concernant le pourquoi du comment p[data...] vs p.toto, on va pas trop rentrer dans les détails, et en plus ca change tout le temps, mais en gros habituellement un moteur de rendu HTML va construire trois choses:
  - un index btree pour les classes => sert a trouver les éléments a partir du nom d'une classe (tres rapide)
  - un index btree pour les ids => sert a trouver les éléments a partir d'un ID (théoriquement encore un peu plus rapide que les classes)
  - un tree classique pour le DOM => le reste quand il sait pas comment chercher (lent car tu dois te tapper tout le dom)
 
Sachant qu'il peut construire ce qu'il veut. Il peut bien sur construire un Btree des node types (a, li, p, ...) s'il veut, mais plus c'est varié, plus l'index est efficace donc pas sur qu'ils s'emmerdent avec les node types...
 
Et donc, ben s'il veut applique p.toto, il va partir dans le btree des classes chercher les éléments "toto", ensuite filtrer les "p", et coller le CSS a ce qu'il a trouvé.
Cad au lieu de se tapper tout le DOM en descendant, il va directement tapper aux 5 objets en ram qui ont cette classe et ensuite voir si ca colle ou pas avec le "p" qu'il reste a tester.
De l'autre coté, ils ont pas d'index sur les attributs que je sache, donc il va se tapper tout le dom a la recherche de l'élément perdu...
 
Sachant que le DOM est construit de telle sorte qu'un noeud connait son parent, et ses fils, il peut facilement ensuite descendre ou remonter au besoin dans tous les cas (et donc appliquer les autres points CSS).
 
Bref c'est qu'une implémentation possible, mais de souvenir c'était encore en vigueur chez Gecko (l'ancien moteur de rendu de FF). Et bien sur prend pas ca comme sainte vérité car c'est de l'algo pur, tu peux en faire ce que tu veux (et je me doute qu'il a des techniques plus rapides en vigueur aujourd'hui)...
 
Un article grosso merdo sur le sujet :o
https://hacks.mozilla.org/2017/08/i [...] aka-stylo/


---------------
JunZZi | Jee & Cee
n°2351488
lulrik
Posté le 10-04-2020 à 21:44:16  profilanswer
 

Salut,
 
Il est autorisé de poser des questions sur quelques lignes de code ici ?  
 
Je sèche sur une bannière et un pied de page  :o  
 
Merci  :hello:


---------------
Au plaisir de vous lire.
n°2351489
Aewil
Posté le 10-04-2020 à 22:06:58  profilanswer
 

lulrik a écrit :

Salut,
 
Il est autorisé de poser des questions sur quelques lignes de code ici ?  
 
Je sèche sur une bannière et un pied de page  :o  
 
Merci  :hello:


 
Avec plaisir :)

n°2351490
lulrik
Posté le 10-04-2020 à 22:12:24  profilanswer
 

Merci :jap:

 

Le lieu du drame : http://ekasilicium.net/

 

Edit : le miss clic m'a fait posté de manière prématurée ... j'édite

 

La bannière :

 

Actuellement une photo de voiture pour l'exemple, ce sera plus tard une image autre.
Image que j'aurais aimé voir sur les 10 à 20 % de la partie haute de la page. Avec au premier plan, dessus, le nom de site, cliquable pour revenir sur la page principale. J'aurais espéré qu'elle se redimensionne à peu près en "largeur" pour coller aux affichages de résolution différentes.

 

Mais je n'arrive pas à la mettre en haut. J'ai essayé tout plein de trucs sans franchement les maîtriser.

 

Et j'ai un pied de page, qui ne veux pas aller en pied de page.

 

Petite image explicative : https://www.hostpic.org/images/2004110155140097.jpg

 

Je sens que j'ai un problème de ?parent? avec les flexbox's.

 

S'il faut plus d'infos ne pas hésiter.

 

Même une toute petite aide en une phrase me conviens. Je serais bien gêné de piquer trop de temps pour un truc de "base". Je ne suis pas bien claire j'en conviens.

 

Merci et A+ !

 
Code :
  1. <!doctype html>
  2. <html lang="fr">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Chouette-bidule</title>
  6. <link rel="stylesheet" href="mainstyle.css"/>
  7. </head>
  8. <body>
  9. <header class="header">
  10. <div id="ekasiliciumbanner"><img src="Capture.JPG" alt="la bannière du site"/>
  11. </div>
  12. <div id="ekasiliciumtitle"><a href="#" class="lienekasiliciumtitle">EKASILICIUM</a>
  13. </div>
  14.  <nav class="nav">
  15.   <h1 class="home"><a href="#">Sommaire</a></h1>
  16.   <a href="#">Les machines</a>
  17.   <a href="#">Les bidules</a>
  18.   <a href="#">Les trucs</a>
  19.   <a href="#">Un machin</a>
  20.   <a href="#">Pour voir</a>
  21.   <a href="#">Fin</a>
  22.  </nav>
  23. </header>
  24. <main class="main">
  25. <h1>La page qui parle des bidules<h1>
  26. <h2>Les machines</h2>
  27.  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  28. <h2>Les bidules</h2>
  29.  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  30. <h2>Les trucs</h2>
  31.  <p>Lorem ipsum dolor sit amet,.</p>
  32. </main>
  33. </body>
  34. <footer class="footer">
  35. <p>
  36.  Pied de page
  37. </p>
  38. </footer>
  39. </html>
 
Code :
  1. /*lien hypertexte*/
  2. a{
  3. color:#b57209;
  4. text-decoration:none;
  5. display:flex;
  6. }
  7. a:hover
  8. {
  9. color: green;
  10. }
  11. /*titres*/
  12. h1{
  13. font-size:2em;
  14. }
  15. h2{
  16. font-size:1.5em;
  17. }
  18. h3{
  19. font-size:1.2em;
  20. }
  21. h4{
  22. font-size:1.1em;
  23. }
  24. /*paragraphes*/
  25. p{
  26. max-width:900px;
  27. }
  28. /*corps de la page*/
  29. body{
  30. font-family:sans-serif;
  31. font-size:1.3em;
  32. color:#fff;
  33. background:#ddd;
  34. line-height:1.6;
  35. margin:0;
  36. display:flex;
  37. align-items:flex-start;
  38. }
  39. .header{
  40.     background:#fff;
  41.     color:#0BD;
  42.     width:25%;
  43. min-width:300px;
  44. }
  45. .nav{
  46.   padding:5%;
  47.   box-sizing:border-box;
  48.   font-size:1.4em;
  49. }
  50. .main{
  51.   padding:1%;/*marge de l'article*/
  52.   flex-grow:1; 
  53.   background:#b57209;/*Couleur du fond de l'article*/
  54.   /*display:flex;
  55.   flex-direction:column;*//*ca marche pas vraiment*/
  56. }
  57. .footer{
  58. display:flex;
  59. align-items:flex-end;
  60. }
  61. #ekasiliciumbanner{
  62. width: 100%;
  63. background-color:black;
  64. display:block;
  65. }
  66. #ekasiliciumtitle{
  67. display:flex;
  68. flex-direction:column;
  69. }
  70. /*Cette partie permet de mettres tout le monde en colonne pour les mobiles*/
  71. @media all and (max-width: 1020px){
  72. body{
  73.  display:flex;
  74.  flex-direction:column;
  75. }
  76. .header{
  77.  display:flex;
  78.  flex-direction:column;
  79.  font-size:1.8em;
  80.  width:100%;
  81. }
  82. h1{
  83. /*font-size:1em;*/
  84. }
  85. p{
  86.  font-size:1.5em;
  87.  /*color:red;*/
  88. }


Message édité par lulrik le 10-04-2020 à 22:28:29

---------------
Au plaisir de vous lire.
n°2351491
Aewil
Posté le 10-04-2020 à 23:03:25  profilanswer
 

Pour moi, tu devrais déjà sortir <nav> du <header>. Ensuite il suffit juste de mettre Sommaire et Contenu dans un wrapper que tu vas gérer.

 

Dans ta configuration actuelle (<nav> dans <header), il va être très bizarre d'arriver à ton résultat car le conteneur de l'image devant être en display: block par exemple, garder le Sommaire et le Contenu sur la même ligne va t'obliger à jouer avec de l'absolute.


Message édité par Aewil le 11-04-2020 à 00:04:13
n°2351531
lulrik
Posté le 11-04-2020 à 18:08:32  profilanswer
 

Salut,
 
J'ai appliqué t'es conseils et ça marche drôlement fort merci beaucoup !
 
Désormais j'ai un autre soucis, faire en sorte de l'image (qui sera la bannière) ne dépasse pas. Qu'elle ne fasse pas plus de 100% de largeur de l'écran utilisateur. Mais max-width et autres lignes du genre ne fonctionnement pas.  [:tinostar]  
 
Le lieu du drame : http://ekasilicium.net/  
 
 

Code :
  1. <!doctype html>
  2. <html lang="fr">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Chouette-bidule</title>
  6. <link rel="stylesheet" href="mainstyle.css"/>
  7. </head>
  8. <body>
  9. <header class="header">
  10.  <div id="banniere">
  11.   <div class="ekasiliciumbanner"><img src="Capture.JPG" alt="la bannière du site"/></div>
  12.   <div id="ekasiliciumtitle"><a href="#" class="lienekasiliciumtitle">EKASILICIUM</a></div>
  13.  </div>
  14.  <div id="titrepage">Chouette un bidule</div>
  15. </header>
  16. <div class="wrapper">
  17.  <nav class="nav">
  18.   <h1 class="home"><a href="#">Sommaire</a></h1>
  19.   <a href="#">Les machines</a>
  20.   <a href="#">Les bidules</a>
  21.   <a href="#">Les trucs</a>
  22.   <a href="#">Un machin</a>
  23.   <a href="#">Pour voir</a>
  24.   <a href="#">Fin</a>
  25.  </nav>
  26.  <main class="main">
  27.   <h1>Ont parle des bidules<h1>
  28.   <h2>Les machines</h2>
  29.    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  30.   <h2>Les bidules</h2>
  31.    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  32.   <h2>Les trucs</h2>
  33.    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip</p>
  34.  </main>
  35. </div>
  36. </body>
  37. <footer class="footer">
  38. <p>
  39.  Pied de page
  40. </p>
  41. </footer>
  42. </html>


 

Code :
  1. /*corps de la page*/
  2. body{
  3. font-family:sans-serif;
  4. font-size:1.2em;
  5. color:#fff;
  6. background:#ddd;
  7. line-height:1.6;
  8. margin:0;
  9. }
  10. /*liens hypertextes*/
  11. a{
  12. color:#b57209;
  13. text-decoration:none;
  14. /*font-family:sans-serif;*/
  15. display:flex;
  16. }
  17. a:hover
  18. {
  19. color: green;
  20. }
  21. /*titres*/
  22. h1{
  23. font-size:2em;
  24. font-family:sans-serif;
  25. }
  26. h2{
  27. font-size:1.5em;
  28. font-family:sans-serif;
  29. }
  30. h3{
  31. font-size:1.2em;
  32. }
  33. h4{
  34. font-size:1.1em;
  35. }
  36. /*paragraphes*/
  37. p{
  38. max-width:80%;
  39. padding:2%;
  40. }
  41. /*le reste*/
  42. /*.header{
  43.     background:#green;
  44.     color:#black;
  45.     width:100%;
  46. }*/
  47. /*Bannière de la page*/
  48. #banniere{
  49. display:flex;
  50. }
  51. .ekasiliciumbanner{
  52. display:block;
  53. width:100px;
  54. /*height:auto;*/
  55. /*position:relative;*/
  56. }
  57. #ekasiliciumtitle{
  58. position:absolute;
  59. font-size:5em;
  60. font-family:Impact;
  61. padding:2%;
  62. /*display:flex;*/
  63. }
  64. #titrepage{
  65. font-size:5em;
  66. font-family:sans-serif;
  67. font-family:Impact;
  68. color:white;
  69. display:flex;
  70. align-items:center;
  71. justify-content:center;
  72. background:#b57209;
  73. padding:1%
  74. }
  75. .wrapper{
  76. display:flex;
  77. }
  78. .nav{
  79. padding:3%;
  80. display:flex;
  81. flex-direction:column;
  82. /*box-sizing:border-box;*/
  83. font-size:1.4em;
  84. /*width:100%;*/
  85. min-width:300px;/*largeur de la zone de text nav*/
  86. }
  87. .main{
  88. padding:3%;/*marge de l'article*/
  89. flex-grow:1; 
  90. background:#b57209;/*Couleur du fond de l'article*/
  91. }
  92. .footer{
  93. color:black;
  94. background:blue;
  95. display:flex;
  96. justify-content:center;
  97. align-items:flex-end;
  98. }
  99. /*Cette partie permet de mettres tout le monde en colonne pour les mobiles*/
  100. @media all and (max-width: 1020px){
  101. body{
  102. display:flex;
  103. flex-direction:column;
  104. font-size:2em;
  105. }
  106. .wrapper{
  107. display:flex;
  108. flex-direction:column;
  109. font-size:1em;
  110. width:100%;
  111. }
  112. .nav{
  113. font-size:2em;
  114. display:flex;
  115. align-items:center;
  116. justify-content:center;
  117. }
  118. h1{
  119. /*font-size:2em;*/
  120. }
  121. p{
  122. font-size:1em;
  123. padding:3%;
  124. max-width:95%
  125. /*color:red;*/
  126. }


---------------
Au plaisir de vous lire.
n°2351532
flo850
moi je
Posté le 11-04-2020 à 19:12:43  profilanswer
 

il faut appliquer le max-width à l'image  
 
en plus , c'est louche, mais ta ekasiliciumbanner fait 100px de large


---------------

n°2351533
David Bori​ng
Posté le 11-04-2020 à 19:14:56  profilanswer
 

Avec le max-width: 100% sur le tag img de la bannière cela devrait fonctionner

n°2351534
Aewil
Posté le 11-04-2020 à 20:32:21  profilanswer
 

Deux choix:

 

- Tu l'as met en tant que background-image et ensuite en background-size: cover pour qu'elle s'adapte à la <div>. Tu dois gérer la height manuellement mais ça te permet de rogner si jamais tu le veux.

 

- Tu fixes la width à 100% sur l'image et sur <div class="ekasiliciumbanner"> (comme @flo850 et @David Boring l'ont dit)

 

Après dans ton contexte, la deuxième est la meilleure solution, je pense.

 

Par contre, j'ai vite fait regarder le reste et quelques trucs :

 

- #banniere n'a pas besoin d'être en flex, laisse la en block, rajoute position: relative et mets top: 0 sur #ekasiliciumtitle pour bien caler en haut. C'est plus propre.
- #titrepage pareil, pas besoin de flex, tu peux le laisser en block, supprimer align-items et justify-content, suffit de mettre text-align: center

 

Flex c'est vraiment à utiliser quand tu as des blocs dans un bloc et que tu veux gérer leurs positionnement, pour les blocs avec seulement du texte, on peut s'en passer.


Message édité par Aewil le 11-04-2020 à 20:43:17
n°2351548
lulrik
Posté le 12-04-2020 à 00:09:52  profilanswer
 

Salut à tous,
 
Et bien y a pas à dire, dev web, c'est un métier.
 
J'ai fait exactement ce que vous avez dit et tout est rentré dans l'ordre.
 
Je me rends compte que, à plusieurs reprise, j'ai fait des choses qui se mordent la queue. J'ai vu que le W3C propose un "validator" mais j'ai peur :o
 
J'espère arriver à solutionner mes prochaine problèmes tout seul pour ne pas trop vous solliciter.
 
À plus :)


---------------
Au plaisir de vous lire.
n°2351549
Aewil
Posté le 12-04-2020 à 00:12:03  profilanswer
 

lulrik a écrit :

Salut à tous,

 

Et bien y a pas à dire, dev web, c'est un métier.

 

J'ai fait exactement ce que vous avez dit et tout est rentré dans l'ordre.

 

Je me rends compte que, à plusieurs reprise, j'ai fait des choses qui se mordent la queue. J'ai vu que le W3C propose un "validator" mais j'ai peur :o

 

J'espère arriver à solutionner mes prochaine problèmes tout seul pour ne pas trop vous solliciter.

 

À plus :)

 

Le dev web, c'est un métier mais aussi de l'entraide. Aucun soucis, tu peux poser tes questions et je pense que les gens essayeront d'y répondre avec plaisir.

 

Par contre n'hésites pas à mettre ça sur CodePen par exemple, qu'on puisse débuger rapidement.


Message édité par Aewil le 12-04-2020 à 00:31:11
mood
Publicité
Posté le   profilanswer
 

 Page :   1  2  3  4  5  ..  1433  1434  1435  1436  1437  1438  1439  1440  1441

Aller à :
Ajouter une réponse
 

Sujets relatifs
blabla 3blabla 2
PUTAIN HARKO TU AS FERM2 BLABLA ![Beaucoup de blabla pour rien : post à effacer] Compiler .bat
variable1="blabla + variable2 +blala : c'est possible ??[PHP & regex] "blabla blabla file.ext?point=444 blabla" Recupérer 444
mail("celine@hotmail.com"," sujet","blabla"); pose une err ! Help[MySQL] WHERE 'blabla' compris dans le champ truc
[blabla@prog] Le topic de ceux qui ne répondent pas à Jovalise[PHP / BlaBla - limite]
Plus de sujets relatifs à : blabla@web


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite) / Groupe LDLC / Shop HFR