28172 sujets

CSS et mise en forme, CSS3

Bonjour,

J'avais deja cree un sujet sur ca, mais maintenant j'ai de nouvelles questions... et en plus le sujet est clos Smiley langue

J'aimerais developper une fonction permettant de faire basculer le site en RTL ou LTR en un clic.
Mais il faut d'abord que je sache quelque chose :
1) l'attribut html dir change quoi s'il passe de LTR a RTL ? Seulement les elements HTML ?
2) Donc il faudrait changer tous les elements CSS :
A- contenant le mot "left" ou "right" dans leur nom (exemple margin-left)
B- contenant le mot "left" ou "right" dans leur valeur (float: left)
C- inverser les valeurs 2 et 3 d'un element CSS contenant 4 valeurs (exemple margin: 1px 2px 3px 4px)
Autre chose ?
Y a-t-il une possibilite pour changer ces valeurs automatiquement ? Une sorte de "Remplacer tel mot par tel mot dans la CSS" en Javascript ou JQuery ? Puis ensuite un algorithme qui transforme "css: a b c d" en "css: a c b d" ?

Merci =)
Modifié par LightBen (06 Nov 2013 - 16:10)
Bonsoir,

l'attribut dir ne change que le sens de lecture , il n'a donc un effet que sur les texte et les boite en ligne ou formaté comme tel.

Il ne modifie pas les valeurs de float.

Voici quelques tests jouant sur la version CSS de l'attribut dir (direction).
http://codepen.io/gcyrillus/tag/direction
Il y a celui-ci aussi, , qui permutent les barres de défilements, tout les navigateurs ne le font pas , certains gardent la direction(ou dir) par défaut du document principal.
++
Qu'est ce qui suit le sens de direction/dir :
texte et element en ligne, text-indent, la ponctuation.

Pour inverser le sens d'affichage du texte et pas seulement la ponctuation, quelques infos /tests visuels ici : http://www.startyourdev.com/css/style-css-unicode-bidi

<edit> Si ton objectif est de faire des template CSS/HTML qui s'adapte automatiquement au sens d'affichage, il te faudra abandonner float, au profit de display: inline-block, inline-table, inline-block et dans l'avenir : display:flex ... avis perso bien sur Smiley smile

+ un vieux test comparant display, tableau et float avec direction. http://gcyrillus.free.fr/essai/testdroite-gauche-inline-block.html
Modifié par gc-nomade (06 Nov 2013 - 19:30)
Entre les sites multi langues, le RWD, etc... quel foutoir Smiley langue

Nouvelle question : quelle disposition adopter pour les sites responsive ? J'avais lu sur un site dont je n'ai malheureusement plus la source, d'eviter les inline block et les float... donc du coup comment on met des div a coté lol ?

Vaut mieux que je sois pret a ca des le depart avant d'aller plus loin...

Donc quelle disposition choisir pour un site adapté au RWD ET a un site multilangues avec LTR et RTL ?

Autre question : c'est quoi BiDi exactement ?
LightBen a écrit :
Entre les sites multi langues, le RWD, etc... quel foutoir Smiley langue

tout à fait thierry ! , et je suis loin d'être un expert Smiley decu

LightBen a écrit :

Nouvelle question : quelle disposition adopter pour les sites responsive ? J'avais lu sur un site dont je n'ai malheureusement plus la source, d'eviter les inline block et les float...


il y a la technique du mobile first , dans la même veine que l’amélioration progressive. C'est une technique qui facilite la tache lorsque l'on commence.
Il te faut aussi faire tes choix sur ce que tu veut inclure dans ton mot 'responsive' . poids de la page/image, interaction, animation CSS ou js zappés en tout ou partie , layout , mise en place de point de rupture sur les largeurs, mediaquerie ou juste une fluidité via float ou inline-block , car ceux la s'adaptent tout seul à la largeur disponible et s'empile si il ne peuvent se côtoyer. Tu peut t'inspirer d’intégration réussies et voir quel choix ont étè fait ... visuellement avant de décortiquer les techniques mise en places. chaque pages à ses contrainte et chacun a des connaissances et maitrises différentes. Eradiquer float ou inline-block sans bonne raison n'à pas plus de sens que de les utilisé systématiquement, ce qui compte c'est la simplicité (dans le sens ou tu utilise des techniques que tu comprends bien).

LightBen a écrit :

donc du coup comment on met des div a coté lol ?
Vaut mieux que je sois pret a ca des le depart avant d'aller plus loin...

et bien tu as display et ses multiples valeurs et ... float .
LightBen a écrit :

Donc quelle disposition choisir pour un site adapté au RWD ET a un site multilangues avec LTR et RTL ?

Sans trop d’expérience la dessus , je dirais que c'est à toi de définir ces contraintes en fonctions de tes contenus possibles et maquettes. mis a part le float qui peut être à eviter, je ne vois pas trop ce qui devrait être utiliser avec prudence, si le positionement absolu et les marges négatives, mais c'est une généralité.
LightBen a écrit :

Autre question : c'est quoi BiDi exactement ?

C'est la version CSS de la balise <bdo>, ce qui détermine, en gros, si les lettres et mots d'un texte sont pris(es) chacun(es) comme des boite en ligne ou pas ...
http://www.w3.org/TR/html401/struct/dirlang.html#h-8.2.1

++
Donc du coup, la solution à préférer pour mettre des div à côté suivant ta réponse (qui semble la plus simple), c'est le display inline block non ?

Je suis nouveau dans le monde du JS et j'essaie de créer des trucs par moi-même (bon pour apprendre) mais aussi le plus simple possible (bon pour partager aussi).

Donc je me demandais s'il était possible de créer un algorithme qui fait tout simplement ça :
"Si clic sur drapeau Israel :
1) HTML dir LTR devient RTL
2) Rechercher dans la CSS tous les "left" et les tranformer en "right" ET rechercher tous les "right" et les transformer en "left"
3) si une propriété a 4 valeurs qui se suivent, inverser la 2e et la 3e."

C'est possible ? C'est recommandé ? Ya mieux ?

Merci Smiley langue

Edit: pourtant sur Bootstrap, qui est quand même une bonne référence, leur grille utilisent float left http://getbootstrap.com/css/#grid
Modifié par LightBen (07 Nov 2013 - 21:53)
LightBen a écrit :
Donc du coup, la solution à préférer pour mettre des div à côté suivant ta réponse (qui semble la plus simple), c'est le display inline block non ?

pas forcement, display à d'autres valeurs et puis il faut aussi penser que l'inversion du sens de lecture ne veut pas forcement dire qu'il faut retourner l'ensemble du site, il n' y a que le flux de lecture qu'il faut préservé.
Un menu vertical à gauche est finalement la ou l'on s'attend à le trouver, même si parfois je pense que à droite il est seraitt plus proche de mon curseur de souris ... de la barre de scroll Smiley smile
LightBen a écrit :

Je suis nouveau dans le monde du JS et j'essaie de créer des trucs par moi-même (bon pour apprendre) mais aussi le plus simple possible (bon pour partager aussi).

Donc je me demandais s'il était possible de créer un algorithme qui fait tout simplement ça :
&quot;Si clic sur drapeau Israel :
1) HTML dir LTR devient RTL
2) Rechercher dans la CSS tous les "left" et les tranformer en";right" ET rechercher tous les &quot;right&quot; et les transformer en &quot;left&quot;
3) si une propriété a 4 valeurs qui se suivent, inverser la 2e et la 3e.&quot;

C'est possible ? C'est recommandé ? Ya mieux ?

Merci Smiley langue

le mieux est de modifie les class ou id. ce que tu envisage via la balise HTML ou BODY est une bonne chose a faire.
Ensuite dans ta feuille de style tu te sert de ce sélecteur pour appliqué le style qui te convient au mieux.
ex:
#menu      {float:left;}
.rtl #menu {float:right;}

idem pour les margin

LightBen a écrit :

Edit: pourtant sur Bootstrap, qui est quand même une bonne référence, leur grille utilisent float left http://getbootstrap.com/css/#grid

C'est un bon outil mais n'est pas la réponse à toute les integrations et il supporte sans soucis d'être utilisé en partie et d'être surchargé par une seconde feuille de style Smiley smile

Cdt,
Merci pour ta reponse =)

Mais je voudrais savoir s'il est possible en JS de faire un algorithme comme je l'ai precise au dessus ?
Un Rechercher remplacer en gros, mais dans la CSS...

Parce que c'est fastidieux d'aller chercher toutes les choses a remplacer, les float, margin, padding, sans oublier les effets (box shadow et tout le reste)
Modifié par LightBen (10 Nov 2013 - 11:43)
oui , c'est possible, mais il est plus efficace et concis d'en passer par l'ajout d'une classe, la solution Js qui parse tes style est une solution pour des feuille de styles déjà conçu ou cette possibilité de passer de rtl a ltr n'as pas étè prévue.

Quant aux règles à mettre à jour, il est peut-être judicieux de faire des class communes pour gérer les text et box -shadow, margin,padding, float, direction, bidi-override ... probable qu'il n'y ait pas tant de chose que ça à 'inverser' Smiley smile .

Le choix de sens de lecture peut aussi etre fait coté serveur en injectant ou non une class sur body ainsi que la liaison avec la feuille de style.

++
Donc le best selon toi serait de prendre le temps et de modifier toutes les valeurs de right et left sous une classe ajoutee au body ?

Le probleme avec le Rechercher remplacer c'est quoi en fait ? Si automatiquement tout est remplace automatiquement ? (j'ai pas compris le sens du "plus efficace et concis)
LightBen a écrit :
Donc le best selon toi serait de prendre le temps et de modifier toutes les valeurs de right et left sous une classe ajoutee au body ?

Ceci est dans le cas ou tu y tient vraiment,
mais un margin ou padding: 0 1em;n'a pas d'importance,
pour text-align, je suppose qu'il n'y a que la valeur right a modifiée en théorie, left n'est généralement pas répétée et les autres insensible au sens d'affichage.
Pour les box ou text-shadow, la première valeur est à passer en négatif ...
float est explicite , difficile de se tromper la dessus.

LightBen a écrit :
Le probleme avec le Rechercher remplacer c'est quoi en fait ? Si automatiquement tout est remplace automatiquement ? (j'ai pas compris le sens du &quot;plus efficace et concis)

via js , il te faut soliciter des ressources et mouliner tout ce qui peut contenir des styles, lorsqu'une classe à appliquer ne coute rien et tu maitrises toujours ce qu'il se passe derrière , zero souci avec le cache du navigateur.

Je pense peut-être à tord, qu'en se basant sur une class, que ce serait une bonne solution.
Non, je suis d'accord avec toi, c'est la première solution directe à faire à laquelle j'avais pensé après réflection, mais mon problème c'est que j'aimerais automatiser tout ça, à la manière d'un WPML (sauf que ce plugin très avancé prend en compte plein de paramètres, mais prend aussi le RTL en compte, et il n'y a pas besoin de coder, il y a surement des algorithmes derrière qui prennent ça en charge.

Donc pour le moment le best c'est la classe dans le body...

Ensuite, j'ai une solution de rechercher remplacer qui prend beaucoup de ressources. Peut-on tout de meme m'aider à la mettre en place ? (comment fait-on pour controler par JS le code CSS de cette manière ? c'est intéressant à savoir)

Finalement, existe-t-il une meilleure solution, automatique et qui utilise moins de ressources ?

Merci =)
Merci pour tes réponses gc-nomade =)
re hello, pour ce qui est du parsage de tes style, je ne suis pas développeur,je ne saurai te conseiller tel ou tel script ni même quel methode adopté ... je m'y suis dejà frotté en PhP et je suis lamentable, je passe donc la main sur ce coup là Smiley smile
++