Die unterschiedlichen Browser verwenden unterschiedliche Style-Grundeinstellungen für die verschiedenen HTML Elemente. Beachtet man das nicht, sehen die eigenen Webseiten auf unterschiedlichen Browsern auch unterschiedlich aus. Fontgrößen variieren, Abstände zu vorhergehenden oder folgenden Elementen sind unterschiedlich und ähnliche Dinge. Continue reading
Tag Archives: css
Sourcecode Highlighting deluxe - Ixiters Hilighter
Bei Quelltexten für Webseiten ist es oft so, das mehrere Sprachen im Code auftauchen können. Schön ist es, wenn man in der IDE wie Netbeans oder Eclipse auch alles schön bunt angezeigt bekommt. Problematisch wird es, wenn man so einen Quelltext auch im eigenen Blog oder auf der eigenen Webseite präsentieren will.
Abhilfe schaffen dann diverse Syntax-Highlighter, die es als Online-Dienst, Javascript oder auch als komplettes PHP Script gibt.
Leider konnte ich aber noch nie einen Syntax Highlighter finden, der die verschiedene Web-Sprachen eines Seitenquelltextes auch gleichzeitig highlighten kann.
Deshalb habe ich selber einen (auf Basis von GeSHi) geschrieben. Ixiters Hilighter kann Quelltexte mit HTML, Javascript, CSS und PHP komplett highlighten und liefert den HTML-Quelltext den man dann im eigenen Blog oder der eigenen Seite einbinden kann um das ganze auch schön bunt darzustellen.
Guckts euch doch mal an und sagt mir eure Meinung. Ich erwarte Kniefälle, Danksagungen, Lobhudeleien, Blowjobs … eben alles, was der Seele gut tut.
Verbesserungs- und Änderungsvorschläge sind ebenfalls sehr willkommen. Insbesondere was die Farbgestaltung der Hilightings angeht.
CSS3 - Textarea zum anfassen schafft Probleme
Mit CSS3 kommt so manche schicke Neuerung ins Webdesign. Unter anderenm auch die neue resize Eigenschaft für z.B. Textareas. Damit ist es möglich dem User zu erlauben, Textareas durch ziehen mit der Maus in der Größe zu ändern. Dazu befindet sich dann in der unteren rechten Ecke an der Textarea ein Anfasser, ähnlich wie bei Fenstern auf der Arbeitsfläche.
So weit, so schön. Das ganze wird inzwischen auch von allen Browsern unterstützt, außer vom IE bis einschließlich IE9. Mit der Unterstützung fangen aber auch die Probleme an. Per Voreinstellung ist die resize Eigenschaft bei allen Browsern auf “both” eingestellt. Man kann also eine Textarea nach den Grundeinstellungen in beide Richtungen vergrößern.
Wer mit modernen Browsern durch Blogs und Foren streift, dem wird der Anfasser an den Textareas vielleicht schon aufgefallen sein. Blöd ist aber eben, dass man damit auch die textareas beliebig vergrößern kann. Das kann mitunter das Layout der Seite zerstören, oder wie bei WordPress dazu führen, dass man die Textarea ins Nirwana ausdehnt. Will sagen, man kann den Anfasser unter der Sidebar herziehen bis in den Bereich rechts neben der eigentlichen Webseite. Und dann findet man ihn nicht wieder! Die Textarea verschwindet auch unter der Sidebar und man kann in dem Bereich nicht mehr sehen was man schreibt.
Abhilfe schafft nur das setzen der CSS Eigenschaft resize für die betroffenen Textareas. Man muss die Eigenschaft dann aber nicht abschalten! Mit textarea{resize:vertical;} erreicht man z.B. dass die Textarea nur in der Höhe änderbar ist. Das zerschießt kein Layout und macht auch noch Sinn, wenn der User besseren Überblick über seinen Kommentar will. Ebenso gilt das natürlich für alle Foren und selbstgestrickten Seiten. Immer an ein {resize:vertical;} denken, dann klappts auch mit der Textarea.
(ix)
Webfonts - Das rockt!
Will man sein Blog, Forum oder Website mit stylishen Fonts aufhübschen, stößt man schnell an Grenzen. Man kann nicht davon ausgehen, dass alle User auch die verwendeten Fonts auf ihrem Rechner haben. Linux User z.B. haben von Haus aus keine Fonts namens Arial, Verdana oder Courier New. Und Obwohl “Comic Sans MS” von Microsoft freigegeben ist, findet er natürlich keine Verbreitung auf anderen Systemen. Linux User müssen sich bei Bedarf alle diese Fonts nachinstallieren.
Abhilfe schaffen Webfonts. Diese sind meist aus öffentlichen Quellen nachladbare Fonts, die man als CSS-Link einbinden kann. Danach spricht man sie in CSS wie alle anderen Fonst auch an. Auf ixiter.com werden z.B. ab sofort die beiden Google-Webfonts “Ubuntu” bzw. “Droid Sans” (für alle Texte) und “Anonymous Pro” (zur Darstellung von Sourcecodes) verwendet. Die Einbindung war denkbar einfach …
-
<link href=‘//fonts.googleapis.com/css?family=Ubuntu:regular,italic,bold’ rel=‘stylesheet’ type=‘text/css’>
-
<link href=‘//fonts.googleapis.com/css?family=Anonymous+Pro:regular,italic,bold,bolditalic’ rel=‘stylesheet’ type=‘text/css’>
Wie man sieht, werden die Fonts wie einfache CSS-Dateien eingelinkt. Danach stehen sie wie andere Fonts zur Verfügung.
Google bietet inzwischen zig Webfonts an. Viele einfache Dokumentenfonts, aber auch künstlerische und dekorative Fonts. Damit kann man schon eine Menge auf der eigenen Webseite machen. Wem das nicht reicht, der kann die Fonts auch gegen eine freiwillige Spende herunterladen (also auch kostenlos ) und so in der Text- oder Bildbearbeitung nutzen.
Komischerweise wollen manche der Google Webfonts nicht mit allen Browsern auf allen Systemen funktionieren. Deshalb sehen bei mir IE User (bis einschl. IE8) z.B. “Droid Sans” anstatt “Ubuntu”. Den Monotype Font “Anonymous Pro” bekomme ich in Google Chrome nur unter Windows angezeigt. Firefox, Safari(Windows) und Opera können anscheinend mit allem umgehen.
(ix)