Kategorie: CSS3

Am Ende ist doch alles HTML

Am 30. Juli fand in Marburg der erste Webmontag statt. Da ich gebürtiger Nordhesse bin, wollte ich meinen Beitrag zu diesem schönen Ereignis in Form eines Vortrages leisten. Mein Thema war „Am Ende ist doch alles HTML“. Mein Kurzvortrag über die Bedeutung des Frontends soll zu mehr und besserer Kommunikation anregen. Ich gebe Beispiele für Verbesserungen durch moderne Techniken. Wie immer findet ihr meinen Vortrag zum runterladen und anschauen bei Slideshare.

rgba auch für den IE6

Eine der segensreichen Neuerungen von CSS3 ist Vergabe von Transparenz über das Farbmodell rgba. Die sonst nutzbare opacity wirkt sich leider auch auf Kindelemente aus, sodass nicht nur eine Box einen halbtransparenten Hintergrund hat, sondern leider auch jeglicher Text oder Bilder in ihr. Bei rgba passiert dies nicht. Nur das Objekt, dem eine Farbe mittels rgba zugewiesen wurde, zeigt diese auch in der gewünschten Form.
Weiterlesen

Eine Tabelle mobil-freundlich machen

Innerhalb kurzer Zeit sprach ich mit zwei Menschen darüber, wie man tabellarische Daten optimal auf Smartphones transportieren könnte. Breitere Tabellen machen auf den kleinen Displays ja nicht unbedingt Spaß. Schnell ging die Diskussion darum, welche Listenform man denn nehmen solle und ob das ein Fall für eine Definitionsliste sei.
Weiterlesen

Vortrag beim SmashingMeetup – A Period of Transition

Am 27. Februar habe ich einen ganztägigen Workshop in Frankfurt gegeben. Veranstalter war das Smashing Magazine. Insgesamt 20 Teilnehmer wurden von mir in Sachen „Workflow im Team, YAML4 und CSS3 in der Praxis“ geschult.

Abends fand dann zusätzlich noch das fünfte SmashingMeetup in der Frankfurter Brotfabrik statt. In dessen Rahmen hielt ich meinen ersten englischsprachigen Vortrag. Die Slides zum Vortrag gibt es wie immer bei Slideshare bzw. hier zur Ansicht.

Compass und Sass haben was

In den letzten Monaten gab es eine Reihe Artikel zu diversen Präprozessoren, vor allem Sass und Less. Um mich herum stiegen immer mehr Entwickler auf diese Systeme um. Ich konnte den Systemen lange nichts abgewinnen, waren doch viele Beispiele für mich relativ unnütz, weil ich ein vernünftiges CSS-Framework nutze und deshalb keine Grids selber ausrechne oder überall einen clearfix-Hack einfüge. Allerdings hatte ich in der Vergangenheit ein paar Seiten, die mit Themes versehen wurden. Hinzu kam eine Seite, bei der ich viele unterschiedliche Farben und Verläufe nutzte. Das CSS war allein wegen der vielen vendor-prefixes extrem aufgeblasen. Also gab ich Compass und Sass eine Chance, als ich an einem neuen, etwas kleineren Projekt sass. Und ich muss sagen, ich habe Blut geleckt.
Weiterlesen

Die Sache mit den vendor-prefixes

Es gibt mal wieder eine gehörige Portion Aufregung unter Frontendentwicklern. Auslöser sind die Mitschriften einer Sitzung der CSS-Workinggroup und eine von Tantek Celik recht offensiv geführte Diskussion um vendor-prefixes. Kurz gefasst möchte Tantek unbedingt das vendor-prefix „-webkit“ auch bei Mozilla implementieren. „-webkit“ und „-moz“ würden dann einträchtig nebeneinander existieren. Es gab sogar die Idee, „-webkit“ als offiziellen Standard zu übernehmen, sodass alle anderen Browserhersteller diese Prefixes auch implementieren.
Weiterlesen

CSS3-Workshop in Frankfurt

Am 27. Februar halte ich einen Workshop in Frankfurt. Themen werden CSS3, Arbeit im Team, Codeorganisation und YAML4 sein. Organisiert wird die Schulung vom Team des Smashing Magazines. Wegen der internationalen Ausrichtung von Smashing ist der Workshop als englischsprachige Veranstaltung ausgewiesen. Sollten aber alle Teilnehmer der deutschen Sprache mächtig sein, werde ich den Workshop logischerweise auf Deutsch halten. Am Abend wird es ein SmashingMeetup geben. Auch da werde ich etwas erzählen, lasst Euch überraschen.

Für die Schulung stehen 20 Plätze bereit, die kostenlos vergeben werden, dank des Sponsors MailChimp. Auf der Meetup-Seite stehen die Teilnahmevoraussetzungen: natürlich sollte man ein Fortgeschrittener Entwickler im Frontend sein. Zum Testen des eigenen Wissens stellen wir eine kleine Testfrage, die beantwortet werden muss. Die Frage befindet sich wie ein Überblick über die Inhalte des Workshops auf der Meetup-Seite. Vielleicht sehen wir uns ja.

HTML5, bitte

Entwickelt man seine Seiten mit modernen Webtechniken, also mit HTML5 und CSS3, kommt man immer an den Punkt, an dem einzelne Browser die jeweiligen Techniken nicht unterstützen. Und das betrifft bei weitem nicht nur den IE. Nun kann man das zwar ignorieren, es gelingt aber nicht immer. Zum einen möchten doch die meisten Kunden auch etwas von der neuen Seite haben und nutzen dabei doch nicht immer einen modernen Browser. Zum anderen gibt es selbstverständlich auch Techniken, die nicht nur einfach Deko sind – wie runde Ecken, Verläufe und Schatten. Wenn man ein visuelles Element auf 3D-Transforms aufbaut, weil man gerne die aktuellste Technik nutzen will, bekommt man ausserhalb der aktuellen Chrome nur extrem seltsame Ergebnisse.
Weiterlesen

Das CSS3 Click Chart

Das CSS3 Click Chart von Louis Lazaris ist ein sehr nützliches Tool. Nach der Auswahl einer CSS3-Eigenschaft bekommt man einen Beispielcode präsentiert, die Livedemo des Beispielcodes und dazu Links zu Beschreibungen der Eigenschaft sowie die Browserunterstützung und Hinweise auf mögliche Polyfills. Die CSS3-Eigenschaften hat Lazaris dabei in „Common Stuff“ und „Cutting Edge“ eingeteilt.