Writing CSS rules to different browsers, how? [duplicate]_问答_开发者

This question already has answers here: Closed 11 years ago.

Possible Duplicate:
Cross-browser CSS

Ok, so the question might be somehow a little confusing. I'm gonna try to put it in a much simpler way so "you" can understand my point of view.

All browsers are different. Every browser interprets the CSS rules diferent, which drives to different results. Some times the results are good other times开发者_JAVA百科 and much often results are totaly unexpected. The case of IE can lead to the worst scenario possible!

Many often, developers are forced to detect the browser to apply a specific css style! This can be achieved with javascript support. Anyhow, some people say that this method it's not enough to prevent disasters... others think that the best way to deal with this problem it's to rely on Object detection instead.

Well, I don't know which one is best... Please feel free to give you opinion based on examples. As always, thank you.

UPDATE

The case of IE can be very simple to deal with conditional statments but, safari can't be treated the same way! So I leave this link: http://quirksmode.org/js/support.html to clarify my point of view...

I personally don't believe in browsers sensing for CSS. In my opinion, it's a waste of time. It takes extra time to code, extra time to change, and creates an extra layer of headaches. Plus, when do you stop? AOL browser? Some random flavor of the day for a 15 year old version of linux used by 12 people in Iceland?

I also don't do hacks. Some will make their way in via Jquery's CSS or outside code I incorporate, but I don't personally write them. They don't validate, so they weren't meant to be in my mind. Javascript tricks are nice, but for styling I don't rely on them because they're not 100% reliable. If it's not gracefully degradable, it's not an option.

So, to combat the issues I do the following:

Clean, valid CSS
Reset (some of the time)
Grids (often, via Blueprint or 960.gs)
Dead reckoning of elements. This means avoiding the graphic designer mentality of 100% pixel perfection and designing for elements that can change as the web often does. Forget box model for a minute, fonts render differently too, and that will never change.
I avoid absolute elements like the plague. 99.5% of everything can be done relative if you try.
Cutting Edge...not bleeding edge. The cool new hacks are nice, but they aren't supported yet. So, they are last case scenario for me. It HAS to be this way for my large (well paying) corporate clients.
Intelligent design. Let's face it folks, if you design FOR THE WEB, you'll have an easier time making it so. If a designer converts a print design for the web, it's nearly always going to have --issues--. Can they be worked through? Sure, and it's profitable for us. But intelligent design in the first place solves all sorts of issues.

The name of the game is progressive enhancement, folks. If IE doesn't support rounded corners, they get square corners. After all, the standard rounded corners are valid HTML. If they have a problem with it, they can upgrade or change. Sound harsh? Sure it is. But we have a very clear standard (set by w3c) to maintain, and it's our job to do it. It's the only way to hit the mark on this moving target.

Two things. First, make sure you include a DOCTYPE. If you don't, browsers will default to quirks mode, and their interpretation of styles will be different. This way, you can minimize the different CSS interpretations of your page.

Second, I'll point out that IE (the big offender, in my experience) supports conditional comments, so you can include styles for specific IE versions like this:

<!--[if lt IE 8]>
<link rel="stylesheet" href="iehacks.css" type="text/css" />
<![endif]-->

All browsers are different. Every browser interprets the CSS rules diferent, which drives to different results. Some times the results are good other times and much often results are totaly unexpected. The case of IE can lead to the worst scenario possible!

You should be able provide the exact same CSS to all browsers (I'm talking about CSS 2.1 here) and get consistent display, with the exception of IE6 and IE7 (and that's because they have too many bugs).

For those browsers, a common practise is to include a new stylesheet using conditional comments with specific fixes:

<link href="forAllBrowers.css" rel="stylesheet" type="text/css" />
<!--[if IE 7]><link href="ie7.css" rel="stylesheet" type="text/css" /><![endif]-->
<!--[if IE 6]><link href="ie6.css" rel="stylesheet" type="text/css" /><![endif]-->

The other scenario is when you're willingly using things that are only available in newer browsers.

In those cases, it's a good idea to use Modernizr to detect support for the shiny new feature you're using.

That way, you can provide a sane fallback for browsers which do not support the feature.

For singling out IE, particularly IE7 and 6 you can use conditional comments to load IE specific styles and or stylesheets.

Most bugs do have viable workarounds. Well formed and standards compliant html/css should display properly in all modern browsers.

IE Conditional Styles can help you work around imperfections in Internet Explorer.

Excluding JavaScript, there's basically two solutions to this problem. You can mix and match both.

The first solution is to determine the user's browser based on the header in the HTTP request. (Different platforms will allow you to do this in different ways - for example in ASP.NET, the Request object contains this information). You can then serve different physical CSS files depending on the user's browser.

The second way is to use a single CSS file that contains different rules for different browsers. The right rules are applied to the right browsers using various browser-specific hacks. Effectively, this means using CSS rules that only certain browsers understand. More information on this technique can be found here.

Well, for inline CSS, you can do specific hacks such as:

.myclass {
  height: 100px; /* all browsers */
  #height: 100px; /* MSIE browsers */
  _height: 100px; /* MSIE >= v6.0 */
}

Alternatively, you can use comment style conditions within the page and include optional style sheets:

<!--[if gt IE 5]>
<style type="text/css">
  .mystyle { height: 100px; }
</style>
<![endif]-->

Actually all current, modern browsers interpret CSS very similarly based on the standards. It's usally only IE (6, 7, 8) that make problems, especially if your HTML documents don't trigger Standards-Mode, thus:

Write your pages based on current HTML and CSS standards with a DOCTYPE.
For support of older IE, give them separate style sheets using Conditional Comments.
If there are differences between other browsers, there are usually workarounds. Ask abotu specific problems here or in your favorite CSS forum/group/list.

Just one word: Modernizr.

You should never change the styles based on user's browser, but based on the browser's resource allowed or not.