HTML & CSS

Berichte zu (X)HTML und CSS

CSS-Datei mit Dust-Me Selectors entrümpeln

von

Bastelt man häufiger an seiner Website, was so die allermeisten Webworker tun, dann hat man recht schnell Regeln in der CSS-Datei, die nicht mehr benötigt werden. Es ist nicht einfach über Jahre gewachsene Struktur im Auge zu behalten.

Das braucht eiserne Disziplin und eine perfekte Organisation … und Hand aufs Herz, diese beiden Eigenschaften im Paket haben die wenigsten von uns, wenn es sich um die eigenen Projekte handelt. Etwas was man bei Kundenprojekten nicht durchgehen lässt, winkt bei eigenen Projekten häufiger durch.

Solltest du in der CSS-Datei auf Regeln stoßen, wo du dir nicht sicher bist ob die noch wirklich benötigt werden, dann könnte dir hierbei die Firefox-Erweiterung Dust-Me Selectors helfen.

Die URL der Website eingeben

Einfach die URL der Website oder der XML-Sitemap eingeben und das Addon durchsucht die Website und gibt nach ein paar Minuten das Ergebnis aus:

Weiter …

Google aktualisiert seine Styleguides für HTML, CSS und Javascript

von

Styleguides (“Gestaltungsrichtlinien”) werden zum Beispiel von größeren Firmen erstellt, damit auch externe Dienstleister nach den “gleichen Regeln” arbeiten, wie die internen Entwickler. Styleguides sind u. a. dann sinnvoll wenn zwei oder mehrere Freelancer zusammenarbeiten, damit man sich auf gemeinsame Regeln einigt. Sie sind aber auch eine interessante Inspirationsquelle, damit man sieht wie andere arbeiten und … Weiter …

Ein Paar Links zu HTML & CSS

von

Hier ein paar Links zum Thema CSS und HTML die ich seit einigen Tagen als offene Tabs in meinem Browser mit mir schleppe: Why you should care about CSS page performance: ein paar Tipps zur Performance-Optimierung der CSS-dateien CSS Tricks: How to Speed Up CSS Rendering: ein weitere Artikel zum gleichen Thema Style Guide für … Weiter …

BrowserQuest: dank HTML5 im Browser zocken

von

Um zu zeigen was heutzutage so alles mit der Technik, die man landläufig als HTML5 bezeichnet (HTML5, CSS3, Javascript & Co.), so alles möglich ist, haben die Leute von Mozilla ein Browserspiel mit dem Namen BrowserQuest erstellt. Hier ein kleines Video von ein paar Szenen aus dem Spiel: Aktivieren Sie JavaScript um das Video zu … Weiter …

Vortrag: Am Ende ist doch alles HTML

von

Der Kollege Jens Grochtdreis hat einen sehr interessanten Vortrag zum Thema Frontend-Entwicklung ins Netz gestellt. Er thematisiert sehr viele wichtige Aspekte. Zum Beispiel das man sich für das Design und die Programmierung sehr viel Zeit nimmt, aber das man fälschlicherweise denkt, dass man die Frontend-Umsetzung mal so nebenher machen kann.

Hier die Folien des Vortrages:

Weiter …

Periodensystem der HTML-Elemente

von

Auf JoshDuck.com findet man die Elemente fein säuberlich sortiert und gruppiert, wie man das aus dem Chemie-Unterricht her kennt. Im Gegensatz zu Dmitri Mendelejew hat er aber nicht die chemischen sondern die HTML-Elemente gruppiert und sortiert. Klickt man ein Element an, dann wird die Beschreibung und die Verweise zu der Mozilla- und der W3C-Referenz eingeblendet. … Weiter …

CSS: neue Methode um Text zu verbergen

von

Seit vielen Jahren nutzen Webworker diverse Methoden um per CSS Text oder Überschriften zu verbergen, zum Beispiel bei grafischen Überschriften oder vor allem, wie hier auf perun.net, auf das Logo zu verlinken, aber den eigentlichen Text der zum Logo gehört zu Seite zu schieben. Eine sehr bekannte und dabei auch zugängliche Methode ist es mit … Weiter …

CSS3: horizontale und vertikale Navigation mit :target

von

Ich habe heute ein Beispiel erwähnt, wo man lediglich mit CSS3 und :target eine recht einfache, aber dennoch ansehnliche Bilder-Galerie erstellen kann. Auf Sitepoint habe ich noch zwei weitere interessante Beispiele mit :target entdeckt. Beim ersten Beispiel wurde eine horizontale Tab-Navigation umgesetzt: Da ganze funktioniert (siehe Demo) in Firefox, Chrome, Safari, Opera und dem Internet … Weiter …

Einfache Bilder-Galerie nur mit CSS3 und :target

von

Chris Heilmann stellt auf Mozilla Hacks einen sehr interessanten Ansatz vor, um nur mit CSS eine Bilder-Galerie zu realisieren, wo bei Klick auf ein Button das entsprechende Bild erscheint. Das ganze basiert auf der Pseudo-Klasse :target. Die transition-Deklaration ist optional, damit das ganze etwas geschmeidiger wirkt.

Gastartikel: Modernes Webdesign mit CSS – Kreative, effektive und praktikable Workshops

von

Modernes Webdesign mit CSS Dieser Gastartikel stammt von Heiko Stiegert.

Wenn Sie standardkonforme Webseiten mit CSS attraktiv und modern umsetzen wollen, ist dies keine wirklich einfach Aufgabe. Denn Attraktivität ist nicht unbedingt auch gleichzusetzen mit Erfolg und das ist das bevorzugte Ziel eines jeden Webseitenbesitzers, ob Blogger oder Onlineshop-Betreiber. Wissen zu vermitteln, um diese Ziele erreichen zu können, gibt es viele. Eine Möglichkeit der Vermittlung von Wissen und Inspiration sind Bücher.

Mit dem folgenden Artikel möchte ich als Gastautor den Lesern dieses Blogs mein im Sommer letzten Jahres erschienenes Buch Modernes Webdesign mit CSS vorstellen. Der Untertitel “Schritt für Schritt zur perfekten Website” lässt dabei eventuell schon erahnen, dass sich den Ergebnisses der einzelnen über 20 Workshops sukzessiv genähert wird.

Weiter …

Der CSS3-Test für Browser

von

Auf css3test.com kann man seinen Browser auf die Unterstützung von CSS3 testen. Es werden 735 Testreihen durchgeführt und an Hand der erfolgreich absolvierten, wird eine Prozentzahl errechnet. Hier ein paar Browser im Durchlauf auf Windows Vista SP2.

Zuerst der Internet Explorer 9:

Weiter …

HTML5, bitte und HTML KickStart

von

Zwei HTML-Links zum Ende des Arbeitstages. Den ersten Link entdeckte ich gestern beim Kollegen Jens Grochtdreis. Die Seite heißt HTML5 Please und bietet einen Überblick über moderne Webtechniken und eine Abschätzung zum praktischen Einsatz. Den zweiten Link HTML KickStart entdeckte ich auf Google+ bei Sergej. Bei HTML Kickstart handelt es sich um ein fertig geschnürtes … Weiter …