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.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 :La propriété position porte merveilleusement bien son nom puisqu'elle va nous permettre de gérer les… positions.
Ah bonThe 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.
Bon les flottant alors :
Source : In search of the One True LayoutIt'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.
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 !
Source : Absolute positioning Vs. floatsIf elements should not interact, use absolute positioning, if they should, use 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
Partager