briancarper.net (λ) (Tag: CSS)

Split page vertically in CSS (minus pixels)

Mon, 23 Apr 2012 21:43:06 -0700

I was designing an online database application recently. The layout I wanted was, I thought, fairly simple:

N pixel header at the top
The rest of the page split vertically into two panes
Each pane should scroll independently

Super easy to do in CSS, right? Of course not! You can't do this:

#header {  height: 50px; }

#panels {  height: 100% - 50px; }

#top, #bottom { overflow: auto; }

This is because (of course) you can't do simple arithmetic in CSS.

I can't think of a reason why it's not supported. My browser knows the height of the window at any given point in time. The browser can surely subtract two numbers. If someone knows of a solid reason why we can't do this in CSS, please clue me in.

I can think of many reasons why I would want to do it though. The above use case is just one of them.

I really dislike resorting to this (which does work, as seen here):

#header {  height: 50px; }

#panels {
    position: absolute;
    top: 50px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

#top, #bottom { overflow: auto; }

Whenever I start using absolute positioning, I know something went off the rails somewhere.

The worst part isn't that CSS doesn't support this, it's that even if CSS did suddenly support it, I couldn't use it until sometime in 2023 when all the major browsers implemented it and everyone using the old browsers switched or died of old age.

gaka 0.2.0

Thu, 29 Jul 2010 13:59:22 -0700

Per many commenters' suggestions and thanks to code from Steve Purcell, you can now use maps for CSS attributes in gaka.

user> (println (gaka/css [:a {:color :red}]))
a {
  color: red;}

This looks more like vanilla CSS thanks to the curlies, which is nice. You just have to keep in mind that your key/value pairs could end up being printed in random order, and order is significant¹ in CSS.

It just so happens that maps are implemented in Clojure right now such that if they only have a few entries (16 key/value pairs), the order will be preserved, because you get a PersistentArrayMap instead of a PersistentHashMap. But it's highly dangerous to rely on such a thing. It could change at any time in the future.

In any case, you can also mix and match maps, lists and "flat" keyvals. They'll all be flattened That can help preserve attribute order in those cases where you need to.

user> (println (gaka/css [:a :color "red" {:padding 0} (list :margin 0)]))
a {
  color: red;
  padding: 0;
  margin: 0;}

I've also enhanced "mixins" a bit further. You can now mixin entire tags as well as attributes. Or a combination of both. Say you want a mixin that means "Make my element have no padding, and make links within the element be red":

user> (println (gaka/css [:div.foo mixin :margin 0]
                         [:div.bar mixin]))
div.foo {
  padding: 0;
  margin: 0;}

  div.foo a {
    color: red;}

div.bar {
  padding: 0;}

  div.bar a {
    color: red;}

You can get gaka from github or Clojars.

Order is only significant in cases where you're doing things like padding: 0; padding-left: 1px. This is arguably bad CSS style, but it's valid, and it's also possible you'll have this kind of thing if you're generating CSS procedurally. But most of the time, order is not significant. e.g. it doesn't matter if you set text color first and background color second, or vice versa. So maybe this isn't so much of a problem in practice. ↩

Introducing Gaka

Mon, 28 Jun 2010 17:59:26 -0700

The CSS for my blog is now being generated via gaka, a CSS-generating library I wrote this afternoon. It's extremely simple, but it got the job done for me. I turned around 600 lines of CSS into around 250 lines of Clojure without much effort. It looks like this:

user> (require '(gaka [core :as gaka]))
nil
user> (def rules [:div#foo
                  :margin "0px"
                  [:span.bar
                   :color "black"
                   :font-weight "bold"
                   [:a:hover
                    :text-decoration "none"]]])
#'user/rules
user> (println (gaka/css rules))
div#foo {
  margin: 0px;}

  div#foo span.bar {
    color: black;
    font-weight: bold;}

    div#foo span.bar a:hover {
      text-decoration: none;}

Gaka is partly inspired by Sass, which I found very pleasant to work with recently. And it's partly inspired by Hiccup, which is a delicious way to generate HTML in Clojure.

There's more info and more examples on github.

Line wrapping pre tags

Sun, 10 Feb 2008 17:38:50 -0800

For a long time my blog layout has been a bit screwy; it had a hard minimum width for the central column of the layout, which caused an annoying need for horizontal scrolling after you make your browser window small enough horizontally. Nothing in my CSS was causing this as far as I could tell.

Turns out it was the PRE tags that I put my code snippits in. They weren't line-wrapping. I found a page with some CSS to make PRE tags line-wrap and now my site looks better in narrow windows in Firefox, Opera and Konqueror.

Turns out it doesn't work in IE7. Of course. But if you're using IE7, my site looking odd is the least of your problems. Also I didn't test it in IE6, and I don't really care what it looks like in IE6. IE6 is already dead and buried, in my eyes.

New layout done

Sat, 17 Mar 2007 12:37:19 -0700

I was searching for sites on web design, and I came across a novel concept: The primary goal of a site's design should be to be easy to read. Who would've thought? This new layout is the first layout I ever made with that focus in mind. Usually my design goal is "Show off", or "Try some new HTML/CSS tricks", or... well, that's about it.

I despise web design, as a rule. But I always find typography to be somehow fascinating. I remember over a decade ago sitting in Windows 3.1 on my first computer trying to make my own font files. And of course I begged my parents for a calligraphy pen, which I had lots of fun with. Serif vs. non-serif, letter height proportions, width proportions, spacing, those kinds of things, and their relation to easiness to read. I thought this article about whitespace was really interesting, especially the part saying:

Less whitespace = cheap; more whitespace = luxury.

My old layout was very cluttered and light on the whitespace, and it DID look cheap. I wasn't going for "cheap" when I made it, more like "informal" or "fun". But same idea. This time I wanted to go for something less cheap, so I have lots more whitespace.

Regardless, I am not at all skilled at web design, or typography, or anything of the sort. But it is fun to dabble sometimes.

Even more cow

Sun, 03 Dec 2006 22:26:35 -0800

I updated my layout to be even more cow-like. My girlfriend made me a cow-themed top banner which I think looks good enough to eat. I often wish I had any kind of graphic design skill, but I don't. Not nearly as good as her, anyways.

It's always so hard to find a good balance between leaving something readable, and making it look good and catch the eye and stand out in some way. As much of a geek as I am, even I will probably pass by a plain-looking site unless I know beforehand that there's something on it that's worth reading. Putting some effort into making your site look nice shows that you actually give a crap about the site, I think. And the more you give a crap about the site, the more likely there is going to be something worth reading on it.

Wordpress impressed me today. I remember a long time ago making a calendar (to list your post archives) was extremely painful. Now you can do it with a single get_calendar call, and it looks fine and works fine. I like relying on Wordpress for this kind of crap because chances are they already worked out what works in IE and what doesn't.

Which brings me to my next point.... dear God, IE sucks. If you're looking at this site in IE right now, and you're using a screen resolution 1024x768 or lower, you'll notice that my site is so wide that it forces a horizontal scrollbar. This isn't so in Firefox. In IE though, the existence of pre tags apparently causes everything to stretch, even when I indicate overflow:auto or overflow:scroll.

And IE interprets border: 1px transparent solid to mean border: 1px BLINDING_WHITE solid. It makes you cry, after a certain point. Also my top header image is a transparent png which looks like garbage in IE, but I'm not fixing it.

Whenever IE drives me into a murderous rage, I just pull up my site stats and suddenly everything seems right with the world:

Layout update

Wed, 25 Oct 2006 23:54:18 -0700

I've made some fairly significant changes to my blog's layout. Most importantly, I've added a cow's bum. I've said it before and I'll say it again: You simply can't go wrong with cow-based web site layouts. I still have a bit more work to do (for another day) but I think it turned out OK.

This went smoothly largely thanks to Debian. I spent an hour or so today setting up my Debian box as a mirror of my blog. It really was simple and easy and most of all extremely fast. I had some weird problems though; for example apparently bzip2 isn't installed on Debian by default (???). That's a first. But hey, it installs in 5 seconds, so it's not a huge problem. Mmmm, non-source-based distro. Samba also was extremely easy to set up. I noticed that Debian's samba comes with a rather more sane default config file than Gentoo's, which is something I think I've noticed about Debian in general.

Firefox theming sucks

Thu, 07 Sep 2006 16:23:47 -0700

Firefox makes me sad. There are many reasons, but if I had to pick one, I'd say theming. Writing a Firefox theme is so ridiculously hard as to be pretty much not worth the effort. I wrote the Lila theme for Firefox a couple years ago. I kept up with it for a few Firefox versions, but there's just no way any sane person would want to continue doing so.

The theme itself is packaged as a jar file, for reasons that are beyond me. Inside this file are XML files which you get to hand-edit. Now, don't confuse Firefox's UUID with your theme's UUID (which you must generate manually in some way). Remember, em:targetApplication.Description.em:id is where YOUR UUID goes!

The whole layout is controlled by CSS. Not just CSS, but CSS with Firefox-specific crap mixed in. These CSS files are scattered randomly through a bunch of directories with helpful names like "browser" and "global" and "communicator". I assume some of these are leftover trash from Netscape, but I have no idea. There are many times you'll find two directories with the same name, and you have little idea which of them you should be using. global/icons or browser/icons? Beats me. Some folders contain image files that look like they were designed for Windows 3.1, which again I assume is some kind of legacy remnant of Netscape.

If you want to change the look of a single component of the display, you're likely required to wade through 4 or 5 levels of cascading CSS files scattered in multiple directories. The partial solution to this is apparently to stick !important on everything, to override everything that came before it. However this too loses its usefulness after the 4th layer of !important's overriding !important's.

$ grep -r '!important' `find lila -iname '*.css'` | wc -l
666

I didn't make that number up. How interesting.

At the time I wrote my theme, there was absolutely no documentation (that I could find) on how to do anything. Basically you were expected to wade through a couple hundred threads at MozillaZine or something. In practice what everyone did was grab someone else's theme as use it as a default, because otherwise you have no chance. (Clearly someone, somewhere came up with the FIRST theme, from which all others are derived. My theory is that this original theme was introduced into human society by extra-terrestrials or some kind of god-figure.)

The hoops you have to go through to test a theme while working on it is ridiculous. The normal theme install procedure for Firefox was designed by someone with a severe masochistic streak. Where is the Lila theme installed on your computer? If you guessed ~/.mozilla/firefox/01yf2p25.default/extensions/{9957f6c1-021d-4cbf-9462-26a0c1921fe4}/chrome, you're right! But that's just the location of your theme's jar file. If you want Firefox to read it in non-jar format, it's possible, but the method of setting it up can only be called black magic. But without doing this, seeing the result of making any change in your theme requires 5 minutes of fumbling.

Is there a difference between themes for Linux, OS X, and Windows? Clearly so, because those things are specified on the specs for each theme on the Firefox site. What exactly those changes are, or how to resolve them, I would not want to begin to guess.

The best thing is that every Firefox release completely breaks old themes. Even today at MozillaZine we have a 16 page thread about changes from 1.5 to 2.0. And there's already an 8 page thread about changes from 1.5 to 3.0 (God help us all).

Someone apparently updated my Lila theme for version 1.5 at the official Lila page. I installed it, and big surprise, it's broken. The RSS/secure connection icons in the toolbar are totally trashed in the layout. Menus have random highlighting problems. Etc. And here comes Firefox 2.0! Time to rewrite it again! Big chance this theme won't even install in version 2.0, let alone look correct. Nothing at all against whoever updated this theme; I tried to update my old one for version 1.5 myself and I just gave up. Not worth it.

sepuku

Sun, 25 Jun 2006 12:33:27 -0700

I may have had the stylesheet for this site linking from localhost for the past couple days. And I couldn't tell because I hadn't looked at it from anywhere but home until now. Oops.

A sad, sad day

Fri, 23 Jun 2006 20:37:21 -0700

I spent the time to get this site to work in Internet Explorer. It still works in Firefox and Opera of course, and that's the extent to which I'm going to bother testing. (Well, OK, here's a screenshot of my site in lynx. Still looks great to me!) I also added some color, because all the grey and the lack of contrast was causing permanent damage to my nervous system. It's pretty bad when bright orange makes your site look BETTER.

I ended up going to a table-based layout. I know it's The Wrong Way™ to do things. But in my opinion, CSS can't handle column-based layouts worth crap. I learned today that there are actually tags in CSS to support a multi-column layout. But I know IE doesn't support them, if any other browser does. Who knows.

Getting three columns, one of which is resizable, and all of which are the SAME HEIGHT, without using tables, is like trying to program HTML with 9 broken fingers while a rabid monkey attacks your face. Cheap hacks with floats or position:absolute is not my idea of an elegant approach to web design, when a simple full-site wrapper table does it exactly right. Use a table to split the site up into sectors of specific size and orientation and alignment, and then CSS your brians out, that's what I say.