Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS "frameworks" that account for browser irregularities?

I build websites for a small-ish media company. Unfortunately, around 45-50% of our client base uses IE6, while the other half are pretty much equally split between Firefox and Webkit-based browsers, with a sprinkling of Opera users.

I start every one of my sites with a reset stylesheet similar to Eric Meyer's, with a few modificaions. I've been using the Blueprint CSS "framework" a lot recently, and it's made my life a lot easier, though I am not especially attached to it.

Roughly 60% of my development time is spent making sure the sites I create don't look incredibly different in each browser. I code for Firefox 3 then tweak from there.

Does anyone know of any stylesheets/frameworks out there that attempt to preemptively account for all of those stupid little browser quirks? I know that nothing out there can totally account for all the browser weirdness, but it would be nice to have something a little more solid to start with.

I'm working on creating my own, but it would be nice to have something to start with.

like image 327
Lincoln Johnson Avatar asked Sep 16 '08 20:09

Lincoln Johnson


People also ask

What are some disadvantages of using a CSS framework?

The Cons of CSS FrameworksThe learning curve—You'll need to put in some time learning to use any framework. This is only a downside when you first start using the framework. Could inherit mistakes of framework developer—It's always possible some mistakes aren't corrected.

Which framework is better for CSS?

If you're just starting out with CSS and UI, go for Tacit, Pure, or Skeleton. However, to build more complex elements, you'll need a more inclusive framework like Foundation, Tailwind, or Bootstrap. You can get an easy learning curve through Bulma or Semantic UI.


2 Answers

The Yahoo YUI library helps deal with a cross browser rendering issues. Namely, the Reset component (http://developer.yahoo.com/yui/reset/) will revert all browser specific rendering (margin and padding on certain elements for instance), creating a level playing field to start from when designing your site.

like image 107
japollock Avatar answered Nov 15 '22 11:11

japollock


Take a look at YAML.

like image 28
JRoppert Avatar answered Nov 15 '22 11:11

JRoppert