Dr.Web - Das Online Magazin für Seitenbetreiber

Rubrik: CSS

ElasticCSS - Flexibles Framework für eierlegende Wollmilchsäue?

Das noch recht junge Framework ElasticCSS bietet durchaus Vorteile gegenüber anderen Systemen. Entwickler, die zusätzlich jQuery einsetzen, schlagen zwei Fliegen mit einer Klappe, denn ElasticCSS bringt jQuery nicht nur mit, sondern nutzt es auch. Ein ausführlicher Praxistest mit kritischen Tönen.

Weiterlesen | 10 Kommentare

Wenn Code schlecht wird, Teil 2 - valides CSS schreiben

Als Webentwickler verwenden Sie wesentlich mehr Zeit darauf, den Code anderer Leute aufzuräumen oder sich mit den Folgen unglücklicher Designs herumzuschlagen, anstatt selbst zu programmieren und das Leben der Anwender leichter zu machen. Wie Sie vermeiden, dass Maintainer und andere Entwickler sich später über Ihren Code ärgern, ist Thema dieser Artikelserie - Teil 2 legt den Fokus auf CSS.

Weiterlesen | 2 Kommentare | PLUS-Beitrag

So vermeiden Sie, dass Ihr Code "schlecht" wird, Teil 1

Webentwickler müssen häufig anderer Leut's Code bearbeiten, was nicht selten zu Verwunderung bis Frust führt. Als Webentwickler verwenden Sie in der Regel mehr Zeit darauf, fremden Code aufzuräumen, anstatt selbst großartige Dinge zu programmieren. Wie Sie Anwendern und anderen Entwicklern das Leben mit Ihrem Code leichter machen, erfahren Sie in dieser Artikelserie.

Weiterlesen | Keine Kommentare | PLUS-Beitrag

CSS3-Spaltenlayouts: Das Template Layout-Modul

Spalten-Layouts sind in Zeitungen und Print-Magazinen ein Standard, der sich im Webdesign bisher leider nur mit Biegen und Brechen simulieren lässt. Neue CSS3-Module versprechen hier Abhilfe. Teil 5 der Artikelreihe über CSS-Spalten-Layouts beleuchtet das neue Template Layout-Modul.

Weiterlesen | 4 Kommentare

HTML5- und CSS3-Templates und -Tutorials

Es wird nicht mehr allzu lange dauern, dann sind HTML5 und CSS3 der Code, den wir alle verwenden. HTML5 wird mit aller Wahrscheinlichkeit die nächste größere HTML-Version sein und sie bietet neben neuen Funktionen auch eine Reihe neuer APIs. Dieser Beitrag listet einige neue und freie CSS3- beziehungsweise HTML5-Templates zum Herunterladen und Experimentieren. Vertiefende Informationen und ausführliche Anleitungen bieten die Links zu Ressourcen und Tutorials im Netz.

Weiterlesen | 8 Kommentare

CSS-3-Spaltenlayouts: Das Grid Positioning-Modul

Was mit CSS 3 in punkto Texgtgestaltung möglich ist, beleuchtet diese Artikelserie. Anders als bei Flexbox und Multi-Column konzentriert sich das Grid-Modul verstärkt auf die Positionierung von Elementen innerhalb eines Spaltengefüges, anstatt sich in erster Linie selbst darum zu kümmern, dass ein solches entsteht. Dennoch ist es mit Grid-Layout durchaus möglich, Raster zu definieren.

Weiterlesen | 5 Kommentare

Media Queries: Mobile Versionen von Websites mit CSS 3 erstellen

CSS 3 ist ein Thema, das Webdesigner und -entwickler nach wie vor begeistert und frustriert. Ein Anwendungsbereich, bei dem Sie nicht auf Browser-Unterstützung der IE-Familie warten müssen, sind mobile Geräte. Nutzen Sie Media Queries, um Ihre Websites fit fürs iPhone, iPad und Android-Geräte zu machen.

Weiterlesen | 6 Kommentare

HTML 5 & CSS 3: Tutorials, Tipps und Referenzen

Die Entwicklung W3C-konformer, sprich Browser-übergreifender Standards geht voran. Nachdem nun auch Microsoft auf die Schiene einschwenkt und mit dem just vorgestellten Preview des Internetexplorer 9 sowohl HTML-5-Elemente wie canvas als auch CSS-3-Eigenschaften wie border-radius fehlerfrei unterstützt, ist es Zeit, die neuen Techniken einzusetzen.

Weiterlesen | 15 Kommentare

CSS-3-Spaltenlayouts: Flexibler Textumbruch mit dem Multi-Column-Layout-Modul

Spalten-Layouts sind in Zeitungen und Print-Magazinen ein Standard, der sich im Webdesign bisher leider nur mit Biegen und Brechen simulieren ließ. Neue CSS3-Module versprechen Abhilfe und automatischen Textumbruch über mehrere Spalten. Teil 2 der Artikelreihe über CSS-Spalten-Layouts beleuchtet das neue Multi-Column-Layout-Modul.

Weiterlesen | 9 Kommentare

CSS-Spalten-Layouts: Das Flexible Box Layout-Modul

Wirkliche Spalten-Layouts mit automatischem Textumbruch, wie bei Print-Magazinen oder gedruckten Tageszeitungen, sind trotz float mit den bisherigen CSS-Standards nicht möglich. Mit CSS 3 soll das anders werden. Teils 1 der Artikelreihe über CSS-Spalten-Layouts beleuchtet das neue Flexible Box Layout.

Weiterlesen | 5 Kommentare

HTML 5 und Flash - Koexistenz, statt Krieg

Angesichts der teils lautstarken Auseinandersetzungen in der Web Community über HTML 5 versus Flash, konnte ich es mir als Web-Veteran mit gut zehnjähriger Praxis in Webdesign und Flash-Entwicklung nicht verkneifen, mich ins Schlachtgetümmel zu stürzen, um diesem unsäglichen Adobe-oder-Appel-Gezerre ein Ende zu setzen und ein konstruktives Friedensangebot zu unterbreiten.

Weiterlesen | 17 Kommentare

CSS-Spaltenlayouts: Die zukünftigen Möglichkeiten

Die Zeit der Layout-Tabellen ist dank CSS zum Glück überwunden. Wirkliche Spaltenlayouts wie bei Printprodukten sind in den bisherigen CSS-Standards jedoch nicht vorgesehen. Mit CSS3 soll sich das ändern. Es liegen einige vielversprechende Konzepte vor, die sogar teilweise schon implementiert sind. Ein einführender Überblick.

Weiterlesen | 22 Kommentare

Kontrollierter Rückfall von CSS3-Eigenschaften - Übergänge (2)

Auch wenn die neuen Browser-Versionen nach und nach CSS3 unterstützen - es sind noch immer genügend ältere Browser im Einsatz, die CSS3 nicht beherrschen. Wenn Sie neben Ihren Kunden auch sich selbst glücklich machen und CSS3 trotz der Rücksichtnahme auf IE & Co. einsetzen wollen, nutzen Sie diese Tipps, um CSS3-Eigenschaften in älteren Browsern möglichst passend auf andere Art zu ersetzen.

Weiterlesen | Keine Kommentare

User Theming mit transparenten CSS-Sprites

Eine der nützlichsten Techniken in der Frontend-Entwicklung sind die schlichten CSS-Sprites. Die Technik ist hinlänglich bekannt und wird dank ihrer Ladezeiten-reduzierenden Wirkung auf vielen hochperformanten Websites eingesetzt, darunter Google und Amazon. Mit einer kleinen technischen Spielerei, können Sie den Speicherbedarf im Browser und die Ladezeiten noch weiter reduzieren. Ein praktisches Beispiel mit transparenten CSS-Sprites.

Weiterlesen | 11 Kommentare

Kontrollierter Rückfall von CSS3-Eigenschaften in Steinzeit-Browsern (1)

Für manche Web-Worker heißt Browser-übergreifendes Design, dass Websites auf allen Browsern exakt gleich aussehen. Wenn das für Sie heißt, auf moderne CSS3-Eigenschaften zu verzichten, um auch den IE6 noch zu bedienen, hindern Sie moderne Browser daran, ihr eigentliches Potential zu entfalten. Graceful Degradation, neudeutsch für würdevoller Rückfall, bietet einen Ausweg aus diesem Dilemma.

Weiterlesen | 1 Kommentar | PLUS-Beitrag

Dreamweaver CS5 bringt mehr Komfort fürs CSS-Coding

Die neue Version von Dreamweaver bringt nicht viele neue Features mit sich. Statt dessen glänzt sie mit der Integration bestehender Tools und Online-Dienste wie Adobe BrowserLab und Adobe CS Live. Für CSS-Designer haben es diese Neuerungen in sich. Ein Bericht über einen ersten Praxistest von Dreamweaver CS5.

Weiterlesen | 2 Kommentare

jQuery: Eigene browser-übergreifende Bookmarklets erstellen

Bookmarklets oder Favelets sind kleine, JavaScript-codierte Anwendungen in Link-Form, mit denen Sie die Browser-Funktionen erweitern können. Das Installieren von Plugins oder das Herunterladen von Software entfällt. Favelet per "Drag&Drop" auf die Symbolleiste des Browsers ziehen - fertig. Dieses Tutorial erklärt Schritt für Schritt, wie Sie eigene Bookmarklets mithilfe von jQuery erstellen.

Weiterlesen | 2 Kommentare | PLUS-Beitrag

Web-Typografie 2.0 - Individuelle Schriften für das Internet, weitgehend barrierefrei

Wer nicht Gefahr laufen will, dass eine individuelle Schrift auf dem Ziel-Browser der Internetnutzer durch eine Standardschrift ersetzt wird und so das ganze, sorgfältig abgestimmte Design ruiniert, musste sich bislang mit den üblichen Verdächtigen wie Arial oder Verdana begnügen.
Schriften als Grafik oder Flash-Film eingebunden sorgten zwar für etwas Abwechselung - allerdings auch für unnötige Barrieren. Ein vielversprechender Ansatz für eine barriefreie Belebung der Web-Typografie bieten Methoden wie sIFR und Cufon oder so genannten Webfonts.

Weiterlesen | 16 Kommentare

10 Online-Werkzeuge zur CSS-Komprimierung

Style Sheets werden zumeist in einer eigenen Datei ausgelagert, auf die aus einem weiteren Dokument zugegriffen wird. Bei jedem Aufruf der Webseite lädt der Browser diese CSS-Datei. Um den Seitenaufruf zu beschleunigen und den Traffic der Webseite zu verringern, ist es empfehlenswert, die fertige Datei zu komprimieren. Wir stellen 10 Online-Tools vor, die dafür geeignet sind.