SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Zealot Dandandandaman's Avatar
    Join Date
    Mar 2009
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Have different CSS between browsers

    I would like my CSS to be slightly different dependant on which browser is being used to view my web site. How do I accomplish this?

  2. #2
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    browser feature detection can be used but that means you depend on javascript being allowed to execute on client side, which may not be always the case.

    for a more specific UA sniffing, done server side, you can use user agent strings that are transmitted via the User-Agent request header.

    as a side note, the recommendations are to target the standards and not particular browsers and limit the use of vendor/version specific features.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Dandandandaman View Post
    I would like my CSS to be slightly different dependant on which browser is being used to view my web site. How do I accomplish this?
    This begs the question why?

    If it's to overcome a bug then there may well be a better way to do this.

    You don't really want to have multiple files if you can help it as it makes maintenance a nightmare.

    In truth the only browsers you can really target without using javascript is IE and it's probably only IE that you should ever supply different code to anyway. Most of the other browsers (apart from the odd bug) are pretty consistent.

  4. #4
    SitePoint Zealot Dandandandaman's Avatar
    Join Date
    Mar 2009
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am very new to all of this so there is probably a better way to do this and there may well be issues with my thought process.

    I hope this makes sense. I have a statement on my site where I want three key words spread throughout the statement to be a different colour (the same colour as the theme of the site). I have done this by putting a span and class around each of the words and styled it with the colour. The colour is quite pale so I have also used a text shadow in the CSS which in Firefox makes it stand out how I want it but this doesn't work in IE. I was therefore going to just make the words a darker colour for IE only or even use an image of how I want the words to be instead.

    Anway if anybody has any better suggestions I would love to hear the and as I am such a newbie you may have to repeat it a few times before it sinks in.

    Thanks

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    You can use the conditional comments I posted in the previous thread to target all/any versions of IE.

    e.g.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link href="main.css" rel="stylesheet" type="text/css" />
    <!--[if lt IE 9]>
    <link href="iecss.css" rel="stylesheet" type="text/css" />
    <![endif]-->
    </head>
    <body>
    </body>
    </html>
    Just create a stylesheet for IE but only put in the differences or things that need to be over-ridden. Don't include the whole stylesheet.

    Some people don't like using Conditional comments but they are an easy way to target all versions of IE but do make maintenance a little harder.

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I think it should be mentioned that you should almost never ever need different code for IE, except to overcome bugs, otherwise it's just coding failure on your part
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    You don't really want to have multiple files if you can help it as it makes maintenance a nightmare.
    I agree that for the OP's purpose multiple stylesheets are not required, but in general I think "nightmare" is a little harsh although it does take about an extra minute at the most for me to update multiple stylesheets (up to 5) to cater for all the most common browsers.

    Admitedly the stylesheets for each browser are much the same nowadays but occassionally IE7, Safari and Chrome do some things slightly differently (calculate widths of elements with margins etc or they don't support a css feature).

    I use Netbeans as my IDE and it makes having multiple files open at one time and navigating to selected parts of each file quickly very easy and so for me it is more efficient to spend a few seconds copying and pasting styles to multiple stylesheets than to try to adjust styles in a single stylesheet to fix a bug in one browser only to find it breaks the layout in another browser - but each to their own way of doing things - my

  8. #8
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    I think it should be mentioned that you should almost never ever need different code for IE, except to overcome bugs, otherwise it's just coding failure on your part
    how do you overcome "bugs" like unsupported > and + selectors?

    you should always code rules for the exception and not code the exception as a rule

    don't let the shortcomings of ie dictate what level of css and html you're using. after all, i see you're using xhtml, and ie is not supporting it. take advantage of the css 2.1 at least. and by doing that, you do need different code for ie.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Kalon View Post
    I agree that for the OP's purpose multiple stylesheets are not required, but in general I think "nightmare" is a little harsh although it does take about an extra minute at the most for me to update multiple stylesheets (up to 5) to cater for all the most common browsers.
    It depends if the stylesheets you are working on are your own or someone elses

    I'm working on a very large site at the moment and it's a "nightmare" because every time you adjust a rule you have to remember to cycle through all the extra IE stylesheets as well. Now it only takes a minute but if you do that 500 times it soon mounts up.

    The original author just put too many unnecessary rules in the extra stylesheets and made it more complicated than it needs to be. This is the danger that I see when people use CCs too much. Every little margin difference and anything that's not quite right then they just throw more code at it and miss the original problem. I've seen this in the forums numerous times and in fact on many many occasions I have been able to remove all the special IE rules altogether and fix the OPs site.

    However, I think CCs are useful and I do use them but I try to have as few lines in then as possible and would rather change the design a little to avoid the problem in the first place.

    I also stand by my original comment and you should not really be hacking other browsers (non IE). There are slight differences and the odd bug and the only time I would really like to use a hack is where form elements are concerned.

    Otherwise I can't remember the last time I really had to do anything different for non IE browsers. Once you start doing that then where do you stop. The fact that things are slightly different in one browser is a feature not a bug (that's a quote from John Allsopp ).

  10. #10
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Otherwise I can't remember the last time I really had to do anything different for non IE browsers. Once you start doing that then where do you stop. The fact that things are slightly different in one browser is a feature not a bug (that's a quote from John Allsopp ).
    same here

    Quote Originally Posted by noonnope View Post
    as a side note, the recommendations are to target the standards and not particular browsers and limit the use of vendor/version specific features.
    but when a particular browser stands in the way of using the standards, i choose the use of CC (for clarity) and the use of standards (for the 60&#37; or more of the rest of the web) a fair trade i say.

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by noonnope View Post
    how do you overcome "bugs" like unsupported > and + selectors?
    I never code in a way as to need those selectors in the first place, so I overcome it by not using it in hte first place.

    Perhaps when IE6 is completely out of the way I'll tinker with it
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  12. #12
    SitePoint Zealot Dandandandaman's Avatar
    Join Date
    Mar 2009
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for all the input some of it is a bit over my head. I am wanting to learn to code the right way hence I am glad of the advice.

    There has been mention that to have go this way is due to the code being wrong. If I don't use the Conditional Comment how can I acheive what I want the right way, should I put the words in as images instead so they are the same across browsers or do I have to change the colour of the word so that a shadow isn't needed to make it stand out (however this is in my eyes is breaking the overall theme that I am trying to acheive) Is there another way?

  13. #13
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    we need a link if we are to help you. a blind advice could do more harm.

    that said, you can target ie the way you see fit. the debate of CC vs HACKS has less to do with how you want the things done, and more with the actual path you take to achieve your goal. they both get you there.

    if all you want is to make darker colour for ie, there are ie hacks for css selectors and rules, allowing you to target ie6 or ie7. alternatively, you could use CC to point to a css file having these selectors and rules, w/o hacks this time.

    there are also javascript solutions to make shadows in ie, but you need to remember that resorting to javascript might not work in all cases. there are users out there that are not allowing javascript code to execute in their browsers.

    if you rely on css3 only, you also need to know not all browsers support it, and those supporting it may only support bits and pieces of it, and css3 is not for production use yet.

    the problem is there are many ways and you have to find the right way

  14. #14
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,604
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    There is no easy way to target the hundreds of different browsers that do not yet support CSS3, particularly as various of them are adding that support over time. Any CSS3 you use in the page should be added to already usable CSS 2.1 code so as to enhance the experience for those who are using a browser that supports it while not breaking it for those using browsers that don't.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •