Less/Sass - Layout via table-cell

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)

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).

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.
Modifié par jb_gfx (11 May 2012 - 16:34)

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é.

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 !! . 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)

Oui donc "à la base" c'est bien CSS1 et pas 2.0 ou 2.1 (ni 3 ni 4) ...

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

Gili a écrit :
Pour moi c'est une liste d'image, donc <ul> !

Non une grille (matrice) ce n'est pas une liste.

Oui, et avec un lecteur vocal on aura droit avant chaque item "ligne 1, colonne 2", ça dois être passionnant de naviguer la dedans 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