tests et valeurs pour modifié le contexte de formatage

Tableau et test sur les valeurs réputées modifié le contexte de formatage .

Pour I.E. , on parle plus communément de haslayout ou layout .

A quoi ça sert ?

Cela sert a contenir le dépassement des flottants , a isolé ceux-ci dans une zone déterminée , en dehors de laquelle il n'interfèrerons pas avec la règle : clear par exemple.

On teste donc les flottants et ce contexte particulier pour l'ensemble des navigateurs dans cette page .

Les valeurs possibles modifiant le contexte de formatage

Ces valeurs embarquent aussi leur propriétés habituelles , remarquez et observez les différences (indentation , largeur par défaut , fusions des marges , etc ...) , Un véritable Supermarché a l'option . Si une règle ne cache pas vraiment une autre régle , force est de constaté qu'elle ne vient pas toujours seule !.

Régle CSS jouant sur display

règle C.S.S. Test Affichage Remarques
display:
inline-block;
le conteneur

le flottant

Non-compatible:
  1. Firefox 2 et inférieurs
display:
-moz-inline-stack;

Ce qui est une Alternative possible de :

display: inline -block

pour FF2 moyennant l'ajout d'un élément tampon.

Sans élément tampon

le conteneur

le flottant

Avec élément tampon

le conteneur

le flottant

Compatible :
  1. Firefox

Nécessite l'ajout d'un élément tampon en display:block; et position:relative;(reflow) entre l'élément formaté et le contenu pour faire usage de cette règle expérimentale de Firefox. afin de s'éviter l'effet d'empilement et rendre visible tout les éléments

display:
table;
le conteneur

le flottant

Non-Compatible :
  1. IE 7 et inférieurs
Convient aux autres Navigateurs .
display:
table-row;
le conteneur

le flottant

Non-Compatible :
  1. IE 7 et inférieurs
Peut convenir aux autres Navigateurs .mais Un parent direct en display:table; est supposé être déclaré et les enfants directs en display:table-cell; .
display:
table-cell;
le conteneur

le flottant

Non-Compatible :
  1. IE 7 et inférieurs
Peut convenir aux autres Navigateurs .mais Un parent direct est supposé être déclaré en display:table; ou display:table-row; .
display:
table-caption;
le conteneur

le flottant

Non-Compatible :
  1. IE 7 et inférieurs

Peut convenir aux autres Navigateurs .mais ce choix de valeur est loufoque .. sauf si le contexte html/contenu peut le justifier (repositionner un titre par exemple) .

Si ce choix est motivé par la particularité de positionnement (haut , gauche , bas droite ) par rapport a un parent en display:table; , les flottements ou positionement absolue sont aussi utiles.

Pour suivre , flottons les flottants ... ou reculons pour mieux sauter ?

Cette option peut-être intéressante , là ou une autre technique provoquerais un defaut ou serait inadaptée ...

Régle CSS jouant sur float

Remarquons que le tableau est lui même doté d'un contexte de formatage particulier par défaut

La régle float , l'emporte aussi sur toute règle de type display .

règle C.S.S. Test Affichage Remarques
float:
left;
le conteneur

leflottant

Compatible:
  1. Tous Navigateurs
float:
right;
le conteneur

leflottant

Compatible:
  1. Tous Navigateurs

Passons aux régles de position .

Régle CSS jouant sur position

une hauteur est imposée aux cellules pour gardé de la place , ainsi qu'un position:relative; pour que celle-ci soit prise en réference.

La régle position , l'emporte sur les régle de type display et float .Les marges extérieurs restent applicables .

règle C.S.S. Test Affichage Remarques
position:
absolute;
le conteneur test doit se trouvé ci-dessous a 1/2em de distance du texte:
le conteneur

leflottant

Compatible:
  1. Tous Navigateurs
position:
fixed;

Retrouvez le conteneur et son flottant en bas a droite, dans les navigatueurs qui implémente le position:fixed;

le conteneur

leflottant

Non Compatible:
  1. IE 6

Les règles overflow .

Régle CSS jouant sur overflow

Si overflow est déclaré Impuissant a contenir les elements flottants dans IE 6 , il n'en est pas moins parfaitement implémenté dans son usage classique , les barres de defilement seront affichées ou les contenus débordants cachés.

règle C.S.S. Test Affichage Remarques
overflow:
auto;
le conteneur

le flottant

Non-Compatible:
  1. IE 6

Confére le "haslayout" dans IE7.

overflow:
hidden;
le conteneur

le flottant

Non-Compatible:
  1. IE 6

Confére le "haslayout" dans IE7.

overflow:
scroll;
le conteneur

le flottant

Non-Compatible:
  1. IE 6

Confére le "haslayout" dans IE7.

overflow:
visible;
le conteneur

le flottant

Cette valeur est appliqué par défaut.

Elle ne modifie en rien le CDF

Les dédiées IE : (max/min-)height , (max/min-)width .

Régle CSS jouant sur height , width , zoom

Ces régles bien connues pour IE , ne sont pas toujours de meilleur choix

règle C.S.S. Test Affichage Remarques
height:
1%;
le conteneur

le flottant

Compatible:
  1. IE

Cette régle peut jouée des tour dans IE 7 et tout les autres navigateurs si le parent a une hauteur spécifiée

width:
1%;
le conteneur

le flottant

Compatible:
  1. IE

Cette régle peut jouée des tour dans IE 7 et les autres navigateurs si le parent a une largeur spécifiée (ICI , le tableau reçoit la régle : width:100%; )

min-height:
0 ou plus
le conteneur

le flottant

Compatible:
  1. IE 7
max-height:
valeur supérieur a 0
le conteneur

le flottant

Compatible:
  1. IE 7
min-widtht:
0 ou plus
le conteneur

le flottant

Compatible:
  1. IE 7
max-width:
valeur supérieur a 0
le conteneur

le flottant

Compatible:
  1. IE 7

La spécifique IE : zoom .

Régle CSS jouant sur zoom

Cette règle zoom est a privilégier , car neutre pour les autres navigateurs ...

règle C.S.S. Test Affichage Remarques
zoom:
1;
le conteneur

le flottant

Compatible:
  1. IE

Cette régle totalement ignorée par les autres navigateurs donne un résultat trés similaire a overflow

Une autre régle spécifique a Microsoft Internet Explorer confere elle aussi le layout , elle n'est pas evoqué ici , quelle est-elle ?

Vous trouverez une réponse dans le lien suivant A propos du layout dans IE (page en langue anglaise).

Ecrire un commentaire




Quelle est la première lettre du mot adlujj ?