I'm dealing with crossbrowser issues... So I׳m looking for the best and clean CSS
One of the most important issues is the "IF" statements for each browser
Take a look at this page:
http://www.conditional-css.com/usage
It contains every information you'll need.
CSS, in and of itself, does not have "if statements".
Internet Explorer browsers do have conditional comments which provide a simple way to deliver code (HTML, CSS or JavaScript) to different versions of IE.
Other browsers don't really have anything like that, though there are browser vendor specific declarations like -moz-border-radius and -webkit-border-radius.
Related
I encountered this question while browsing the Q&A section of an online course on advanced responsive design. I found an answer for it, shared it, and decided to post it here as well in case anyone else might have the same dillema.
The dillema is that it could be a lot easier for ensuring browser compatibility if we could define a different style for certain browsers that behave differently from most, e.g. Internet Explorer and, in the case of my website at least, Safari.
So how do we go about doing that? Check out my answer below to find out, and feel free to contribute if you think you know a better way to target specific browsers for specific media queries unique to them.
Using caniuse (https://caniuse.com/), look for a specific property that is only supported by the specific browser you want to target. Then, using the #support query, target that browser with the property you've found is unique to it. Then, whatever styling you apply within that query will only apply to the browser(s) that support(s) the property by which you defined the query.
That is, the properties inside the brackets of a #support query are used to define when - for which browsers - the styling inside the curly braces will apply; they do not need to be the same, that is, you do not need to use the same property styled within the curly braces to define the query in the brackets, so you can choose any property that targets the specific browser(s) you want to display the styling for.
Update:
I found this site that seems to provide the solution to targeting specific browsers and browser versions in the caniuse style, sparing you the need to test each property by hand:
http://browserhacks.com/
This article offers a briefing on how to use it:
https://www.templatemonster.com/help/how-to-create-browser-specific-css-rules-styles.html
Update:
For Internet Explorer only, older versions only, you can create a separate stylesheet to load for them using conditional comments in your HTML. This can be a copy of your general stylesheet, tweaked to work on old IE versions, but loaded only if those versions are detected, therefore not interfering with display on other browsers. They are not, unfortunately, usable for other browsers. This article explains how to use conditional statements.
https://www.quirksmode.org/css/condcom.html
Update:
The most effective solution to this problem seems to me to be to implement some javascript that detects the browser version and then applies specific styles or even modifies the DOM based on the browser(s) you target.
This explains the principle and some applications nicely:
Is there any equivalent to IE conditional comment for chrome and safari?
This, if rather old, is still a very useful such application:
http://rafael.adm.br/css_browser_selector/
And that's it! The ability to ensure browser compatibility with most any browser!
I have a website that I've developed and tested using Firefox 9 exclusively. I'm pretty happy with the layout/styles when viewed in this version of Firefox. I'm now facing the unenviable task of making it display equally well (or as close as possible) in IE7+ (I'm not supporting IE6). Naturally, I'd also like it to display well in Chrome & Safari, but I think they implement the standards reasonably well, so I'm not so worried about them.
I'm using JQuery for JavaScript, which hopefully means I don't have too many differences in JavaScript behaviour, so my chief concern is the CSS. I imagine many others have been down this path, so I'm hoping there's a stylesheet available which when (conditionally) included will fix most common CSS problems seen when viewing a website in IE that has only been tested with Firefox. Does such a thing exist?
A catch-all miracle.css file which cures all IE-related ills? If only! The solution will probably boil down to a selection of some or all of the following:
Normalize (http://necolas.github.com/normalize.css/)
Brings most browser default settings to a more consistent baseline (think of this as an alternative to the popular Eric Meyer reset.css)
Modernizr (http://www.modernizr.com)
Seeing as you're already using javascript, including modernizr will give you additional methods of detecting browser capabilities. Also auto-injects .ie7 / .ie8 etc classes into your markup where necessary, allowing you to target IE in your styling, e.g.
.standard { ... }
.ie7 .standard, .ie8 .standard { ... }
CSS3PIE (http://www.css3pie.com/)
Progressive Internet Explorer - allows for styling which typically fails on IE (e.g. linear gradients, radiused corners, etc.)
IE7.JS (http://code.google.com/p/ie7-js/)
Probably the closest to what you were after, as an alternative to CSS fixes (which no doubt will still be necessary). Should help get you closer to the desired end result though.
I don't think there is any sort of stylesheet that does this for you.
You may look into a js script that look at solving IE issues. Or You can always do it the old fashion way using IETab and targeting the areas where you know there is going to be issues.
Most of them are described here: http://net.tutsplus.com/tutorials/html-css-techniques/9-most-common-ie-bugs-and-how-to-fix-them/.
Hope it helps :)
Here's something interesting, turnsout that many people out there had this problem, but i couldn't find a solution:
Problem is related (and observed) only with IE8 and IE7:
If i add filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFEEBB', endColorstr='#FFEEBB',GradientType=0 ); to css "body" then all fonts on my page are messed up! If i remove "filter", font's are back in normal.
What's wrong?
P.S. Messed up -> Fonts look jagged, exactly like there's no cleartype!
Internet Explorer disables ClearType rendering in all elements that use a DXTransform.
There's a workaround described here that involves a relatively positioned wrapper element. It seems to be working in IE8 at least.
That looks very much like a proprietary Microsoft filter. Unless you know that 99% of your website users use ie, don't use those filters. Of course, if you are using this in an ie-specific style-sheet, to complement another style-sheet for proper browsers, you can use that filter without ruining your market.
Either way, I would highly recommend not using an ie-specific filter (or anything ie-specific really). Instead you should recommend to your users subtly to change to a more compliant browser, with less security holes and privacy-concerning back doors.
I"m no expert, but it sounds like you are using something that is IE specific. If so, I could not recommend highly enough that you find another way. Gone are the days of IE being the only browser to develop for and doing so will turn away numerous people.
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.