Christian Heilmann

You are currently browsing the archives for the css category.

Archive for the ‘css’ Category

CSS challenge: 90 degree turned headings in CSS3 with a fallback?

Wednesday, August 17th, 2011

OK, during an IRC session the benevolent overlord of the MDN documentation, Sheppy asked me to help him with making the MDN docs look more awesome with breakouts where the heading is turned 90 degrees.

In essence, what we want is this:

rotating headlines

The above version should be for browsers that support CSS rotation and the one below should be the fallback version. Now, with my efforts, and the ever amazing Chris Coyier we got quite far down the line (on JSFiddle):

However, not quite yet. As you can see with the fallback (the first example) still covers the text and is not the full width. Chris of course proposes using Modernizr to check for CSS support, but that is something we don’t want. And, let’s face it, shouldn’t have to use.

I think this is a fundamental flaw of CSS - it offers us a lot of design opportunities but there is no “if this is possible, do this” (other than mediaqueries). You almost always need JS to test before you can apply a CSS effect – or disappoint people who do not use your cool new browser.

In the past, this was easier. We had CSS hacks and filters that targeted certain browsers. All of them were hacks exploiting issues in the rendering engine of the browser (sometimes in bizarre ways (remember the Box Model Hack’s use of voice CSS?).

Isn’t it time that with the power CSS gives us we also get a checking statement to apply transforms only if they can be used? And even then, there is no real graceful degradation.

So, who can make this work without Modernizr?

CSS preprocessor for variables, nested selectors and other goodies

Monday, July 14th, 2008

Nate Skulic just emailed me about CSSPP, a CSS preprocessor inspired by my CSS wishlist and CSS constants article.

Nate’s done a great job writing a CSS preprocessor that could be handled by mod_rewrite and allows for:

  • constants in CSS (define a colour or setting and call it by name)
  • variables in CSS (define a setting and override it with URL parameters – I got to check if this is safely filtering out XSS nasties)
  • inheritance (nesting selectors)

I especially like that he allows for classes to be added to the parent selector or applied as a child by using a single or double full stop:


body {
..blue {
background:blue;
}

..red {
background:red;
}

.box {
background:green;
}

h1 {
font-size:1.6em;
}

h2 {
font-size:1.4em;
}

}

Produces the following:


body.blue {
background:blue;
}

body.red {
background:red;
}

body .box {
background:green;
}

body h1 {
font-size:1.6em;
}

body h2 {
font-size:1.4em;
}

Top to off the usefulness the systems also comes with a smart caching system. Nice job!

The new web development challenge – independent modules in larger frameworks

Wednesday, March 5th, 2008

I just wrote a post on the YDN Developer blog how our work as web developers is very likely to change in the nearer future. I am not talking about the imminent coming of IE8 and its – thankfully – standard new rendering engine but about web architectural decisions I have witnessed in lots of talks with large corporations, big web sites and people that try to move their products into backend frameworks.

The new challenge is that the page as we know it will be very likely to die out soon and be replaced with a set of modules that can be customized for the user needs and by what we know of them or even opened up to third party developers. The success of the likes of facebook and the new MySpace developer framework are very likely to be just the start. A shame that the technologies and standards we use to develop clean and maintainable web products are not geared towards that kind of approach. Where is the cascade if everything should be self-contained?