Webstandard & Webdesign - CSS, HTML

 

CSS4 - Die Zukunft des Webdesign - Tag 22 im CSS3 Adventskalender 2011

Die Zukunft des Webdesign - Da CSS3 im Vergleich zu den vorangegangenen "Versionen" in Module aufgebaut ist und somit die Hürde der Implementierung einzelner CSS Eigenschaften für die Browserhersteller etwas niedriger ist, als wenn sie die Unterstützung einer "gesamten Version" funktionsfähig anbieten müssten, bietet sich das parallele Arbeiten an neuen Modulen nahezu an. Und damit meine ich nicht weitere CSS3 Module, sondern - CSS4 Module! Richtig gelesen! CSS4! Auch wenn, wie bereits im letzten Artikel dieses Adventskalender kurz beschrieben, eine Vielzahl an CSS3 Eigenschaften von Browsern wie dem Internet Explorer immer noch nicht unterstützt werden, gibt es keinen Grund in der Entwicklung stehen zu bleiben! Der heutige Artikel soll daher einen kleinen Ausblick darauf gewähren, was mit CSS4 möglich sein wird. Und das ist einiges!

 (weiter)

CSS3 Count - HTML Elemente nummerieren - Tag 20 im CSS3 Adventskalender 2011

Wie in vielen anderen Bereichen der Gestaltung, sind es auch beim Webdesign manchmal die kleinen Details, die den gewissen Unterschied ausmachen und somit unter Umständen die Benutzerführung einer Webseite signifikant verbessern können. Der heutige Artikel möchte sich der Nummerierung von Elementen widmen und mit der damit verbundenen Zähl-Eigenschaft eine Möglichkeit vorstellen, die eine verbesserte Wahrnehmung der Seitenstruktur und der damit verbundenen Inhalte ermöglicht. So könnte man bspw. bei Inhaltselementen wie Kommentaren in einem Blog, falls der Strukturierung der Elemente keine geordnete Liste zugrunde liegt oder bspw. einer Paginierung von Inhaltsseiten, die Eigenschaft counter-increment zur Nummerierung zuweisen. Diese Eigenschaft kann dazu verwendet werden, den Wert für Elemente hochzuzählen und je nach gestalterischem Bedarf entsprechend visuell abzubilden. Das hier vorgestellte exemplarische CSS3 Tutorial beinhaltet hierzu zu diesem Zweck drei Infoboxen, denen je nach Reihenfolge im HTML-Code die entsprechende Nummer über das Pseudo-Element :after zugewiesen. Aber seht selbst!

 (weiter)

CSS3 Transform dreht Sprite-Grafik des CSS3 Togglers - Tag 18 im CSS3 Adventskalender 2011

Im Sinne einer guten Benutzerführung, sollte man als Webseitenbetreiber immer daran interessiert sein, Webseitenbesuchern jegliche Funktionen und das unter Umständen damit verbundene Verhalten von Elementen, intuitiv mittels des Designs zu vermitteln. Das heißt, der User weiß bzw. erahnt zumindest, worum es sich bei einem Element handelt und welche Funktion es erfüllt. Das erste Element einer Webseite auf dass diese Anforderung zutreffen sollte, ist die Navigation oder das Menü einer Webseite. Eine Möglichkeit dem User den hier vorgestern im Webstandard-Blog vorgestellten CSS3 Toggler noch intuitiver zu gestalten, ist die den Menüpunkten ein Icon via CSS zukommen zu lassen, welches den geöffneten (aktiven) und geschlossenen (inaktiven) Zustand der Menüpunkte zusätzlich verdeutlicht. Das kann man mit einer Sprite-Grafik bewerkstelligen, die sämtliche Ausrichtungen der Icons beinhaltet oder aber mit einem Icon und das mittels CSS3 drehen. Wie das mit wenigen Zeilen CSS zu erreicht ist, zeigt dieses CSS Tutorial.

 (weiter)

CSS3 Toggler - Vertikales Menu zum Auf- und Zuklappen - Tag 16 im CSS3 Adventskalender 2011

Auf- und Zuklappen (toggle-effect) ohne JavaScript - Fließend animierte Übergänge bei Slide- oder Aufklapp-Effekten von Webseiten-Elementen wie beispielsweise einem Menü, wurden bisher meistens mit JavaScript umgesetzt. Die CSS3 Pseudoklasse :target und die Negationspseudoklasse :not(), zusammen mit dem CSS3-Modul Transition, ermöglichen ein solches "Bewegungsmuster". Nur eben ganz ohne JavaScript! Das heißt, dass die durchaus beliebten "Akkordeon- oder auch Toggle-Effekte" ausschließlich via CSS umgesetzt werden können! Das heißt auf der anderen Seite dann natürlich auch das Requests für JavaScript eingespart werden könnten. Das interessante an diesen nun mittlerweile vorhandenen Möglichkeiten mit CSS3 ist, dass für das Verhalten von Elementen und Inhalten JavaScript Konkurrenz von CSS bekommt. Und Konkurrenz belebt bekannterweise das Geschäft. Wie das genau geht, zeigt der nun folgende Workshop!

 (weiter)

CSS3 Pattern mit Linear-Gradient - Tag 14 im CSS3 Adventskalender 2011

Der Einsatz von Background-Pattern ist kein neuer Ansatz im Webdesign und daher verwundert es nicht das viele Webseitenbetreiber die Möglichkeit, eine große Fläche einer Webseite mit einer kleinen Grafik auszustatten die sich beliebig oft in x- und y-Richtung wiederholt, nutzen. Durch diesen Wiederholungseffekt (Background-Pattern), entsteht eine Art Muster das im heutigen 14. Türchen des CSS3-Adventskalenders ausschliesslich auf Basis von CSS3, genauer gesagt mit der Farbverlaufseigenschaft linear-gradient, vorgestellt wird. Dank dieser CSS3 Eigenschaft für Farbverläufe mit den Ausrichtungen linear und radial, besitzen Webdesigner endlich die Möglichkeit, Farbverläufe mittels CSS umsetzen zu können und endlich auf Hintergrundgrafiken hierfär verzichten zu können. Vorteil ist neben der möglichen Reduzierung von HTTP-Requests auch der flexible Einsatz solcher, ohne die Performance großartig zu beeinflussen. Aber seht selbst.

 (weiter)

CSS3 Text-Shadow erzeugt Blur-Effekt - Tag 10 im CSS3 Adventskalender 2011

Das heutige CSS3 Tutorial beschäftigt sich neben der Eigenschaft der Text-Schattierung, auch mit dem RGBA-Farbraum. Die CSS Eigenschaft text-shadow wird insbesondere bei technik-affinen Betreibern von Blogs gerne als Möglichkeit genommen, um den Text noch mehr hervorzuheben. In Kombination mit anderen Eigenschaften, besitzt man allerdings auch die Möglichkeit eine Unschärfe eines Textes zu erzeugen und das mit wenigen Zeilen CSS. Warum dies überhaupt notwendig sein sollte, belegt die Tatsache das Unschärfe eines Textes wie in der Fotografie ein sehr geeignetes Mittel ist, dem Betrachter eines Bildes zu vermitteln, welche Komponenten der Fotografie dem Fotografen wichtig erschienen. In Bezug auf Webseiteninhalte könnte man bspw. bei einem Layer die dahinterliegenden Textinhalte unscharf erscheinen lassen, um somit den Fokus mittels dieses Blur-Effektes auf die Inhalte des Layers zu setzen.

 (weiter)

CSS Media Queries - Screen Size Icons - Tag 8 im CSS3 Adventskalender 2011

Screen Size Icons - CSS3 ist in aller Munde. Eine der vielen nützliche Sachen an CSS3, sind die Media Queries. Damit lassen sich gewissen Dinge abfragen und auf auf der Ergebnis reagieren. Der meistbenutzte Anwendungsfall dürfte sein, dass man damit die Webseite für verschiedene Auflösungen bereit stellt. Somit bekommt man mit einem kleinen Netbook die Website etwas anders angezeigt als wenn man mit einem 27 iMac diese anschaut. Vorteil ist einfach, dass man das gegeben Ausgabegerät optimal nutzen kann. Nicht uninteressant das Ganze. Da im folgenden Media Queries Tutorial keine Einschränkung bezüglich eines bestimmten Medien Typen wie PC, Handheld oder Projektor vorliegen soll, gibt es hierfür keine zusätzliche Referenzierung zu einer seperaten CSS Datei. Das heißt, die CSS Eigenschaften für die veränderten Bedingungen basierend auf den Media Queries können in der CSS-Datei definiert werden, in der auch alle anderen Eigenschaften zur Gestaltung angelegt werden.

 (weiter)

CSS3-Keyframe-Animationen - Tag 6 im CSS3 Adventskalender 2011

Im heutigen Beitrag wird euch aufgezeigt, wie ihr Animationen als Gestaltungselement im Layout auf Basis von CSS3 einsetzen könnt. Da ich sehr gerne illustrativ arbeite, rolle ich das Thema CSS3-Keyframe-Animationen heute von einer anderen Seite auf und animiere keine typischen Website-Elemente wie Buttons etc. sondern Objekte in einer gezeichneten Landschaft. Anhand der zahlreichen verschiedenen Gestaltungselemente möchte ich euch Inspiration für eigene Ideen bieten und zeigen, wie ihr mit einfachen Mitteln lebendige Animationen erstellt. CSS3-Keyframe-Animationen ähneln ein wenig der Arbeit mit Flash-Tweens. Ein Objekt durchläuft in einem festgelegten Zeitraum verschiedene Schlüsselbilder (sog. Keyframes). Jedem Keyframe werden unterschiedliche Eigenschaften, wie z.B. die Größe oder die Position des Objektes, mitgeteilt. Die Unterschiede zwischen den Keyframes stellen anschließend die Animation dar. Ein Objekt bewegt sich also beispielsweise in einem Zeitraum von 5 Sekunden von Position A zu Position B.

 (weiter)

CSS Transform und Transition am Beispiel eines Call-to-Action-Elementes - Tag 4 im CSS3 Adventskalender 2011

Der Sinn und Zweck der hinter der Gestaltung von Webseitenelementen im Detail steckt, ist der die Attraktivität der Elemente derart zu erhöhen, dass diese bei Call-to-Action-Elementen wie einem Link oder Button, den Webseitenbesucher zu einer Aktion, sprich einer Konversion, zu "führen". Dies geschieht bei den beiden genannten Elementen mit einer aussagekräftigen "Betextung", die den Anreiz schafft auf dieses Element klicken zu wollen oder aber eben durch eine entsprechend visuelle Gestaltung, die dieses Ziel im Idealfall zusätzlich verstärkt. Das heutige Türchen des CSS3-Advenstkalenders, soll diesen beiden Aspekten einen weiteren hinuzfügen - einen Überblendeffekt bei MouseOver (Produktabbildung "verwandelt" sich in Produktpreis), auf Basis der Kombination der CSS3 Module Transition & Transform, ohne JavaScript und mit lediglich ein paar Zeilen HTML und CSS.

 (weiter)

CSS Regions - Bereiche zur Aufnahme von Inhalten definieren - Tag 2 im CSS3 Adventskalender 2011

Das sich Inhalte von Webseiten innerhalb eines dafür vordefinierten Bereiches "ausbreiten" können, ist nichts neues. Mit dem Multi-Column Layout Module gibt es auch bereits den Ansatz, dass sich Inhalte über mehrere Spalten hinweg innerhalb eines dafür vordefinierten Bereiches "ausbreiten" können. Mit CSS Regions betritt nun ein CSS3 Modul die Webdesign-Landschaft, dass Inhalte über verschiedene Bereiche Hinweg ausbreitet. Einige von Euch werde diese Verhaltensweise von Desktop-Publishing-Programmen wie Illustrator oder InDesign her kennen. Interessant ist auch, dass mit Adobe ein Betreiber eines solchen Desktop-Publishing-Programmes für dieses Verhalten einen Entwurf beim W3C eingereicht hat. Bezogen auf ein Newspaper-Layouts würde diese Eigenschaft den Möglichkeit bieten, den Text vor einem Bildelement zu beginnen und wenn eine bestimmte Höhe dieses Elementes "mit Zeichen (auf)gefüllt" ist, nach dem Bildelement fortzuführen. Hört sich unter Umständen ein wenig seltsam an, ist es aber nicht. Die Umsetzung für dieses Verhalten selbst ist nicht sehr aufwändig und bedarf nur weniger Zeilen CSS. Aber seht selbst!

 (weiter)

CSS3 Advenstkalender 2011 - Webdesign meets X-mas!

"Webdesign meets X-mas!" - Die meisten Dinge im Leben sind unvermeidbar! Je nach Interesse und Vorlieben möchte man die einen vermeiden, während man die anderen herbeisehnt. Und dazu gehört, zumindest für die meisten Menschen, auch Weihnachten und der damit fast unvermeidbare Adventskalender. Natürlich ist mir durchaus bewusst das bis dahin noch etwas Zeit ist, dennoch möchte ich Euch hiermit darüber informieren, dass es auch 2011 wieder einen CSS3 Adventskalender geben wird! Zusammen mit Sven von maddesigns, habe ich mich dazu entschlossen zusammen den Lesern unserer beiden Blogs auch dieses Jahr einen Ausblick auf aktuelle und zukünftige Entwicklungen dieses Webstandards zu werfen. Da im kreativen Gedanken- und Ideenaustausch zweier Webdesigner miteinander mehr "brauchbares" bei raus kommt als beim Brainstorming eines einzelnen Webdesigners, dachten wir uns das wir dieses Jahr weitere und im deutsch-sprachigen Raum sicherlich auch bekannte Webdesigner, als Gastautoren für diese Aktion hinzuholen. Gesagt, getan!

 (weiter)

Mozillas DevDerby - CSS3 Animations - Gewinnspiele zu CSS3, HTML5 & Co.

Mozillas DevDerby - Seit Anfang diesen Monats läuft das von Mozilla gesponsorte DevDerby. Das jeweilige Derby an dem jeder Interessierte gern teilnehmen kann, widmet sich einem speziellen Thema. In diesem Monat ist das Thema CSS3 Animation. Die Machen dieses Wettbewerbs fordern uns auf, zu zeigen was CSS und hier insbesondere das CSS3 Animation Modul wirklich kann! Unter dem Title "Make the web move" sind bisher CSS3-Animationen eingereicht worden. In kurzer Absprache mit Christian Heilmann von Mozilla, habe ich meine kürzlich erstellte CSS3 Animation "The PONG Game" ebenfalls dort eingereicht. Wie bereits hier in dem ein oder anderen Beitrag beschrieben, bieten CSS3-Animationen die Möglichkeit modernen Browsern wie Firefox (ab Version 5!), Google Chrome und Safari, noch mehr Flexibilität und Kontrolle über das Verhalten bestimmter Webinhalte zur Verfügung zu stellen.

 (weiter)

CSS Animations - The PONG Game - Firefox folgt Chrome und Safari

The PONG Game - Das 1972 und somit vor fast 40 Jahren (!) von Atari auf den Markt gebrachte Computerspiel dürften die meisten von euch sicherlich kennen. Aus nostalgischen Gründen, insbesondere aber aus aktuellem Anlass, der Unterstützung des CSS3 Module Animations durch die noch in der Entwicklung befindlichen Version 5 des Firefox (Aurora-Channel), wird in dem folgenden Blogbeitrag eine ausschließlich auf CSS3 basierende Animation dieses Computerspiels vorgestellt werden. Da Google Chrome und Safari bereits das CSS3 Module Animations unterstützen und mit dem Firefox dann auch bald der dritte Browser diesen Support anbieten wird, können somit ab Ende diesen Monats somit knapp 85% aller Leser des Webstandard-Blogs, in den Genuss von CSS3 Module Animations kommen.

 (weiter)

HSLA Color Module - RGBA Alternative - CSS3 Adventskalender Tag 22

HSLA - Bei der Gestaltung von Webseiten kommt der Farbgebung von Elementen oder Schriften eine der wichtigsten Aufgaben zu. Diese wurde bisher fast ausnahmslos mit Hexadezimalwerten (#FFFFFF für weiß) oder durch die Verwendung von Farbangaben des RGB-Farbmodells (255,255,255 für weiß) umgesetzt. Die Realisierung von Transparenzen wurde über das Hinzufügen des Alpha-Kanals definiert (255,255,255, 0.6). Eine Alternative hierzu bietet das bisher weniger bekannte Farbmodell HSL, welches auch Transparenzen unterstüt. Bei diesem bisher noch relativ wenig für die Definition von Webfarben angewandten Farbraum, werden Farben mit Hilfe des Farbtons (Hue), der Farbsättigung (Saturation) und der Helligkeit (Luminance) definiert. Der Vorteil - es wird von allen für uns relevanten aktuellen Browserversionen unterstüzt. Wie man diese Werte bspw. mittels einer Browser-Erweiterung auslesen kann und was diese CSS3 Eigenschaft für das vorgestrige Beispiel, der Vergabe der Farbwerte des Reagenzglases bedeuten kann, erfahrt ihr im weiteren Verlauf dieses Beitrages.

 (weiter)

CSS3 Calc - Rechnen mit CSS - CSS3 Adventskalender Tag 20

Rechnen mit calc() - Auch wenn die kürzlich neu erstellte Liste der schnellsten Top-500 Rechner nun mit China das Land des schnellsten Rechners stellt, kommt aus der erste Browser der Rechenprozesse bspw. auch ohne JavaScript erledigen kann, immer noch aus den Vereinigten Staaten. Die Rede ist vom Firefox und seiner noch in der Betaversion befindlichen Version 4. Denn dieser ist nun endlich in der Lage, den im September 2006 erstellten Entwurf des W3C, umsetzen zu können. Das heißt, er kann addieren, multiplizieren, dividieren und subtrahieren. Das folgende kleine CSS3 Tutorial soll euch daher mit diesen neu zur Verfügung stehenden Eigenschaften und deren Auswirkungen vertraut machen.

 (weiter)

3D Transform - CSS Tutorial - CSS3 Adventskalender Tag 18

3D Transform - Der vorgestrigen zweidimensionale Verformung von Flächen folgt heute eine kleine Einleitung zum CSS 3D Transforms Module. Mit transform können somit im zweidimensionalen und dreidimensionalen Raum skaliert, verschoben oder gedreht werden. Das hierbei durchaus praxistaugliche Verhaltensweisen der entsprechenden Elemente erzeugt werden können, belegt der hier bereits im Sommer veröffentlichte Artikel Kreatives Webdesign CSS3 Transform. Am Ende dieses Beitrags wird noch ein Ausblick auf die Praxistauglichkeit und möglichen Anwendungsgebiete dieser CSS3 Eigenschaften gegeben, der gern von Euch diskutiert werden kann.

 (weiter)

CSS 2D Transform - Scale, Rotate, Skrew, - CSS3 Adventskalender Tag 16

2D Transform - Zweidimensionale Flächen wie bspw. das eines Quadrates zu erzeugen, ist für CSS keine sonderlich große Herausforderung. Mittels des 2D Transform Moduls ist es mittlerweile möglichen solch zweidimensionale Flächen zu verschieben (natürlich nicht via padding oder margin), zu skalieren, zu drehen, aber auch zu verzerren. Diese Set an neuen CSS3 Eigenschaften deren Browser-Support größer ist als gemeinhin angenommen, wird im folgenden kleinen Tutorial auf dem Quellcode des Blogartikels ungleichen Ecken aufsetzen und die verschiedensten Eigenschaften dieses moduls wie die Vergrößerung bzw. Verkleinerung, Drehung oder Neigung von Elementen näher vorstellen.

 (weiter)

CSS Animation - Morphing Element - CSS3 Adventskalender Tag 14

CSS Animation - Laut Wikipedia ist eine Animation im engeren Sinne jede Technik, bei der durch das Erstellen und Anzeigen von Einzelbildern für den Betrachter ein bewegtes Bild geschaffen wird. Diese Aufgabe wurde in der Vergangenheit zum Leidwesen vieler Anwender, denen das ein oder andere Plugin im Browser fehlt(e), von Flash übernommen. Dass CSS3 Animations unter bestimmten Umständen ein solches im wahrsten Sinne des Wortes "bewegtes Verhalten" durch Eigenschaften von CSS3 übernehmen kann, auch wenn sie das aufgrund der Möglichkeiten der Browser erst einmal auf relativ "einfache" Animationen handeln wird. Um Euch dies am heutigen 14. Tag des CSS3 Adventskalenders näher zu bringen, wird das CSS3 Code-Beispiel der ungleichen Ecken vom 2.Tag des Adventskalender aufgegriffen und um diese neuen Eigenschaften ergänzt.

 (weiter)

Media Queries - CSS Beispiel - CSS3 Adventskalender Tag 12

Media Queries - Wer bereits Erfahrungen mit dem Einbinden separater Stylesheet Dateien für bestimmte Medientypen (Print, Projektor, Handheld,...) gemacht hat, dem wird das Konzept vertraut sein, wie eine solche zusätzliche CSS-Datei unter bestimmten Bedingungen (bspw. für eine Druckausgabe) implementiert wird. Genau dieses Konzept wird auch von den Media Queries in CSS3 aufgegriffen. Mit Media Queries können die Eigenschaften von Ausgabemedien wie mobilen Endgeräten abgefragt und somit CSS-Eigenschaften speziell für die Fähigkeiten dieser Medien angelegt und somit für den Anwender zielgerichtet optimiert werden. Auf diese Weise können bspw. für iPhone-Nutzer Styles für die horizontale (portrait-view mit max-width von 320px), aber auch vertikale Darstellung (landscape-view mit min-width von 321px und max-width von 480px) der Inhalte optimiert werden.

 (weiter)

CSS3 Multi-column - Mehrspaltiges Layout - CSS3 Adventskalender Tag 10

Mehrspaltiges Layout - Eine der ersten, wenn auch nicht finalen, veröffentlichten Eigenschaften des W3C bezüglich CSS3, war am 22.Juni 1999 (!) das Multi-column Layout Modul. Das Interessante an dieser hier bereits vor 5 Jahren aufgegriffenen Eigenschaft ist, dass der Textfluss von allein erzielt wird und die Inhalte eines Elementes auf das diese Eigenschaft angewendet wurde, von einer in die nächste Spalte fließen. Anhand eines fiktiven Interviews mit Mozilla, in Kombination mit denen zur Verfügung stehenden CSS3 Eigenschaften für dieses Modul, wird ein mehrspaltiges Layout im weiteren Verlauf dieses 10 Tages des CSS3 Adventskalenders etwas näher vorgestellt.

 (weiter)

CSS3 @font-face - CSS Fonts-Modul - CSS3 Adventskalender Tag 8

@font-face - Bei der Gestaltung von Webseiten ist der Einsatz von Typografie immer wieder eine der zentralen Fragen und Herausforderungen denen man sich stellen muss. Aufgrund der technischen Restriktionen der Browser(hersteller) aber, war ein kreativer Umgang mit Schriften die nicht auf dem System des Anwenders aktiviert waren, oftmals stark eingeschränkt. Ausgeholfen haben die verschiedensten Techniken wie bspw. SIFR oder Image-Replacement. Mit dem CSS Fonts-Modul und der unter anderen darin enthaltenen @font-face Regel wurde ein Lösungsansatz geschaffen, der es Webseitenbetreibern nun ermöglicht Schriften bereit zu stellen und diese über die gängigen Browser (nahezu identisch) abzubilden. Bedingung: Die Schrift muss auf einem Webserver zur Verfügung gestellt werden.

 (weiter)

CSS3 Text Overflow - Mit Auslassungszeichen Texte abschneiden - CSS3 Adventskalender Tag 6

Das Auslassungszeichen (...) Nicht selten steht man vor der Aufgabe Textinhalte nur in bestimmten Ausmaßen abbilden zu dürfen, weil ansonsten das Layout dem Text nicht standhalten würde. Daher müssen diese, oftmals über ein CMS angelegten Inhalte, bei überschreiten bspw. einer Breite gekürzt werden. Dies geschieht nicht selten durch bloßes Abschneiden dieser Inhalte. Nebenerscheinung dieser Herangehensweise - der Text ist oftmals schlecht lesbar. Womit der Webseitenbesucher im schlechtesten Fall nicht die Informationen erhält, die er oder sie gesucht hatten. Das es allerdings mittels der CSS Eigenschaft text-overflow und dem Wert "ellipsis" eine wesentlich elegantere Lösung gibt, ist Bestandteil des heutigen 6. Tages des CSS3 Adventskalenders ...

 (weiter)

Linear Gradient - Detaillierter Farbverlauf - CSS3 Adventskalender Tag 4

Farbverlauf - Wie gestern bereits bei maddesigns gelesen, gibt es dank der CSS3 Eigenschaft gradient mit seinen Ausrichtungen (linear, radial) endlich die Möglichkeit, Farbverläufe bei der Umsetzungen von Webprojekten endlich nicht mehr nur mittels Grafikprogrammen erzeugen und in die CSS-Dateien einbinden zu müssen. Vorteil ist neben der möglichen Reduzierung von HTTP-Requests auch die Zeitersparnis bei der Erstellung einer solchen Grafik. Am vierten Tag des CSS3 Adventskalenders geht es allerdings nicht um den "herkömmlichen Farbverlauf", sondern um Farbverläufe die mittels "Haltepunkten" (color-stop) gezielt "geführt" werden können. Am Ende des Tutorials, gibt es auch einen Lösungsvorschlag für Opera-Anwender. Aber seht selbst.

 (weiter)

Border Radius - Ungleiche Ecken - CSS3 Adventskalender Tag 2

Ungleiche Ecken mit Border-Radius - Am zweiten Tag des Adventskalenders zum Thema CSS3, werden euch heute "schiefe bzw. ungleiche" Ecken etwas näher vorgestellt. Diese "Erweiterung" ist ein Verhalten, welches auf der Eigenschaft Border-Radius aufsetzt und mittlerweile von allen aktuellen Browserversionen Unterstützung erfährt. Um diese CSS3 Eigenschaft aber etwas genauer vorstellen zu können, werden in diesem Beispiel vier Elemente abgebildet (in diesem Fall vier nebeneinander ausgerichtete Listenpunkte), welche durch Hinzufügen entsprechender CSS3-Eigenschaften eine Art Metamorphose vom Quadrat hinzu einem Element mit "ungleichen bzw. schiefen Ecken" vollzieht. Aber seht selbst.

 (weiter)

CSS3 Adventskalender - Animations, Transitions, MediaQueries, Calc, ...

Die Weihnachtszeit ist vielerorts bereits präsent und auch im Web wird davor nicht halt gemacht. Aus diesem Grund hat sich Sven von maddesigns dazu entschlossen, einen Adventskalender zum immer interessanter werdenden Thema CSS3 zu starten. Ein Vorgehen dem sich der Webstandard-Blog natürlich gern anschließt. Jeden Tag vor Weihnachten wird es daher im Wechsel, Tag für Tag ein für Euch hoffentlich nützliches CSS3-Tutorial geben. Den morgigen Anfang macht natürlich der Initiator dieser Aktion und am 2.Dezember geht es hier weiter. Um der Aktion noch einen zusätzlichen Reiz zu verschaffen, hat sich Sven dazu entschlossen das brandneue englischsprachige Buch "CSS3 For Web Designers" von Dan Cederholm unter all seinen Kommentatoren zu verlosen. Da für die hoffentlich zahlreichen Kommentatoren ein Buch vielleicht zu wenig wäre, packe ich noch eine Ausgabe oben drauf. Allen Teilnehmern und Lesern viel Spaß mit dem CSS3 Adventskalender und viel Erfolg im Umgang mit CSS3!

 (weiter)

CSS-Design - Wie weit sollte man bei der Gestaltung durch CSS gehen?

Mit CSS "Inhalte" gestalten - In Anlehnung an einen kürzlich erschienen Artikel im Blog von Matt Ward, möchte ich seine dort gestellte Frage hier aufgreifen und gern Eure Meinung dazu in Erfahrung bringen. Denn Ward stellt nicht zu Unrecht die Frage - "Ob der ein oder andere mit CSS nicht ein wenig zu weit geht". Insbesondere ins Auge gefasst hat er hierbei die Gestaltung und Erstellung von Logos oder Icons die ausschließlich auf CSS basieren. Das heißt, es werden eine Textinhalte oder Bilddateien via CSS gekonnt gestaltet werden, sondern vollkommen unnötige Div-Konstrukte erzeugt, die keinen semantischen Bezug zu den Inhalten besitzen. CSS3 hingegen, bietet auch in solchen Fällen eine durchaus interessante Alternative und das ganz ohne zusätzlichen und unnötigen Quellcode erzeugen zu müssen!

 (weiter)

CSS3 Animation - The new Flash?

CSS3 Animation - Die Diskussionen ob HTML5 das Ende von Flash bedeutet gibt es bereits seit geraumer Zeit. Und auch wenn HTML5 für die Strukturierung der Inhalte durch entsprechende HTML-Elemente zuständig ist, für den Großteil von Animationen im WorldWideWeb wird in Zukunft neben JavaScript auch CSS3 in Form des Modules Animation zuständig sein. Wobei nicht unerwähnt bleiben sollte, dass man sich die folgende kleine Liste an CSS3 Animationen, auch wenn der Mozilla Browser Firefox Fortschritte macht, in Bezug auf Browser-Unterstützung eher auf auf Google Chrome oder Safari (beide Webkit) ansehen sollte, wenn man in den Genuss der vollständigen Animation kommen möchte.

 (weiter)

Kreatives Webdesign mit CSS3 - Transition und Transform bringen Bewegung ins Spiel

Webdesign mit CSS3 - Nicht zuletzt aufgrund der zahlreichen neuen Möglichkeiten bei der Umsetzung der Gestaltung von Webseiten mittels CSS3 steigt der Bedarf an Informationen, wie die CSS3 Eigenschaften Transition und Transform angewendet werden. Ob fliessend animierte Übergänge im Slide-Effekt bei Navigationen oder Bilder-Galerien oder aber die Erzeugung von Schatten für Webseiten-Elemente wie für Formulare, die möglichen Einsatzgebiete dieser Eigenschaften sind mehr als umfangreich. Wer einmal die Vorzüge von CSS3 kennen gelernt hat, möchte ungern wieder einen oder auch zwei Schritt zurück machen. Denn das Einsparen von Hintergrundgrafiken, deren Darstellung von CSS3 Eigenschaften übernommen werden kann, die Reduzierung der HTTP-Requests dieser Hintergrundgrafiken, der daraus resultierende "saubere" HTML-Code, als auch das Definieren des Verhaltens von Webseitenelementen (Transform, Transition, ...) sind Argumente, deren Vorteile einfach nicht vom Tisch zu weisen sind.

 (weiter)

CSS3 Tutorial - Webdesign ohne Grafiken dank CSS Transform

CSS Transform - Mit dem hier anfangs der Woche vorgestellten CSS Tutorial Formular Design mit CSS3 sollte neben der Präsentation von CSS3 Eigenschaften, insbesondere die Reduzierung von Grafiken die für die Umsetzung von Webseiten-Elementen wie Formularen verwendet werden, im Vordergrund stehen. Diejenigen Browser die die im weiteren Verlauf des Artikels verwendeten CSS3 Eigenschaften nicht unterstützen, bekommen ein Formular welches nicht weniger brauchbar ist. Dank des Tipps eines Lesers, wird euch heute ein Zusatz zu diesem Tutorial vorgestellt, welcher mittels CSS Transform die noch einzig im Tutorial verbliebene Grafik, den gebogenen Schatten unterhalb des Formulars, verzichtbar werden lässt.

 (weiter)

Formular Design mit CSS3 - Visuelle Gestaltung und der Verzicht auf Grafiken

Formular Design mit CSS3 - Durch die Möglichkeiten die einige der Browser-Hersteller mit der Unterstützung von Webstandards wie CSS3 den Anwendern mittlerweile zur Verfügung stellen, sind insbesondere grafisch aufwendige(re) Formulare ohne große Aufwände mittels CSS realisierbar. Vorteil dieser Herangehensweise ist neben der größeren Vielfalt bei der Gestaltung, aber auch die Minimierung von HTTP-Requests durch den reduzierten Einsatz von Grafiken, auf die aufgrund vorhandener CSS3-Eigenschaften verzichtet werden kann. Ausgangspunkt dieses Kommentar-Formulars, welches sich auch im Internet Explorer durchaus sehen lassen kann, ist folgende grafische Vorlage aus Photoshop.

 (weiter)

CSS Sprite - Ladegeschwindigkeit optimieren und HTTP-Requests verringern

CSS Sprite bedeutet in der englischen Sprache Kobold oder Geistwesen und ist der Begriff für eine Grafik, die aus mehreren einzelnen Grafiken zu einer einzigen Grafik zusammengefügt wird. Diese Technik ist nicht neu, denn sie wurde bereits früher beim Erstellen von Computerspielen verwenden, da Grafikspeicher damals noch klein waren und das Nachladen lange dauerte. Auch im Webdesign sind CSS Sprites keine "brandneue" Technik, sondern wurde bereits im Jahr 2004 von Dave Shea bei A List Apart vorgestellt. Allerdings erst in den letzten Jahren fand man mehr und mehr Websites, die diese Technik nicht zuletzt auch aufgrund der daraus resultierenden verbesserten Ladezeit anwenden. Denn der größte Vorteil von CSS Sprites liegt in der Einsparung von HTTP-Requests, der Reduzierung der Gesamtgröße der Bilder und somit in der Verkürzung der Ladezeit von Webseiten.

 (weiter)

Sliding Image Gallery - CSS3 Transition Tutorial

Sliding Image Gallery - Auf Basis von CSS3 sind auch ohne JavaScript fliessend animierte Übergänge bei Webseiten-Elementen wie Bilder-Galerien möglich. Die hier im Blog bereits vorgestellte CSS3-Eigenschaft Transition ermöglicht ein solches Verhalten. Das folgende Step-by-Step Tutorial soll diesen "Slide-Effekt" anhand einer Bilder-Galerie näher beschreiben. Dieses Tutorial soll aufzeigen was man heute schon mit CSS3-Transition in wenigen Schritten auch ohne JavaScript erreichen kann. Korrekt interpretiert wird dieses Tutorial im übrigen vom aktuellen Safari, Google, Chrome, aber auch von Opera seit Version 10.5. Firefox wird dieses Feature ab Version 3.7 ( siehe Downloadlink unten ) unterstützen, womit dann ca.90% aller Besucher dieses Blogs dieses CSS3 Tutorial in den Genuss von CSS3 Transition kommen dürften.

 (weiter)

CSS Code organisieren und Ladegeschwindigkeit optimieren

CSS Code organisieren - Wer Webseiten wie Blogs oder auch Online-Shops erstellt, egal ob im Frontend- oder Backend-Bereich wird unabhängig von den vorherrschenden Standards und Vorgaben durch die Aufgabenstellung seinen Stil haben, Code zu schreiben und zu bearbeiten. Ein ausschlaggebender Grund hierfür ist die Übersicht des Codes und selbst die empfindet nicht jeder Entwickler gleichermaßen. Neben der eigentlichen Strukturierung von CSS-Code steht hierbei oftmals die Frage der Darstellung der einzelnen CSS-Regeln im Vordergrund der Diskussion. Genauer gesagt, die beiden Varianten die hierbei Anwendung finden können - Einzeilig- & Mehrzeiligkeit.

 (weiter)

Windows 7 Fenster mit CSS3 und jQuery - Tutorial Teil 2

Windows 7 Fenster mit CSS3 und jQuery - Schön euch auch beim zweiten Teil des Windows 7 Fenster Tutorials willkommen zu heißen! Die heutige Fortsetzung knüpft nahtlos an den ersten aus HTML- und CSS-Angaben bestehenden gestrigen Teil an. Nach dem das Interfacedesign eines Windows 7 Fensters im Firefox "Look & Feel" im gestrigen ersten Teil nachempfunden wurde, wird im heutigen zweiten Teil JavaScript bzw. das Plugin jQuery (UI) die Hauptrolle in diesem Tutorial-2-Teiler spielen. Hierbei wird insbesondere auf eine mögliche Änderung der Fenstergröße ( resizable ) und -position ( draggable ) durch den Anwender eingegangen.

 (weiter)

Windows 7 Fenster mit CSS3 und jQuery - Tutorial Teil 1

Windows 7 Fenster mit CSS3 & jQuery - Du findest das Interfacedesign von Windows 7 ansehnlich und interessierst dich für CSS3? Dann bist du hier genau richtig. Denn im weiteren Verlauf wird in diesem Tutorial-2-Teilers ein Fenster aus Windows 7 mit Hilfe von CSS3 und jQuery UI erstellt. Im ersten Teil dieses Tutorials geht es hierbei um das Stylen des Fensters, entsprechend den "Interfacedesign-Vorgaben" von Windows 7. Im zweiten Teil dieses Tutorials geht es um das Dragging & Resizing des erstellten Fensters unter Zuhilfenahme von jQuery UI.

 (weiter)

CSS Box-Reflect - Spiegelung ohne JavaScript und Photoshop

CSS Box-Reflect - Um Reflexionen von grafischen, aber auch von Text-Elementen wie bspw. Überschriften realisieren zu können, wurde hierzu bisher in der Vergangenheit fast ausschließlich auf Grafikprogramme wie Photoshop zurückgegriffen, mit den dann die entsprechenden Bereiche gespiegelt wurden. Dank CSS und der Unterstützung der vom Safari- und Chrome-Browser genutzten Browser-Engine Webkit, gibt es auch hier die ein oder andere Möglichkeit gänzlich ohne Grafikprogramme oder auch JavaScript-Erweiterung für solche Anforderungen auskommen zu können. Denn die CSS Eigenschaft "box-reflect" ermöglicht eine Spiegelung von Elementen die den entsprechenden Wert und die dazugehörigen Eigenschaften erhalten.

 (weiter)

CSS3 Transition Tutorial - Menü mit Slide-Effekt im Apple-Style

CSS-Transitions - Fliessend animierte Übergänge wie Slide-Effekte bei Webseiten-Elementen wie bspw. einem Menü zu erzeugen, wurde bisher meisten von kleinen Plugins basierend auf einem JavaScript-Framework wie jQuery umgesetzt. Die CSS3-Eigenschaft Transition ermöglicht ein solches "Bewegungsmuster", ebenso wie die hier kürzlich vorgestellte CSS3-Eigenschaft Animation, nur ohne JavaScript. Das heißt, das bspw. "Slide-Effekte" ausschließlich via CSS umgesetzt werden können. Im folgenden kleinen Tutorial wird daher beschrieben wie unter der Verwendung von Border-Radius, Gradient ( Farbverlauf via CSS ) und Transtion, dieser Slide-Effekt in wenigen Schritten ohne JavaScript und ohne Grafiken, ausschließlich mit CSS(3) realisiert werden kann.

 (weiter)

CSS3 Animation Tutorial - Sliding Navigation without JavaScript

Aufbauend auf dem "CSS3-Tutorial" bezüglich eines Navigations-Konzeptes bei dem die einzelnen Navigationspunkte mittels der CSS-Eigenschaft Border-Radius rund dargestellt werden, ist das Ziel dieses kleinen Tutorials, der Navigation Bewegung in Form eines Slide-Effektes einzuhauchen. Der Unterschied zu anderen hier bereits vorgestellten Variantionen an Navigationen, basiert dieses nicht auf JavaScript, sondern erhält seine Bewegung aus der CSS3-Eigenschaft Animation. Hiermit lassen sich für die entsprechenden Elemente flüssig animierte Bewegungen erzeugen. Weiterhin werden neben der Art der Bewegung, auch die Anzahl der Wiederholungen, die Dauer der Animation und vieles andere mehr festgelegt.

 (weiter)

CSS3 Tutorial - Website-Navigation - Border-Radius

CSS3-Tutorial - Inspiriert von dem hier im Webstandard-Blog kürzlich vorgestellten CSS-Tutorial "The hidden power of border-radius" und der vielerorts ausgetragenen Diskussionen zum Thema Progressive Enhancement im Bereich Webdesign bezüglich vorhandener Webstandards, ist das folgende kleine aber hoffentlich für den ein oder anderen Leser inspirierende CSS3-Tutorial mit Hauptaugenmerk auf der CSS3 Eigenschaft Border-Radius und den damit durchaus vorhandenen Gestaltungsmöglichkeiten entstanden. Keine Tricks, keine Zauberei und vor allem keinerlei Grafiken (!), lediglich ein paar übersichtliche Zeilen CSS. Aber seht selbst!

 (weiter)

52Framework - HTML5 and CSS3 Framework

HTML5 und CSS3 - Nicht wenige Anwender können es aufgrund der interessanten Features kaum abwarten, neueste Standards wie bspw. HTML5 oder CSS3 endlich testen und dann auch in Projekten einsetzen zu können. Für entgültige Umsetzungen auf Basis dieser Standards ist es aufgrund der ( noch ) fehlenden Unterstützung wie bspw. des Internet Explorers, momentan leider noch ein wenig zu früh. Einen Ausweg aus dieser Misere bietet das 52framework an. 52framework ist ein CSS-Framework welches diese neuen Standards und deren Eigenschaften wie header, nav, section, article, footer, den ::selection Selektoren, Border-Radius, aber auch Text- & Box-Shadow bereits unterstützt und somit für Projekte zugängig macht.

 (weiter)

Border-Radius - Circles and Curvy Shapes with CSS3

Border-Radius - Die oftmals unspektakulär wirkende CSS-Eigenschaft Border-Radius, die mittlerweile von ( fast ) jedem Browser unterstützt wird, kann wie der Blog-Beitrag The hidden power of border-radius von Liam McCabe zeigt, doch einiges mehr als der ein oder andere vielleicht gedacht hat. Warum warten bis alle Browser SVG-Grafiken unterstützen, wenn man Elemente wie einen Kreis oder Kurven auch auschließlich mit der CSS-Eigenschaft Border-Radius umsetzen kann? ;o) Weiterhin zeigt Liam in seinem Beitrag auch, wie einfach es ist beispielsweise mittels überlappender Elemente einen Mond abbilden zu können. Sich einfach mal ein wenig Zeit nehmen und testen und schon eröffnen sich einem vollkommen neue Ansätze zum Thema Border-Radius. Auf diese Weise könnte man bspw. ein Badge oder ähnliches, ausschließlich via CSS umsetzen.

 (weiter)

CSS3 - The Future of Webdesign

Die durchaus erfreuliche Entwicklung von Webstandards, deren Verbreitung in erster Linie immer noch von der Unterstützung durch die Browser(hersteller) abhängig ist, ermöglicht es für den Bereich Webdesign immer kreativere Lösungsansätze. Nicht zuletzt auch wegen dem modular aufgebauten CSS3, denn immer mehr Browserhersteller unterstützen mit ihren neuen Browser-Versionen, immer mehr dieser CSS3-Module ( der Internet Explorer muss aufgrund fehlender Unterstützung bei dieser Betrachtung allerdings außen vor gelassen werden ). Aus diesem Grund, wird an dieser Stelle den Lesern eine kleine aber hoffentlich hilfreiche Zusammenstellung von möglichen Anlaufstellen zum Thema CSS3 vorgestellt. Somit haben diejenigen, die den Schritt von CSS2.1 hin zu CSS3 noch nicht gewagt haben, die Möglichkeit sich "rechtzeitig" mit den Neuerungen zu beschäftigen.

 (weiter)

CSS Selektoren und ihre Unterstützung durch aktuelle Browser(versionen)

CSS Selektoren und Pseudo-Selektoren sind Möglichkeiten, ohne zusätzlichen (X)HTML-Code, Elementen einer Webseite Gestaltungsmerkmale vergeben zu können. Nur finden diese ( leider ) noch nicht häufig Anwendung. Nur warum nicht? Eine Frage, die bisher mit dem Support der Browser in Bezug auf CSS Selektoren & Pseudo-Selektoren leicht beantwortet werden konnte. Denn der IE war bisher zu großen Teilen nicht in der Lage diese korrekt zu interpretieren. Kim Blim Johannesen ist diesem Problem vor geraumer Zeit nachgegangen und hat dazu im Laufe der Zeit eine sehr ansehnliche CSS-Übersicht geschaffen, in der er versucht die aktuellsten Versionen der gängigen Browser ( IE8b, FF3, etc. ) auf ihren Support in Sachen Selektoren und Pseudo-Selektoren hin miteinander zu vergleichen. Und eines macht auch dieser Vergleich deutlich, der IE besitzt diesbezüglich immer noch die größten Mängel, ist aber deutlich auf dem Weg der "Besserung". Am besten bei diesem Vergleich, schneiden nicht wirklich überraschend Safari 3, Konqueror 3.5.5 und Chrome 0.2 ab.

 (weiter)

Was interessiert Euch an CSS?

Die Vielfalt mit der man mittels CascadingStyleSheets Webseiten gestalten kann, ist so umfangreich, dass man fast jeden Tag über etwas neues diesbezüglich stolpert. Aber was findet ihr, die Leser des Webstandardblogs, in Sachen CSS interessant? Welche Möglichkeiten die durch CSS und andere Standards entstehen können, führen bei Euch dazu sie ausprobieren zu "müssen"? Sind es Formulare und deren Gestaltungsmöglichkeiten inklusive entsprechender Validierung. Oder die vielleicht etwas andere Darstellung tabellarische Daten, eine Bilder-Galerie die zum durchblättern der Bilder einlädt und nicht aussieht wie jede andere. Oder ist es vielleicht eine Navigation, die selbst chinesischen Schriftzeichen "widersteht" und bezüglich des Layouts stabil bleibt? Oder sind es Ausblicke auf und mit CSS3 und den damit verbundenen zukünftigen Möglichkeiten für eure Webseiten und Webanwendungen?

 (weiter)

CSSGlobe mit Re-Design ins neue Jahr

cssglobe.com eine der Quellen in Sachen CSS, hat getreu dem Motto neues Jahr neues Design, seine Seite einem Re-Design unterzogen. Alan Grakalic der Mann hinter dem Projekt, hat hierbei unserer Meinung nach wirklich gute Arbeit geleistet. Auch wenn die Seite nicht revolutionäres enthält, liegt der Fokus des neuen Design immer noch deutlich auf dem was die Seite ausmacht - NEWS. Und diese Ausrichtung scheint bei den Lesern bzw. Abonnenten des cssglobe-Feeds gut anzukommen. Innerhalb des Jahres hat er seine Anzahl an Abonnenten von ca.700 auf über 7000 steigern können. Respekt, Alan! Eine Steigerungsrate, von der fast alle Blogs nur träumen können. Die zwei folgenden Screenshots von Oktober 2007 und Januar 2009 sollen vor allem denjenigen die diese Seite noch nicht kennen, verdeutlichen wie sich cssglobe.com entwickelt hat.

 (weiter)

CSS-Frameworks - Pro und Kontra

CSS-Frameworks. Immer wieder erhalten wir Nachfragen, ob wir CSS-Frameworks für Webprojekte verwenden. Und unsere Antwort ist bisher immer gleich - Nein. Daraufhin folgt meistens die Frage nach dem WARUM? Es ist doch zeit- und damit oftmals auch kostensparend, mit solchen Gerüsten zu arbeiten. Man muss nicht immer ganz von vorne anfangen und geht bspw. mit YAML dem ein oder anderen Browser-Bug, aufgrund bereits vorausgegangener Arbeiten, aus dem Weg. Bei "normalen" Spalten-Layouts wie bspw. Blogs durchaus ein Argument, bei vielen anderen Ansätzen die darüber hinausgehen, ist es für uns aber einfacher den Code nach dem Screendesign individuell umzusetzen, als ein Framework und das daraus resultierende Gerüst mit manchmal nicht unerheblichem Code-Ballast, als Vorlage für ein Design zu nehmen. Außerdem ist es bei uns eher selten der Fall, dass sich Projekte so sehr ähneln, dass deren Aufbau bzw. das Grundgerüst "wiederverwendet" werden kann. Zudem gibt es nicht wenige die sagen, dass sie somit von ihrer Individualität einbüssen würden. Daher wollen wir Euch zum Ende diesen Jahres noch einmal fragen, wie Eure Erfahrungen oder Empfehlungen bezüglich CSS-Frameworks sind.

Webmasterpro und der große Tag der Cascading Style Sheets

Hinter dem Titel "CSS-Referenz-Tag", verbirgt sich eine Aktion des Projektes Webmasterpro.de, welches morgen am 18.10.2008 den großen "CSS-Referenz-Tag" ausruft. Zweck ist es, die kürzlich gestartete CSS-Referenz einen Schritt voran zu bringen und mit Leben zu füllen. Ziel ist es, die erste deutsche Wiki-CSS-Referenz auf die Beine zu stellen, wobei eine moderne Übersicht zu CSS erstellt werden soll, welche nicht nur die Browserkompatitibilität akribisch erfasst, sondern auch durch Beispiele und bereits nutzbare CSS3-Eigenschaften glänzt. Wer Zeit, Interesse und das nötige Know-How mitbringt, sollte diese Aktion nicht verpassen. Außerdem gibt es die Möglichkeit eines von drei CSS-Büchern zum CSS-Tag zu gewinnen!

CSS - Wünsch Dir was!

Die Macher von css-tricks.com haben 15 bekannten Webdesignern und -entwicklern (u.a. Wolfgang Bartelme, Jon Hicks, Andy Budd ) eine interessante Frage gestellt, die von "runden Ecken", bis hin zur Definition von eigenen Variablen, auch interessante Antworten zu Tage brachte. Und genau diese Frage wollen wir gern an Euch weiter reichen. "Gibt es etwas was du dir von CSS (in Zukunft) wünschst?"

Conditional Comments und CSS für den Internet Explorer

CSS und der Internet Explorer. Eine lange Geschichte, die erst seit Erscheinen der 7er Version zu nicht mehr ganz so katastrophalen Auswirkungen im Layout der ein oder anderen Webseite führt. Es gibt zahlreiche Möglichkeiten dem IE seine mangelnden Fähigkeiten in Sachen Webstandardunterstützung zu korrigieren, um damit das gewünschte Layout einer Webseiten erhalten zu können. Neben den sehr bekannten und vielleicht für den ein oder anderen nahe liegenden CSS-Hacks, gibt es mit Conditional Comments einen weiteren Ansatzpunkt. Aber was sind eigentlich Conditional Comments?

 (weiter)

CSS richtig anwenden!

Suchanfragen wie und wo CSS in eine HTML-Datei integriert wird oder ob CSS besser per Inline-Style oder externe Datei implementiert werden sollte, finden über die gängigen Suchmaschinen immer häufiger den Weg zum Webstandardblog. Um den Suchenden ein wenig Unterstützung bezüglich dieser Fragen liefern zu können, werden an dieser Stelle die verschiedenen Möglichkeiten der Implementierung von CSS etwas näher vorgestellt und diese auf deren Tauglichkeit testen.

 (weiter)