Als Unix/Linux-Nutzer kennen wir alle den beliebten ‚cat‘ Befehl, um Dateiinhalte anzuzeigen. Aber was, wenn wir den gleichen, vertrauten Befehl auch für URLs verwenden möchten? Hier ist eine elegante Lösung in Form einer ZSH-Funktion. Die folgende Funktion erweitert den klassischen ‚cat‘ Befehl so, dass er sowohl mit lokalen Dateien als auch mit URLs umgehen kann:Mehr lesenEine smarte ZSH-Funktion: cat für Dateien und URLs
In diesem Beitrag möchte ich euch zeigen, wie man mit ganz einfachen Mitteln einen Schatteneffekt an beliebige Block-Elemente hinzufügen kann. Der Clou dabei ist jedoch, dass dafür kein HTML angefasst werden muss, sondern dies ausschließlich über normale CSS Mittel funktioniert.
Ja klar, werden jetzt einige rufen. Dafür kann man ja einfach die CSS Deklaration box-shadow verwenden! Richtig. CSS3 erlaubt es seit einiger Zeit, mit box-shadow schöne Schatteneffekte an beliebige HTML Elemente zu zaubern und ist dabei ziemlich flexibel.
Aber leider ist es wie mit vielen neuen Dingen - einige Browser unterstützen es noch nicht, oder nur mit speziellen Browserprefixen wie -moz-, -o- oder -webkit-. Dies bedeutet, man muss diese Deklaration für jeden Browser in seiner speziellen Schreibweise wiederholen und bläst damit sein Stylesheet unnötig auf. Und selbst dann werden ältere Browser wie IE8 (und niedriger) oder Opera 10.10 (oder niedriger) nicht unterstützt.
Aus diesem Grund möchte ich euch eine weitere Möglichkeit vorstellen, wie man noch einen Schatten erstellen kann.
CSS2 bietet schon seit einiger Zeit die Möglichkeit mit Hilfe der Pseudo-Elemente :before und :after Inhalte vor bzw. nach Elementen per CSS hinzuzufügen. So lässt sich zum Beispiel mit folgender Anweisung vor allen Link-Elementen ein Text hinzufügen:
a:before {content: "Ich bin ein Link: "}
Und das alles, ohne etwas am HTML selbst ändern zu müssen. Und ein weiterer Vorteil für uns ist, dass diese Pseudo-Elemente auch schon von einigen älteren Browserversionen unterstützt werden und zudem noch ohne spezielle Prefixe auskommen.
Vor einiger Zeit habe ich hier auf webmatze.de einen einfachen auf JavaScript und CSS basierenden Tooltip vorgestellt, mit dem sich schnell und einfach Tooltips in die eigenen Seiten integrieren ließen. Dieser funktionierte soweit auch ganz gut in vielen Browsern, doch die Zeit ist nicht stillgestanden und seit der Veröffentlichung hat es einige neue Browserversionen und sogar ganz neue Browser gegeben.
Leider führte dies auch dazu, dass das alte Tooltip Script nun leider nicht mehr in allen wichtigen Browsern funktioniert. Aber auch in den Browsern, wo es funktionierte, ist es unter Umständen zu Fehlern gekommen.
Dies will ich nun zum Anlass nehmen und euch ein komplett neues Tooltip Script zur Verfügung stellen.
Okay, über Namen lässt sich bestimmt streiten, aber irgendwie muss das Kind ja heißen. Das neue Script basiert auf ein paar Zeilen JavaScript und ist nur geringfügig größer als das alte Script. Dafür ist es jedoch viel flexibler zu konfigurieren, kollidiert nicht mit anderen Scripten und lässt sich leicht über CSS beliebig anpassen. Und wer möchte, kann das Script auch ohne Probleme um neue Funktionen erweitern.
Hier könnt ihr den Code sehen:
Mehr lesenEin einfacher Cross-Browser Tooltip mit Javascript und CSSAn diesem Punkt hat jeder schon einmal gestanden. Man hat so viele verschiedene gute oder auch weniger gute Webseiten im Internet besucht und die eine oder andere gute Information für sich aus diesen Seiten gezogen. Doch wenn man Anderen sein eigenes Wissen oder die eigenen Ansichten und Gedanken mitteilen möchte, wird man nicht drum herum kommen, sich eine eigene Homepage zu erstellen.
Doch wie genau funktioniert das? Und welche Tools brauche ich dafür? Genau diesen Fragen möchte ich in diesem und in kommenden Artikeln auf den Grund gehen.
Mehr lesenWie erstelle ich eine Webseite?
Eines der wichtigsten Elemente eines Webauftritts ist das Menü. Das Menü hilft dem Nutzer dabei, sich in komplizierten Seitenstrukturen zurechtzufinden und um schnell an jeden gewünschten Punkt in dieser Hierarchie springen zu können.
Auf vielen Seiten werden immer noch Navigationsmenüs verwendet, welche vollständig auf JavaScript aufbauen und bei ausgeschaltetem JavaScript nicht mehr funktionieren. Solche Seiten sind dann für Nutzer mit Behinderungen meistens nicht mehr bedienbar.
In diesem Beitrag möchte ich euch zeigen, dass man Menüs auch auf behindertengerechte und barrierefreie Weise erstellen kann. Ziel ist es ein Menü zu bauen, dass nur auf aktuellen Standards wie HTML und
Hier könnt Ihr schon einmal sehen, wie das Menü aussehen wird. (Wird im IE6 als vertikales Menü angezeigt, während es alle modernen Browser als Drop Down Menü angezeigen.)
Mehr lesenHierarchische Menüs mit CSS erstellen
Beim Studieren der aktuellen HTML5 Spezifikation, ist mir ein neues Attribut aufgefallen, welches möglicherweise bald eine große Bedeutung bekommen könnte. Ich spreche hier vom Attribut irrelevant, welches allen HTML Elementen zugewiesen werden darf.
Das Attribut irrelevant darf die Werte "true" oder "false" enthalten und gibt an, ob ein so ausgezeichnetes HTML Element im aktuellen Kontext noch nicht oder nicht mehr relevant ist. So gekennzeichnete Elemente werden vom Browser weder gerendert, noch angezeigt. Das heißt, man kann damit beliebige Elemente ein- und ausblenden.
Bisher konnte man diese Funktionalität nur durch das Setzen der CSS Eigenschaft display auf display: none erreichen. Damit werden die entsprechenden Elemente ebenfalls nicht gerendert und angezeigt.
Der Nachteil hier wäre allerdings, dass ein Gerät oder Browser, welcher keine Stylesheets versteht, solche Elemente dann trotzdem darstellen würde. Bei Verwendung von irrelevant würde der entsprechende Teil auch in diesem Fall nicht angezeigt werden. (Vorausgesetzt das Gerät versteht HTML5.)
Mehr lesenIst display=“none“ jetzt irrelevant?
