CSS behavior in different browsers

Posted on 2011-04-20
Last Modified: 2012-05-11
Maybe this is pie in the sky, but are there any tools for free or for under $50 that will tell you or help you write CSS that is cross-browser compatible, or help you identify CSS properties that are likely to work in some browsers and break in others?
Question by:knowlton
    LVL 82

    Assisted Solution

    by:Dave Baldwin
    No.  The reason is that CSS on a page depends on the other things on the page just like HTML does.  Something that might work well by itself may not work so well if it has to depend on previous CSS declarations on the page.  The only thing to do is get all the browsers and check your pages in each one of them.
    LVL 22

    Accepted Solution

    Unfortunately it's always a bit tricky when it comes to cross-browser CSS, so far I'm not aware of any tools that pinpoints CSS incompatibilities with specific browsers unless you're looking at CSS3 or HTML 5, if this was the case then you might be interested in looking at the below links which provides extensive information about specific CSS rules and their browser/version support.

    Where if you're not after HTML5 and CSS3, the best you could do is ensure you have a validated markup and css, this would be more than 50% of achieveing cross-browser compatibility.
    A good reference and links can be found here

    Also as a personal experience I always say "Design and code for FireFox, troubleshoot for IE"
    When coding for FireFox you're most likely to get very similar results with other brosers such as Chrome and Safari where the most likely browser to give issues is IE, so by doing so you save yourself most of the pain of troubleshooting for each browser individually when you write for IE.

    I hope this helps!
    LVL 5

    Author Closing Comment

    LVL 82

    Expert Comment

    by:Dave Baldwin
    The site has tables that show differences in browser implementations.  It doesn't directly address 'compatibility' for reasons above but you can often find out if a particular element is not supported by a particular browser.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Threat Intelligence Starter Resources

    Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

    When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
    This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
    In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
    The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

    779 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    11 Experts available now in Live!

    Get 1:1 Help Now