Design & Développement web - Le topic des canards qui mangent des cookies

**Anon26492** · 07/11/2012, 14h49

Envoyé par Tomaka17

Et ce qui est génial là dedans c'est que comme IE10 supporte déjà plus ou moins ça, on aura moins longtemps à attendre avant de les utiliser.

Je n'en serais pas si sûr.
IE10 n'est disponible que sur Windows 7 (et encore, même pas tt de suite) et 8.

Cela signifie qu'IE9 reste la version "ultime" d'IE installable par les utilisateurs de Vista et XP. Autant dire que je vois très mal IE9 descendre sous les 5% de PDM avant au moins trois ans.

Bref, vous pourrez toujours pas faire mumuse avec les transitions et les animations sans fallback JS

(perso flexbox me fait plus bander que la grid, mais peut-être parce que je peux pas blairer les grids.)

**tenshu** · 07/11/2012, 14h51

Non sous XP c'est IE8 la version max.
Faisant de facto de cette version un nouvel IE6 vu le nombre d'installations de XP au niveau mondial.

**Anon26492** · 07/11/2012, 14h52

Sérieux ?
Pire que je pensais alors.

Donc on va avoir un reste de IE8 ET un reste de IE9 (Vista.)

Heureusement les PDM de Vista doivent être faibles (edit : 6% quand même.)

**tenshu** · 07/11/2012, 14h55

Oui mais pas celle de XP.
Si je me souvient bien au SP1 IE8 était passé en MAJ critique, puis en forcée sous SP2.
Pourtant on trouve toujours une 10% d'IE7 qui doivent être une armée de XP pas à jour et complètement vérolés.

Y'a pas à dire chez MS ce sont vraiment des putain de génies sur ce genre de trucs.

**Anon26492** · 07/11/2012, 15h03

IE7 a énormément baissé en France. Enfin, si on croit statcounter.

**Skiant** · 07/11/2012, 15h06

Envoyé par tenshu

Y'a pas à dire chez MS ce sont vraiment des putain de génies sur ce genre de trucs.

Et quand tu penses que y'a une bonne partie du parc sous IE6/IE7 qui sont des grosses boites ou des administrations, où la MAJ est rendue impossible parce que ça casserait la compatibilité avec des applis Intranet qui ont été développées avec des API propriétaires qui ont été retirées depuis.

MS a réussi à se coincer les boules dans un piège à loup qu'ils ont eux-même placés. Et ils ont attrapés tous les dev web au passage.

**Anon26492** · 07/11/2012, 15h09

Et en Corée, c'est encore plus drôle.

**tenshu** · 07/11/2012, 15h13

Envoyé par Mdt

Et en Corée, c'est encore plus drôle.

Paskeu ?

**Tomaka17** · 07/11/2012, 15h38

Envoyé par Mdt

Cela signifie qu'IE9 reste la version "ultime" d'IE installable par les utilisateurs de Vista et XP. Autant dire que je vois très mal IE9 descendre sous les 5% de PDM avant au moins trois ans.

Ouai mais "trois ans", c'est à la fois beaucoup et pas beaucoup par rapport à d'autres trucs.

En tout cas perso je me vois bien utiliser les grids relativement rapidement, avec un petit fichier CSS sous commentaire conditionnel qui apporte un design moins bien fignolé.

Moi ça me fait baver, par exemple ce squelette :

Code:

<body>
  <header></header>
  <nav></nav>
  <section></section>
</body>

Tu mets par dessus :

Code:

body { display:grid; }
body > header { grid-column-position:1; grid-row-position:1; grid-column-spawn:2; }
body > nav { grid-column-position:1; grid-row-position:2; }
body > section { grid-column-position:2; grid-row-position:2; }

Et hop, tout est en position !
L'en tête qui fait toute la largeur de la page, le menu à gauche, le contenu à droite.

Et si le mec regarde ton site depuis son téléphone portable, petit media query et :

Code:

body { display:grid; }
body > header { grid-column-position:1; grid-row-position:1; }
body > nav { grid-column-position:1; grid-row-position:2; }
body > section { grid-column-position:1; grid-row-position:3; }

Et hop, les trois éléments sont l'un en dessous de l'autre et occupent tous les trois toute la largeur.

En fait je pense que avec les grids, les generated content et les modifications à l'alignement (je crois que ça s'appelle [css3-align]), je pense qu'on pourra finalement complètement séparer la structure HTML et le CSS.
Mais si vous avez du mal à accepter les grids, vous allez gueuler avec le generated content.

**Anon26492** · 07/11/2012, 15h45

::before et ::after, tu veux dire ?
Ça perso je trouve ça très utile pour justement générer du contenu facultatif (genre une adresse, tu ajoutes un icone, puis un label en fonction des tailles de fenêtre...)

Je me suis mal exprimé : c'est pas le standard "grid" que j'aime pas, c'est le principe même de la grille. Dans ton exemple, ça passe, mais on sait très bien à quoi ça va mener... les affreux grid system qui uniformisent trop souvent le web.

J'aimerais que le CSSWG se préoccupe un peu moins de structure et un peu plus de typographie.

tenshu : une sombre histoire de banques et qui se maquent avec ActiveX il y a quinze ans, suivis par les administrations et les services genre téléphonie, et depuis le pays est inféodé à IE.

**Tomaka17** · 07/11/2012, 15h49

Ben avec les generated contents, tu aurais :

- ::before(2), ::after(2), ::before(3), ::after(3), etc. qui se mettent avant ou après le before/after précédent

- ::outside, qui définit un pseudo-élément autour de l'élément désigné

- des combos du genre ::outside(2)::before(3)

- la propriété "content" qui marche sur tous les éléments
Par exemple : "img.blocked { content:url('imageBloquee.png'); }"

- une propriété "move-to" qui permet de déplacer l'élément où tu le souhaites
Par exemple ici je déplace toutes les références en bas de la page : "span.reference { move-to: bottom; } footer { content: "Références : " pending(bottom); }"

**Anon26492** · 07/11/2012, 15h53

Hum.
::before(2), ok.
::outside, ok.
content,

(image replacement sans Javascript

) (même si content : src('imageBloquee.png'), alt('image bloquée'); serait plus logique)
move-to par contre,

**Skiant** · 07/11/2012, 16h07

Idem, j'me sers du :before & :after pratiquement tous les jours.
les grids, ça m'en touche une sans faire bouger l'autre tant qu'on aura pas un support à moitié décent (Chrome, Firefox & la version d'IE "actuelle").

Par contre, un truc qui m'excite et qui n'est pas encore dispo, c'est les régions CSS, qui permettent d'avoir un layout ultra travaillé et qui resterait fluide...

**tenshu** · 07/11/2012, 16h13

La plus part de ce qui est proposé avec les grid est finalement déjà dispo avec une syntaxe moins relou dans les framework.
Donc il y aura de la même façon des framework pour en simplifier l'utilisation.

Donc ok pourquoi pas.
Mais putain "grid-column-position:1; grid-row-position:1;"
C'est con mais ça me rappelle douloureusement les tableaux HTML.

**Tomaka17** · 07/11/2012, 16h22

Les tableaux HTML c'était vivement déconseillé car cela liait structure et présentation.
Faire des tableaux HTML mais uniquement en CSS, faut m'expliquer où est le problème.

**moimadmax** · 07/11/2012, 16h23

Envoyé par Skiant

Par contre, un truc qui m'excite et qui n'est pas encore dispo, c'est les régions CSS, qui permettent d'avoir un layout ultra travaillé et qui resterait fluide...

Allez voir www.bonjourmadame.fr ça remet les choses à la normale niveau excitation

Sans rire ce qui me fait rire dans l'histoire c'est qu'on arrive petit à petit à supprimer les <table> pour la mise en page, Et dieu inventa le Grid.
Après l'exemple de Tomaka est séduisant, car la mise en page avec les float, c'est pas le plus simple.

**Skiant** · 07/11/2012, 16h41

Envoyé par moimadmax

Allez voir www.bonjourmadame.fr ça remet les choses à la normale niveau excitation

Sans rire ce qui me fait rire dans l'histoire c'est qu'on arrive petit à petit à supprimer les <table> pour la mise en page, Et dieu inventa le Grid.
Après l'exemple de Tomaka est séduisant, car la mise en page avec les float, c'est pas le plus simple.

La <table> est sensé être un tableau de données niveau sémantique. Elle a été utilisée pour faire des grilles parce que, niveau layout, une grille est un truc facile et rapidement fonctionnel.
La raison pour laquelle on a décrié les tables, c'est pas pour leur point de vue visuel mais parce que la sémantique était aux orties.

A l'heure actuelle, on peut déjà refaire des layouts similaires aux tables avec du CSS en utilisant "display: table-cell", "display: table-row" et assimilés. Ça marche très bien (IE8+), et ça n'est pas sale.

**Anon26492** · 07/11/2012, 17h29

Sémantiquement, ce n'est pas sale.
Visuellement... mouais.
Je dis pas qu'il n'y a pas de site sympa utilisant une bonne grosse grille* hein. Juste que le look ubiquitaire "CMS+Grid" est très souvent à vomir.

* http://www.materiel.net/ par exemple. Une grille, mais ils la cassent intelligemment avec le diaporama.

**Skiant** · 07/11/2012, 17h37

Envoyé par Mdt

Sémantiquement, ce n'est pas sale.
Visuellement... mouais.
Je dis pas qu'il n'y a pas de site sympa utilisant une bonne grosse grille* hein. Juste que le look ubiquitaire "CMS+Grid" est très souvent à vomir.

* http://www.materiel.net/ par exemple. Une grille, mais ils la cassent intelligemment avec le slider.

Bah c'est surtout parce que c'est souvent mal fait. La plupart des gens essaient d'utiliser la grille 960.gs sans comprendre (et surtout sans penser aux espacements verticaux qui doivent être respectés aussi). L'avantage d'avoir le table-cell, c'est que ça te permet, par exemple, d'avoir plusieurs éléments sur une même lignes et dont la taille peut être flexible.

Par exemple, la structure "header - contenu+sidebar - footer" peut être réalisée très facilement avec du table-cell, et la hauteur du contenu et de la sidebar sera automatiquement adaptée à la plus grande dimension des deux.

**Anon26492** · 07/11/2012, 17h40

Bah c'est surtout parce que c'est souvent mal fait. La plupart des gens essaient d'utiliser une grille/CMS/JQuery/Librairie/Framework/JQuery/Wordpress/Whatever sans comprendre

Tu viens de résumer le développement web là

(j'ai juste complété)

**tenshu** · 07/11/2012, 17h49

Envoyé par Mdt

Sémantiquement, ce n'est pas sale.
Visuellement... mouais.
Je dis pas qu'il n'y a pas de site sympa utilisant une bonne grosse grille* hein. Juste que le look ubiquitaire "CMS+Grid" est très souvent à vomir.

* http://www.materiel.net/ par exemple. Une grille, mais ils la cassent intelligemment avec le diaporama.

Je comprends pas très bien ce que tu veux dire.

En gros tu trouves que les sites basés sur des grilles sont trop similaires d'apparence ?
Ca fait trop "au carré" pour toi ?

**Anon26492** · 07/11/2012, 17h54

Voilà.
Trop carré, trop semblables, souvent pas assez de whitespace.

**Tomaka17** · 07/11/2012, 18h21

Tiens vous connaitriez pas un plugin pour jquery qui me permette de sélectionner les éléments avec xpath ?
Les mecs qui posent la question sur stackoverflow se voient répondre "utilise lé sélecteur css a la place lol" (ce qui confirme tout le bien que je pense de ce site)

Et celui dispo sur le site est mort.

**tenshu** · 07/11/2012, 18h22

Envoyé par Mdt

Voilà.
Trop carré, trop semblables, souvent pas assez de whitespace.

Bah écoutes plus le temps passe et plus je conchie les sites où les différentes zones sont agencées n'importe comment.
Je suis devenu un putain de maniaque de l'alignement.
Surtout que bosser sans grille, ça donne la possibilité au graphistes et autres DA se prétendant wedesigner de chier des créa absolument délirantes.

Que l'aspect des sites sous, mettons, Bootstrap soit proche c'est un fait pour beaucoup d'entre eux. Plus par fainéantise de tout charter aux petits oignons qu'autre chose.
Mais ça reste toujours mieux que sans.
Et ça ouvre la porte au responsive design (

).

Bref on est visiblement pas du tout d'accord

**Anon26492** · 07/11/2012, 18h32

Ah mais je conchie aussi les créas délirantes 'HTML5 LOL' pondues par les ex-flasheurs hein. Genre ce qui passe sous thefwa.com 80% du temps (les 20% restant, y'a des trucs vraiment pas mal.)

Pour moi, un beau site, c'est deux belles typo, le corps de texte en 1em et plenty of whitespace.

---------- Post added at 18h32 ---------- Previous post was at 18h29 ----------

(et si tu fais moins de 30ko, t'as le droit d'être moche. Genre Hacker News.)

**GrandFather** · 07/11/2012, 22h19

Envoyé par Tomaka17

Tiens vous connaitriez pas un plugin pour jquery qui me permette de sélectionner les éléments avec xpath ?

Franchement, avec la liste des sélecteurs disponibles dans jQuery, et les méthodes de parcours d'arbre, je ne vois pas trop ce qu'un support de XPath apporterait de plus... Et c'est un mec suffisamment mordu des technos XML pour avoir codé un analyseur XPath complet en Ruby qui l'affirme.

Et puis Stackoverflow c'est vachement bien.

**tenshu** · 07/11/2012, 23h04

Envoyé par Mdt

Ah mais je conchie aussi les créas délirantes 'HTML5 LOL' pondues par les ex-flasheurs hein. Genre ce qui passe sous thefwa.com 80% du temps (les 20% restant, y'a des trucs vraiment pas mal.)

Pour moi, un beau site, c'est deux belles typo, le corps de texte en 1em et plenty of whitespace.

Ok ça ira pour cette fois

Si tu voyais les sites que sort ma nouvelle boite

**Aulren** · 08/11/2012, 11h36

Envoyé par Mdt

Tu viens de résumer le développement web là

(j'ai juste complété)

D'où l’intérêt d'avoir un webdesigner(compétent).

**Tomaka17** · 08/11/2012, 12h30

Tiens j'ai essayé d'utiliser les flexbox sous firefox (version 16).

En cherchant un peu sur le web, il y a écrit partout que firefox les supportait.
Mais dans la pratique, firefox ne reconnaît pas ni "flex" ni "-moz-flex", ni aucune propriété qui commence par "-moz-flex-*".
Auraient-ils désactivé cela ?

---------- Post added at 12h30 ---------- Previous post was at 12h15 ----------

Ouai en fait c'est parce que c'est "-moz-box" et pas "-moz-flex", alors que dans le standard officiel c'est bien "flex".

**Anon26492** · 08/11/2012, 13h13

Attention, y'a eu genre trois intérations successives du draft.

box-truc, c'est old.
display : flexbox, c'est old.

Désormais, c'est display : flex

Chrome 21 et FF18 only. Donc pas encore FF.

Discussion: Design & Développement web - Le topic des canards qui mangent des cookies

Outils de la discussion

Règles de messages