conditional comments for opera only, or rounded corners opera

unwashed potato! · 1 Jan 2010 at 17:31

i can easily manage to get ie to see conditional comments for css, but i'm struggling with opera. been doing a bit of googling and people are suggesting that conditional comments are designed for ie only. is this true? if not how would i get opera only to see the css? if it is true, anyone with suggestions how to make opera show rounded corners on a div? atm i have it done with css, then if ie a tiny image is used instead, and i'd like the same for opera.

thanks

tsinc80697 · 1 Jan 2010 at 18:00

You could use PHP

Code:

<?php
if(strpos($_SERVER['HTTP_USER_AGENT'], 'Opera') == TRUE)
  {
    CSS FILE
  }
?>

unwashed potato! · 1 Jan 2010 at 18:04

tsinc80697 said:
You could use PHP

Code:

<?php if(strpos($_SERVER['HTTP_USER_AGENT'], 'Opera') == TRUE) { CSS FILE } ?>

would that require an extra request to the server, or would this information be sent regardless of asking for it?

simisker · 1 Jan 2010 at 18:10

To the best of my knowledge, yeah: conditional comments are an IE-specific feature.

For the latest Opera builds, it seems as though you can just use border-radius:

http://sam.brown.tc/entry/412/bulletproof-rounded-corners-with-border-radius

Having said that, I'm personally of the belief that IE - or any other browser that can't handle border-radius or vendor-specific declarations - can go whistle over something as inconsequential as this trivial decoration difference.

It's not as if any IE/Opera/Non-supporting-browser user* is going to look at a squared div and go "Hey, waitaminute... those corners aren't rounded! I feel wronged and violated!!"

* The only people who care about browser rendering differences are us designers - who actively cross-reference - and our clients... and that's only if we've failed to inform them properly.

unwashed potato! · 1 Jan 2010 at 19:52

simisker said:
Having said that, I'm personally of the belief that IE - or any other browser that can't handle border-radius or vendor-specific declarations - can go whistle over something as inconsequential as this trivial decoration difference.

It's not as if any IE/Opera/Non-supporting-browser user* is going to look at a squared div and go "Hey, waitaminute... those corners aren't rounded! I feel wronged and violated!!"

* The only people who care about browser rendering differences are us designers - who actively cross-reference - and our clients... and that's only if we've failed to inform them properly.

i usually agree, but in this case it's only a tiny change to fix the issue, and it's something which once i know will hopefully stick and i'll know it forever, and already know the solution if it came up again but for something more important then just rounded corners.

ie is fine so it's just opera, and checking analytics i've only ever had 2 visitors using opera and 1 for opera mini, and those are probably me checking it out, so i'm not worried.

i'm not on my pc now so wont be checking the simple border radius until sunday but thanks all for the replies.

Pho · 1 Jan 2010 at 20:17

Probably overkill but you could use jQuery corner.

djkav · 2 Jan 2010 at 10:06

simisker said:
Having said that, I'm personally of the belief that IE - or any other browser that can't handle border-radius or vendor-specific declarations - can go whistle over something as inconsequential as this trivial decoration difference.

It's not as if any IE/Opera/Non-supporting-browser user* is going to look at a squared div and go "Hey, waitaminute... those corners aren't rounded! I feel wronged and violated!!"

"border-radius" is part of the new CSS 3 draft. You will find most browser used right now don't implement CSS 3.

You have to check with each browser vendor to see what CSS 3 features are getting added in the interm builds. IE 9 will have CSS 3, but I don't know what features yet.

You will be lucky to find anyone that can render CSS 3 sites properly. Its ok for R&D work but shouldn't be used in any client production sites.

Dj_Jestar · 2 Jan 2010 at 11:47

Just use images on all browsers. Really not worth the hassle for something so trivial.

unwashed potato! · 2 Jan 2010 at 12:32

Dj_Jestar said:
Just use images on all browsers. Really not worth the hassle for something so trivial.

i agree in this case it's trivial, but as mentioned i'd like to know a solution so that if something a lot more serous pops up i know how to fix it. also i use rounded corners for a box that changes size on each page, something which images wouldn't be able to do without a change in code which will get messy.

Tripnologist · 2 Jan 2010 at 12:32

I agree with Jestar.

Ideally, I would use border-radius but as we all know, that only works in Safari and FF and even then, it needs to be declared differently for each.

Unfortunately, ideal isn't always viable. If I were to tell one of our clients that the curved borders they want would only work in two browsers, they'd ask why and after I told them, they'd simply say that they want it to look near the same in all browsers.

In the end, I find it easiest just to do it with images. It's guaranteed to work in all browsers and doesn't require any js. If your div is a set width and variable height, you only need two divs and two images to do it. It's also easy to do with variable width and height but requires more divs and images.

Dj_Jestar · 2 Jan 2010 at 16:57

Mammalian said:
i agree in this case it's trivial, but as mentioned i'd like to know a solution so that if something a lot more serous pops up i know how to fix it. also i use rounded corners for a box that changes size on each page, something which images wouldn't be able to do without a change in code which will get messy.

If you use floating divs with background-image set, it's not a problem for variable width/height boxes.

suarve · 2 Jan 2010 at 20:01

Would personally just use images myself. Less hassle overall.

If using images, you'd only be downloading an extra 2 small images and 2 rendering 2 extra dom elements - not a lot really for the hassle you've saved yourself

robmiller · 2 Jan 2010 at 21:35

djkav said:
"border-radius" is part of the new CSS 3 draft. You will find most browser used right now don't implement CSS 3.

You have to check with each browser vendor to see what CSS 3 features are getting added in the interm builds. IE 9 will have CSS 3, but I don't know what features yet.

You will be lucky to find anyone that can render CSS 3 sites properly. Its ok for R&D work but shouldn't be used in any client production sites.

Looooads of the CSS3 spec is in its final form now, and has been for ages. It's perfectly fine to use in production sites.

djkav · 2 Jan 2010 at 21:56

robmiller said:
Looooads of the CSS3 spec is in its final form now, and has been for ages. It's perfectly fine to use in production sites.

Really, you must be confused.
http://www.w3.org/Style/CSS/current-work

As you can see, theres a whole lot of it still in draft form. For client production, I can't see 95% of clients web browsers rendering CSS 3 fully or correctly.

Dj_Jestar · 3 Jan 2010 at 01:36

robmiller said:
Looooads of the CSS3 spec is in its final form now, and has been for ages. It's perfectly fine to use in production sites.

Whilst that may be the case, browsers are a completely different story.