Ein Paar Links zu HTML & CSS

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 …

CSS: neue Methode um Text zu verbergen

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 …

CSS Usage: welche CSS-Regeln sind im Einsatz?

CSS Usage ist ein Addon für Mozilla Firefox, welche den Firebug um eine zusätzliche Funktion erweitert. Mit CSS Usage kann man herausfinden welche CSS-Regeln auf einer bestimmten Seite eingesetzt werden. Nach der Installation bindet sich CSS Usage in Firebug als zusätzlicher Tab ein. Mit Klick auf Scan untersucht man die gerade aufgerufene Seite. Aktiviert man …

Wer ist der schnellste Coder?

Wer sich gerne auch bei HTML und CSS mit anderen misst, der sollte mal bei Code Racer vorbeischauen. Hier kann man live gegen andere Spieler/Coder antreten und sein Wissen bzw. Können rund um HTML und CSS testen. Der Gegner ist also ein anderer Spieler und die Zeit. Und als besondere Gimmicks gibt es für gewonnene …

CSS: browserspezifische Eigenschaften, Pseudo-Elemente und Pseudo-Klassen von Mozilla

Mozilla bietet für die Produkte die auf die Gecko-Engine setzen – wie zum Beispiel Firefox, SeaMonkey, Thunderbird – eine Fülle von browserspezifischen CSS-Eigenschaften, Pseudo-Elementen und Pseudo-Klassen. Eine ausführliche Liste findet man unter Mozilla CSS Extensions. Eine recht interessante Pseudo-Klasse ist ::-moz-list-bullet. Damit kann man das Aussehen, des Auflistungszeichens per CSS steuern. Hier ein Beispiel: li::-moz-list-bullet …

Patternify: ganz einfach Hintergrundgrafiken erstellen

Auf Patternify.com kann man ganz einfach und komfortabel Hintergrundgrafiken bzw. Muster (engl. Pattern) erstellen: Links oben kann man das Muster erstellen oder darunter auf einen Satz vorgefertigter Muster zurückgreifen und die anpassen. Rechts bekommt man das Ergebns in Form einer PNG-Grafik oder als Base64-Code welches man direkt in die CSS-Datei einbinden kann. Unten rechts kann …

CSS-Links: Generator, Buttons, 100% vs. auto

CSS-Generatoren gibt es sehr viele, aber der Generator auf css3gen.com fällt unter anderem deswegen positiv auf, weil er zum einen ein paar grundlegende Infos bietet. Somit ist das ganze auch für Anfänger verständlich und zum anderen sagt er welche Browser-Versionen die Vendor-Präfixe nicht mehr brauchen: Den nächsten Link dürfte der eine oder andere schon kennen:

CSS: jede Unterseite auf 100% Höhe

Wenn man zentrierte Layouts umsetzt und die Inhalte auf jeweiligen Unterseite zu kurz sind, dann erscheint auf den entsprechenden Seiten auch keine Scrollleiste … logisch. Viele Kunden stört das, weil beim Wechsel zwischen einer langen zu kurzen Seite und umgekehrt die Website “wackelt”. Deswegen wird häufig gewünscht, dass man bei den kurzen Seiten die Scrolleiste …

CSS3: Infos und Auflistung über aktive Mediaqueries

Drüben bei Jens entdeckte ich ein nettes Tool für CSS-Entwickler auf CSS Media Queries.com: Dort werden eine Reihe von Mediaqueries samt Erklärungen aufgelistet und die aktiven bzw. für dein System passenden hervorgehoben. In meinem Fall wären dies: @media only screen and (min-width : 1224px) @media screen Schalte ich die Sidebar in meinem Firefox aus, dann …