Cette page vous a-t-elle été utile ?
Votre avis sur ce contenu est important. N'hésitez pas à nous faire part de vos commentaires.
Vous avez d'autres commentaires ?
1500 caractères restants
Exporter (0) Imprimer
Développer tout

Exclusions

Les exclusions CSS (Cascading Style Sheets) constituent une nouveauté dans Internet Explorer 10 et les applications du Windows Store en JavaScript. Avec les exclusions CSS, les auteurs Web peuvent renvoyer du texte à la ligne, de façon à ce qu’il encadre complètement des éléments, ce qui permet d’éviter les traditionnelles limitations des éléments flottants. Plutôt que de limiter les éléments au flottement à gauche ou à droite par rapport à leur position dans le flux de documents, les exclusions CSS peuvent être positionnées à une distance spécifique en haut, en bas, à gauche ou à droite d’un bloc conteneur, tout en continuant de faire partie du flux de documents.

La prise en charge des exclusions CSS dans Internet Explorer 10 et les applications du Windows Store en JavaScript autorise des scénarios tels que celui illustré ci-après, où l’application affichée est disposée de façon similaire à celle où vous pouvez créer une page dans une application de publication assistée par ordinateur telle que Microsoft Word ou Adobe InDesign.

Exemple d’utilisation d’éléments flottants positionnés, où une image est disposée au centre d’un bloc de texte.

En outre, vous pouvez combiner les exclusions CSS avec d’autres nouvelles fonctionnalités de disposition d’Internet Explorer 10 et des applications du Windows Store en JavaScript, telles que la grille CSS, la disposition multicolonne CSS et la disposition Flexbox CSS. Les exclusions CSS sont définies dans la spécification CSS Exclusions and Shapes du W3C (World Wide Web Consortium) actuellement en phase d’ébauche. Les sous-sections suivantes donnent une brève vue d’ensemble des exclusions CSS et indiquent comment les mettre en œuvre.

Remarque  En raison de l’état préliminaire de la spécification « CSS Exclusions », les propriétés décrites dans cette section doivent être utilisées avec le préfixe Microsoft, « -ms- » pour fonctionner avec Internet Explorer 10 et les applications du Windows Store en JavaScript dans Windows 8. En outre, notez que les propriétés et la syntaxe définies dans la spécification « CSS Exclusions » peuvent ne pas correspondre exactement à celles décrites dans cette rubrique. Cela peut changer, car le développement de la spécification se poursuit.

Termes d’exclusion définis

Remarque  Notez que la syntaxe des exclusions CSS (anciennement appelées « éléments flottants positionnés ») a changé par rapport aux versions précédentes.

Pour comprendre le concept des exclusions, il est utile de connaître les termes suivants, qui sont définis dans la section relative aux définitions de la spécification « CSS3 Exclusions ». Il est également utile de connaître les termes associés avec le modèle de boîte CSS.

Élément d’exclusion

La propriété -ms-wrap-flow permet de transformer un élément en élément d’exclusion lorsqu’il a une valeur calculée autre que auto. Cette propriété spécifie que l’élément d’exclusion (l’exclusion) peut être positionné de différentes manières (décrites dans les sections suivantes), et que le contenu inséré entourera l’exclusion de la même manière que les éléments flottants positionnés.

Zone d’exclusion

La zone d’exclusion est la zone utilisée pour exclure le contenu de flux inséré autour d’un élément d’exclusion. En termes de modèle de boîte CSS, la zone d’exclusion est équivalente au contour de la bordure. Actuellement, la zone d’exclusion dans Internet Explorer 10 et les applications du Windows Store en JavaScript est toujours un rectangle.

Zone flottante

La zone flottante est la zone utilisée pour exclure le contenu de flux inséré autour d’un élément flottant. Par défaut, la zone flottante correspond au contour de la marge de l’élément float. Actuellement, la zone d’exclusion dans Internet Explorer 10 et les applications du Windows Store en JavaScript est toujours un rectangle.

Zone de contenu

La zone de contenu est la zone utilisée pour la disposition du contenu de flux inséré d’un élément. Par défaut, la zone de contenu est équivalente à la boîte de contenu.

Contexte de renvoi à la ligne

Le contexte de renvoi à la ligne d’un élément est un ensemble de zones d’exclusion utilisé pour ajuster le contenu de flux inséré à l’aide du renvoi à la ligne. Un élément place son contenu de flux inséré dans la zone qui correspond à la soustraction de son contexte de renvoi à la ligne de sa zone de contenu.

Un élément hérite du contexte de renvoi à la ligne de son bloc conteneur sauf s’il le redéfinit à l’aide de la propriété -ms-wrap-through.

Élément d’exclusion

La propriété -ms-wrap-flow transforme un élément en élément d’exclusion.

PropriétéDescription

-ms-wrap-flow

Les mots clés suivants sont valides pour cette propriété :

auto

Valeur initiale. Pour les éléments flottants positionnés, une exclusion est créée ; pour les autres éléments, aucune exclusion n’est créée.

exemple de -ms-wrap-side:auto
both

Le contenu de flux inséré peut s’étendre tout autour de l’exclusion.

exemple de -ms-wrap-side:both
start

Le contenu de flux inséré peut s’étendre sur le bord de début de la zone d’exclusion mais il doit laisser la zone située après le bord de fin de la zone d’exclusion vide.

exemple de -ms-wrap-side:left
end

Le contenu de flux inséré peut s’étendre après le bord de fin de la zone d’exclusion mais il doit laisser la zone située avant le bord de début de la zone d’exclusion vide.

exemple de -ms-wrap-side:right
maximum

Le contenu de flux inséré peut s’étendre sur le côté de l’exclusion avec le plus d’espace disponible pour une ligne donnée et doit laisser l’autre côté de l’exclusion vide.

clear

Le contenu de flux inséré peut s’étendre au-dessus et en dessous de l’exclusion mais il doit laisser les zones près des bords de début et de fin de la zone d’exclusion vides.

 

Lorsque la valeur calculée de la propriété -ms-wrap-flow est auto, l’élément ne devient pas un élément d’exclusion sauf si la valeur calculée de sa propriété float n’est pas none. Dans ce cas, l’élément intègre le contour de sa bordure au contexte de renvoi à la ligne de son bloc conteneur et le contenu l’entoure selon la propriété clear. Pour plus d’informations sur l’impact des éléments d’exclusion sur le flux de contenu, voir la section relative aux définitions de la spécification « CSS3 Exclusions ».

Entourer une exclusion avec du contenu

La propriété -ms-wrap-through spécifie comment le contenu doit entourer un élément d’exclusion. Vous pouvez utiliser cette propriété pour déterminer l’effet des exclusions—par exemple, pour qu’un bloc de contenu entoure un élément d’exclusion et qu’un autre coupe le même élément d’exclusion.

PropriétéDescription

-ms-wrap-through

Ces mots clés sont définis comme suit :

wrap

Valeur initiale. L’élément hérite du contexte de renvoi à la ligne de son nœud parent. Le contenu inséré de son descendant entoure les exclusions définies en dehors de l’élément.

none

L’élément n’hérite pas du contexte de renvoi à la ligne de son nœud parent. Ses descendants sont uniquement soumis aux formes d’exclusion définies à l’intérieur de l’élément.

 

Décalage de la forme d’ajustement intérieure

La propriété -ms-wrap-margin spécifie une marge qui est utilisée pour décaler la forme d’ajustement intérieure par rapport aux autres formes.

PropriétéDescription

-ms-wrap-margin

Décale le contenu de flux inséré à partir de l’extérieur des exclusions. Les décalages créés par la propriété -ms-wrap-margin sont définis à partir de l’extérieur de l’exclusion. Cette propriété peut être définie avec n’importe quelle valeur de longueur prise en charge.

 

L’exemple dans la section suivante applique la propriété -ms-wrap-margin à l’élément div vert flottant.

Exclusions CSS et grille CSS

Vous pouvez également utiliser les exclusions CSS avec la nouvelle fonctionnalité de grille CSS dans Internet Explorer 10 et les applications du Windows Store en JavaScript. Par exemple, l’image suivante montre une exclusion à l’intérieur d’une grille 3×3. La grille contient un élément div avec du contenu inséré qui s’étend sur trois lignes et trois colonnes. L’exclusion a été placée dans la cellule correspondant à la ligne 2 et à la colonne 2 de la grille. Le contenu entoure l’exclusion.

Exemple d’utilisation des éléments flottants positionnés avec la grille, où une image est placée dans la grille et le contenu l’entoure.

Vous pouvez afficher cette page. (Internet Explorer 10 est nécessaire pour que cette page s’affiche correctement.)

Le balisage de cette page est le suivant :


<!DOCTYPE html>
<html>
<head>
  <title>CSS3 Exclusions Sample</title>
  <style type="text/css">
    .container {
      font-size: small;
      width: 98%;
      height: 100%;
      display: -ms-grid;
      -ms-grid-columns: 1fr 1fr 1fr;
      -ms-grid-rows: 1fr 1fr 1fr;
    }
    .exclusion {
      -ms-grid-row: 2;
      -ms-grid-column: 2;
      background-color: lime;
      -ms-wrap-flow: both;
      padding: 10px;
      -ms-wrap-margin: 15px;
    }
    .dummy_text {
      -ms-grid-row: 1;
      -ms-grid-column: 1;
      -ms-grid-column-span: 3;
      -ms-grid-row-span: 3;
    }
  </style>
</head>
<body>
  <div class="body">
    <h1>CSS3 Exclusions Sample</h1>
    <div class="container">
      <div class="exclusion">
        Exclusion positioned at row 2, column 2.
      </div>
      <div class="dummy_text">
        <p>Lorem ipsum dolor sit amet...</p>
      </div>
    </div>
  </div>
</body>
</html>


Informations de référence sur les API

Exclusions

Exemples et didacticiels

Exemple d’exclusions CSS

Démonstrations du site Internet Explorer Test Drive

Hands On: Positioned Floats

Billets IEBlog

Aperçu de la plateforme IE10 et fonctionnalités CSS pour les dispositions adaptatives

Spécification

CSS Exclusions and Shapes

 

 

Afficher:
© 2015 Microsoft