web development, CSS + browser compatibility

[WarK]

Hello,

there are a few nice features supported by firefox but not by IE. Things like -moz-border-radius or -moz-box-shadow.
They look nice on firefox but of course IE doesn't recognise those properties.

My question is, is it ok to have a web page looking differently when viewed in different browsers, or should a web page look more or less the same in all browsers?


I myself would lean towards using those properties even if that'd mean the page would look different under different browsers.

Of course it may be different for different pages depending on what the page is for, who will use it and who's paying for it.

 

[borrofburi]

The rule of thumb in the top-tier web development class was that things should look reasonably the same and reasonably good... So slightly better in safari and firefox is ok so long as it doesn't look bad in IE.

I usually accomplish this by NOT using firefox only features, develop in firefox with web developer and firebug, and then check it in safari and chrome (almost always fine), then add some tweaks to fix it in IE.

So general consensus among some very quality people: you probably shouldn't do it.

 

[CosmicSpork]

I quite happily use corner-radius (and the browser specific versions, webkit has its own so that includes chrome and safari). If a site looks vastly different from one browser to another than there's an issue. But I don't think rounded corners at much of an issue.

I've used rounded corners for text inputs on here just to make it look a bit nicer, but it's not something people will miss when using IE.

My approach is the same as borrofburi's though

 

[amndalb27]

# Firstly, design for Firefox with the help of Firebug and/or the Web Developer toolbar.
# Test in IE6, 7 and 8 using IE Tester and create styles for 8, then 7, then 6 as necessary. The asterisk hack targets IE7 and IE6. The underscore hack targets IE6 only. So a margin declaration that targets both IE7 and IE6 would look like

*margin:8px 0;

And a margin declaration that targets IE6 would look like

_margin:10px 0;
# If there were styles created specifically for IE8 in step 2, they would override the Firefox styles, so create Firefox styles next and put them in the :root selector which is ignored by IE8.
# Test in a WebKit browser such as Chrome or Safari and put any WebKit-specific styles inside:

@media screen and (-webkit-min-device-pixel-ratio:0) { /* chrome styles go here */ }

It may be necessary to repeat the Firefox filter inside the filter for WebKit in order to give the styles the same specificity. Not doing so may prevent the styles you create inside the Webkit filter from overriding the earlier Firefox styles. So the Webkit filter should strictly look like:

@media screen and (-webkit-min-device-pixel-ratio:0) { :root #etc {/* chrome styles go here */ }}

where #etc refers to any relevant IDs, classes and tagnames used in the earlier Firefox style to be overriden.

 

[nophun]

The stadarazation of CSS3 is a work in progress.

Internet explorer 9 should fully support the CSS3 standard.
Fire Fox 4 does use most of the standard. -moz-border-radius is actually a alias of border-radius.
Opera and chrome both use most of the CSS3 standard.

If you are using things like border-radius you should be adding the code to support all the major browsers.
You will be removing all the -moz-border-radius's and -webkit-border-radius's when everyone has the standard in place.
(and hopefully all those god awful IE6/7 hacks, when IE9 is released :lol: )

 

[Prolescum]

Internet explorer 9 should fully support the CSS3 standard.

Not quite.

http://www.impressivewebs.com/css3-support-ie9/

 

[nophun]

Not quite.

http://www.impressivewebs.com/css3-support-ie9/

I was more so talking about the actually tags would be standardized. As in no more shitty IE6 hacks or -moz-f00-bar's .
Microsoft is no where near top dogs when it comes to writing browsers with standard compliance. Give them credit IE 9 is a step foreword. That said, who gives a shit if text-shadow is not supported. .. seriously.

Most of that list is stuff that there is other and/or better ways of doing it.

Lastly remember the list is for a beta and is subject to change. I actually expect things like text-shadow and border-image will get support from IE due to people liking pretty effects.

Obviously this does not mean IE9 is going to support everything well (SVGs I am looking at you), but hey! this is the cost of using internet explorer. Always has been always will be.

Edit:
I realize I used the word "fully" that was wrong of me. To be fair we are talking about MS's IE here so your expectations of the word "fully" should be pretty low.

 

[Prolescum]

Lol, yeah. I suspect you're right about their desire to please developers with a renewed commitment to compliance. I wasn't having a go, just dampening expectations... They'll have to push it out to users to have anything like their current (or previous) levels of usage though, and I can't see MS doing that. In all honesty, I don't know a single person IRL who uses IE at home anyway, not even my dad.

Personally, I haven't used IE since 7 came out, and only then because of work (there's only one windows machine in my house and it's not mine).

I admit that 9 is a major step. For them, though



Also text shadows, like bow ties, are cool :lol:

 

[CosmicSpork]

CSS Hacks are not always necessary (and should be avoided at all costs), if you have to do things for a specific version of IE it's best to use Conditional Comments for example:

<i>
</i><!--[if IE]>
According to the conditional comment this is Internet Explorer
<![endif]-->
<!--[if IE 5]>
According to the conditional comment this is Internet Explorer 5
<![endif]-->
<!--[if IE 5.0]>
According to the conditional comment this is Internet Explorer 5.0
<![endif]-->
<!--[if IE 5.5]>
According to the conditional comment this is Internet Explorer 5.5
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is Internet Explorer 6
<![endif]-->
<!--[if IE 7]>
According to the conditional comment this is Internet Explorer 7
<![endif]-->
<!--[if gte IE 5]>
According to the conditional comment this is Internet Explorer 5 and up
<![endif]-->
<!--[if lt IE 6]>
According to the conditional comment this is Internet Explorer lower than 6
<![endif]-->
<!--[if lte IE 5.5]>
According to the conditional comment this is Internet Explorer lower or equal to 5.5
<![endif]-->
<!--[if gt IE 6]>
According to the conditional comment this is Internet Explorer greater than 6
<![endif]-->

And so on...

Inside the comments you'd put an external stylesheet link or the actual css (in <style>) tags.

Although conditional comments can be considered a hack they don't make your main stylesheet messy with IE hacks.

What amndalb27 has suggested will work, but I wouldn't recommend it to be honest.

It's VERY rare that Webkit (Safari, Chrome etc) needs any additional/different css than Firefox so it's unlikely the hacks suggested for those will ever be needed.

 

[borrofburi]

CSS Hacks are not always necessary (and should be avoided at all costs), if you have to do things for a specific version of IE it's best to use Conditional Comments

Good, I was beginning to worry I was crazy or uninformed; it's always nice to have someone agree with the way you do things.

 

[CosmicSpork]

CSS Hacks are not always necessary (and should be avoided at all costs), if you have to do things for a specific version of IE it's best to use Conditional Comments

Good, I was beginning to worry I was crazy or uninformed; it's always nice to have someone agree with the way you do things.

CSS hacks stop your css from validating properly so if you can put keep them out it's well worth doing It's how I was taught to do it and it makes perfect sense really.

 

[ormaaj]

The CSS3 module containing border-radius recently became a W3C recommendation, which is why FF4 doesn't require the vendor prefixes, and neither do most semi-recent versions of Chrome and Opera.

My question is, is it ok to have a web page looking differently when viewed in different browsers, or should a web page look more or less the same in all browsers?

Identical pixel-for-pixel rendering is impossible for most non-trivial pages. If you want identical behavior for literally all browsers going back to Links2 in graphics mode you'll need a table-based layout. My opinion is that you should make choices based upon the accessibility needs of your target audience (or your client/employer's target audience).

For my own personal pages I use XHTML+RDFa served with proper headers and liberal use of advanced features - and make no compromises for anyone not using the most recent versions (or even dev builds) of major browsers. But the content I'm serving isn't a critical service service that absolutely must be available to everyone from everywhere - I can only promise that pages will display correctly (or at all) if your browser is completely standards compliant. If however you're doing a commercial website which primarily targets business users who tend to be the largest demographic still using ie6, you'll probably want to be a little more forgiving.

Remember though that the goal isn't necessarily identical presentation and layout - that isn't going to happen. In fact this isn't even considered good practice, you'll want for example alternate stylesheets for different @media types for accessible display on mobile devices. The content needs to be accessible, and major features of the site must function, but not necessarily look the same. So-called "graceful degradation" is the goal.

CSS hacks stop your css from validating properly so if you can put keep them out it's well worth doing It's how I was taught to do it and it makes perfect sense really.

Of course since CSS isn't an XML language, it has no concept of validity. Many of the CSS "hacks" use selectors which may be perfectly legal, and even logical if used with certain non-html namespaced XML documents, so it isn't so much that they are incorrect as certain UA's mishandle these otherwise correct selectors which can be exploited to modify behavior. Numerous IE CSS hacks are present by default in such widely used places as the CSS reset stylesheets from both YUI and GWT

Still, I don't recommend using them unless you really know what you're doing.

 

[nasher168]

Mod note:Just in case you were wondering, I've deleted the first post you made ormaaj, as it said exactly the same thing as your second one and you said it without quote mistakes in the second post. I assume the double post was a result of confusion about the approval system.
You are now free to post.