Posts Tagged ‘css’
jQuery benutzt jetzt Google Compiler statt YUI Compressor
Bei Twitter bin ich bei Steve Souders auf einen interessanten Tweet gestoßen:
Der Link im Tweet erläutert dies dann etwas genauer:
Das ganze hört sich interessant an, zumal wir den YUI Compressor auch bei uns in den Projekten benutzen.
Sprite Me!
Wir haben schon etwas zu CSS Sprites geschrieben, es gibt auch einige Tools dazu. Aber jetzt gibt es ein viel Besseres! Bei Ajaxian habe ich gerade den Artikel dazu gelesen und die verlinkte Demo ausprobiert. Und ich muss schon sagen, dass ich ziemlich fasziniert bin, was so ein kleines Bookmarklet so machen kann 😉
Man kann damit aus den bestehenden Grafiken CSS Sprites zusammenstellen und die Änderungen werden sofort in der aktuellen Seite angewendet, so dass man „nur“ noch die fertige Grafik als auch die CSS Änderungen kopieren muss.
Ich habe es allerdings nur in der Demo angetestet. Die Änderungen selbst und die neue Sprite Grafik habe ich noch nicht entnommen und die Änderungen in verschiedenen Browsern ausprobiert. Falls jemand die Zeit findet: ab in die Kommentare!
Lesenswerte Seiten
Hier mal ein paar Links, die ich in den letzten Wochen gefunden habe und durchaus lesenswert finde:
Browser
CSS
- CSS Tip #2: Structural Naming Convention in CSS
- CSS Filter Hacks
- 5 Important CSS Hacks for IE That You Should Know
- The Definitive Guide to Using Negative Margins
E-Commerce
JavaScript
Wireframes
IE8 Compatibility View ist doch nicht so gut…
Wir haben uns extra den 8er IE installiert, weil man dort einfach in den Compatibility View umschaltet, damit man den 7er IE testen kann. Mir persönlich war es ehrlich gesagt schon immer etwas suspekt, ob der IE8 das dann auch richtig als IE7 rendert. Heute haben wir leider festgestellt, das die Seite im Compatibility View falsch gerendert wird.
IE8:
IE8 im Compatibility View als IE7:
und der richtige IE7 macht es wieder richtig:
Wir benutzen einen Image Teaser, der overflow: hidden; aber eine feste Höhe und Breite hat.
Das mit overflow: hidden; macht im IE nur dann Probleme, wenn man keine Höhe angibt.
Im SuperPreview ist übrigens genau das gleiche Problem:
D.h. ich werde dem IE8 Compatibility View ab sofort nicht mehr trauen und wieder meinen IE7 im VMWare Image zum testen nehmen (müssen).
CSS-Sprites
Ich bin bei Dr. Web auf einen interessanten und praxisorientierten Artikel zu CSS-Sprites gestoßen. Es wird dort auch ein Sprite-Generator vorgestellt den ich aber noch nicht getestet habe.
Web Development Cheat Sheets fürs iPhone / iPod Touch
Wer 0,79 € übrig hat, der kann diese für jeweils ein CheatSheet im AppStore ausgeben:
Die CheatSheet List gibts hier bei Concentric Sky.
IMO sind die Cheat Sheets für diese Themen auf dem iPhone nicht wirklich sinnvoll, da man beim Entwickeln sowieso am Rechner sitzt und die Sachen entweder in einem Cheat Sheet PDF (z.B. hier) hat oder online nachschauen kann.
Dafür ist jTouch
A touchable jQuery Cheat Sheet in your pocket, accessible anywhere.
schon viel interessanter, weil kostenlos 🙂 – Internetzugang vorausgesetzt.
Gefunden habe ich die ganzen Links in diesem Artikel „Javascript Cheat Sheets & Quick Reference Guides for Javascript Webmasters, Coders, Web developers & Designers„.
Schnell mal CSS und JavaScript Dateien packen – MinifyMe
Wer schnell mal eine oder mehrere CSS Dateien packen möchte, ohne den „umständlichen“ Weg mit dem YUI Compressor zu gehen, der sollte sich einfach mal MinifyMe (Adobe Air) anschauen.
Zieht man mehrere CSS Dateien in das Fenster, werden diese zu einer pack.css mit einem eigenen Algorithmus zusammengefasst.
What I basically do is combine all selected files, and then remove new lines and (some) whitespaces.
Es wird also nicht der YUI Compressor benutzt.
CSS Layout vs. Table Layout
Beim Smashing Magazine (welches bestimmt alle schon im Feed Reader haben) ist ein guter Artikel zum Thema „Table Layouts vs. Div Layouts: From Hell to… Hell?“
Resümee:
- Benutze die HTML Elemente in der Art, wofür sie gedacht sind!
- „Overusing div tags is as bad as having a table-based layout“ /Divitis: „Divitis is a common problem with webdesigners. It is the process of using too many nested/unnecessary divs to mark up a page. „
- HTML5 ergänzt mehr semantische Tags für die Seitenstrukturierung
… achja, und
- „With the release of IE8, all three major browsers now support the styling of block-level elements as tables.“
Ich sage nur
<div class="layoutAlignment area"> ... </div>
🙂
350+ CSS Tools and 160+ RSS Feeds for Web Developers and Web Designers
Geht es nur mir so oder bloggt man aktuell nur noch mit Überschriften dieser Art:
- 35 useful jQuery Plugins
- 40+ Photoshop Brushes
- 70+ Sites you have to look at
- 120+ Tools that make your life easier
Um dem Trend folge zu leisten, zwei Seiten:
Interessant:
Aber wer soll das alles lesen … und mein Scrapbook platzt bald!
WebDevTeam's Blog 