Should we use IE's CSS Dynamic properties?
I read IE8+ would not support these.
What is the best strategy to handle this?
If you mean CSS expressions, you should avoid them because they're slow.
Your question about how to avoid them is pretty vague. It would be easier to answer a more specific question. But here's a vague answer: Javascript. :)
They are very useful to solve incompatibility problems with older versions of IE, for example to get png transparency in IE6. I always (when needed...) include style-sheets using these functionalities in IE's conditional comments.
The dynamic properties wasn't anything that really took off. It could be used in applications that targeted IE only (i.e. intranets and such), but as it never became a standard and no other browser supports it, it never came into wide use on the web.
I haven't read what you say about IE8 not supporting dynamic properties, and I haven't tried it, but it sounds very plausible that the will not be supported when the browser renders a page in standards compliant mode. They will probably be supported in quirks mode for a few versions longer.
Related
I'm really confused about flexbox. Is this good idea to use it for modern browsers? I'v heard that I should not use it for whole page layout but I dont know why. And where is good idea to use it and where not?
I'd say no if you need Internet Explorer support.
For Edge and other browsers i'd recommend using it ... See CanIUse for supported browsers.
If you do need older browser support, rather go with some css grid framework or include lower IE specific styles using conditional includes or take a modernizr-like approach.
Plenty of crossbrowser and browser-specific solutions to your problem ... you have too choose, can't say more since this is a very broad question which can trigger various types of responses depending on people's experience and personal taste.
One of my development teams have written a couple CSS files that work flawlessly with IE. However, the UI is all messed up when rendered on other browsers.
Is there a tool that can take these CSS files and convert them into cross browser version? Unfortunately, these CSS files are too large and the expertise desirable to cook cross browser CSS and test it is lacking in the team at present.
The most recent versions of all prominent browsers need to be supported.
No, because that would require a tool to understand your design intent and then fix it. If it was so easy to create cross browser compatible css by just using a magic tool we would all be using it.
Usually I see this done the other way around. Get it to work in all browsers and then hack in fixes to IE. My guess is that a few simple simple things are grossly affecting the layout. I would fix it for a more standards compliant browser like Firefox and then hack in fixes to old versions of IE as necessary.
You might want to try Prefixr. It did help me with some CrossBrowser issues, but I programmed for Chrome. Don't know how great the compatibility is the other way around.
Is there a way to make sure your CSS is cross-browser capable?
I tend to work with strict doctypes, which solves a lot of problems.
Study http://www.quirksmode.org/ by Peter-Paul Koch
I refer to this site all the time.
However, as Ernest Friedman-Hill wisely pointed out, testing...
No, not absolutely sure, unfortunately. Testing, testing, and more testing is the only solution.
Here are a few tips:
Try not to use CSS3 (yet).
Don't use browser specific selectors, such as ones prefixed by -moz- or -webkit-
Use a CSS reset, like http://meyerweb.com/eric/tools/css/reset/
There are a few ways to do that.
First you will want to check on a few browsers when you are done with your website. Some good options to do that is Adobe Browser application, another is browsershots.com and you can find others.
Another great rule of thumb is to use an established framework that is already cross-browser (my favorite being 52framework at http://52framework.com ).
And honestly after years of writing CSS it seems that you will just get use to writing the best possible CSS and you will have cross-browser code of the get go.
There really is no sure way to write perfect CSS first time around (there are validators out there that can help a little, Dreamweaver has a specific tool that will validate code and CSS and let you know if its capable or not.
Good luck!
Your best option is to test in each of the browsers you want to support. If you don't have access to all the browsers there are for-pay web sites that will take screen shots of your site using different browsers:
http://browsershots.org/
Did you mean "capable" or "compatible"?
Anyway, I always use the W3C CSS Validation Service. It checks your CSS to make sure it is valid. After passing this validator, chances are your CSS is cross-browser compatible. But I would recommend also manually inspecting your CSS in different browsers. Do check out http://www.css3.info/ for details on how different browsers implement different features of CSS 3.
I would also recommend you install the Web Developer Toolbar if you're planning on doing heavy web development. Great tool for Firefox and Chrome.
I am trying to figure out the most efficient way to ensure cross-browser compatibility. I have done a bit of research and learned a few interesting things such as the fact that Mozilla/Firefox can't handle a class that has a name starting with a number. Is there a way to make a CSS work for any browser or is it better to just develop multiple CSS and add code to choose which to use based on the browser being used?
You might consider using a CSS Framework such as Blueprint. It includes a CSS reset that should help.
Also, you might want to look at Yahoo's CSS reset
An aside to clarify a point:
... I have done a bit of research and learned a few interesting things such as the fact that Mozilla/Firefox can't handle a class that has a name starting with a number....
Sorry, but that's not a Mozilla limitation, it's in the CSS spec: class names must not start with a number. Any browser that allows them to isn't enforcing the rules properly.
Answered here on StackOverFlow. The relevant part of the spec is at http://www.w3.org/TR/CSS21/syndata.html#characters (see the 2nd paragraph).
To answer your question: There is no way to make a page using just one universal css and have it displayed equally in all browsers, unless you only use an extremely small sub-set of all available css (selectors, values, etc.).
The way I work is:
Use a css reset
Develop for a browser that adheres to the standards pretty well (Firefox, Chrome, Safari, Opera)
Patch things up for IE using conditional comments (because you'll probably need things that don't validate)
A good starting point would be to use CSS reset such as: http://developer.yahoo.com/yui/reset/
Your goal should be CSS that works on all browsers. If you start out with a CSS file per browser, where do you stop? Mobile Safari? Flock? Konqueror? Every version of every supported browser?
Eventually, you might need to compromise, but you can cross that road when you get there.
Regardless of your infrastructure/framework/etc you should test your code on all major browsers. If possible avoid using style sheets for browser specific problems. Browsers will change and adapt which means you might get stuck having to update a bunch of websites when new browsers come out.
CSS is a fickle beast and I haven't found any solution that covers all the quirks except for a lot of due-diligence and testing.
You might use a framework that does this for you, such as GWT, but keep in mind that you will still have some issues.
Is it better to have a different CSS file for each user-agent or is it better to use CSS Hacks that only certain browsers can see?
Neither.
The best is to write code that works in all browsers without the need of browser specific code or css hacks. It's of course not quite as easy to accomplish, which is why many people use the other methods.
The key is to avoid things that some browsers (very often Internet Explorer) has problems with. One such thing is to use padding rather than margin, because IE doesn't handle margin collapsing correctly.
Some methods that is in the border line of being hacks is using code that doesn't affect browsers that work correctly, but fixes problems for a specific browser. That could be things like specifying a height for an element that normally shouldn't need one, or specifying display:inline on a floating element.
The page Position is everything has examples of some bugs and suggested fixes. (Often the fix is some kind of hack, so you should of course also consider if you can avoid the problem altogether.)
It's better to do neither.
A good css-reset and css that works the same cross-browser is a much better solution.
If your design absolutely precludes that, then (and only then) would I try hacks or IE conditional comments.
I haven't yet seen the need for mutliple css files (beyond a few IE6 corrections addressed via a conditional comment).
Neither if possible. Now that the old Netscape, IE <= 6 etc. are not longer really that much in use, I try to use features which work in all those browsers (e.g. FF >= 2, IE >= 7, Chrome, Opera).
Conditional comments for issues with Internet Explorer appear to be the norm. Combined with a little bit of JavaScript, like Dean Edward's ie7.js you can mitigate most cross browser issues without resorting to hacks within your CSS files.
its better to use a different css files for Internet Explorer 6-7 (include them via conditional comments), and a hacks for other browsers.
A sort of follow up is how to develop the single file that works.
The best approach that I've seen work is to start from nothing, slowly building it up and checking change by change that it's still compatible across your core browsers (especially the problematic ones).
When you get it fully working with one browser and then say "time to convert it" is when the pain really starts and where you have to start hacking.
My approach using a PHP class to detect os, browser and browser version. You can target any version of almost any browser on any operating system.