Kilian Valkhof

Front-end & user experience developer, Jedi.

Pixel perfect forms, SenCSs 0.6 released

SenCSs, 23 February 2009

After only two months, SenCSs 0.6 is released. A lot of the feedback from SenCSs 0.5 has been implemented, a lot of bugs have been fixed, and the form system has been completely rewritten.

New form system

There were numerous problems with the form system in 0.5. It didn’t look like the usual form widgets in most browsers, it didn’t allow for borders, it didn’t align with the baseline very well and it actually alternated the baseline alignment (which was a big mistake on my part.)

So, I completely rewrote it.

And that paid off: it now supports borders, aligns to the baseline perfectly and are pixel perfect in Firefox and Internet Explorer 6/7, and very nearly so in Opera and Safari.

SenCSs lite

One of the often heard remarks concerning SenCSs 0.5 was a request for a SenCSs Lite. So I gave that some thought, and while I understand the request, it would basically mean downloading the minified version of SenCSs 0.6 and removing everything from line 56 on. For now, I think you are capable enough to do that yourself.

Full changelog

As you can see, next to a new form system, there are quite some bug fixes, including some long standing ones (especially the monospace fonts in safari), and some superfluous stuff has been removed.

SenCSs 0.7

For the next version, I hope to get better baseline support in Opera and Safari. While about 90% of the elements work nicely, things like forms don’t work 100% properly yet. Besides that, what would you like to see in SenCSs 0.7?

Thanks for Reading!

I am Kilian Valkhof, a front-end and user experience developer from the Netherlands.
Contact me or ping me on twitter.

  1. As a Dutch front-end developer I think it is important to write code that validates well. It is nice to get pixelperfect results, but when the code doesn’t pass the css-validator (http://jigsaw.w3.org/css-validator) it should be rewritten.

    The dutch government has some strict guidelines every (government)site has to obey. More information can be found at http://www.webrichtlijnen.nl/. It is wise when developing a new css-system to respect these rules. Look at http://www.webrichtlijnen.nl/toetsen/report/42320/74835/ what to do to make it pass validation.

  2. Hi Peter, while I am very much inclined to agree with you on a theoretical level, on a pragmatic level, invalid CSS doesn’t matter much (Unlike HTML, it has good error handling).

    I was on the fence about using CSS hacks or not (where the alternative would be having more css files and conditional comments) and then I saw that the YUI css files also use the same hacks. If Yahoo! is fine with it, then I can safely assume it’s stable enough to use.

  3. Josh

    I use YUI for *all* of my JS and AJAX projects.

    I take out the hacks / put them into IE-only stylesheets / etc. Extra stylesheets and conditional comments are better than ignoring validation.

  4. Nice work Kilian. I agree with you. HTML has to be valid. CSS is a whole different thing.

  5. Some suggestions for a print stylesheet to use with this:

    a:link,
    a:visited
    {
    color: black;
    background: transparent;
    font-weight: bold;
    text-decoration: none;
    }

    a::after
    {
    content: ” (” attr(href) “)”;
    font-size: 90%;
    font-weight: normal;
    }

    div#content a[href^=”/”]:after
    {
    content: ” (http://blaat.com” attr(href) “)”;
    }

    abbr,
    acronym
    {
    border-bottom: none;
    font-variant: normal;
    font-style: italic;
    }

    abbr:after,
    acronym:after
    {
    content: ” (” attr(title) “)”;
    font-size: 90%;
    font-style: normal;
    }

  6. Matt

    breaks the rhythm, maybe it needs to be fixed.
    awesome work!

  7. Matt

    i wanted to say: horizontal rule (why “” did not appear?). sorry for double comment

  8. Hey Matt, Thanks for you comment! I decided to leave out <hr> styling because it’s quite impossible to style consistently cross browser. I also think that with CSS, there isn’t actually a valid usecase for them anymore.

    Nevertheless I will add it to the list of sencss 0.7 and see if I can find a way to make it work :)

  9. […] There are several CSS frameworks available to implement grids, most famous ones being Blueprint (which is used by sites like QuantCast), 960.gs, and Yahoo UI Grids. There are also others, like this high-quality small CSS framework. […]

Newsletter

I occasionally send out a newsletter with new releases, articles and interesting links from around the web. You can sign up above.