5181 sujets

Le Bar du forum

Less/Sass - Layout via table-cell

Pages :
Bonjour,
simple curiosité : qui est-ce qui utilise déjà less/Sass (ou un autre outil) pour ses projet?
Je doute que ça soit une méthode d'intégration préférable sur des site de petite taille à moins d'avoir mis en place une base de travail.

Quant à la mise en page via display:table-..., maintenant qu'il est possible (via un fichier htc) pour IE6/7 d'utiliser ces valeurs de display, est-ce qu'il n'est pas préférable finalement de se passer des bloc flottants avec les problèmes qu'on leur connait. D'autant plus que la logique de fonctionnement d'un layout a base de display: table-machin me semble plus proche de celle du futur grid module.
Le seul problème que pose ces display à ma connaissance, est qu'il requière souvent l'ajout de div conteneurs pour pallier à l'absence de propriétés CSS équivalentes au colspan/rowspan.
Modifié par Hermann (11 May 2012 - 14:44)
Salut,

De fait, je l'utilise mais pas directement > framework quand j'utilise Boilerplate par exemple.
Modifié par jmlapam (11 May 2012 - 14:46)
Hermann a écrit :

simple curiosité : qui est-ce qui utilise déjà less/Sass (ou un autre outil) pour ses projet?
Je doute que ça soit une méthode d'intégration préférable sur des site de petite taille à moins d'avoir mis en place une base de travail.


J'ai testé LESS mais j'ai jamais vraiment compris l'intérêt de rajouter une nouvelle couche et une nouvelle syntaxe pour faire (vraiment) moins puissant et moins souple que ce que tu peux déjà parfaitement faire en PHP. Donc pour moi c'est PHP si j'en ai vraiment besoin, sinon des CSS statiques toutes simples.

Hermann a écrit :

Quant à la mise en page via display:table-..., maintenant qu'il est possible (via un fichier htc) pour IE6/7 d'utiliser ces valeurs de display, est-ce qu'il n'est pas préférable finalement de se passer des bloc flottants avec les problèmes qu'on leur connait. D'autant plus que la logique de fonctionnement d'un layout a base de display: table-machin me semble plus proche de celle du futur grid module.
Le seul problème que pose ces display à ma connaissance, est qu'il requière souvent l'ajout de div conteneurs pour pallier à l'absence de propriétés CSS équivalentes au colspan/rowspan.


Franchement je préfère utiliser un bon vieux tableau HTML plutôt qu'un palliatif HTC si je suis obligé. Par contre pour un site qui n'aurais pas besoin de tenir compte de IE6/7, pouvoir utiliser display table peut être un avantage, mais franchement les flottants on les connait bien et on les maitrise depuis un bail, j'ai jamais trouvé que ça posait de gros problèmes (d'ailleurs si quelqu'un à des exemples de situations dans lesquelles ça pose problème je suis intéressé pour les voir).
Hello.

Je ne suis pas partisan des .htc en général, ça tue la perf sur des navigateurs déjà pas au top sur ce point.

Quand j'utilise table-cell, c'est pour de l'alignement vertical avec un inline-block pas approprié, donc soit ça ne pète pas trop la charte et j'envoie du float à IE6-7, soit comme jb_gfx, j'utilise un tableau de présentation "à l'ancienne".
Modérateur
Pareil! Les tableaux y'a pas mieux. Quant à Less/Sass je suis aussi dubitatif quant à la grande utilité. Un framework qui sert à remplacer des codes de deux lignes par une seule, bof bof…

En gros:

Utilisez plutôt des <table>
Less/Sass c'est complètement inutile

/troll
Salut,

Personnellement ça fais longtemps que je n'utilise plus le float qui ne sert pas — à la base — à positionner les éléments, j'évite donc son utilisation dans ce contexte, il n'y a pas vraiment de débat pour moi (vu que ça ne sert pas à ça ^^). L’inconvénient "majeur" reste le clearfix et l'ajout (parfois) de balises qui vont avec. Un bon système de positionnement ne devrait pas nécessiter ce genre d'artifice. Et puis il y a des cas de figure où le float ne pourra pas satisfaire le besoin (comme deux colonnes qui sont de la même longueur même si le contenu n'est pas de longueur identique).

Le display:table me permet, personnellement d'appréhender plus simplement la partie responsive de mon interface, et puis comme tu dis c'est une bonne mise en bouche avant le prochain module de positionnement que nous concoctes le W3C. Pour ce qui est de IE6-7 effectivement il y le .htc, ou on peut prévoir une variante à base de display:inline-block/zoom:1;. Enfin perso j'utilise principalement ce mode de positionnement et je me vois mal retourner en arrière ! (même si c'est un peu un retour en arrière dans un sens ^^).

Pour LESS/SASS je n'utilise pas perso, quelques bons snippets, un fichier bien commenté (avec les codes de couleurs par ex) me suffise largement, mais bon j'ai surement pas compris toute la subtilité du truc.

PS : par contre je suis un peu (vraiment) étonné (choqué?) de voir que certains utilisent toujours des tableaux de présentation pour le style... ^^
Je suis sidéré par les avis sur Sass / Less dans ce topic. Ça permet de bien structurer son code via les @import, d'utiliser des variables et d'éviter pas mal de redondance via les mixins. Quand à l'argument disant que ça génère des CSS sales, il ne faut pas oublier que ce ne sont que des outils, à utiliser à bon escient.
Gili a écrit :

Personnellement ça fais longtemps que je n'utilise plus le float qui ne sert pas — à la base — à positionner les éléments, j'évite donc son utilisation dans ce contexte, il n'y a pas vraiment de débat pour moi (vu que ça ne sert pas à ça ^^).


C'est marrant parce que sur le wiki du W3C ils disent le contraire. Bref, faut pas toujours gober les conneries qu'on lit sur les blogs à droite et à gauche.

Gili a écrit :
PS : par contre je suis un peu (vraiment) étonné (choqué?) de voir que certains utilisent toujours des tableaux de présentation pour le style... ^^


Pourquoi donc ? Les tableaux servent à présenter n'importe quel type de données, ils sont fait pour ça et ils fonctionnent partout très bien. Je suis moins choqué par un tableau HTML que par une bidouille du genrejs/htc/commentaire conditionnel qui transoforment rapidement ton layout en une usine à gaz impossible à maintenir.

Bon en même temps j'en utilise pas tous les matins, j'ai ai utilisé un en 2011 et un en 2009. Smiley lol
Modifié par jb_gfx (11 May 2012 - 16:34)
Modérateur
les variables, l'avantage est limité. Ainsi que pas mal d'autres «avantages». Après certains y trouvent leur compte. Personnellement j'utilise un IDE qui me fait gagner beaucoup en productivité.
Florian_R a écrit :
Hello.

Je ne suis pas partisan des .htc en général, ça tue la perf sur des navigateurs déjà pas au top sur ce point.

Quand j'utilise table-cell, c'est pour de l'alignement vertical avec un inline-block pas approprié, donc soit ça ne pète pas trop la charte et j'envoie du float à IE6-7, soit comme jb_gfx, j'utilise un tableau de présentation &quot;à l'ancienne&quot;.


Pas du tout d'accord.
Est-ce que la perte de performance (qui n'est ni catastrophique ni bloquante que je sache) sur seulement 2 navigateurs dont le pourcentage d'utilisation est déjà assez faible et va en déclinant vaut la peine de se passer des possibilité des display:table-machin? Ces utilisateurs n'ont qu'à mettre à jour leur navigateur, IE7 a bientôt 6 ans... Le contenu sera de toute façon aussi accessible que sur un browser plus modernes.

Quant aux table de mise en forme, il vaut mieux éviter (pour des raisons qui ont déjà été évoquées plusieurs fois ici ou ailleurs).


PS: je répondrai aux autres réponses plus tard
Modifié par Hermann (11 May 2012 - 16:35)
jb_gfx a écrit :
C'est marrant parce que sur le wiki du W3C ils disent le contraire. Bref, faut pas toujours gober les conneries qu'on lit sur les blogs à droite et à gauche.
Atten si on peut plus se fié à ce qu'ont lis sur Alsa où vas le monde, j'ai pas regarder la doc du W3C à ce sujet mais j'y manquerai d'aller y faire un tour/

jb_gfx a écrit :
Pourquoi donc ? Les tableaux servent à présenter n'importe quel type de données, ils sont fait pour ça et ils fonctionnent partout très bien. Je suis moins choqué par un tableau HTML que par une bidouille du genrejs/htc/commentaire conditionnel qui transoforment rapidement ton layout en une usine à gaz impossible à maintenir.
Les tableaux servent à baliser des données tabulaire et non n'importe quel type de donnée sinon on retourne dix ans en arrière et on oublie le rôle premier d'HTML qui est de donner de la sémantique aux données, je suis pas d'accord avec toi sur ce point !! Smiley ravi . Et perso, je considère pas du tout les commentaires conditionnels comme de la bidouille qui transforme ton site en use à gaz, c'est d'ailleurs pour moi la solution la plus élégante pour appliquer une dégradation gracieuse. Si elle est reprise dans boilerplate c'est pas pour rien j'imagine.
Modifié par Gili (11 May 2012 - 16:42)
Administrateur
Les éléments HTML relatifs aux tableaux <> la mise en page avec display: table-et-cie;

J'utilise quand je peux LESS, ça m'évite des tâches fastidieuses comme la division par 16 pour les font-size en em et modifier à N endroits différents la valeur d'une propriété préfixée dans (N-1) navigateurs. J'ai plus intelligent à faire que ça.
Le compagnon parfait de ZenCoding ou tout autre accélérateur de frappe d'éléments HTML et d'instructions CSS !

Je sais exactement comment LESS va générer mes imbrications de règles, ça commence souvent par "+ elt" ou "> elt" d'ailleurs Smiley smile
Et je n'écris pas ul { li { a { } } } mais ul { li { } a { } } ce qui donne un sélecteur ul a et pas ul li a ...
EDIT: j'ai une base de travail, quelques macros pour les tailles de texte et border-radius, box-shadow et les gradients linéaires (seuls ou avec une -autre- image de fond, avec fallback pour IE et vieux navigateurs). Ce ne sont que 4-5 macros mais elles sont pas mal utilisées et surtout très ch... à écrire à la main.
Modifié par Felipe (11 May 2012 - 17:04)
Gili a écrit :
Atten si on peut plus se fié à ce qu'ont lis sur Alsa où vas le monde, j'ai pas regarder la doc du W3C à ce sujet mais j'y manquerai d'aller y faire un tour/


J'avais loupé cet article super intéressant qui parle de CSS... 1 ! Et en effet je te garanti que la définition de float en CSS 2 est différente et d'ailleurs tu verras qu'a aucun moment la balise img n'est utilisé comme exemple pour illustrer l'utilisation de float. Mais je te promet que si un jour je dois réaliser une intégration en CSS 1 je n'utiliserai pas float pour positionner des blocs (c'est à dire vers la saint glin glin ou un peu après... Smiley lol ).

Source : http://www.w3.org/wiki/CSS/Properties/float

Gili a écrit :

Les tableaux servent à baliser des données tabulaire et non n'importe quel type de donnée


On t'aurai menti ? C'est un peu plus souple que ça :

"The HTML table model allows authors to arrange data -- text, preformatted text, images, links, forms, form fields, other tables, etc. -- into rows and columns of cells."

Source : http://www.w3.org/TR/html4/struct/tables.html

Par contre c'est vrai que les tableaux ne doivent pas être utilisé dans un but unique de présentation. Donc pas pour faire le layout de ton site par exemple, mais pour présenter, par exemple, des photos sous formes de grille c'est tout à fait acceptable (d'ailleurs c'est l'utilisation que j'en ai fait la dernière que j'ai utilisé un tableau).
Modifié par jb_gfx (11 May 2012 - 17:04)
Felipe a écrit :
Oui donc &quot;à la base&quot; c'est bien CSS1 et pas 2.0 ou 2.1 (ni 3 ni 4) ...


Et donc ? En 2012 on utilise CSS 2.1 ou 3, pas CSS 1.
Hermann a écrit :
Est-ce que la perte de performance (qui n'est ni catastrophique ni bloquante que je sache) sur seulement 2 navigateurs dont le pourcentage d'utilisation est déjà assez faible et va en déclinant vaut la peine de se passer des possibilité des display:table-machin
Je ne dis pas de s'en passer, mais qu'on peux tricher pour IE en cassant un peu la charte. La question est donc : Qu'est ce qui est le plus important, le respect de la charte ; même sur les vieux IE, ou les perfs? Je botterais en touche en répondant : question de contexte.
Florian_R a écrit :
Je suis sidéré par les avis sur Sass / Less dans ce topic. Ça permet de bien structurer son code via les @import, d'utiliser des variables et d'éviter pas mal de redondance via les mixins. Quand à l'argument disant que ça génère des CSS sales, il ne faut pas oublier que ce ne sont que des outils, à utiliser à bon escient.

+12000
W3C a écrit :
"The HTML table model allows authors to arrange data -- text, preformatted text, images, links, forms, form fields, other tables, etc. -- into rows and columns of cells."
C'est sur que des données tabulaires ne se limite pas uniquement à du texte, une image peut très bien être une donnée tabulaire, je suis bien d'accord mais je réagissais plutôt à :
jb_gfx a écrit :
Les tableaux servent à présenter n'importe quel type de données,
Qui était carrément un appel à l'anarchie dans le contexte (rien que ça Smiley langue ). Mais sur le fond nous somme bien d'accord, le problème ce situe au moment où on balise les éléments uniquement pour de la présentation et non plus dans une optique de sémantique.

jb_gfx a écrit :
J'avais loupé cet article super intéressant qui parle de CSS... 1 ! Et en effet je te garanti que la définition de float en CSS 2 est différente et d'ailleurs tu verras qu'a aucun moment la balise img n'est utilisé comme exemple pour illustrer l'utilisation de float. Mais je te promet que si un jour je dois réaliser une intégration en CSS 1 je n'utiliserai pas float pour positionner des blocs (c'est à dire vers la saint glin glin ou un peu après... lol ).
Mdrrrr, effectivement j'avais pas vu que ça concernait CSS1. MAIS, imaginons le W3C qui a vu qu'on détournait l'utilisation du float, au lieu de garder la tête dans le sable, ils ont pris en considération l'utilisation qu'on en faisait et on changé l'utilisation type du float. Donc à la base (comme je dis dans mon premier poste), mais vraiment la base de base il ne servait pas à ça ! Smiley langue

... oui c'est une explication foireuse, ^^ mais merci de ton échange c'est très instructif, je serai moins catégorique sur le float.

Mais je n'en démordrai pas :
jb_gfx a écrit :

mais pour présenter, par exemple, des photos sous formes de grille c'est tout à fait acceptable
Pour moi c'est une liste d'image, donc <ul> !
Modifié par Gili (11 May 2012 - 17:27)
Gili a écrit :
Pour moi c'est une liste d'image, donc &lt;ul&gt; !


Non une grille (matrice) ce n'est pas une liste. Smiley smile
Oui, et avec un lecteur vocal on aura droit avant chaque item "ligne 1, colonne 2", ça dois être passionnant de naviguer la dedans Smiley langue enfin maintenant ça dépend où on met les priorités ^^.

De plus le concept de grille est un concept de présentation alors qu'ici on parle bien sémantique. Sémantiquement c'est une liste d'image, visuellement c'est une grille d'accord, mais ça c'est en CSS.

Enfin c'est un débat sans fin je crois Smiley langue
Pages :
Sujet clos
Aller à