690 bytes? Nah. 609 bytes. Here’s a little post about Ara’s CSS:

· · Web · 7 · 8 · 17

@joshavanier Love it, site looks lovely! Going to use yours as an inspiration to improve my styles a bit more and maybe write about it as well.

@joshavanier I like how this explains every choice, it makes the site feel very .. huh.. "intentful", nothing is there without a purpose.

@joshavanier Any reason for not using a separated file for CSS? Or setting the font-size when browser settings should be the best? Also you should set the foreground color with the background color to avoid surprises in some browsers.

if I had to put a pretty basic CSS files of mine it would be and

@lanodan I'm just trying to minimise the number of requests. The CSS is small. 73 pages for a total of 198.5 kB.

I find 16px a tad too small for reading so I bumped it up to 20.

I'm not sure what you mean by the third thing. Do you mean I shouldn't separate the `background-color` and `color` declarations for the body?

@joshavanier It is small but another request is almost insingnificant as any browser would do it in the same TCP connection and not all browsers use CSS.

I guess you should consider setting your browser's font-size then, I have it set to 12pt here so, 20px is very noticeable. (also fonts should use pt not px, otherwise it goes smaller with higher DPI)

Yeah, not setting the background and foreground color together will probably end up in some situations with one set but not the other, potentially making everything unreadable.

@lanodan Interesting. I thought `pt` was just for print though, isn't it?

I think the colours will be fine. It's just two colours with good contrast. If both colours don't get rendered, then everything reverts to black text on white with blue links, I guess.

@joshavanier Well, you do print letters on your screen. :D

Your guess is quite wrong, you can set the browser to other colors than black on white, almost no one is doing this because it breaks websites but it can happen and black on white or many other user-agent values (like font-size at 16) aren't part of the specification, they're just de-facto common ones.

@joshavanier the site is looking great!

would be interested to hear about the thought process behind the "I don't care about chrome" stance.

fully understand not wanting to _use_ chrome, but incorrect image rendering for a large chunk of internet users for the sake of saving 10s of bytes is... interesting :p

@_manpat Thanks! I just don't like the idea of having to use some special setting just to make something work for specific browsers, especially ones run by one of the worst companies in the world.

Plus I don't really see how not catering to a large crowd of Internet users is going to affect me. Even if no one looks at or uses the things I create, I'll still be doing what I do.

If I was doing this as a business, perhaps then I'll be more concerned. Maybe.

@joshavanier yeah I get that - dealing w/ browser differences is a pain in the ass.

I guess for me it kinda comes down to "who is your website for?" if not for a large crowd of internet users :p

@_manpat I just hope Chrome users can forgive a few blurry pixel art and be somehow inspired to switch to Firefox hehe

@joshavanier real good. learned a couple new tricks from this, thanks for the write-up!

@joshavanier Interesting! I’m wondering about your choice to ignore Chrome, IE, etc., would you mind sharing your thoughts on that?

@rostiger I’m distancing myself from Google* and Microsoft as much as possible because their existence is noxious. They’ll keep on growing if people keep using and developing for their ecosystems.

Sign in to participate in the conversation

Merveilles is a community project aimed at the establishment of new ways of speaking, seeing and organizing information — A culture that seeks augmentation through the arts of engineering and design. A warm welcome to any like-minded people who feel these ideals resonate with them.