Navigateurs standard CSS vs. iPhone ou appareils mobiles : deux modèles de boîtes ? exemple astucieux

Question

Cela devrait intriguer les spécialistes du CSS. Voici une situation où j'ai expérimenté deux comportements différents pour le support du modèle de boîte :

D'un côté : Tous les navigateurs standards (IE, Chrome, Firefox, Opera, etc., à partir d'IE7+, etc., et même Safari pour iPad ou iPhones avec iOS6+)

De l'autre côté : Certains navigateurs mobiles (testé sur iPhone/iPod, et sur les appareils Samsung Galaxy Ace (Android)).

Voici le HTML

<div class="parent">
    <div class="floatright">Sidecontent Sidecontent Sidecontent Sidecontent Sidecontent Sidecontent Sidecontent Sidecontent Sidecontent Sidecontent </div>
    <div class="nofloat">Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content </div>
</div>

CSS

.parent {
    background: yellow;
    width: 400px;
    height: 200px;
}
.nofloat {
    background: pink;
    float: none;
    margin-right: 20px;
    overflow:hidden;
}
.floatright {
    background: orange;
    float: right;
    width: 200px;
    margin: 0;
    padding: 0;
}

Vous pouvez le tester ici : http://jsfiddle.net/Kyk2P/1/

Voici l'histoire :

Dans les navigateurs standard, le .nofloat s'étend sur toute la largeur de son parent, car il n'est pas flottant. Le site .floatright flotte "au-dessus" de lui sur son côté droit et, pour cette raison, repousse son contenu vers la gauche. La propriété overflow: hidden; fait une astuce supplémentaire : au lieu que le texte enveloppe l'élément flottant, il reste dans une colonne à gauche. Techniquement, l'élément flottant ne fait que repousser le "contenu" de l'élément flottant. .nonfloat et non le conteneur lui-même, ce qui a le résultat suivant : aucune marge n'est donc visible, car elle est appliquée à droite du conteneur .nofloat qui est en fait "couvert" par l'élément flottant. C'est le résultat normal auquel on peut s'attendre.

Sur un iPod (iOS5) ou un appareil Samsung Ace, le résultat est différent. Il semble que le .nofloat ne remplit que l'espace du conteneur parent qui reste vide après l'ajout de l'élément .floatright a été déplacé vers la droite. Résultat : le conteneur lui-même trouve un contexte plus étroit dans lequel il peut appliquer ses marges et ses coins sur l'élément flottant. Dans ce cas, nous obtenons une marge entre le contenu (en fait, le conteneur...) et l'élément flottant.

Une image valant mieux que des mots, voici ce qui se passe :

Mes questions sont les suivantes :

1. Est-ce normal ?
2. De quelle manière la règle CSS doit-elle être exprimée pour que nous obtenions le même résultat (de préférence le cas n°1) dans les deux cas ?

--- EDIT ---

Grâce à Angelin, je sais maintenant que les iPhones avec iOS6 obtiennent le Cas#1. Cependant, les iPhones avec les téléphones iOS et Android précédents obtiennent le cas#2. Cauchemar !

Answer 1

Selon la spécification CSS2.1, il s'agit d'une situation dont le comportement exact est indéfini. Puisque le .nofloat Le bloc a overflow:hidden il établit le nouveau contexte de formatage du bloc. La spécification dit ce qui suit sur cette situation :

Le cadre de bordure d'un tableau, d'un élément remplacé au niveau du bloc, ou d'une dans le flux normal qui établit un n contexte (par exemple, un élément dont le paramètre "overflow" est différent de "visible"). ne doit pas chevaucher la zone de marge des éléments flottants qui se trouvent dans le même contexte de formatage de bloc que l'élément lui-même. Si nécessaire, les implémentations doivent dégager ledit élément en le plaçant en dessous de tous les éléments flottants précédents. flottants précédents, mais peuvent le placer à côté de ces flottants si l'espace est suffisant. espace suffisant. Elles peuvent même rendre le cadre dudit élément plus étroite que celle définie par section 10.3.3 . CSS2 ne définit pas lorsqu'un UA peut placer ledit élément à côté du flotteur ou b élément peut devenir plus étroit .

Je pense donc que c'est normal. Les deux comportements ne sont pas en contradiction avec la spécification. Alors que les navigateurs pour ordinateurs de bureau et tablettes ont tendance à utiliser le plus d'espace horizontal possible, les navigateurs mobiles ont tendance à rendre les blocs de texte plus étroits afin d'en faciliter la lecture sur les petits écrans. Je pense qu'il n'y a rien à "réparer" dans ce comportement, mais si vous avez besoin d'un affichage plus cohérent, vous pouvez utiliser d'autres modèles de mise en page (par ex. display: table-* ou Flexbox) au lieu de flotteurs.

Answer 2

Vous pouvez spécifier différentes règles CSS en fonction de la taille de la vue. On dirait que les systèmes ont des méthodes différentes pour rendre le CSS, il faut donc être plus précis :

http://dev.w3.org/csswg/css-device-adapt/#viewport-descriptors