[Débat]Quel méthode choisir pour positionner un élément

[Ethyde]

Bonjour,

Suite à un sujet et à une discutions, je suis tombé face à une problématique : quels sont les différentes façons de positionner un élément en css et la ou lesquelles sont valide(s) CSS et/ou WCAG ?

En effet quand on cherche à se renseigner sur le sujet, un dev' pourras trouver différent son de cloches et le couple fan/détracteur qui vas avec, alors qu'en est il ?

Le positionnement absolu/relatif/fixe :

Une boîte en positionnement absolu peut être placée n'importe-où dans le code HTML et s'afficher à l'endroit de votre choix. Ceci s'avère très utile en particulier pour :

* placer les menus de navigation en fin de page, pour améliorer l'accessibilité de votre site en donnant un accès immédiat à son contenu dans les navigateurs textes, tout en les faisant apparaître en haut de page ou encore dans une colonne pour les navigateurs graphiques ;
* créer plusieurs colonnes au positionnement indépendant de l'ordre dans lequel elles se trouvent en HTML.

La propriété position porte merveilleusement bien son nom puisqu'elle va nous permettre de gérer les… positions.

Bien bon la on peu se dire ok c'est bon je sais comment faire mais l'usage qui peu en être fait, et qu'il est préconisé d'en faire, contredis la norme W3C qui dit que :

The objective of this technique is to ensure that the order of content in the source code is the same as the visual presentation of the content.

Ah bon

Bon les flottant alors :

It's good for the users

Browsers that do not make use of the CSS positioning information will present the content in the order that it is marked up. Consequently the ordering of content in the source code is important as far as accessibilty [1] and assistive technologies are concerned. [3]
It's good for you

The overriding rationale behind CSS is the separation of content and style - the removal of non-semantic cruft and complete ordering flexibility theoretically allows for repurposing of content without the need for tweaking html.

Although this might be less useful for an individual's site where markup can be altered to accomodate design changes, this is a huge win for systems based on templates where changing the html is either impossible or undesirable.

Furthermore it promises even greater customisability of a site for individual users. For instance, side columns could be swapped over or even placed on the the same side (though whether this would be a good idea or not is debatable).
It's good for you and the users

Search engine spiders/robots read web pages like this - they start at the top left, read across, and then move down. Consequently the ordering of content on a page is important as far as search engine algorithms are concerned.

Source : In search of the One True Layout

Ou encore d'une maniere plus générale :Faux Absolute Positioning

Mais à l'origine float n'a pas été fait pour, puisque cette proprieté existe pour des raisons de mise en page typographique :

La propriété float existe avant tout pour répondre à un besoin typographique précis: la création d'habillages.

Ainsi donc l'usage des flottant pour faire une page complète serais donc une utilisation détourné de cette propriété.

Et il y a entre les deux ?

Mais oui ma bonne dame !

If elements should not interact, use absolute positioning, if they should, use floats.

Source : Absolute positioning Vs. floats

Donc que répondre à un designer/développeur qui voudrait faire des sites moderne, qui respect les normes en vigueur et sois accessible (et pourquoi pas sans hack ? :p ) ?

Remerciement à Erwan31 pour m'avoir donner l'idée de faire se topic et m'avoir fournie certains liens concernant les flottants.

ps : Merci d'argumenter les réponses et de citer les sources

[Edit] je viens de m'apercevoir que j'avais oublié une autres façon d'aborder les choses la proprieté display: table-cell expliqué dans cet article : Everything You Know About CSS Is Wrong

[Erwan31]

Salut Ethyde

Envoyé par Ethyde

Suite à un sujet et à une discutions, je suis tombé face à une problématique : quels sont les différentes façons de positionner un élément en css et la ou lesquelles sont valide(s) CSS et/ou WCAG ?

Il ne faut pas confondre validité CSS et conformité aux standards, ce n'est pas tout à fait la même chose. En simplifiant, ces specs définissent le comportement standard que devraient adopter les UA (navigateurs, lecteurs d'écran...) et les règles d'écritures qui doivent être respectées pour obtenir une CSS valide.

Envoyé par Ethyde

Ainsi donc l'usage des flottant pour faire une page complète serais donc une utilisation détourné de cette propriété.

A propos de l'article en question désolé mais je ne répéterai pas ici ce que je t'avais brièvement expliqué en espérant que tu ne m'en tiendra pas rigueur

Les specs CSS ne préjugent en rien de l'utilisation qui devrait en être faites dans une approche pragmatique et plus globale de qualité web et plus particulièrement d'accessibilité (dans lequel j'inclus le référencement) dirigée vers la satisfaction de l'utilisateur final.
Il faut d'avantage les voir comme un simple mode d'emploi des propriété/selecteurs/... et non pas des bonnes pratiques à appliquer.

Autrement dit le choix entre telle ou telle méthode ne devrait pas tant découler des specs CSS que des WCAG/ARIA voire des specs HTML 4.0
ou il peut arriver de trouver des bonne pratiques...

Bref mon propos est sans doute très simplificateur et je préfère ne pas trop m'aventurer dans les mécaniques sous-jacentes des différentes specs, sujet que je ne connais pas assez bien. Il faudrait pour cela quelqu'un d'impliqué directement au sein du W3C et qui en parle d'avantage en connaissance de cause.

Sinon a propos du One true layout te du faux positionning, ce sont des techniques que je trouve pour ma part excessivement complexes et qui n'apporte finalement pas grand chose, en tous cas je n'ai personnellement jamais eu besoin des les utiliser en 4/5 ans d'utilisation des div.
Par ailleurs ce sont des méthodes de positionnement difficile à maintenir
notamment à cause de le gestion différente des flottant sur IE7 et surtout IE6.
Bref je ne m'étalerai pas sur ces méthode expérimentales (et un peu délirantes) dont l'utilité est plus que réduite...

Envoyé par Ethyde

[Edit] je viens de m'apercevoir que j'avais oublié une autres façon d'aborder les choses la proprieté display: table-cell expliqué dans cet article : Everything You Know About CSS Is Wrong

Même chose le support des display tables et dérivé n'étant pas pris en compte dans IE7-, l'intérêt actuel est très réduit.

[GihefBey]

Bonjour,

Les choix effectués par le W3C et offerts par HTML, CSS, etc. permettent d'utiliser des techniques différentes. Ces choix ont été faits, semble-t-il, par des spécialistes qui avaient des besoins. Ils ont donc inventé des techniques adaptées à leurs besoins et qu'ils ont mises à notre disposition. Rien ne nous interdit de les utiliser.
Cette diversité nous donne un peu de liberté.
Cette liberté ne signifie pas qu'on peu faire n'importe quoi, mais qu'on peut à notre tour faire des choix dans un contexte donné, qu'on a le choix pour atteindre le but qu'on s'est fixé.

Au gré des découvertes, des essais de ces techniques, on apprend à les connaître.
On en trouve une qui fonctionne bien, qu'on aime utiliser, qu'on sait adapter et qui permet de fabriquer des pages correctes, lisibles, ergonomiques...
Les discussions ou polémiques qu'on trouve sur le web sont souvent le fait de spécialistes qui ont leur propre personnalité et il faut en tenir compte. Elles naissent aussi à un certain moment de l'évolution des techniques. Mais les dogmes n'apportent jamais de supplément de liberté.
Les bidouillages, parfois géniaux, sont souvent intéressants à étudier et apportent des solutions à des problèmes qu'on rencontre. Ils servent aussi à démontrer le savoir faire de leur auteur. Quant à en utiliser réellement certains dans le cadre d'un site professionnel... D'autres choix plus simples sont certainement à étudier, proposer.

Personnellement, j'aime beaucoup utiliser le float (qui n'est pas à proprement parler un positionnement). Je lui trouve beaucoup de souplesse. J'y retrouve un peu des possibilités qu'offrent les logiciels de mise page papier. Et, avec CSS3, cela va encore s'améliorer (faire couler le texte sur plusieurs colonnes, par exemple).
Mais ça ne m'empêche pas de me servir ponctuellement de absolute (qui est plus rigide) lorsque j'en ai besoin, lorsque ce que je veux obtenir est impossible autrement ou facilement, lorsque je veux placer précisément (au pixel près) un élément. Cela toujours en relation avec un autre élément positionné en relative.
Et le mélange des trois n'est pas interdit.

En résumé, il me semble que ce qui compte, c'est le résultat.
Si le document est et reste lisible... alors on a fait le bon choix.
Surtout si ce choix va permettre une maintenance aisée.
La simplicité, il faut essayer de rester simple. Et souple, il faut savoir adapter.

-

[Macmillenium]

Bonjour,

De même avis que Erwan31 et GihefBey.

J'ajoute que chaqu'une de ces propriété à son coté pratique, il ne faut surtout pas mélanger les choses.

[Erwan31]

Hello,

Envoyé par GihefBey

Et, avec CSS3, cela va encore s'améliorer (faire couler le texte sur plusieurs colonnes, par exemple).

Oui ce module est excellent mais malheureusement non implémenté sous IE8.

If elements should not interact, use absolute positioning, if they should, use floats.

D'un point de vue pragmatique, voilà à ma avis un bon point de départ pertinent pour décider du choix du type de positionnement à faire même si ça nécessite tout de même quelques précautions à prendre en cas de visualisation sur petits écrans.

Envoyé par GihefBey

En résumé, il me semble que ce qui compte, c'est le résultat.
Si le document est et reste lisible... alors on a fait le bon choix.

Lisible ou plus globalement accessible (accessibilité visuelle ici) et ergonomique (en supposant qu'on y inclut le design), la lisibilité n'étant qu'un des critères de qualité.

Ainsi donc l'usage des flottant pour faire une page complète serais donc une utilisation détourné de cette propriété.

Pour revenir à cette affirmation, j'ajouterais qu'il n'y a pas réellement et qu'il ne devrait pas y avoir de notion de détournement en CSS comme il y en a (et à juste titre) en HTML4.
Comme le dit justement GihefBey on est relativement libre de faire ses bon choix selon ses propres besoins.

[Ethyde]

Envoyé par Erwan31

D'un point de vue pragmatique, voilà à ma avis un bon point de départ pertinent pour décider du choix du type de positionnement à faire même si ça nécessite tout de même quelques précautions à prendre en cas de visualisation sur petits écrans.

Oui je suis d'accord c'est à mon avis la réponse la plus "neutre" mais de ce fait et de pas ce qu'elle induit (savoir gerer position et float dans une même page) es ce pertinant ? En ce sens que cela n'a rien d'accessible (dans le sens pratique )à mettre en place.

Envoyé par Erwan31

Pour revenir à cette affirmation, j'ajouterais qu'il n'y a pas réellement et qu'il ne devrait pas y avoir de notion de détournement en CSS comme il y en a (et à juste titre) en HTML4.
Comme le dit justement GihefBey on est relativement libre de faire ses bon choix selon ses propres besoins.

Oui bien sur que pour des raisons aussi bien pratique que logique il faut interpréter les normes, mais bon ... je ne peu m'empêcher de me remettre dans la tête d'un débutant qui se pose la question et qui cherche une solution qui sois accessible sur les 2 point de vue (du dev comme de l'internaute)... et qui se retrouve face à ce dilemme.

De même, et au delà du travail de développement et du respect des normes comment justifier tel ou tel choix sinon en disant "C'est ainsi car c'est selon moi la meilleur façon"

[Erwan31]

Envoyé par Ethyde

Oui je suis d'accord c'est à mon avis la réponse la plus "neutre" mais de ce fait et de pas ce qu'elle induit (savoir gerer position et float dans une même page) es ce pertinant ? En ce sens que cela n'a rien d'accessible (dans le sens pratique )à mettre en place.

Les compétences présupposées et les éventuelles difficultés qu'induit l'usage de telle ou telle technique d'intégration ne devrait pas rentrer en jeux ici.
C'est un simple conseil, une bonne pratique vers lequel il faudrait tendre quelque soit son niveau. D'autre part l'utilisation des flottant est loin d'être insurmontable pour un débutant s'agissant de layout simples (3 colonnes côte à côte par exemple) malgré les quelques précautions à prendre là aussi (en partie pour pallier à des bugs IE).

Envoyé par Ethyde

Oui bien sur que pour des raisons aussi bien pratique que logique il faut interpréter les normes, mais bon ... je ne peu m'empêcher de me remettre dans la tête d'un débutant qui se pose la question et qui cherche une solution qui sois accessible sur les 2 point de vue (du dev comme de l'internaute)... et qui se retrouve face à ce dilemme.

Ce n'est pas tellement d'interprétation dont il est question ici mais de mise en application des specs tout en conservant continuellement et en amont un vision globale de la qualité web.
Évidement cela demande un certain recul et un certain nombre de compétences/connaissances qu'on ne peut acquerir qu'avec l'expérience, tout en ayant un minimum d'exigence quant au résultat attendu (accessibilité des contenus...)
Je pense qu'il faut savoir trouver le juste milieu entre vulgarisation et conseils avisés sachant qu'aucun contenu didactique ne devrait conduire à répandre des contre-vérités ou des idées trop approximatives. Pour ses raisons et dans l'idéal la personne qui doit pondre un tuto doit maitriser totalement son sujet, ce qui n'est hélas pas toujours le cas.

Envoyé par Ethyde

De même, et au delà du travail de développement et du respect des normes comment justifier tel ou tel choix sinon en disant "C'est ainsi car c'est selon moi la meilleur façon"

Tout simplement en se basant sur sa propre expérience, ses connaissances, etc.
Les auteurs t'inspirent donc si peu confiances? Il n'y a pas que du subjectivisme Ethyde loin de là et heureusement d'ailleurs!

PS: fais gaffe à ton orthographe