Reprise du message précédent :

 
Le site n'est pas bugué, je sais pas sur quoi il navigue ben547 plutôt bien fait même. Après j'en vois tous les jours des sites comme ça. Le front-end à l'air assez qualitatif. Si tu veux arriver à ce niveau t'as clairement plusieurs années d’apprentissage devant toi. Y'a plusieurs spécialisations dans le web, mais si tu veux te lancer dans le front end assez poussé comme ça, faut apprendre je dirais :
- HTML
- CSS (Flex, Grid, Position absolute/fixed, Transform, Animations)
- JS (portée des variables, fonctions, DOM, évènements, ajax, Layout trashing)
 
Perso c'est ce que je fais depuis pas mal d'années dans mon métier, du design et du front-end orienté "creatif" (c'est à dire avec ce genre d'effets). Et garder des animations à 60FPS, ça demande un certain skill et de l'expérience
 
Après si tu veux pas t'emmerder et continuer la photo tranquille, t'as des services de portfolio qui sont destinés aux créatifs:
- Squarespace
- Semplice
 
 

Je dois faire un truc du genre :

Où les 4 rectangles noirs sont 4 photos au ratio 1.5
Les 3 photos de droite doivent remplir la hauteur de la photo de gauche.
La largeur de l'ensemble est variable (sauf pour mobile < 480px), et l'espace entre les photos doit rester le même (margin).
J'ai joué avec une colonne à 66% et l'autre à 33%, mais ça va pas dans le sens où à une largeur définie c'est OK, mais si j'élargis ou rétrécis l'ensemble, les 3 photos de droite vont dépasser la photo de gauche.
Avec les grid CSS c'est jouable ?
Thx

<div style="height:100vh;background-color:red;flex-direction:row;display:flex">
  <div style="background-color:yellow;flex:3;margin-right:10px"></div>
  <div style="background-color:green;flex:1;justify-content:space-between;display:flex;flex-direction:column">
    <div style="background-color:blue;flex:1;margin-bottom:10px"></div>
    <div style="background-color:orange;flex:1;margin-bottom:10px"></div>
    <div style="background-color:pink;flex:1"></div>
    
    
  </div>
</div>

https://codepen.io/anon/pen/qYOqqR

Merci !
J'avais pas pensé au flex
J'ai du gruger sur la première image et la mettre en width:auto height:100% overflow:hidden, car dès que je rajoutais les margin, ça sortait du box model et ça dépassait. Merci

 
ça te va ça ? https://codepen.io/proov/full/ZobBqW/
 
par contre avec 3 éléments en 1.5 de ratio, ton layout ne peut pas être a 66/33 je pense. Ça se calcule (la flemme ) mais c'est plutôt autour de 75/25. Puis les marges mériteraient aussi d'être en %

Avec les margins, j'avais testé 73/27 mais du fait du resize, ça n'allait pas.
j'ai déjà testé des choses avec le CSS grid, mais j'suis venu ici pour voir s'il n'y avait pas quelque chose de plus simple et mieux.

ouai j'ai pas encore testé Grid, je pense que c'est le + adapté  

je suis en train de me remettre un peu à jour...ça s'est bien amélioré le web depuis IE7/8 quand meme, y'a un support relativement correct sur pas mal de navigateurs, en tout cas en ce qui concerne les CSS.

Dès que tu te mets à sortir plus d'une version par an, ça aide.

 
C'est surtout l'aspect "généralisé" qui me frappe le plus.
Avant CanIUse c'était beaucoup vert sur un navigateur (Chrome ou FF), éventuellement vert sur l'autre, Safari et Opéra OK, et IE aux fraises grave.
 
maintenant sur la plupart des features c'est vert partout.
 
je veux me faire mon propre layout de blog pour Hugo, et je pense que je vais pouvoir partir sur une Flexbox Grid, ça va etre hyper rafraichissant (ça me rappelera le Gridbag layout de Swing ) (vu mon "audience" je risque pas grand chose à perdre le support pour IE <=9, et meme avoir un support moyen sur IE. tant que j'ai les navigateurs mobiles, FF et Chrome, ça ira.)

Tant qu'à faire passe direct à Grid dans ce cas, Flexbox ça paraît de la bidouille à côté une fois que tu t'y es mis

j'ai dis une connerie, je pensais bien évidemment à Grid (d'où Gridbag layout )

IE a quand même des bugs chiants, on se demande ce qu'ils fument chez M$... le dernier en date qui m'a bien fait ch** : le non support des transitions / animations avec calc() https://developer.microsoft.com/en- [...] es/105834/
 

<div style="height:100vh;background-color:red;flex-direction:row;display:flex">
  <div style="background-color:yellow;flex:3;margin-right:10px"></div>
  <div style="background-color:green;flex:1;justify-content:space-between;display:flex;flex-direction:column">
    <div style="background-color:blue;flex:1;margin-bottom:10px"></div>
    <div style="background-color:orange;flex:1;margin-bottom:10px"></div>
    <div style="background-color:pink;flex:1"></div>
    
    
  </div>
</div>

 
Ça marche au top, mais la cliente est sur Chrome 49
J'ai testé sur browserstack, ça fonctionne à partir de Chrome 53

Suffit de trouver une faille de sécurité dans Chrome et lui expliquer qu’elle doit mettre à jour son navigateur  

Ah mais ça c'est déjà fait. Faut juste que je me renseigne sur le nombre de gens qui utilisent Chrome < 53 aujourd'hui.

Ils font comment pour empêcher chrome de se mettre à jour automatiquement?

Il ne le redémarre jamais

 
tu bloques l'url...c'est ce que faisait ma boite pendant un moment...

Je pensais qu'en PHP avec la Locale on pouvait paramétrer un fuseau horaire et un formatage des dates pour la class DateTime. J'ai découvert que non. Donc au lieu de demander la langue/localisation puis proposer un fuseau horaire, je me suis dit, autant tout demander d'un coup.
Par conséquent je me suis retrouvé à faire en JS du tri par région dans les fuseaux horaires proposés par DateTimeZone afin que l'utilisateur ne se perde pas dans les centaines de fuseaux proposés :

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title><?php echo install_config; ?></title>
   <link rel="stylesheet" type="text/css" href="/theme/css/main.css">
   <link rel="stylesheet" type="text/css" href="/theme/css/form.css">
   <style type="text/css">
   </style>
   <script type="text/javascript">
      function createSelect(list, name, id) {
         let select = document.createElement('select');
         select.setAttribute('name', name);
         select.setAttribute('id', id);
         select.setAttribute('onChange', 'filter(this.value)');
         for(let region of list) {
            let option = document.createElement('option');
            option.setAttribute('value', region);
            let regex1 = /\/(.+)$/;
            if((content = regex1.exec(region)) !== null) {
               content = document.createTextNode(content[1]);
            } else {
               content = document.createTextNode(region);
            }
            option.appendChild(content);
            select.appendChild(option);
         }
         return select;
      }
      function filter(val) {
         let oldselect = document.getElementById('select_default_timezone');
         let list = [];
         if(val != 'Others') {
            let regex = new RegExp('^'+val);
            for(let option of oldselect.childNodes) {
               if(regex.exec(option.value)) {
                 list.push(option.value);
               }
            }
         } else {
            list = ['UTC'];
            /* //Gestion des Others avec anciens fuseaux horaires
            val = ['Africa', 'America', 'Antarctica', 'Arctic', 'Asia', 'Atlantic', 'Australia', 'Europe', 'Indian', 'Pacific'];
            val = val.join('|');
            let old_list = [];
            let filter_list = [];
            let regex = new RegExp('^'+val);
            for(let option of oldselect.childNodes) {
               if(option.nodeName == 'OPTION') {
                  old_list.push(option.value);
                  if(regex.exec(option.value)) {
                    filter_list.push(option.value);
                  }
               }
            }
            list = old_list.filter(function(val) {return filter_list.indexOf(val) < 0;});
            */
         }
         if(document.getElementById('select_default_timezone_bis')) {
            let el = document.getElementById('select_default_timezone_bis');
            el.parentNode.removeChild(el);
         }
         let select = createSelect(list, 'default_timezone', 'select_default_timezone_bis');
         document.getElementById('li_default_timezone').appendChild(select);
         return null;
      }
      function timezone() {
         let select = createSelect(['Africa', 'America', 'Antarctica', 'Arctic', 'Asia', 'Atlantic', 'Australia', 'Europe', 'Indian', 'Pacific', 'Others'], 'preselect', 'preselect');
         let parent = document.getElementById('li_default_timezone');
         parent.insertBefore(select, parent.firstChild);
         let oldselect = document.getElementById('select_default_timezone');
         oldselect.name = 'default_timezone_disable';
         oldselect.style.display = 'none';
         filter('Africa');
         return null;
      }
      function jawascript () {
         timezone();
         return null;
      }
   </script>
</head>
<body onLoad="jawascript();">
   <div id="header">header</div>
   <div id="main">
      <form method="post" action="/install.html">
         <ul>
            <li><label for="default_lang"><?php echo install_lang; ?></label></li>
            <li>
               <select name="default_lang" required>
<?php foreach($lang->languages as $value) { echo "                  <option value=\"".$value."\">".Locale::getDisplayLanguage($value, $value)." - ".Locale::getDisplayRegion($value, $value)."</option>\n"; } ?>
               </select>
            </li>
            <li><label for="default_timezone"><?php echo install_timezone; ?></label></li>
            <li id="li_default_timezone">
               <select name="default_timezone" id="select_default_timezone" required>
<?php foreach(DateTimeZone::listIdentifiers() as $value) { echo "                  <option value=\"".$value."\">".$value."</option>\n"; } ?>
               </select>
            </li>
            <li><input type="submit" value="<?php echo form_send; ?>"></li>
         </ul>
      </form>
   </div>
   <div id="footer">footer</div>
</body>
</html>

Évidemment la catégorie "Others" foutait la merde car elle est censé contenir ce genre de choses : http://php.net/manual/fr/timezones.others.php
Donc certains fuseaux "Others" sont donc censés passer dans ceux des régions après mon tri. Mais ça me va, il reste néanmoins les autres qui ne peuvent être sélectionnés via un pattern "nom_de_region/ville", je suis donc obligé de faire le tri à l'envers en excluant tous les fuseaux contenant le pattern précédent. Tout ça pour me rendre compte qu'en fin de compte, par défaut, il n'en reste plus qu'un : UTC. Puisque comme dit dans le manuel, les autres ne devraient pas être utilisés.

Et maintenant je viens de découvrir DateTimeZone::getLocation() qui permet de récupérer le country_code, le même qui peut en fait être récupéré par Locale::getDisplayRegion().    

Du coup je me tâte à refaire en deux temps.

Oui je trouve que ça représente bien ce qui se dit sur le JavaScript.  
 
Bon sinon je verrai plus tard lorsque j'implémenterai Ajax pour remodifier ça. Oui parce qu'à la base j'avais aussi espéré que le nom des fuseaux horaires soit aussi géré par la Locale.  
 
Et enfin, va aussi falloir que je teste les grilles css. Pour du responsive (sans faire 40 feuilles en fonction des résolutions), grid suffit ou faut partir sur un mélange de grid et de flexbox ?
 
 
EDIT : au passage, à propos des cookies, d'après un article de la CNIL il faut demander un consentement :

 
Du coup les cookies de session et/ou de préférences doivent demander un consentement ?

C'est pas la faute du langage, c'est la faute de celui qui l'utilise
Bon et sinon avec un peu d'ajax tu aurais séparé le PHP de la page, et tu aurais fait moins de caca

C'est pour ça que je disais exactement "ce qui se dit".  
 
 

Oui enfin je veux quand même garder une page fonctionnelle sans Ajax. Le problème c'est surtout que PHP implémente beaucoup de class qui sont certes utiles mais qui bien souvent font plus ou moins doublon avec d'autres et sont plus ou moins opérantes avec d'autres.
Par exemple, je viens de découvrir dans un autre sujet "filter_var", c'est très bien mais dans ce cas là il faudrait déprécier certaines fonctions de string comme htmlspecialchars, strip_tags, etc. pour que ce soit géré par filter_var uniquement.
 
Alors certes je ne suis pas du tout un pro du PHP mais je trouve quand même que c'est peu "harmonisé" comme langage.

http://diana-adrianne.com/purecss-francine/

function animationForm() {
   let el = document.getElementById('animatedForm');
   el.addEventListener('submit', function(e) {
      e.preventDefault();
      el.setAttribute('class', 'slideout');
      el.removeEventListener('submit', null);
      setTimeout(function() { el.submit(); }, parseInt(parseFloat(window.getComputedStyle(el, null).getPropertyValue('animation-duration')) * 1000));
    });
}

 
Plus qu'à prier pour que la propriété css "animation-duration" reste interprétée en seconde même quand elle est spécifiée en ms.  
Sinon l'utilisateur risque d'attendre looooooooooooooooooooooooooongtemps.  
 
Bon évidemment il suffirait aussi de toujours paramétrer dans le css la propriété en seconde plutôt qu'en ms.

el.removeEventListener('submit', null); ca va pas faire grand chose.

Apparemment si, ça retire bien mon eventListener ajouté plutôt.  

Tu bluffes.

J'avoue ne pas avoir vérifié sur Mosaic ce que ça donne.  
 
Sinon vous avez des outils pour tester le rendu selon différentes résolutions ?

Tous les navigateurs modernes ont ça dans leurs devtools.

Ah ouais.    
 
Je vais tester ça.

Attention : le rendu responsive d’un navigateur desktop peut être différent d’un vrai device : Safari et iOS Simulator peuvent ne pas rendre la même chose ou ne pas se comporter de la même façon.

OFC, dans tous les cas si tu veux vraiment tester le comportement on-device il te faut le device en question, ne serait-ce que parce-que le moteur de rendu peut être différent entre ton navigateur bureau et le navigateur mobile des tels.

Mais pour des tests de "responsive" de base (genre voire que tes targets sont pas trop petits, ou que ton CSS responsive donne le bon résultat) les modes des navigateurs fonctionnent bien.

Au début je me suis déjà dit que ça n'avait rien à voir, c'était plus gros sur mon ordi mais c'est juste que la taille des pixels n'est pas la même je suppose entre un écran d'ordi et un écran de téléphone.

Mais là c'est surtout pour dégrossir, je peaufinerai plus tard, je prends néanmoins note de la remarque. Il faut dire que je fais typiquement ce qu'il ne faut pas faire : avancer sur tous les fronts en même temps.
Alors oui ça mène souvent à reculer, mais ça fait de l'expérience pour ceux qui pratiquent peu.
Puis ça laisse le temps aux idées de murir plutôt que d'être la tête dans le guidon.

D'ailleurs je n'ai toujours pas compris une règle d'url rewriting écrite par moi-même :

Comment ce fait-ce que je suis obligé de mettre un ".php" ici : "^([^.]+).php/"
J'ai trouvé ça en regardant les logs d'apache, je comprends bien que ça a à voir avec le fait qu'il analyse ça comme un vrai chemin et donc va commencer par le dossier enfant mais je ne vois absolument pas comment on peut en arriver à ce chemin.

iOS simulator n'est pas un navigateur "mobile" de test justement, c'est vraiment iOS qui tourne, donc tu peux t'affranchir d'avoir en réel la panoplie des devices Apple.
Pour Android, t'as Xamarin, qui émule une version d'android, mais j'ai pas trop testé ce dernier.

Par contre, découvrir que Safari gère comme une merde les SVG avec des formes dedans, ça fait zizir. (Chrome et FF OK)

Ouais, comme IE qui gère mal les images avec des  pixels dedans ?

Comprends pas, une image c'est un tab de pixels.

Et un svg a part des formes tu met quoi dedans ?

Un SVG c'est du vectoriel avec des layers, un JPG c'est du bitmap compressé.
Je considère pas le SVG comme une image perso. Et Safari a bien du mal avec les objets dynamiques dans les SVG.