Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a book, tool, software library, tutorial or other off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 8 years ago.
Improve this question
I realize this question has most likely been beaten to death, and that it's more a matter of personal preference than anything, but I was curious to see if anyone had any suggestions.
I have a terrible habit of not reusing code. (most likely due to the fact that I somehow always seem to end up losing any snippets I collect in the continuously growing labyrinth that is my "Development" folder) That being said, I decided a couple of months back to start trying to find an existing CSS framework that I could use to make my life easier as I take on new projects. I've tried a number of them now, and while I've found some great ones, none of quite fit what I'm looking for.
In order of importance, here's what I'm hoping to find:
Flexibility - I'm way too erratic to ever conform to a single design/development pattern for long. That being said, I'd prefer it if I didn't have to spend most of my time overriding various rules from the framework I'm using. I understand, of course, that I'll need to occasionally do this, regardless of what framework I use, but the less I need to, the better.
Lightweight - I'm not really looking for a framework to base my entire project around. I'm looking for more of a collection of helper classes, and possibly some utility rules for bringing sanity to things like Internet Explorer, etc. Basically, I'm looking for something that'll make my life easier.
Cross-Browser Compatible - I could care less if the framework doesn't conform to the current standards, so long as it looks relatively the same in any browser I go into. Unfortunately, I have clients still using Internet Explorer 7 who I have to accommodate. At this point, though, I could care less about whether it remains compatible with Internet Explorer 6.
Modular - While it's not a deal breaker, I was hoping to find a framework that while lightweight, still managed a modular approach to the design. By this I mean, numerous stylesheets, all based on "purpose". For instance, it'd collect all commonly used classes for dealing with forms (.error, .info, .alert, .text, .required, etc) in a folder/stylesheet called forms/forms.css, while keeping rules for tasks such as layout in another file/folder. I really actually liked the way that YAML did this - Unfortunately, YAML just has a bit too much extra stuff that I'm not using, and probably won't need to for some time. (Though to be honest, if I cant find any other framework, I may just see what I can do about just trimming down what I'm not using in YAML, and building a base from there)
As far as content goes, I'm really just looking for some barebones, common-use stuff. Things like:
.text-center { text-align: left; }
.text-right { text-align: right; }
.centered { margin-left: auto; margin-right: auto; }
.left { float: left; display: block; }
.right { float: right; display: block; }
And of course, the usual clearfix stuff. Classes for dealing with rounded corners, shadows, etc would be nice, too.
I don't really care too much about accessibility, rtl support, microformats, etc at the moment, since I'd be using this framework mostly for work dealing with my clients, and I've yet to run into the need so far.
Lastly, I'm a developer first and foremost, (I just happen to be getting a lot of things lately that require me to do more design work than I'm comfortable with) so I'll often run into the need to build the markup dynamically on either the client or server side, so the simpler the markup for the framework, the better.
Try 960 Grid system. It's my favorite :)
If you need to do your research, here's a good guide.
The best framework is which I am using, this is responsive and lightweight, you will get all the features of Bootstrap at 12KB (zipped), and it is easy to understand. You will get page speed of 100 on mobiles too.
Check this: http://skhost.in/one
Click below to check the speed: https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fskhost.in%2Fone&tab=desktop
Related
CSS style sheets have a habit of growing big and chaotic over time.
There are a lot of rules, hints, and schools of thought that help achieving cleaner CSS. (For example here) However, all those require constant alertness, activity and a lot of discipline on the maintainer's end, with mixed real-world success. As Nicole Sullivan so nicely puts it:
In fact, in most cases, the things we considered best practices were leading to the bad outcomes we sought to avoid. I realized (unpopular though it might be), that we couldn’t make it work out well by trying harder. Each time we start a new project, we think “this time, I’m going to keep the code clean. This time the project will be a shining example of what can be done with CSS.” And without fail, over time, as more content and features are added to the site, the code becomes a spaghetti tangle of duplication and unpredictability.
Are there any efforts to create a language of some sort, with strict structural rules and a merciless compiler, that enforces strict rules that prevent style sheets from becoming spaghetti? The compiled end result would be CSS.
I have no idea what such a language would look like and whether, given the vast amount of possibilities and combinations, this is a solvable problem at all.
Is there any research in this field? Anything to try out?
One very interesting related tool is CSS Lint, but what I'm asking about goes even farther than that.
Edit: LESS and SASS absolutely go into the right direction, but they are not what I am looking for. They introduce some very nice features and are a godsend for the CSS developer, but what I'm, asking about goes even further and more into defined, enforced structures.
You could very easily write spaghetti code in any interpreted language, so really what you are looking for is a CSS compiler. This is sort of what Google GWT does for JavaScript by generating it from Java code.
However, CSS doesn't have flow control, functions, variables etcetera, which means it doesn't make sense to have a higher-level language around CSS. At the root of it, it's just name-value pairs with cascading logic.
If you want to reign in your CSS code, you need to reign in your DOM as well. If you are defining columns with IDs left and right then you are semantically restricting the designer from moving them anywhere else. On the flip side, if you are smart about things you can do a lot more.
Lastly, the cascading part is what most new designers have the highest tendency to get wrong. If you pay close attention to the DOM and cascading logic, make use some good resets or grid-based frameworks and incorporate tools like LESS (Ruby) or LessPHP, you'll end up CSS that's far more pleasing to work with. I like LESS because It empowers you with quasi-functions, variables and nested properties which really helps clean up your CSS.
Are there any efforts to create a language of some sort ... The compiled end result would be CSS.
There are two efforts that I know of to do exactly this:
Less
SASS
Both aim to provide an improved version of CSS which allows you to write with more structure.
In addition, Google have demonstrated a development version of Chrome which incorporates a number of additions to CSS along similar lines. This is interesting because it indicates the future direction of CSS, but in the short to medium term you will need to use Less or Sass, as even the work in Chrome is very much experimental and will not be released for some time to come (and even when it is, you'll need to wait for the other browsers to follow suit).
[EDIT] Here's a link which details Google's experimental CSS features in Chrome: http://johanbrook.com/design/css/webkit-css-variables-mixins-nesting/
[UPDATE 18 April 2012] There has been some progress in this area since I wrote this answer. Slow progress, but progress nonetheless. The good news is that CSS Variables has just been published as a First Draft specification by the W3C.
See http://lists.w3.org/Archives/Public/www-style/2012Apr/0228.html for the official announcement of the specification.
So that's goodnews. Of course, how long it takes to get into the browsers and the end user base is anyone's guess, but at least there are signs of progress.
There is Stylus, something like LESS and SASS, but with transparent mixins.
That means that you can hide away complexity by bundling it into new key/value pairs. Example from the site:
border-radius()
-webkit-border-radius arguments
-moz-border-radius arguments
border-radius arguments
form input
padding 5px
border 1px solid
border-radius 5px
Maybe this kind of syntax is what you want?
PS: you can still type braces and semicolons, if you prefer ;)
Well you seem to know about Nicole Sullivan, so if you know about OOCSS already, I apologize, but no one seems to have brought it up. If you don't, it's her own project to do this very thing, I believe. It's only in Alpha testing right now, but you asked about efforts and not finished languages, so maybe this will be just what you're looking for. It definitely claims to be be for solving the problems you describe, but I haven't used it myself.
https://github.com/stubbornella/oocss/wiki
Have you checked out Compass? Compass is a framework built around Sass. I think it mostly adds features and boilerplate code to add a library of predefined mixins and whatnot. However, Compass might be even closer to what you want. Compass is based around Blueprint which is a straight up CSS framework (which may also be worth looking in to).
To me the best approach would be to take Compass and Sass (or CSS and Blueprint/LESS and something comparable) and to write a very concise and detailed style guidelines which you could develop overtime as you figure out what works best: your first thoughts on the matter, regardless of experience, may be wrong. Once you have these guidelines down you could talk to the people at Sass, Compass, LESS, Blueprint, whatever, about working in some of your well thought out and "researched" guidelines. OR you could start contributing to these wonderful projects which I believe are all under an open source license (Sass is under MIT, LESS is under Apache and I think Compass and Blueprint also under some form of open source license). Fork it and have fun :D
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 9 years ago.
I know CSS and I'm learning more and more common pattern. However, I always feel like I'm hacking instead of doing it the right way.
For instance, some people I respect tell me that using css reset is unnecessary while others live for it. Also, there are so many great css framework (for grids, etc.) that even thought I understand them, I never really know when to use them.
So, basically, my question is: Once you understand how CSS work, is there a recognized "best" approach used by excellent web developer? As in python, one should try to use the common pattern and read PEP 8. Or, in C++, after understanding the syntax, reading the effective serie by Meyer is an excellent "second" read.
Sorry for taking that long to explain.. I just didn't want to have answer like: Read "Beginning CSS" which explain how to change the background or how to set font. I'm really looking for a good standard approach.
Should we use reset?
Should we use only one file per site? One for homepage and one for the rest? One basic file and once different for every big sections?
Is it bad to have a 2k+ css files? Does it mean it should have been refactored and that it contain to much duplicate?
Should I define parent at the top for normal font, color, h1, etc., and then, when it's different change it per sections.. or instead always use the standard one and redefine each and every section.
Should I use .class and #id a little bit everywhere, or should I try to minimize them and instead use long descriptor such as:
.content .main tr td span a
or
span.classname a
Thank you!
tl/dr:
What's the best "second" read once you already understand CSS but would like to use it in a clean/professional way?
[EDIT]
Thanks all for your answer. I know I asked quite a lot of questions.. but they were only examples for the real question which is: What is the best "second" read once you already understand CSS but would like to use it in a clean/professional way. I.e., I was hoping to read a book explaining the examples I proposed.. but also would explain lots of other things that aren't css-syntax but more css-best-professional-use.
People will have a range of answers for these questions, but here are the approaches I would take:
Resetting
If you're working on a fragile layout -- one that could easily break if a few pixels aren't where you expect them to be -- consider using a reset. I would look into normalize.css. Instead of completely overwriting browser defaults, it smooths out the differences between browsers.
You could also consider resetting specific elements if you find yourself adding a lot of margin: 0; to your stylesheets.
Splitting up CSS documents
Google recommends splitting them up so that individual pages aren't forcing users to download lots and lots of stylesheet rules that aren't actually used on the page that they're visiting.
Yahoo recommends combining files to minimize the number of HTTP requestion
Obviously, finding a balance is important, and this SO question weighs some of the pros and cons.
Classes and IDs or long chains of selectors?
I try to keep classes and IDs to a minimum (in both my HTML and my CSS). They tend to be more fragile when you're building pages that others will update with WYSIWYG editors. I add a few IDs or classes to large blocks of the page, then use CSS to target specific elements within those blocks. This is easier if you avoid deep nesting in your HTML as much as possible.
Working with a CSS preprocessor such as LESS or SASS can help you write more readable stylesheets. The ability to nest style rules in both LESS and SASS has helped me avoid a lot of specificity-related issues.
Still, specificity is a good CSS topic to be familiar with:
CSS-tricks has a good article covering specificity
The W3C's own documentation is worth reading.
Additional Resources
As far as additional reading is concerned...
SitePoint's collection of articles and tutorials on CSS is a great resource for more advanced CSS tutorials, and they also feature some good articles covering CSS issues that are more advanced than what you'd find in many beginner-level books.
Resets: I think yes, some dislike them, so it's up to you to figure out which one you like
Split vs. Unified files: Depends. There are advantages to both (chorus: advantages, advantages!) One CSS file is easier to browse, and you can clearly find relationships in a single file. Then again, if you have planned the structure of your site, are developing compartmentalized widgets, or have lots of people working on the CSS committing files, a decentralized method might benefit you. With multiple CSS files, you can always use a compressor to serve them to the client as a single file, so it's more of a maintenence question.
Large Files / Line Count: Are you saying you have 2,000 CSS files (holy crap!) or 2,000 line CSS files? Both aren't great, although the latter can be managed quite easily in an IDE that provides outlines and handles inheritance for you.The former...well, at least you have job security.
Parent Definitions: Again, no right answer. The CSS rules for a small site will vary greatly from an enterprise level site. A good starting point might be checking out how jQueryUI handles styles and then forming your own opinion from there.
Correct Selectors: Steve Souders talked about optimizing CSS selectors, coming to the conclusion that's it not worth it for your average site. So ignoring CSS optimization and based on your example, I'd say the second one is waaaay easier to maintain and ultimately far more predictable. If you HTML changes even slightly, the first one will break quickly. The second won't, and is far more portable.
There are things you can do in CSS to make your life easier. I highly recommend using a grid system for layout (blueprint, 960GS, etc). I personally like using a reset since it makes pixel perfect designs easier to manage. Other than that, research what people like Eric Meyers or site likes alistapart.com or smashingmagazine.com have to say on the topic.
tl;dr - there is no right answer, but definitely some good options
I can answer your questions based on my own experience, not necessarily the best practices out there.
I reset certain tags, but not all the tags like the "CSS purists" do. Keep in mind that if you are using certain CSS libraries, like JQuery UI, Superfish menu, etc.. resetting the tags can really mess up these libraries UIs.
I usually have one general layout/configuration CSS file and every complicated page has its own CSS file. So, every page includes these 2 CSS files plus my UI library files (JQuery UI, etc). This makes it easier for me to pin point and maintain it.
2K+?? Yes, very bad in fact. If you have file that big, you should really use YSlow to see how long it takes to load that file. The longer you page takes to load, the faster you users leave your webpage, unless they are forced to use it. :D
I always like to "scope" my CSS, by prefixing with say #app. This ensures my global setting only affects my page content and layout, and they do not override the UI libraries.
Use .class and #id in whatever way it makes sense to you. If you know this tag exists only one time, then use #id. If you know it might occur more than one time in the page, then the only option is to use .class.
As with many things there aren't really rights and wrongs, it's more about prefernce and manageability.
I use CSS Reset on some elements, I prefer the blank canvas start instead of finding a load of unknown defaults.
I don't think file size is really an issue, again what is easiest to manage is really more important. Split the file if it logical to do so.
Give some thought to optimisation and try to avoid unnecessary duplication. I like to define a parent font/styles as you call it for the most commonly used style, then just define the others as required.
Personally I like to define some common classes, i'm not sure if it's optimal but it's very usable, such as:
.bold {font-weight: bold}
.clear {clear: both}
.red {color: red}
If you do this for common requirements you can then simply use code like
<p class="bold red"></p>
<h2 class="red"></h2>
<br class="clear" />
Simples!
Use tabs. Makes it easier to see. Also i rather use .classname than #id. Example of a piece of css of one of my websites:
body {
font-family: Arial,Helvetica,sans-serif;
font-size: 11px;
background-color: #99D9EA;
}
.lcategorie {
background-image: url('http://images.alphenweer.nl/i/gradient-menu-left.png');
background-repeat: no-repeat;
padding-left: 2px;
text-align: left;
color: #FFFF00;
font-weight:bold;
width:200px;
height:20px;
display:block;
cursor:pointer;
}
.rcategorie {
background-image: url('http://images.alphenweer.nl/i/gradient-menu-right.png');
background-repeat: no-repeat;
padding-right: 2px;
text-align: right;
font-weight:bold;
color: #FFFF00;
width:200px;
height:20px;
display:block;
cursor:pointer
}
In addition to the good answers above, what you just described in your question is also otherwise called as Learning Curve.
We all go through it. It is inevitable, according to me.
The best approach probably is to make the best use of the vast resources available and then filter them out. Which is a knack developed only over time.
I don't think there are shortcuts. Although, I do agree, it would be nice to have a guiding hand to help us avoid pitfalls and time-wasters and tell us about all the best-practices.
But even those are available out there thanks to some really passionate, expert-in-their-field bloggers.
So explore-away is what I'd suggest.
If your lucky enough to have a Mac or a Hackintosh... then I highly recommend CSSEDIT (unfortunately only available on Macs). It will allow you to rapidly develop your understanding of CSS. I realize this doesn't answer your question, but if you try it, you'll understand why it is so important to the learning curve. Sadly, nothing else on windows comes close. I use windows 99% of the time and switch to my mac for CSSEDIT.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 9 years ago.
If yes, which one? Why?
If no, why? How do you fix cross browser CSS rendering?
I currently use blueprint css, and I wonder if it's a good choice. Thanks!
:)
No, I'm not using any framework, just a well thought out naming system that I reuse over and over and a basic css with a few resets and some base styles.
Why am I not using a css framework?
The use of a framework usually assumes that the designer is familiar with its conventions which is quite often not the case - you're not the one designing the page or the client has his own designer. And even if this is not the case, there will always be designs that won't fit into 960 pixels or simply have an even size so you can't use your magical .span-4 class.
Which leads me to the next point. The naming is not semantic. In theory you would expect a framework to ease maintaining a large site. However, suppose you have to make a slight design change. This basically means changing the html across all the template views involved. This is hard and risky even with a versioning system, because it's one thing having to rollback to a single css file, and another to 100 views. All because input.span-19 should have 5pixels less. CSS frameworks - the new inline css.
What about cross browser issues? Either you're using a framework or not this is not going to change. There are browsers or operating systems that have certain particularities. Bottom line - Internet Explorer will still suck as much.
CSS Frameworks stand out for discipline and I have to give them credit for that, but in the end it's all about the one writing the code.
I've noticed two major misconceptions about css frameworks.
Firstly, there tends to a lot of confusion between the concept of a framework used in software development, as a tool and a type of a framework such as 960gs.
Wikipedia defines a framework as "an abstraction in which software providing generic functionality can be selectively changed by user code, thus providing application specific software".
#vise says "I'm not using any framework, just a well thought out naming system that I reuse over and over and a basic css with a few resets and some base styles." This is akin to saying "I'm not using any framework, just a framework." This is probably some kind of semantic irony. No offence intended :)
Blueprint, 960, compass etc are all types of frameworks. Because some css frameworks may not be semantic or are lacking certain desirable qualities, this does not mean css frameworks are a bad idea.
The second misconception is that css and css frameworks are mutually exclusive. You either code css by hand or you use a framework (with some custom stuff). But... wait a minute... isn't CSS a set of default elements that we can alter or extend to suit our specific requirements? CSS looks suspiciously like a framework according to Wikipedia's definition.
Of course, this second point is debatable. But often I find that people are using some kind of framework without knowing it.
To answer your question, I tend to use something like sass and make my own framework. On my latest project, I am using a combination of this and Bourbon which is looking good so far. The main reason I use frameworks is because I'm tired of the redundancy in CSS. It's really boring having to repeat the same values over and over. There are other concepts in design that CSS doesn't do very well which I won't go into here (see here). But by using a framework, it's possible to abstract all your problems away and just work on getting things done.
I hope this helps!
I like the yui css tools. Those guys have definitely spent more time dealing with cross browser css than I would care to. I haven't tried others.
I use yahoo's yui-css framework. That's the first one I came across and it was easy to understand. I just saw the video and cheatsheet and got it working.Also, Yahoo uses it on some of their sites.
I use Blueprint along with the Compass framework. Coding CSS has become enjoyable again. :-)
The Compass/Sass combination is fantastic, and offers several plugins for using the framework of your choice without the non-semantic class names. Outside of Compass, I always found frameworks to be too restrictive and use too much markup.
I'm not a fan of the Blueprint, 960gs and YUI plugins for Compass either: they were originally built for use with extra markup and don't take full advantage of Compass/Sass for extra flexibility. So I built 'Susy' - a flexible framework built native to Compass/Sass.
Whatever plugin you use (or write your own), I highly recommend Compass/Sass as a better option than extra markup.
I created my own subset of classes from which i found myself use very frequently, this makes me work faster and create html layouts much easier, without repeating same properties under a lot of classes.
For example for inline divs i have fl and fr classes to represent float right and left, for fluid widths i have 20 width classes. Here are some classes from my generic stylesheet i mentioned. It works out for me.
.fl { display:inline; float:left;}
.fll { display:inline!important; float:left!important;}
.fr { display:inline; float:right}
.frr { display:inline!important; float:right!important;}
.ib { display: -moz-inline-block; display:inline-block;}
.clear { clear: both}
.none {display:none;}
.noni {display: none!important;}
.block {display:block;}
.blocki {display: block!important;}
.pointer {cursor: pointer !important;}
...
.w10 { width: 10% !important; }
.w15 { width: 15% !important; }
.w20 { width: 20% !important; }
.w25 { width: 25% !important; }
...
So this technique can't be a framework replacement of course, but this works well enough if you don't want to have any other thing in between your styles and you:)
Sinan.
P.S. In IE6 and below multiple classes work buggy this is to use in modern browsers. see the table at Quirksmode
I have used Blueprint-css at some places and found it quite useful.
The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.
I prefer fluid version of 960.gs: Fluid 960 Grid System
Just started a project using 960 grid. The designer bought into this early on, and let it guide his designs.
I must say, it's much much faster. Spend much less time measuring pixels on mockups, asking the designer the intent, and futzing with CSS to build "page templates". Spend much more time just implementing the designs.
I use a few on a regular basis and I would recommend checking them out.
heymuscle is a responsive css framework that fits 1140px/960px/ipad/iphone similar to 960gs
960 grid is one of the most popular grid's out there and provides easy to use classes for laying out your page
1140 grid is a fluid layout
Hope this helps
This question already has answers here:
Closed 13 years ago.
Possible Duplicate:
What is the best CSS Framework and are they worth the effort?
Would you recommend using a CSS framework for ASP.NET like the Blueprint CSS Framework vs building your own css styles? What are the benefits of using such a framework?
Abstraction is the keyword.
Like every framework it delivers you a code basis you can build on. You don't have to "reinvent the wheel".
Ever considered using CSS resets? They're much simpler and allow you to start from the ground up.
I have heard of CSS frameworks but don't really understand the level of complexity they introduce.
That said, I do tend to write standard CSS and expect browsers to conform to it. If not perfectly, then similarly across them all.
I think the benefits are:
1.Easier to follow web standards.
2.You code will be consistent across the projects, and for that reason much easier for maintenance.
And definatelly give a look to reset and fonts-reset
I don't see why using CSS Frameworks.
I always do my CSS from scratch, sometimes to remember sometimes i go back to my older CSS styles and look around. And sometimes i just do some testing until I've obtained what i wanted.
EDIT: Just read some of the web standards guidelines and do some experiment and you will get the hand of it..
I did the same and at my first times.. I had some cross-browser issues and other small stuff.
now i'm pretty happy to say that i do cross-browser css, with no big problem.
But if you just need CSS for a project, and you wont be needing CSS again, using a Framework might not be a bad idea.
In my opinion a CSS framework:
PROS
Aims at cutting down development
time.
Standardization and consistency.
Solid foundation to build upon.
Guidance\guidelines to follow. Avoid white screen of death effect.
Proven "good looking" UI.
CONS
Extra complexity
Steep learning curve
...
PROS: Anyone can take it and produce a result
CONS: Not everybody will be able to fix what comes out of it...
I would defenitely use a CSS framework, simply because you can assume it has been tested in a lot of browsers. I you use something like 960.gs and it looks correct in one browser, you can be quite sure it will do so in all the others.
And like Omega notes I would at least use a CSS reset file, like YUI Reset CSS.
I like to use CSS frameworks because it ensures that it looks (quite) the same in many different browsers. e.g. I'm sick of writing hacks for internet explorer 6. The framework take this part for me.
The con is that you have to learn how to use the framework of your choise, but once learned it makes fun to write new sites.
I'm using YAML btw.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 8 years ago.
Improve this question
I'm not talking about tools that let one view a page in combinations of operating systems and browsers like crossbrowsertesting.com but in creating or figuring out the actual CSS.
Use a css reset to level the field across browsers. YUI and Eric Meyer have good ones.
If you guys are still coding for IE6, you're making a mistake.
I use IE7.js to get IE6 to render pages like IE7. IE7 is not perfect, but at least it has some semblance of standards. Since I only have to code for IE7 and FF it makes me 33% more efficient in terms of testing against browsers, something I think makes good business sense.
Link: IE7.js
I write to the standards and both Firefox and IE7 follow a pretty good set in common.
IE6 is dead as far as I am concerned but if I get back into professional web dev I'll probably have to revise that ;)
I try to make a standards-compliant page and do all my testing in Firefox (since it has some excellent development extensions such as Web Developer and Firebug). Then when I'm finished I test the site in IE, then make whatever small changes are necessary. I find that I need to make very few changes, since I don't do anything extraordinarily complex with CSS.
I used to have more problems with Javascript differences, but after I started using Javascript libraries (such as jQuery) I stopped having any serious problems with that.
Padding.
IE6 can get a little hinky when using margin to place elements horizontally on a page. If you size your elements and space the content within using padding, you can make many layouts work great in IE6/7, FF, Safari, and Opera without any hacks. IE5.5 makes things a little stickier because of the broken box model, but I think we can pretty much count it out in most circumstances now.
I try to make a standards-compliant page and do all my testing in Firefox (since it has some excellent development extensions such as Web Developer and Firebug). Then when I'm finished I test the site in IE, then make whatever small changes are necessary. I find that I need to make very few changes, since I don't do anything extraordinarily complex with CSS.
The same here, except I don't tend to need to use Firebug and such. I've only had problems with IE6 recently however - which are solved by simple CSS bypasses:
/* All browsers read: */
html body {
margin: 10px;
}
/* FF, IE7, Op etc. read: */
html > body {
margin: 0;
}
I'm with Eli. Writing against firefox (with firebug installed) makes you have to write "more compatible" code to begin with and then its less of a job later down the line when you come to make it compatible with IE.
Use the site QuirksMode to help you find answers to compatbility information
If it's a brand new project I make it a point to test all html+css changes on all browsers I'm targeting as I make the changes. In the past I tended to focus on my favorite browser and then test with the others after I was done to find that one or more small quirks were present and it was very tedious to pin-point the actual cause. Now I have all browsers open and just go through refreshing each one after each html/css change to make sure the display meets my expectation. When something goes wrong, I know exactly what caused it.
It might seem time-consuming to test on all browsers at once, but in the long-run it actually saves time as you catch the problems at once.