kulturbanause blog » CSS

Silbentrennung im Browser: CSS-Eigenschaft “hyphens”

Jonas Hellwig — Thu, 02 Feb 2012 12:02:19 +0000

Wer im Internet typografisch ansprechende Texte gestalten möchte, hatte es lange Zeit nicht leicht. Mit dem Einzug der Webfonts stehen Webdesignern mittlerweile viele gelungene Schriftarten zur Verfügung und es gibt sogar experimentelle Möglichkeiten Ligaturen und Kerning im Browser zu aktivieren. Was noch fehlt ist die klassische Silbentrennung, die bisher ebenfalls nur über externe Scripte und Workarounds umständlich zu realisieren war. Mit der CSS-Eigenschaft hyphens wird vieles einfacher.

Silbentrennung per CSS

Der CSS-Code für die Silbentrennung sieht so aus:

body {
 -webkit-hyphens: auto;
 -moz-hyphens: auto;
 -ms-hyphens: auto;
 hyphens: auto;
}

Wie ihr seht, existieren Vendor-Prefixes für Webkit, Microsoft und Mozilla. Ohne Prefix kann kein aktueller Browser die Eigenschaft korrekt interpretieren.
Nichts desto trotz, kann hyphens: auto; bereits heute in allen Projekten eingesetzt werden, da im schlimmsten Fall Wörter in einem speziellen Browser nicht getrennt werden. Das ist zu verkraften.

Update: Wie mir über Google+ von Oliver völlig zu recht mitgeteilt wurde, muss der HTML-Language Code (w3schools.com/tags/ref_language_codes.asp) korrekt eingestellt sein. Ansonsten wird nach einer falschen Sprache getrennt, was u.U. schlimmer ist als gar keine Trennung.

Weitere Informationen zum Browser-Support findet ihr auf HTML5Please und auf Can I Use.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Facebook CSS/JavaScript-Framework: Fbootstrapp

Jonas Hellwig — Mon, 30 Jan 2012 08:00:39 +0000

Wenn ihr Anwendungen oder Facebook-Fanpage-Tabs im Look and Feel von Facebook gestalten wollt, steht euch seit kurzem das Framework "Fbootstrapp" zur Verfügung. In Anlehnung an das vor einiger Zeit veröffentlichte Framework "Twitter Bootstrap" bietet Fbootstrapp CSS-Stile für Raster, Typografie, Medieninhalte, Formulare, Navigationselemente und Modal Boxes. Auch JavaScripte sind im Paket enthalten um eine zusätzliche Ebene für Interaktionen hinzuzufügen.

ckrack.github.com/fbootstrapp

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Welche HTML5-Features kann ich heute schon nutzen? HTML5 please!

Jonas Hellwig — Thu, 26 Jan 2012 18:19:13 +0000

HTML5 und CSS3 bieten uns umfangreiche und spannende neue Funktionen, nur leider ist man sich häufig nicht sicher welcher Browser welchen Befehl wie interpretiert. Vor einiger Zeit habe ich euch bereits das Tool Can I Use vorgestellt, mit dem ihr prüfen könnt ob ein Befehl unterstützt wird und ob ihr Vendor-Prefixes benutzen müsst. HTML Please ist ein weiteres Tool dieser Art. Auch hier gebt ihr einen Befehl ein und erhaltet Informationen über die Einsatzmöglichkeiten. Im Gegensatz zu vielen anderen Diensten findet ihr hier jedoch auch sehr detaillierte Informationen über notwendige Fallbacks, Polyfills oder Prefixes.

HTML5 Please

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

CSS-Dokumente perfekt strukturieren: ProCSSor

Jonas Hellwig — Mon, 16 Jan 2012 07:33:19 +0000

Wer als Webdesigner im Team mit anderen Entwicklern arbeitet, hat sicher schon die ein oder andere Diskussion zum Thema Code-Design geführt. Insbesondere bei der Strukturierung von CSS-Code können die Meinungen stark auseinander driften. Sollen die CSS-Eigenschaften nun untereinander oder nebeneinander geschrieben werden? Gehören Leerzeilen zwischen die Eigenschaften oder soll vielleicht sogar alles in einer Zeile geschrieben werden? Und wo ist der beste Platz für öffnende und schließende Klammern?
Damit jeder Entwickler arbeiten kann wie es ihm am besten gefällt wurde der Online-Dienst ProCSSor ins Leben gerufen.

ProCSSor verschönert und organisiert CSS-Code unter Berücksichtigung einer Vielzahl von Optionen. Neben den auch aus Dreamweaver und Co. bekannten Einstellungsmöglichkeiten zu Abständen und Einzügen könnt ihr die CSS-Eigenschaften auch gruppieren, links- bzw. rechtsbündig ausrichten oder die Kommentare nachträglich anpassen.

procssor.com

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Gefloatete und absolut positionierte Elemente zentrieren. Back to Basics.

Jonas Hellwig — Mon, 12 Dec 2011 09:31:12 +0000

Vor einiger Zeit wurde ich gefragt ob es möglich ist, gefloatete Elemente zu zentrieren. Es ist möglich, und die Lösung ist im Grunde genommen auch völlig logisch. Man kommt nur leider nicht so einfach darauf.
Mit diesem Beitrag möchte ich daher zwei elementare Fragen im Umgang mit CSS beantworten. Wie zentriere ich gefloatete und wie absolut positionierte Elemente?

Absolut positionierte Elemente zentrieren

Wenn ihr ein absolut positioniertes Seitenelement zentrieren wollt, muss zunächst die Breite des Elements fest definiert werden. In unserem Beispiel hat der div-Container eine Breite von 300px.
Mit left:50%; wird die linke Kante des Containers auf 50% des Browserfensters verschoben. Wir wollen aber den Mittelpunkt des Containers bei 50% sehen. Daher verschieben wir das Element anschließend mit margin-left:-150px um die Hälfte seiner Breite wieder nach links. Das wars auch schon.
Wenn ihr wie im folgenden Beispiel zusätzlich ein padding verwendet, erhöht sich die Gesamtbreite. Folglich muss der Container etwas weiter nach links verschoben werden. Im Beispiel verwende ich ein padding von 20px auf allen Seiten. Das Element muss daher um 170 Pixel nach links verschoben werden.

Live Demo:

Live-Demo in neuem Fenster öffnen

HTML-Code:


  Inhalt

CSS-Code:

#centered {
	border:1px solid silver;
	padding:20px;
	position:absolute;
	width:300px;
	top:20px;
	left:50%;
	margin-left:-170px; /* Breite des Elements + Padding */
}

Gefloatete Elemente zentrieren

Wenn ihr ein gefloatetes Element zentrieren wollt, müsst ihr zusätzlich ein Hilfs-Element erstellen das als Container dient. Dieses Element erhält ein left:50% und wird mit der linken Kante an der Bildschirmmitte ausgerichtet.

Das enthaltene Element wird nun mit left:-50% um die Hälfte seiner variablen Breite aus diesem Container nach links verschoben.

Live Demo:

Live-Demo in neuem Fenster öffnen

HTML-Code:


  
    Inhalt

CSS-Code:

#container {
	float: left;
	position: relative;
	left: 50%;
}

#centered {
	float: left;
	position: relative;
	left: -50%;
	border:1px solid silver;
	padding:20px;
}

Ihr könnt die Beispieldateien beider Varianten hier herunterladen.

Download Beispieldateien

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

WordPress-Editor: Komplexe Inhaltsstrukturen benutzerfreundlich pflegen

Jonas Hellwig — Thu, 08 Dec 2011 07:00:14 +0000

Wenn ihr WordPress für Kundenprojekte einsetzt, werdet ihr schnell merken, dass einige Kunden Schwierigkeiten mit dem WordPress-Editor haben. Insbesondere wenn ein komplexer Inhaltsbereich gefüllt werden soll – beispielsweise ein mehrspaltiges Layout – sind viele Kunden überfordert. Und wir wollen den Kunden ja auch nicht mit der HTML-Variante quälen.
Ihr könnt den Editor ganz einfach mit Standard-Inhalten füllen und mit einer eigenen CSS-Datei stylen. Und das sogar für verschiedene post_types individuell. Es bietet sich u.U. also an, vorab eine HTML-Struktur festzulegen und für den Kunden benutzerfreundlich darzustellen.

WordPress-Editor mit Standard-Inhalten füllen

Über die functions.php des Themes könnt ihr den Editor mit Default-Content füllen. Häufig wird als Einsatzbeispiel ein wiederkehrender Absatz am Ende von Artikeln genannt den ich persönlich allerdings direkt ins Template schreiben würde.
Ich möchte in diesem Beispiel ein HTML-Grundgerüst für verschiedene Seitentypen anlegen, und anschließend so gestalten, dass der Kunde sich leicht zurechtfindet. Aber beginnen wir erst einmal mit der grundsätzlichen Funktionsweise.

Folgender Code gehört in die functions.php und fügt Standard-Inhalt in den Editor verschiedener Beitragstypen ein. Zunächst erstellen wir den Inhalt für statische Seiten und Custom Post Types. Anschließend den Inhalt für alle verbliebenen Beitragstypen wie die Artikel.

// Standard-Inhalte für verschiedene Beitragstypen
function kb_custom_editor_content( $kb_default_content ) {
   global $current_screen;

   // Für statische Seiten
   if ( $current_screen->post_type == 'page') {
	  $kb_default_content = 'Dieser Inhalt erscheint bei statischen Seiten.';
   }

   // Für Custom Post Types
   elseif ( $current_screen->post_type == 'POSTTYPE') /* POSTTYPE durch den Namen des Post Types ersetzen! */ {
	  $kb_default_content = 'Dieser Inhalt erscheint bei Custom post Types.';
   }

   // Alle weiteren Beitragstypen wie Artikel etc.
   else {
	  $kb_default_content = 'Dieser Inhalt erscheint bei Artikeln und allen Beitragsarten, die nicht zuvor definiert wurden.';
   }

   return $kb_default_content;
 }

 add_filter( 'default_content', 'kb_custom_editor_content' );

Wenn ihr anschließend einen neuen Inhalt erstellt, wird automatisch der Default-Content eingefügt. Auf bereits erstellte Beiträge hat die Funktion keinerlei Auswirkungen.

Der hier abgebildete Code lädt nur eine Textzeile in den entsprechenden Editor. Ihr könnt auch komplexe HTML-Strukturen festlegen. Wie das funktioniert und welche Vorteile es hat zeige ich später.

Ein eigenes Stylesheet für den Editor: editor-style.css

Ihr habt den Editor mit Default-Content gefüllt, jetzt fehlt noch eine CSS-Datei um die Inhalte des Editors – sei es nun Default-Content oder nachträglich erstelle Elemente – ansprechend zu gestalten.

Fügt den nachfolgenden Code in die functions.php eures Themes ein. Anschließend sucht der WordPress-Editor im Stammordner des Themes (dort wo auch die style.css abgelegt ist), nach einem CSS-Dokument namens editor-style.css. Mit diesem Stylesheet könnt ihr den Inhalt des Editors dann gestalten.

// Individuelles Stylesheet für den Editor
function kb_custom_editor_stylesheet() {
   add_editor_style(
	   array('editor-style.css')
   );
}

add_action( 'admin_head', 'kb_custom_editor_stylesheet' );

Eigene Stylesheets für Custom Post Types

Das zuvor gezeigte Snippet gilt immer für alle Editor-Bereiche und für alle Arten von Inhalten. Wenn ihr allerdings mit Custom Post Types arbeitet, kann es Sinn machen für verschiedene Custom Post Types verschiedene Stylesheets anzulegen.
Das folgende Snippet ist eine kleine Erweiterung des vorherigen. Nun wird für jeden Custom Post Type nach einem eigenen Dokument gesucht. Die Namenstruktur ist immer editor-style-NAME DES POST TYPES.css.

// Individuelle Stylesheets für den Editor (je nach Post Type)
function kb_custom_editor_stylesheet() {
   global $current_screen;

   add_editor_style(
	   array(
		  'editor-style.css',
		  'editor-style-'.$current_screen->post_type.'.css'
		)
   );
 }

 add_action( 'admin_head', 'kb_custom_editor_stylesheet' );

Und so sieht’s in der Praxis aus

Ihr habt nun alle Basics gelernt, um den Editor für eure Kunden ansprechend zu gestalten. Ich möchte euch mit einem einfachen Praxisbeispiel noch zeigen, wie das Ganze dann aussehen könnte.

Über den Default-Content wurden nur div-Container erstellt. Der beschreibende Text über den Textbereichen wird über das Pseudoelement :before per CSS generiert. Der Vorteil an :before ist, dass der Inhalt nur im Editor – nicht aber im Frontend sichtbar ist.

In der functions.php habe ich folgenden Inhalt voreingestellt.

[...]

$kb_default_content = '
  	  
	  
	   
	  ';
[...]

Die editor-styles.css habe ich anschließend mit diesem Inhalt gefüllt.


* {font-family:Arial, Helvetica, sans-serif;}

.wp-editor {width:800px;}

.entry:before {
	content:'Einleitungstext';
	color:silver;
	font-size:11px;
	position:absolute;
	top:-20px;
	left:0;
}

.entry,
.contentMain,
.contentAside {
	float:left;
	padding:15px;
	margin:30px 10px 10px 10px;
	border:1px dashed silver;
	position:relative;
}

.contentMain:before {
	clear:both;
	float:none;
}

.entry {width:750px;}

.contentMain {width:550px;}

.contentMain:before {
	content:'Haupt-Inhalt';
	color:silver;
	font-size:11px;
	position:absolute;
	top:-20px;
	left:0;
}

.contentAside {width:150px; margin-right:0;}

.contentAside:before {
	content:'Ergänzender Inhalt';
	color:silver;
	font-size:11px;
	position:absolute;
	top:-20px;
	left:0;
}

Ich habe übrigens bewusst mit festen Pixelgrößen gearbeitet, damit der Kunde besser einschätzen kann wo später auf der Website ein Zeilenumbruch entsteht. Das ist zwar meist ein wenig Gefummel bis es wirklich so klappt wie auf der Website, dann ist es allerdings ein echter Mehrwert.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Happy Nikolaus! Mein Adventskalender-Türchen zum Thema “CSS3-Keyframe-Animationen” im Webstandard-Blog

Jonas Hellwig — Tue, 06 Dec 2011 09:23:43 +0000

Im CSS3-Adventskalender des "Webstandard-Blog" ist heute ein Türchen mit einem Gastbeitrag von mir geöffnet worden. Ich erkläre wie ihr CSS3-Keyframe-Animationen im Layout einsetzen könnt und animiere exemplarisch eine Küstenlandschaft mit Leuchtturm, Möwen und Wolken.
Ich freue mich sehr mit diesem Tutorial am Adventskalender teilnehmen zu können, die Beiträge haben mich nämlich bereits im letzten Jahr überzeugt und sind sehr umfangreich und interessant. Ihr solltet also unbedingt auch einen Blick auf den Kalender von letztem Jahr werfen - die Beiträge sind nach wie vor aktuell.
In diesem Sinne: Ich wünsche euch eine gemütliche Weihnachtszeit :)

Dieses Beispiel erkläre ich im Webstandard-Blog. Wenn ihr wissen wollt wie es funktioniert, besucht bitte den Adventskalender.

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

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Website-Typografie per Drag and Drop testen: Font Dragr

Jonas Hellwig — Mon, 28 Nov 2011 08:09:28 +0000

Wenn ihr schnell und intuitiv testen möchtet wie gut sich eine Schriftart für eine Website eignet, lohnt sich ein Blick auf Font Dragr. Das Online-Tool arbeitet mit jeder beliebigen Schriftart und bindet sie mit der CSS-Eigenschaft @font-face in die Website ein. Font Dragr wird zunächst als Bookmarklet in die Favoriten gezogen. Anschließend könnt ihr das Tool als Overlay aktivieren und eine Schriftart zum Test auswählen. Wenn ihr einen Font testen möchtet, der nicht Bestandteil der Galerie ist, könnt ihr per Drag and Drop eine Schrift vom eigenen Computer hinzufügen.

Wenn ihr keine weiteren Einstellungen vornehmt, wird die Schriftart immer auf den gesamten body der Website angewendet. In einem Eingabefeld könnt ihr allerdings individuelle Selektoren definieren und so beispielsweise nur eine bestimmte Überschrift ersetzen lassen.

Font Dragr ist kein Ersatz für Dienste wie etwa die Google Font Directory. Font Dragr dient eher dazu schnell und vor allem ohne in den Code eingreifen zu müssen, Schriften live zu testen. Hat man sich dann für eine Schrift entschieden, muss sie manuell in die Website eingebunden werden.

Video zu Font Dragr - Drag and Drop Font Testing

Zu Font Dragr gibt es auch ein Einführungsvideo das die Arbeitsweise und Bedienung zeigt.

fontdragr.com

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Framework für Responsive Webdesign: Amazium

Jonas Hellwig — Thu, 17 Nov 2011 06:32:09 +0000

Responsive Webdesign und entsprechende Frameworks gewinnen in letzter Zeit zunehmend an Popularität. Amazium ist ein solches Framework und nutzt als Grundlage ein 960 Pixel-System das für die Desktop-, die Tablet- und die Smartphone-Ansicht im Portrait- und Landscape-Modus adaptiert wurde. Neben dem eigentlichen Raster bietet Amazium Gestaltungsgrundlagen für typografische Elemente, Formulare, Listen und Tabellen sowie eine Error 404-Datei. Besonders erwähnenswert ist auch die Unterstützung für responsive Images und responsive Videos.

amazium.co.uk

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Multimediatreff 28: Webtechnologien – HTML5, CSS3 & Co

Jonas Hellwig — Fri, 21 Oct 2011 06:50:44 +0000

Am 3. Dezember 2011 findet in Köln der 28. Multimediatreff (MMT) statt. Diesmal dreht sich das Event um die neuen Webstandards HTML5 und CSS3. Insgesamt sind acht vielversprechende Vorträge von Kollegen und Experten der Szene angekündigt. Neben dem sehr fairen Ticketpreis von 49,- Euro gibt es kostenlose Verpflegung.
Ich bin übrigens selbst am 3. Dezember vor Ort und werde die Veranstaltung besuchen. Wenn ihr also Lust auf ein Treffen habt - meldet euch!

Pressemitteilung

Der angehende Webstandard HTML5 ist in aller Munde - doch was lässt sich heute damit ernsthaft umsetzen? Was kann ich in Verbindung mit CSS3 und JavaScript jetzt schon realisieren? Kann ich demnächst auf Flash verzichten? Was kann Adobe Edge? Diese und weitere Fragen werden von den Experten der Szene beim MMT 28 beantwortet - natürlich wieder in entspannter Atmosphäre mit gratis Pizza und Kölsch!

Der 28. Multimediatreff lädt dieses Mal alle Webentwickler und -designer, wie auch Berater und Entscheider ein, sich über die aktuellen Technologien und Möglichkeiten umfassend zu informieren. Dabei spielen die Themen HTML5, CSS3 und JavaScript eine große Rolle. Neben bekannten Experten und Autoren, werden auch Größen, wie Patrick H. Lauke vom Opera-Team und Marco Zehe von der Mozilla Corporation Vorträge zum Thema halten.
Zudem wird Adobe sein neues Animationstool Edge sowie den Status Quo in Sachen Flash Platform vorstellen. Und Microsoft lässt die Teilnehmer ein wenig hinter die Kulissen von Windows 8 schauen und zeigt, wie man mit Visual Studio native Web Apps für Windows entwickelt.

Weitere Infos zur Veranstaltung und der Anmeldung finden Sie unter: http://multimediatreff.de/naechstestreffen.php

Die Teilnehmer zahlen einen Beitrag von 49 € – der Preis versteht sich inklusive Catering. Die Vergangenheit hat gezeigt, dass die Plätze beim Multimediatreff meist schnell vergeben sind - so gilt es sich rechtzeitig anzumelden: http://www.multimediatreff.de/reservieren.php

Über den Multimediatreff

»In entspannter Atmosphäre Fachwissen kommunizieren«, spiegelt in kurzen Worten das Anliegen des Multimediatreffs wieder. Gegründet 1999 in der Hochzeit der Multimedia-Szene veranstaltet der Multimediatreff zu aktuellen Entwicklungen und Technologien der Szene Thementage mit Workshops und Vorträgen von Experten.
Die Aufgabe der Veranstaltung ist es Überblick zu verschaffen und lädt dazu ein über "den Tellerrand hinwegzusehen" – so haben die Veranstaltungen jeweils ein Schwerpunktthema zu dem alle möglichen Lösungsansätze auf objektive Weise angeboten werden. Der Multimediatreff versteht sich zudem als "Non-Commercial-Event" – schlichte Produktwerbung wird den Teilnehmer eines Multimediatreffs nicht geboten.
Zudem funktioniert der Multimediatreff als Kontakt- und Jobbörse für Gleichgesinnte, die alte Bekannte treffen, neue Gesichter kennenlernen möchten oder sich mit Firmen vor Ort treffen um sich näher zu kommen.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

CSS3 Vendor-Prefixes per JavaScript erzeugen: -prefix-free

Jonas Hellwig — Wed, 19 Oct 2011 06:00:59 +0000

Die meisten von euch wird es sicher genauso nerven wie mich. Sobald man eine Website mit CSS3 umsetzen möchte, muss man zusätzlich zu den normalen CSS3-Befehlen die so genannten Vendor-Prefixes schreiben damit auch alle Browser die Eigenschaften interpretieren können. Das ist nicht nur lästig, häufig weiß man auch gar nicht genau welcher CSS3-Befehl welche Prefixes benötigt.
Ein kleines JavaScript namens prefixfree.js erleichtert euch die Arbeit enorm.

Prefix Free verwenden

Ladet euch das JavaScript von dieser Seite herunter und bindet es im (empfohlen) eurer Seite ein. Das Script erkennt anschließend automatisch oder