Erforschen neuer Ideen für das Websitedesign und -layout

Dank der umfassenden Unterstützung für CSS3 (Cascading Stylesheets, Level 3) in Internet Explorer 10 und Windows Internet Explorer 9 können Sie sicher sein, dass das Design Ihrer Website in allen gängigen Browsern funktioniert. In diesem Bereich des Windows Internet Explorer Developer Center lernen Sie einen Teil des Potenzials kennen, das die erweiterte Unterstützung für den Cascading Stylesheets (CSS)-Standard für das Inhaltsdesign und -layout Ihrer Website bereithält.Dieses Thema enthält die folgenden Abschnitte:

Anleitungen für Internet Explorer 10

In den folgenden Themen werden mehrere neue CSS-Funktionen in Internet Explorer 10 vorgestellt:

ThemaBeschreibung

So wird's gemacht: Verhindern (oder Ermöglichen) der Textauswahl auf Ihrer Webseite mit CSS

Die -ms-user-select-Eigenschaft ist eine neue CSS-Eigenschaft, mit der App- und Webentwickler steuern können, wo Benutzer Text auf ihren Webseiten oder in Ihren Windows Store-Apps mit JavaScript auswählen können.

So erstellen Sie mit dem CSS-Raster ein adaptives Layout

Wir führen Sie durch die Erstellung einer einfachen Lightbox-Seite zum Anzeigen von Fotos in einer Fotogalerie. Wir verwenden das Grid-Layout zum Organisieren des Seiteninhalts und Medienabfragen zum Optimieren des Layouts für die Anzeige im Hoch- oder Querformat.

So wird's gemacht: Lebendiges Gestalten von Webseiten mit CSS-Transformationen, -Übergängen und -Animationen

Internet Explorer 10 und Windows Store-Apps mit JavaScript unterstützen CSS-3D-Transformationen, CSS-Übergänge und CSS-Animationen und erweitern somit die Unterstützung für die in Internet Explorer 9 eingeführten CSS-2D-Transformationen.

So wird's gemacht: Hinzufügen spielerischer Texteffekte mithilfe von CSS

Internet Explorer 10 bietet mit der CSS-Eigenschaft text-shadow neue Unterstützung für hardwarebeschleunigte Textschatten.

 

Anleitungen für Internet Explorer 9

In den folgenden Themen werden mehrere neue CSS-Features in Internet Explorer 9 vorgestellt:

ThemaBeschreibung

Hinzufügen abgerundeter Ecken mit CSS3

Sie können das Erscheinungsbild einer Website optimieren, indem Sie die Ecken von Layoutelementen mit CSS3 abrunden. In diesem Thema werden ein paar einfache Möglichkeiten gezeigt, das Websitelayout ansprechender zu gestalten, indem Sie die neue integrierte Unterstützung für abgerundete Ecken in Internet Explorer 9 nutzen.

Hinzufügen von Schlagschatten mit CSS3

Sie können Layoutelementen innen oder außen Schlagschatten hinzufügen, indem Sie Internet Explorer 9 und CSS3 verwenden. Die Schatten folgen sogar den Kurven der Ecken, die Sie mit der neuen Unterstützung für abgerundete Ecken in Internet Explorer 9 erstellen.

Erstellen eleganter Schaltflächen mit CSS3

Mit CSS3 und Internet Explorer 9 können Sie mit wenig Markup visuell ansprechende Schaltflächen erstellen. Hier erfahren Sie, wie Sie einen einfachen Link in eine vollständig mit CSS formatierte Schaltfläche transformieren.

Erweitern des Typendesigns der Website mit CSS3

In diesem Thema wird gezeigt, wie Sie neue CSS3-Features für Schriftarten in die Website integrieren, damit das neue Typendesign in Internet Explorer 9 ebenso wie in anderen modernen Browsern zur Geltung kommt.

 

Designerhandbuch für neue CSS-Features

Als erfahrener Webdesigner wissen Sie, wie frustrierend es sein kann, wenn verschiedene Browser unterschiedliche Unterstützung für die topaktuellen Features bieten, die Sie verwenden möchten. Microsoft hat intensiv mit Standardgremien und anderen Browserherstellern zusammengearbeitet, um diese Lücke bei den Features zu schließen. Wir sind Mitglied der CSS Working Group (CSSWG) und wissen, dass regelmäßiger Kontakt zum World Wide Web Consortium (W3C), zu anderen Browseranbietern, Editoren von Spezifikationen und hinzugezogenen Experten aus der allgemeineren Community notwendig ist, um das Web für alle Benutzer auf den neuesten Stand zu bringen.

Zu diesem Zweck haben wir in Internet Explorer 9 Unterstützung für viele CSS3-Features hinzugefügt und diese Unterstützung in Internet Explorer 10 noch weiter ergänzt. Die vollständige Liste der neuen Features finden Sie im Internet Explorer 10-Handbuch für Entwickler und im Internet Explorer 9-Handbuch für Entwickler.

Hier sind einige Highlights aus Internet Explorer 10:

Hier sind einige Highlights aus Internet Explorer 9:

Blogbeiträge des Internet Explorer-Teams

Der IEBlog ist Ihr direkter Draht zum Internet Explorer-Team bei Microsoft. Sie können sich über die neuesten Entwicklungen beim Inhaltsdesign und -layout informieren, indem Sie die Beiträge mit dem Tag "CSS" anzeigen.

Hier sind einige aktuelle Blogbeiträge, die für Sie vielleicht nützlich sind:

TitelBeschreibung

Ganzseitige Animationen mit CSS

In Internet Explorer 9 wurde Unterstützung für CSS-2-D-Transformationen eingeführt. In Internet Explorer 10 wurde Unterstützung für CSS-3D-Transformationen und CSS-Animationen hinzugefügt.

CSS3-Farbverläufe ohne Präfix in IE10

Internet Explorer 10 unterstützt den W3C-Status "Candidate Recommendation" (Empfehlungskandidat) für CSS-Farbverläufe ohne Präfix.

CSS3-3D-Transformationen in IE10

CSS3-Features erleichtern die Erstellung aufwändiger und immersiver Webdesigns.

Steuern der Auswahl mit "user-select" in CSS

Internet Explorer 10 bietet Unterstützung für eine neue CSS-Eigenschaft, -ms-user-select, mit der Webentwickler leichter genau steuern können, welcher Text auf ihren Websites ausgewählt werden kann.

CSS: Nutzen aller Schriftfunktionen

Mit der browserübergreifenden Unterstützung für die @font-face-Regel in CSS3 und das Dateiformat WOFF (Web Open Font Format) für Schriftartpakete hat sich die Webtypografie weit über die "websicheren Schriftarten" hinaus entwickelt. 

Mehr Individualität mit CSS3-Übergängen und -Animationen

Dank Fortschritten wie leistungsstarkem kompiliertem JavaScript und hardwarebeschleunigtem Rendering von HTML5 und CSS3 in Internet Explorer 9 und Internet Explorer 10 können Webentwickler attraktivere Benutzeroberflächen als bisher erstellen. Durch zwei verwandte Features, CSS3-Übergänge und CSS3-Animationen, haben Webentwickler eine einfache Möglichkeit, Webseiteninteraktionen deklarativ individueller zu gestalten.

Erstellen attraktiver textorientierter Seiten in IE10

In Internet Explorer 10 werden zwei neue CSS-Features eingeführt, die Entwicklern das Erstellen von attraktiven textorientierten Webseiten und Apps erleichtern sollen. Mit CSS3-Regionen erhalten Sie einen einfachen Mechanismus für den Fluss von Inhalten durch mehrere nicht zusammenhängende Bereiche. Die Unterstützung für CSS3-Silbentrennung in Internet Explorer 10 bietet Entwicklern einen einfachen Mechanismus für die Silbentrennung von Text in vielen verschiedenen Sprachen.

CSS3-Textschatten in IE10

In Internet Explorer 10 wird Unterstützung für die hardwarebeschleunigte CSS3-Eigenschaft text-shadow eingeführt. Die text-shadow-Eigenschaft ist eines der von Webentwicklern am häufigsten gewünschten Features. Sie ermöglicht Texteffekte, die bisher ohne Ausweichen auf Text in Form von Inlinebildern schwer oder gar nicht zu erreichen waren, wenn Sie die Standards einhalten wollten.

Internet Explorer 10 und CSS-Features für adaptive Layouts

Internet Explorer 10 enthält viele neue CSS3-Features, die alle als Implementierungen sich entwickelnder Webstandards entwickelt wurden. In diesem Beitrag werden drei dieser CSS-Features betrachtet: CSS3-Rasterlayout , Flexbox-Layout und Mehrspaltenlayout.

 

Internet Explorer-Beispielgalerie

Die Internet Explorer-Beispielgalerie kann Sie inspirieren, einige der neuen Design- und Layoutfeatures in Internet Explorer zu implementieren.

Hier sind nur ein paar Beispiele:

BeispielBeschreibung

CSS-Flexbox

Mit CSS-Flexbox können Sie Webseiten mit Elementen, Steuerelementen, Formularen, Symbolleisten und Menüs erstellen, die ihre Größe ändern und sich umpositionieren können, wenn Benutzer die Größe des Browserfensters ändern.

CSS3-Mehrspaltenlayout

Während gedruckte Zeitungen elektronischen Versionen weichen, erfreuen sich Spalten auch online großer Beliebtheit. Mit dem CSS-Mehrspaltenlayout können Sie attraktive Textlayouts in mehreren Variationen erstellen.

CSS-Rasterüberlagerung

Mit dem CSS-Raster können Sie Webseiten mit einem Layout erstellen, in dem sich die Elemente überlappen und ohne komplizierte Pixelberechnung auf geänderte Fenstergrößen reagieren.

CSS-Ausschlüsse

Mit CSS-Ausschlüssen können Sie Webseiten erstellen, auf denen Text und andere Inhalte um bestimmte Elemente umbrochen werden können. In diesem Beispiel wird gezeigt, wie Sie mit Ausschlüssen komplexe Layouts erstellen, in denen die Elemente relativ zu einem Container absolut positioniert sind.

 

Demos für die Internet Explorer-Testversion

Die Internet Explorer-Testversion ist eine gute Gelegenheit, die Möglichkeiten des Designs und der Anzeige von Inhalten in Internet Explorer 9 und Internet Explorer 10 zu erforschen. Die vollständige Liste der verfügbaren Demos finden Sie in der Übersicht der Testversions-Website. Einige unserer bevorzugten CSS-Demos finden Sie hier:

Weitere wichtige Ressourcen

 

 

Anzeigen:
© 2014 Microsoft