Links & Thoughts & Stuff

Immer wieder kommt die Frage auf, ob der Unterstrich als Zeichen innerhalb von CSS-Selektoren verwendet werden darf. Als Antwort muß ein ganz klares ‘Jain’ gegeben werden. …

Der Unterstrich

Online CSS Optimizer gibt’s wie Sand am Meer, aber dieser sieht ziemlich Web 2.0 mäßig aus

Gibt es denn eigentlich eine ordentliche PHP Klasse die sowas auch kann?

Ein mittellanges Tutorial über Grid-Layouts und wie man diese aufpeppt. Von Jina Bolton via SitePoint.

Breaking Out of the Box jetzt lesen.

CSSTYPE v2 (BETA) – web safe typography on screen for pixel perfectionists

There’s not much more to say A great tool to visually tweak your type settings.

via our internal design blog. Thanks Tom

I should clean my „to blog“ folder more often, because Daniel & Carsten already posted this link about one week ago. Anyway, I think this a really valuable resource and should be added to my personal link collection which I also call weblog sometimes

Check out 53 CSS-Techniques You Couldn’t Live Without presented by Smashing Magazine.

There’s a fresh 24 ways to impress your friends advent calendar online for your reading pleasure with topics like Styling hCards with CSS, Compose to a Vertical Rhythm or Marking Up a Tag Cloud.

Go and get your presents now

The problem: a number of people are working on the same (set of) CSS file(s) for a web site, and strict class and id naming standards have not been created and enforced. This has led to a proliferation of somewhat meaningful but overall ambiguous labels for CSS ids and classes and selectors. Some of the selectors conflict with each other, and these overlapping declarations are causing unexpected results in the page rendering. Your task is two fold:

• create a list of the selectors of all CSS rules from every CSS file
• find out which declarations possibly conflict with each other so they can be examined manually to see if the conflict can be resolved and/or the CSS file can be optimized by consolidating declarations

This sounds very simple at first, but the article is really hard stuff. Read the complete article Optimizing CSS definitions at thwartedefforts and be prepared to meet some exotic regular expressions and linux commands you may never have heard of

There’s a new article over at A List Apart entitled Super-Easy Blendy Backgrounds. The excerpt, or snapshot is as follows:

Create a PNG that’s blended from transparent to white, use it as a background image, and rely on the background-color style to provide the other half of the blend.

I’d suggest you read the complete article now … I’ll just sit here and wait.

OK, you’re back, so let’s get on.

When looking at the final CSS and HTML, some things come to my mind.

First of all I still think it’s considered bad style™ to have classes named pink or green, but hey it’s just a demo, so what.

But then … not only there’s a completely meaningless image tag in the middle of the content, but the CSS is also full of hacks and workarounds.

I really don’t want to judge someone elses code, but why on earth should I use tons of bloated CSS and HTML, when a simple background image will do the job as well?

Of course it’s not so programmer friendly, but hey, if you’re really too lazy to create some images by hand, why not write a script which creates these on the fly, or even better caches them?

There are even complete gradient generators out there for you to use.

To make a long story short … I’d highly discourage you to use a technique like the described one, because it makes your life easier only once, and even more complicated ever after.

One last word to the author Matthew O’Neill: I respect your work and have to say the article is well written, easy to understand and a nice read in any case. Go on with your work and I really hope the next time I’ll even agree with the content

Hack the planet,
Sascha

Wie kürzlich von Jeena Paradies festgestellt (die Lösung ist schon älter, aber ich habe bis gerade eben auch noch nicht davon gehört) gibt es mehrere Lösungen um Elemente mit CSS vertikal zu zentrieren.

Ihr könnt den Artikel „Vertikal zentrieren in CSS“ einfach in seinem Blog nachlesen oder, für die ganz trägen, den nachfolgenden Hyperlinks nachgehen:

Vertical Centering in CSS – Yuhu’s Definitive Solution with Unknown Height

shrink_to_fit and center

CSS vertical centering using float and clear

Zentrieren mit nur einem Element

Finally the time has come to kick some content slaves ass and ban the ugly font and center tags forever!

Read the article Big Red Angry Text by Marco Battilana.

And for the impatient … here’s how it looks:
 
 
Big Red Angry Text