Ausschlüsse

CSS-Ausschlüsse (Cascading Stylesheets) sind neu in Internet Explorer 10 und Windows Store-Apps mit JavaScript. Mit CSS-Ausschlüssen können Webautoren jetzt Text umbrechen, damit er Elemente vollständig umschließt. So umgehen Sie die traditionellen Einschränkungen von Gleitkommawerten. Statt Elemente insofern einzuschränken, dass sie von ihrer Position aus links oder rechts im Dokumentfluss schweben, können CSS-Ausschlüsse in einem festgelegten Abstand vom oberen, unteren, linken oder rechten Seitenrand eines enthaltenen Blocks platziert werden und dennoch Teil des Dokumentflusses bleiben.

Der Support für CSS-Ausschlüsse in Internet Explorer 10 und Windows Store-Apps mit JavaScript ermöglicht Szenarien wie das auf dem folgenden Bild, auf dem das Layout der abgebildeten App dem Layout einer Seite ähnelt, die Sie in einer DTP-Anwendung wie Microsoft Word oder Adobe InDesign gestalten würden.

Außerdem können Sie CSS-Ausschlüsse mit anderen neuen Layoutfunktionen von Internet Explorer 10 und Windows Store-Apps mit JavaScript kombinieren, wie etwa CSS-Rasterlayout, CSS-Mehrspaltenlayout und CSS-"Flexbox"-Layout. CSS-Ausschlüsse sind im Entwurf CSS-Ausschlüsse und Shapes des World Wide Web Consortium (W3C) definiert. Die folgenden Unterabschnitte enthalten eine kurze Übersicht über CSS-Ausschlüsse und deren Implementierung.

Hinweis  Aufgrund des vorläufigen Status von CSS-Ausschlüssen müssen die in diesem Thema beschriebenen Eigenschaften mit dem Microsoft-spezifischen Anbieterpräfix "-ms-" verwendet werden, um in Internet Explorer 10 und Windows Store-Apps mit JavaScript unter Windows 8 verwendet werden zu können. Zudem stimmen die in der Spezifikation der CSS-Ausschlüsse beschriebenen Eigenschaften und Syntaxen möglicherweise nicht exakt mit den in diesem Thema beschriebenen Eigenschaften und Syntaxen überein. Da die Entwicklung der Spezifikation noch nicht abgeschlossen ist, kann sich dies noch ändern.

Definierte Ausschlussbegriffe

Hinweis  Die Syntax für CSS-Ausschlüsse (früher als "positionierte Gleitkommawerte" bezeichnet) hat sich gegenüber früheren Vorabversionen geändert.

Wenn Sie sich über Ausschlüsse informieren, sollten Sie sich über die folgenden Begriffe informieren, die im Abschnitt Definitionen der Spezifikation CSS3-Ausschlüsse definiert sind. Darüber hinaus sollten Sie sich mit den Begriffen zum CSS-Boxmodell vertraut machen.

Ausschlusselement

Die -ms-wrap-flow-Eigenschaft macht aus einem Element ein Ausschlusselement, wenn es einen anderen berechneten Wert als auto aufweist. Diese Eigenschaft gibt an, dass das Ausschlusselement (der Ausschluss) auf unterschiedliche Weise positioniert werden kann (wie in den folgenden Abschnitten beschrieben), und dass Inlineinhalte den Ausschluss ähnlich wie frei angeordnete Elemente umschließen.

Ausschlussbereich

Der Ausschlussbereich ist der Bereich, der für den Ausschluss von fließendem Inlineinhalt um ein Ausschlusselement verwendet wird. Beim CSS-Boxmodell entspricht der Ausschlussbereich der Rahmenbox. Derzeit wird für den Ausschlussbereich in Internet Explorer 10 und Windows Store-Apps mit JavaScript immer ein Rechteck verwendet.

Float-Bereich

Der Float-Bereich ist der Bereich, der für den Ausschluss von fließendem Inlineinhalt um ein Ausschlusselement verwendet wird. Standardmäßig ist der Float-Bereich die Randbox des float-Elements. Derzeit wird für den Ausschlussbereich in Internet Explorer 10 und Windows Store-Apps mit JavaScript immer ein Rechteck verwendet.

Inhaltsbereich

Der Inhaltsbereich ist der Bereich, der für das Layout von fließendem Inlineinhalt eines Elements verwendet wird. Standardmäßig entspricht der Inhaltsbereich der Inhaltsbox.

Umbruchkontext

Der Umbruchkontext eines Elements ist eine Sammlung von Ausschlussbereichen und wird für den Umbruch von fließendem Inlineinhalt verwendet. Ein Element bricht fließenden Inlineinhalt in dem Bereich um, der der Subtraktion des Umbruchkontexts vom eigenen Inhaltsbereich entspricht.

Ein Element erbt den Umbruchkontext des enthaltenen Blocks, es sei denn, es setzt ihn mithilfe der -ms-wrap-through-Eigenschaft explizit zurück.

Das Ausschlusselement

Die -ms-wrap-flow-Eigenschaft macht aus einem Element ein Ausschlusselement.

Wenn der berechnete Wert der -ms-wrap-flow-Eigenschaft auto beträgt, wird aus dem Element kein Ausschlusselement, es sei denn, der berechnete Wert der zugehörigen float-Eigenschaft beträgt nicht none. In diesem Fall trägt das Element seine Rahmenbox zum Umbruchkontext des enthaltenen Blocks bei und wird gemäß der clear-Eigenschaft von Inhalt umschlossen. Weitere Informationen zu den Auswirkungen auf den Inhaltsfluss von Ausschlusselementen finden Sie im Abschnitt Definitionen der Spezifikation CSS3-Ausschlüsse.

Umbruchinhalt um einen Ausschluss

Die -ms-wrap-through-Eigenschaft gibt an, wie Inhalt um ein Ausschlusselement umgebrochen werden muss. Mit dieser Eigenschaft können Sie festlegen, wie sich Ausschlüsse auswirken — z. B. dass ein Inhaltsblock um ein Ausschlusselement umgebrochen wird und ein anderer dasselbe Ausschlusselement überschneidet.

Versetzen des inneren Umbruchshapes

Die -ms-wrap-margin-Eigenschaft gibt einen Rand an, der verwendet wird, um das innere Umbruchshape gegenüber anderen Shapes zu versetzen.

In dem Beispiel im nächsten Abschnitt wird der -ms-wrap-margin auf das frei angeordnete grüne div angewendet.

CSS-Ausschlüsse und das CSS-Raster

In Internet Explorer 10 und Windows Store-Apps mit JavaScript kann auch die neue CSS-Rasterfunktion verwendet werden. In der folgenden Abbildung ist beispielsweise ein Ausschluss innerhalb eines 3×3-Rasters dargestellt. Das Raster enthält ein div-Element mit Inlineinhalt, der sich über alle drei Zeilen und alle drei Spalten erstreckt. Der Ausschluss wurde in der Rasterzelle in Zeile 2, Spalte 2 platziert. Der Inhalt umschließt den Ausschluss.

Sie können diese Seite anzeigen. (Für die ordnungsgemäße Anzeige dieser Seite ist Internet Explorer 10 erforderlich.)

Das Markup für diese Seite lautet wie folgt:

<!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>

API-Referenz

Exclusions

Beispiele und Lernprogramme

Beispiel für CSS-Ausschlüsse

Funktionen für ein adaptives Layout

Demos für die Internet Explorer-Testversion

So geht's: Positionierte Gleitkommawerte

IEBlog-Beiträge

IE10 Platform Preview und CSS-Features für adaptive Layouts

Spezifikation

CSS-Ausschlüsse und Shapes