52Framework - HTML5 and CSS3 Framework

52Framework - HTML5 and CSS3 FrameworkHTML5 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 with CSS3Border-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

CSS3 - The Future of WebdesignDie 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

CSSGlobecssglobe.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

CSS-Referenz-TagHinter 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)

CSS3 Features für den Internet Explorer zugängig machen

Das vorgestern angesprochene Skript von Dean Edwards beinhaltet neben der Lösung der PNG-Problematik auch weitere interessante Ansätze, um Unzulänglichkeiten des IE, auch in Version 7, zu beheben. Dazu muss lediglich ein Upgrade des JavaScriptes durchgeführt werden ( Download von IE8.js ). Dieses beinhaltet dann u.a. Lösungsansätze für min-height und max-height, die allerdings bereits in der 7er Version des Skriptes angeboten werden. Interessant sind aber vor allem die Lösungsansätze für CSS Selektoren. Um diese Möglichkeiten etwas bildhafter zu gestalten, verwenden wir an dieser Stelle die leicht modifizierte Tabelle eines früheren Artikel zum Thema "Der Einsatz von Tabellen in Webseiten".

 (weiter)

Dekorative CSS Galerien

CSS Decorative GalleryAuf WebDesignerWall.com eine Anlaufstelle für die kreative Dinge im Web, werden in einem Artikel zahlreiche Lösungsansätze für dekorative CSS Image-Galerien beschrieben. Ob ein Pin, die in letzter Zeit sehr häufig anzutreffenden "transparenten Klebestreifen" oder die altbewährte Büroklammer. All diese, allein doch oft sehr unscheinbar wirkenden grafischen Elemente können dafür sorgen, dass bspw. eine Bilder-Galerie ein wenig mehr Dekoration erhält. Interessante Lösungsansätze, für die es im Artikel einen JavaScript-freien und ausschließlich auf CSS basierenden Lösungsansatz gibt, sowie einen weiteren Ansatz der auf jQuery basiert. Auch die Unfäghigkeit der älteren IE-Versionen alphatransparente PNG-Grafiken abzubilden, wird mit einem entsprechenden Ansatz bedinet. Sehr Lesenwert!

Hintergrundgrafiken mit CSS in ihrer Größe skalierbar umsetzen

Auf css-tricks.com zeigt der Autor Chris Coyier wie man mit JavaScript, in diesem Fall mit dem Framework jQuery, Hintergrundgrafiken in ihrer Größer veränderbar machen kann. Je nach Größenausmaß des jeweiligen Bereiches in dem sich eine solche Hintergrundgrafik befindet, verändert die Hintergrundgrafik ihre eigene Ausmaße. Voraussetzung hierfür ist allerdings eine nicht gerade kleine Grafik, die somit bis zu einem bestimmten Maße verändert werden kann. Das diese Problematik auch ein JavaScript-freie Lösung anbietet, zeigt der Lösungssansatz von Stu Nicholls.

CSS Selektoren, eine vergessene Spezies?

Sie gibt es bereits seit Jahren, genauer gesagt seit CSS1 und der Entwurf seitens des W3C wurde 1996 veröffentlicht. Die Rede ist von CSS Selektoren, genauer gesagt von den beiden Pseuo-Elementen :first-letter und :first-line. Für die meisten bietet diese Information nichts neues. Warum nur, werden sie dann nur so selten eingesetzt? In den wenigesten Fällen eines Webseitenentwurfes wird Text ohne jegliche gestalterischen Eigenschaften zurückgelassen. Das heißt, entweder sorgen typografische Raffinessen oder grafische Elemente für eine besondere Gestaltung von Textinhalten. Warum nur, werden dann all zu oft zusätzliche HTML-Elemente wie bspw. ein span- oder b-Tag mit dieser Aufgabe beauftragt? Wozu zusätzlichen HMTL-Code anlegen, wenn die Aufgabe genauso elegant von den beiden angesprochenen Pseuo-Elementen erledigt werden kann?

 (weiter)

Homer Simpson only made by CSS

Homer Simpson made by CSSDas CSS nicht nur zum Gestalten von Webseiten, sondern auch zur Erstellung von Abbildungen gut ist, zeigt Román Cortés. Denn er hat Homer Simpson nicht als Grafik umgesetzt, sondern ausschließlich mit absolut positionierten Buchstaben und Zeichen via CSS. Eine 8 hier, ein Punkt dort, eine geöffnete Klammer hier und eine schließende Klammer an anderer Stelle. Das eine ist ein Teil des Auges, dass andere ist ein Teil seiner doch recht übersichtlich gewordenen Haare. Diese von der Schriftart Verdana dargestellten Zeichen sind aufgrund relativer Angaben zudem noch skalierbar. Auch wenn sich über Sinn und Unsinn einer solchen Fleißarbeit streiten lässt, sie verdient es Erwähnung zu finden, ohne wenn und aber!

Ein kleiner Test via firebug, lässt bei den Augen von Homer und dem Verändern des dort verwendeten Zeichens mit einer Null und einer entsprechenden Größenanpassung, der Eindruck erwecken das er in Moe's Taverne mal wieder zu tief ins Glas geschaut hat ;o) Gleiches hat Román im übrigen auch mit George Bush getan, aber man muss halt Prioritäten setzen wessen Erwähnung einem wichtiger erscheint.

Update: In einem weiteren Artikel seines Blogs verweist Román auf einen Anwendung mit der es möglich ist, Bilder im JPG-Format in reines CSS umzuwandeln. Man sollte beachten, dass die Umsetzung vor allem bei Bildern mit deutlichen Konturen am besten funktionieren. Ideal ist hierfür eine schwarz-weiß Abbildung. Wie die Anwendung funktioniert, zeigt das kleine Video mit Che Guevara (siehe "Recommended Video").

Safari ermöglicht einen Ausblick auf die Zukunft von CSS

SafariFarbverläufe sind eine Möglichkeit, Bereichen einer Webseite einen etwas anderen Effekt zu verleihen als die Vergabe einer bloßen Hintergrundfarbe. Oftmals werden sie von einer entweder 1px breiten oder 1px hohen Grafik repräsentiert und wiederholen sich dann innerhalb des integriertes Bereiches so oft, wie ihnen Platz zur Verfügung gestellt wird. WebKit, die Engine die hinter Safari steckt hat nun u.a. für Mac OS X und Windows neue WebKit Nightly Builds herausgebracht, die es ermöglichen via CSS Farbverläufe wie folgt zu definieren.

 (weiter)

Anforderungsprofile in Sachen CSS

Unterschiedliche Erfahrungen mit dem Webstandard wie CSS sorgen dafür, dass die Anwender unterschiedliche Ansprüche an den eigenen Umgang dieses Standards stellen. Daher unterscheiden sich die Prefenzen des Profis und des Einsteigers in Sachen CSS zwangsläufig. Da dies vorallem beim Erlernen dieses Standards von immenser Bedeutung ist, um somit gezielt und der unterschiedlichen Klientel entsprechend vorgehen kann, interessiert uns wo in Sachen CSS Eure Interessen liegen und in welcher Kategorie ihr Euch bezüglich der Kenntnise einstufen würdet? Profi, Fortgeschrittene(r) oder Einsteiger(in)?

Was interessiert euch? Sind es eher die Fortschritte die der Standard bspw. mit CSS3 macht und die damit verbundenen neuen Möglichkeiten oder sind es allgemeine Themen wie die Gestaltung von Seitenelementen wie Navigationen, Formulare oder Tabellen. Oder besitzt ihr dahingehend bereits die nötigen Kenntnisse und interessiert Euch eher für die unterschiedlichen Layoutvarianten (absolut, fließend, elastisch) und diese vielleicht basierend auf einem Grid-Layout? Das der Fokus in Sachen CSS eines jeden Einzelnen woanders liegt dürfte vollkommen klar sein. Uns interessiert lediglich der momentane Kenntnissstand und die damit verbundenen CSS-Themen mit denen ihr euch beschäftigt und wohin ihr damit wollt. Da es auch Anfragen nach Tutorials für Einsteiger gibt, könnte auf diese Weise vermieden werden, dass Profis mit Einsteigerinformationen "gelangweilt" und Einsteiger mit bestimmten Techniken "überfordert" werden und somit nicht den für sich selbst gewünschten Lerneffekt erzielen können.

CSS Kompatibilität des IE 5.0 bis 8.0

Auch wenn die Beta-Version des IE8 noch weit entfernt vom Bestehen des Acid3-Tests ist, ist es durchaus interessant zu sehen, in welchen Bereichen der Interpretation von CSS dieser Browser Fortschritte macht. Von Microsoft wird diesbezüglich eine Vergleichsübersicht angeboten, welche CSS-Features die Versionen IE5.0, 5.5, 6.0, 7.0, 8b1 und 8.0 unterstützen und welche nicht. Im Bereich CSS3 steht leider immer noch allzu oft NO anstatt YES.

Parallax Scrolling, 3D-Effekte im Hintergrund einer Webseite

SilverbackIn den letzten Tagen sind mehrfach Beiträge zum Thema Parallax Scrolling, eine Art 3-D Effekt für den Hintergrund von Webseiten erschienen. Ein einfacher, aber durch aus interessanter Effekt, den Paul Annett in einem lesenswerten Artikel anhand seiner Anwendung Silverback beschreibt. Chris Coyier vom Weblog CSS-Tricks, beschreibt den Einsatz von Parallax Scrolling anhand seines Beispiels Starry Night. Einfach betrachten reicht in diesen Anwendungsfällen allerdings nicht. Verändert die Größe des Browserfensters und ihr seht, was gemeint ist. Wer will kann diesen Effekt auch durch JavaScript unterstützt, dynamisieren. Nicht ganz so raffiniert und auch mit einer Dimension weniger, präsentiert sich im übrigen der Kopfbereiches des Webstandardblogs ;o)

Die 10 besten CSS Hacks

Nicht immer werden Standards wie CSS von allen Browsern gleich interpretiert. Alternativen für diese anzubieten, liegt dann oft im Aufgabenbereich von CSS-Hacks. Dejan Cancarevic von stylizedweb.com hat hierzu nun eine Liste, der seiner Meinung nach wichtigsten CSS-Hacks erstellt. Auch wenn es das Ziel sein sollte auf CSS-Hacks zu verzichten, ist es manchmal durchaus hilfreich zu wissen welche Auswirkungen die einzelnen Hacks haben. Für alle die nicht genug davon bekommen können, eine handvoll weiterer Seiten bezüglich CSS-Hacks.

Design by Grid

Der Titel ist bei dieser Seite Programm. Alles rund um Grid based designs. Ob entsprechende Webseiten, Tools, Techniken oder Tutorials, die noch recht neue Seite "DesignbyGrid" bietet zu diesem in letzter Zeit immer stärker nachgefragten Thema, einige lesenswerte Artikel und Beiträge. Interessant ist auch der Showcase mit entsprechenden Seiten die diese Techniken anwenden.

CSS und (X)HTML News

Neues in Sachen CSS, gibt es mal wieder vom W3C. Hier wurden vor kurzem mit CSS Advanced Layout Module und dem CSS basic box model, zwei im Stadium des Working Draft befindliche Dokumente veröffentlicht, die uns die zukünftigen Möglichkeiten von und mit mit CSS3 aufzeigen. Man kann nur hoffen das die Zeit bis zur finalen Veröffentlichung nicht zu lange dauert.

Ein sehr lesenswertes Best Practise Sheet in Sachen (X)HTML Elements hat der Schwede Lars Gunther veröffentlicht. In seinem sehr umfangreichen Dokument vergleicht er neben den zahlreichen Elementen von HMTL und XHTML, auch deren Eigenschaften in Bezug auf semantische Bedeutung, Accessibility, Usability und Suchmaschinen.

Fixed, Fluid or better Elastic?

Welche Vor- und Nachteile diese einzelnen und sehr verschiedenen Typen von CSS Layoutvarianten aufweisen und was es bei der Umsetzung dieser zu berücksichtigen ist, wird von Mike Cherim in "CSS Layouts: The Fixed. The Fluid. The Elastic." auf lesenswerte Art und Weise beschrieben.

CSS Neustart

CSS NeustartCSS-Reboot kennen viele der Leser dieses Blogs, aber CSS-Neustart dürfte noch relativ unbekannt sein. Zitat der Betreiber: "Die tägliche Tristesse wird durch frische Ideen, neue Layouts und modernes Webdesign ersetzt." OK, der Alltag muss nicht unbedingt trist sein, aber die Idee der Unterstützung von Webstandards unter Berücksichtigung der Aspekte der Barrierefreiheit kann ( bzw. sollte ) man sich nicht verschliessen. Datum dieses Neustarts soll der 1.Juli 2007 sein. Teilnehmen ( Registrierung soll in Kürze vorhanden sein ) können Profis sowie Amateure, kommerzielle oder auch private Webseiten. Dürfte interessant sein nach welchen Maßstäben ( Kriterien ( Design, Umsetzung, Usability ), Jury etc. ) der später erfolgreichste Neustart gewählt wird. Viel Spass und natürlich auch Erfolg allen Teilnehmern.

CSSHilfe in neuem Gewand

CSSHilfe, eine Webseite die mit Tutorials, Rezensionen über neue Werke, Inspiration und vielem anderen mehr in Sachen CSS aufwartet und den meisten Usern dieses Weblogs bekannt sein sollte, hat sich einem kleinen aber feinen Layoutupdate unterzogen. Im selben Atemzug wurde von Manuela das bisherige Logo ebenfalls durch ein neues ersetzt. Auf hoffentlich weiterhin interessante und lesenswerte Beiträge in Zukunft!

Absolute oder Relative Positionierung?

Die CSS Screencast-Serie von Jonathan Sampson, findet mit dem Artikel CSS Absolute and Relative Positioning eine interessante Fortsetzung. Die Eigenschaften der verschiedenen Positionierungsarten von Elementen, werden hier auf unkomplizierte und sehr verständliche Weise vorgetragen und dürften vor allem Neulingen in diesem Bereich, einen guten Einstieg in das Thema "CSS Positioning" bieten.

 (weiter)

CSS Screencasts für Einsteiger

Drei recht interessante Screencasts zum Thema Cascading Style Sheets, sind momentan bei Jonathan Sampson zu betrachten. Auch wenn sie sich die Video-Tutorials diesmal inhaltlich eher an Einsteiger zu diesem Thema richten: CSS DIV-Layouts, Cascading Style Sheets Part I und Part II.

IE 7 und Cascading Style Sheets

Nach dem der Redmonder Schützling nun bereits seit ein paar Wochen auf dem Markt ist und der ein oder andere schon mal einen Blick auf ihn geworfen hat, entstehen nach und nach interessante und lesenswerte Beiträge, insbesondere zum Thema:
Der Internet Explorer 7 und Cascading Style Sheets.

 (weiter)

Die besten CSS Artikel als PDF

PDF PreviewAnalog zum "Best of" PDF in Sachen Webstandards, gibt es heute ein weiteres downloadbares Dokument. Diesmal aus der von hier im Weblog am meist beachteten und gelesenen Kategorie: CSS. Dieses diesmal 8-seitige Dokument enthält die 5 Artikel ( siehe Inhaltsübersicht unten ), welche in der Rubrik CSS auf das meiste Interesse der Leserschaft gestossen sind. Diese ebenfalls "druckerfreundlichere" aufbereitete Version, findet hoffentlich ähnliches Interesse wie jenes zum Thema Webstandards. Downloadbar ist dieses ca. 182KB grosse PDF ebenfalls beim Online Daten-Speicher Anbieter "Box". Auch hier wurden sämtliche Linklisten und Verlinkung innerhalb des Dokumentes analog zum anderen PDF entfernt. Allen Interessierten, wie immer viel Spass beim Lesen!

 (weiter)

CSS Artikel bei A List Apart

Einer der beiden heutigen Artikel, der224 Ausgabe, bei A List Apart trägt den wunderbaren Titel "12 Lessons for Those Afraid of CSS and Standards" ( sehr lesenwert ). Ben Henick beschreibt in diesem Artikel auf welche Art und Weise er sich im Laufe der Jahre mit Standards und CSS auseinandergesetzt hat. "You will be forced to choose between the ideal and the practicable" ist nur einer der Punkte, denen ich absolut zustimmen kann.

 (weiter)

Webinhalte mit CSS vertikal zentrieren

Fragen bezüglich zentrierter Inhalte ( vertikal + horizontal ), wurden bisher meistens mit dem Vorschlag der Nutzung einer Layouttabelle, beantwortet. Dank Jeena, der auf den Artikel "Vertical Centering in CSS — Yuhu's Definitive Solution with Unknown Height" von D. Janovský hinweist, kann nun jeder sich dieses Problemes allein mittels CSS annehmen.

The first CSS World Awards

Warum diese Fokusierung auf CSS? Die Macher von CSS Mania wollen erstens mit diesem Award die Arbeit der Entwickler in Sachen CSS hervorheben und zweitens seitens der (potentiellen) Kunden, dass Bewußtsein für Webstandards erhöhen. Alles in allem gibt es für Webseiten, die auf www.cssmania.com von Mai 2005 bis Mai 2006 "aufgenommen worden" sind, 10 verschiedene Kategorien ( Liste siehe unten ) in denen der Einsatz von CSS und dessen Endergebnis bewertet wird. Jede dieser Kategorien beinhaltet 10 Seiten, wobei es am Ende zwei Finalisten und letztendlich natürlich auch einen Gewinner pro Kategorie gibt. Die nominierten Webseiten werden am 5.Juni und die ersten Gewinner dieses Awards, dann Anfang Juli von einer Jury verkündet.

 (weiter)

Tutorial zur Positionierung mittels CSS

CSS bietet unzählige Möglichkeiten einer Webpräsentationen das geeignete Layout zu verpassen. Eines der häufigsten Probleme welches sich dabei immer wieder herauskristallisiert, ist die Positionierung von Elementen. Wer sich also nicht die Zeit nimmt CSS eingehend zu verstehen, dem wird auf der Seite von Patrick Fitzgerald ein Tutorial angeboten. Dieses stellt in 10 Schritten alle möglichen Eigenschaften von positionierten Elementen.

 (weiter)

Die Organisation und Strukturierung von CSS Dateien

Die Organisation von CSS Dateien, bekommt gerade bei aufwendigen Projekten in Zusammenarbeit mit mehreren Kollegen ein immer höheren Stellenwert. Eine gute und vor allem selbsterklärende Struktur sollte hier ebenso gewählt und berücksichtigt werden, wie üblicherweise in (X)HTML, JSP oder Java-Dateien. Es gibt unter anderem die schon vielen bekannte Möglichkeit mittels eines CVS ( Concurrent Versions System ) zu arbeiten. So kann man während mehrere Kollegen an einer Datei arbeiten, zu unterschiedlichen Zeitpunkten "einchecken" ( die aktuellste Version einer Datei dem aktuellen Projektstand zuführen ) und bei Konflikten gegebenenfalls diesen aufheben. Nichts desto trotz, sollte wie bereits erwähnt auch eine CSS Datei gut strukturiert sein. Damit sind in erster Linie nicht unbedingt CSS-Hacks gemeint, sondern eher die Gesamtstruktur der Datei. CSS Kommentare geben einem die Möglichkeit dies innerhalb der ausgelagerten Datei zu tun. Dies beginnt wie in der Programmiersprache C oder Java üblich mit "/*" und endet mit "*/".

 (weiter)

CSS Shorthand Properties

Webseiten die schnell und ohne langes Laden vom Browser aufgerufen werden, sind das Ziel einer nahezu jeden Anwendung. Möglichkeiten wie dies zu erreichen ist, gibt es zahlreiche. Beispielsweise der Verzicht von Tabellen zum Layouten oder das Images nicht zur Darstellung von Texten verwendet werden. Eine weitere Alternative ist der Einsatz von Shorthand-Properties innerhalb von CSS Dateien. Die zusammenfassenden Eigenschaften ( Shorthand-Properties ) sind also eine Zusammenfassung mehrerer Eigenschaften, die zu einer Kategorie gehören ( bspw. background, font, lists oder padding / margin ). Mehrere Eigenschaften zusammengefasst zu einer Eigenschaft, ermöglichen es die Styles wie einzelne Elemente so kompakt und flexibel wie nur möglich zu gestalten. Oft können so 8-10 Zeilen von Eigenschaften zu 2-3 zusammengefast werden. Eine umfangreiche CSS-Datei von mehreren hundert Zeilen und bis zu 20KB oder mehr, kann somit eine nicht zu vernachlässigende Verkleinerung erreichen, sofern die Shorthand-Properties korrekt gesetzt werden.

 (weiter)

Webseiten ausdrucken? Webstandards bieten Alternative!

CSS bietet die Möglichkeit, Stylesheets für unterschiedliche Ausgabemedien zu definieren. Auf einfache und unkomplizierte Art und Weise können die Dateien mittels entsprechender CSS Dateien für das jeweilige Ausgabemedium präsentiert werden. Diese Anwendung für den Monitor ( media=screen ) dürfte ebenfalls den meisten bekannt sein. Ab und zu gibt es hier, den ein oder anderen doch etwas längeren Artikel. Nicht jeder möchte diesen bspw. inklusive Kommentare online lesen, sondern sich ausdrucken. Nach geraumer Zeit die mein Weblog nun online ist, habe ich mich mal an die Arbeit gemacht und die Styles für eben die Printvariante zu bearbeiten. Das Ausgabemedium PRINT und eine zusätzlich Datei ( print.css ) sorgen für einen hoffentlich übersichtlichen Ausdruck der Artikel, welcher mittels der Accesskeybelegung: Alt + p ebenfalls unkompliziert und ohne Barrieren aufgerufen werden kann. Der ein oder andere wird jetzt denken, hey warum so einen Aufwand? Wozu gibt es Screen grab! Oder andere Browser-Extensions. Vollkommen OK, wer es installiert hat, soll es nutzen. Aber nicht alle User installieren Erweiterungen für den Browser bzw. können damit umgehen. Und da wir keine Barrieren schaffen, sondern sie beseitigen wollen, gibt es für alle anderen die übliche Art und weise des Druckens ;o)

 (weiter)

Möglichkeiten und Aussichten auf und mit Cascading Style Sheets 3 ( CSS3 )

Ein Standard der Browserhersteller unter anderem dazu treibt immer wieder neue Versionen auf den Markt zu bringen, ist die Unterstützung für CSS. Immer wieder macht man auch die Erfahrung, dass CSS gar nicht, kaum oder falsch eingesetzt wird. Seiten voller Tabellen oder vom Div-Chaos dominiert, sind keine Seltenheit. Mit einer kleinen Serie, möchte ich hier einen Einblick in die Möglichkeiten geben, die uns CSS3 bietet. Ein berechtigter Einwurf wäre jetzt. Warum? Damit beschäftigt sich doch bisher eh kaum ein Browser. Richtig! Bisher unterstützen, bspw. das mehrspaltige Layout, nur die Rendering-Engine Gecko in Version 1.8 betriebenen Browser ( Laut der Statistik sind es immerhin ein drittel der Besucher meines Weblogs, mit steigender Tendenz. ). Das wären Mozilla 1.8+, Firefox 1.5, Flock und der noch in der Entwicklung befindliche Browser Seamonkey. Das entspricht nicht unbedingt der dominierenden Browsermehrheit, aber der Anteil der Browser die diese Module interpretieren können, werden nicht kleiner und deshalb sollte es für jeden der sich professionell mit dem Thema beschäftigt, sein ureigenstes Interesse sein, sich mit diesen Modulen zu beschäftigen.

 (weiter)

Schriftgrössen in EM, Pixel, Prozent oder Punkten?

Schriftgrößen in CSS Dateien zu definieren und dabei die Skalierbarkeit des Schriftgrades in seinen 5 Möglichkeiten auch für den IE zu gewährleisten, ist ein häufig auftretendes Problem und wird selbst in Foren von Entwicklern immer wieder diskutiert. Um Webseiten nicht nur für Gecko-Engine betriebene Browser anzupassen, sollten skalierbare Schriftgrößen definiert werden, dass heißt sie verzichten auf die Definition von Schriftgrößen in Pixel. Allzu häufig wird immer noch auf Pixel und manchmal sogar auf Point für die Definition einer Schriftgröße zurückgegriffen. Wer jetzt denk, ooch nee, kenne ich doch schon alles. Super! Denn der Beitrag ist er für die Webdesigner / Webentwickler geeignet, die eben immer noch auf eine Anwendung der Schriftgröße zurückgreifen, die es dem Internet Explorer nicht ermöglicht diese zu vergrößern oder gegebenenfalls zu verkleinern.

 (weiter)

Grafik Contest gestartet: Zu faul für CSS?

"Zu faul für CSS" wurde auf Grund der zahlreichen "ZU cool FÜR IE" Webseiten initiiert. Wir sind der Meinung das Webseiten für alle Browser optimal entwickelt werden sollten, auch wenn die Browser Standards unterschiedlich oder falsch interpretieren.

Wie auf der Contestseite zu sehen ist, ist die Headergrafik leer. Der Wettbewerb beinhaltet also die Gestaltung der Headergrafik für die "Zu faul für CSS" Website. Es darf jeder teilnehmen und seinen Vorschlag abgeben. Der Einsatz jedes einzelnen Teilnehmer soll natürlich auch belohnt werden, so das der Gewinner des Wettbewerbes eines der auf der Seite genannten Buchexemplare ( Auswahl von 3 Buchtiteln ), nach dem Wettbewerb sein Eigen nennen darf. Alle anderen nötigen Infos findet Ihr auf der Seite. Grafikprogramme starten und was interessantes einfallen lassen ;o)

Viel Spass

CSS Selektoren 3-teiliges Tutorial von 456bereastreet.com

Selektoren. Ein wichtiges Element im Umgang mit CSS war Roger Johansson von www.456bereastreet.com eine dreiteilige Serie wert. Gestern und wurde sie mit dem dritten Teil beendet und bietet jedem Interessierten einen Einblick in die Welt der Selektoren und deren Funktionalitäten.

 (weiter)

Top 10 CSS Websites

Eine Liste von Top 10 Seiten die vorbildlich und dem Webstandard entsprechend im Web präsentiert werden, ist immer interessant. Genau dieser Aufgabe widmete sich der Web Designer Christian Watson auf seiner Webseite. Dem ein oder anderen der sich mit Webstandards beschäftigt, werden die meisten Seiten bekannt sein.

 (weiter)

CSS Optimizer im Vergleich!

Valide übersichtliche Style Sheets zu schreiben, gegebenenfalls Shorthandproperties zu verwenden, sollten Ziele eines jeden guten Webentwicklers sein, der sich dem Webstandard verschrieben hat. Da in letzter Zeit immer häufiger Online CSS-Optimizer auftauchen und diese unterschiedliche Ergebnisse in unterschiedlicher Qualität ergeben, habe ich mir einmal 4 Beispiele herausgesucht und diese einem kleinen Test unterzogen.

 (weiter)

CSS-Design - Das Buch"CSS-Design - Das Buch"
Webdesign lernen mit CSS-Tutorials. Jetzt kaufen - morgen lesen!CSS-Design - Das Buc



Webstandards Top-5

Bilder-Galerie

Bilder-Galerie

 

Werbepartner

Hier werben - TKP unter 1Euronetzpepper - Agentur für TYPO3-EntwicklungEmpfehlung Hostingpsd zu html | codingpeople - webdesign trifft html

Schon abonniert?

SEO-Domains for sale!