This might be a stupid question, but I have a scenario where I fixed someone's webpage, and it is looking good on all major web browsers on my Windows machine. However, when I uploaded the website to Adobe BrowserLab, and when I looked at Safari and Firefox on a OS X, the footer is a bit off from Safari and FireFox on a Windows operating system.
My questions are:
Is there a way to target only Safari and Firefox on OS X and not touching those on a Windows? I mean, is there a way to create a stylesheet only for OS X?
Or are there any conditional comments (for example, ) that targets Mac OS X? If not, are there any other ways?
Or, am I F out of luck?
Thank you people!
Best practice: Try to fix it without doing user agent detection. Analyze the problem, you could try to ask specific advice on your problem here. Especially Gecko and WebKit rendering engines behave almost exactly the same on each platform, bugs should be easy to squash.
If you really can't fix it, you can do JS browser detection, and include a CSS dynamically.
detect: http://www.quirksmode.org/js/detect.html
insert css: http://www.hunlock.com/blogs/Howto_Dynamically_Insert_Javascript_And_CSS
This is a bad practice however: whenever you make changes, you need to change each css for each browser.
You can target browsers specifically normally firefox chrome etc work roughly the same and ie may work slightly differently.
A way to target browsers is described here
http://www.webmonkey.com/2010/02/browser-specific_css_hacks/
http://reference.sitepoint.com/css/conditionalcomments
Yes, but this is rarely the right approach. I'd imagine that it's a font issue - perhaps you are using a font that is only on Windows, or one where the OSX version is slightly different.
If you did want to do this, you could either use a server side language (for instance, PHP) to check the user agent, then include an extra style sheet, or use JS to add the styles using the same technique.
When researching this, any info on CSS hacks should be avoided at all costs.
This is a good way to do this: http://www.quirksmode.org/js/detect.html as it avoids hacks, and produces an easy to use object containing the relevant information.
I would only use this technique in dire situations - in all the sites I've ever made, I've never had to do this, other than for old IE and iOS.
You can use JavaScript to target specific browsers but also operating systems for the browser.
http://www.javascriptkit.com/javatutors/navigator.shtml
Related
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.
I'm working on a project with a designer and he insisted on using some specific font for titles and various elements in the page. So we're using a font kit to embed with #font-face.
It's working perfectly on PC (Firefox, IE 7 and 8, Chrome, Safari) but on Mac OS (Safari and Firefox) the fonts are not vertically aligned the same way. After looking on the Web, I didn't find any solution for this except "there always been differences between browsers and platforms, live with it".
I know that fonts are never rendered exactly the same across platforms, but this time it's not something like the font looks more bold or something like that. The font looks as if it's baseline is completely different between Windows and Mac OS X. On Mac OS, the font, at a size of 16px is 3px higher than on PC.
So I'm looking for a backup solution : is there a way to create a CSS specifically for Mac OS users? I do not want to target only Safari because Safari PC is ok, and Firefox Mac is not ok.
Or if you have a solution to fix the baseline difference that does not require a specific CSS file, I'd be happy to hear it.
Thanks!
I'm afraid that browser/os sniffing is your only option. CSS itself has no knowledge of OS nor do i have ever heard of a css hack that targets osx specifically.
This is the easiest way for me to detect OSX and add the OSX class to the document body so you can override css styles for OSX specifically.
if(navigator.platform.match('Mac') !== null) {
document.body.setAttribute('class', 'OSX');
}
Same as #ChrisR answer this is the easiest way for me to detect MAC and add the MAC class to the document body so you can override css styles for MAC specifically.
Additionally this keeps the current Body Class and just ADDS Mac on to it
if(navigator.platform.match('Mac') !== null) {
document.body.setAttribute('class', document.body.className +' MAC');
}
If setting an explicit line-height doesn't fix the problem, you can serve different stylesheets to each browser using your backend and detecting the OS in your application (via the user agent). You can also do something in JS doing the same thing, but there will likely be a FOUC while JS loads the relevant styles.
There's an easier way. http://rafael.adm.br/css_browser_selector/
It detects the browser and os and allows you to specify classes specific to it.
If you want close-to-perfect and painless, you're going to have to use the common fonts or fonts from an online service such as Google's free font library or one of the for-pay font libraries. These fonts have been designed and tested to work on the web.
Experimenting and including fonts for the user's browser to download and try to display correctly is fine, but won't be perfect and won't be painless. Also, be very careful with licensing restrictions - make sure the fonts your designer wants to use are properly licensed for use on the client's website.
If you have to do browser sniffing and serve multiple stylesheets, at this point I'd say your design is broken and needs to be revised. Show https://fonts.google.com to your designer and see if he likes any of those - they work cross-platform in all modern browsers and some are very slick. EDIT: Oh, and they're free to use without worries of licensing.
I don't like Microsoft's font rendering.
I've created a site for a client and the last unticked box on my debugging list is the biggest. (it's not 'live' yet btw so please ignore any other bugs - http://baked-beans.tv/bb)
I'm using font-family to import a non standard web font. It renders fine on Mac, but it looks like sick old man on its last legs on PC.
The biggest irony is that the font is actually ok to read in internet explorer 8. This is the first time I've EVER seen IE beat other browsers in anything. But anyway, the font doesn't look good in FF, Chrome, or Opera, on a PC.
So my solution is to serve different fonts to PC users. There are a lot of css hacks for different browsers, but not for different OS. the php OS detections are really really complex. I'm just looking for something simple like if(PC) do this; else do that;
Any advice would be immensely helpful
Just one other thing... Just wondering if there is a way I could prevent Windows from anti-aliasing type on the Internet? The reason why it looks so bad is because it's trying to anti-alias it, maybe if it left the poor font alone it wouldn't look so bad.
The CSS Browser Selector can target different OS's. :)
No, you can't "kill" anti-aliasing.
But, you could use http://www.stoimen.com/blog/2009/07/16/jquery-browser-and-os-detection-plugin/ for detection.
From what I saw only the headlines are crap so you could as well use http://cufon.shoqolate.com/generate/ for those and make your life easier.
My favorite article on this topic is here:
http://getsatisfaction.com/typekit/topics/typekit_fonts_rendering_horribly_on_windows_based_systems
There is a lot of good discussion including TypeKit developers on the reasoning behind that, and it has a link to an interesting article about using JavaScript to detect whether font smoothing is in use (you definitely can't do it with CSS alone).
http://www.useragentman.com/blog/2009/11/29/how-to-detect-font-smoothing-using-javascript/
Good luck.
Firefox's Latest version
IE7
IE6
IE 8
Which browser we should use to see HTML css rendering for always and why?
Edit:
My question is not on which browsers should i test site before go live. i will try to test on all possible.
My question is which browser should i choose during layout development process and why?
because while development it's not possible to see every step in all browser it will waste time. after making a layout we can test in all but during development one browser would be better.
Uhh... every one of them?
I personally develop with Firefox 3.6 for convenience and the availability of Firebug, header sniffers and other tools. I try to test in all the browsers you mention before anything goes out for anybody to see (a client for example). But I don't think there is a real "best" choice here because in the end, you will need to test for every browser you need to support anyway.
Use the most up-to-date css compliant browser with a good debugging tool e.g. Firefox 3.6 and the Firebug plug-in.
Then check in the other browsers you want to support for your users and backwards correct any errors.
Do not attempt to make the site look EXACTLY the same in all browsers, you will be wasting your time.
As long as the effect is similar in older/other browsers (for example you could use border-radius for Firefox/WebKit browsers and this will degrade nicely for browsers that don't support border-radius) and the site is usable and fulfills it's purpose, then your ok
DONT WASTE TONS OF TIME ON IE6. Use a conditional commented stylesheet and just get it usable...
In the head of the document
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="IE6.css"/>
<![endif]-->
It all depends on your target user group.
If you're working for customer that uses IE6, you will have to test for it. Sad, I know.
If you're designing a site for general public, then test for current versions of major browsers. Firefox, IE, Opera, Safari and Chrome(?).
Also: develop according to standards then fix whatever does not work in one browser or another. Not that you develop for IE, then trying to fix everything that suddenly falls apart on all other browsers.
During developing NOT testing I use this combo :
firefox
firebug extension
webdeveloper extension
live http headers extension
Give it a try, you won't regret it, you can make changes to your css IN BROWSER and then change your code (No more refresh needed for that one annoying one pixel offset), check to see where is the fault interface or code logic and plenty more.(Page Speed & YSlow to analize your page speed etc.)
I whole-heartedly agree with Pekka.
I develop everything within Firefox and use the excellent addons available during development (Firebug / Web Developer Toolbar / etc).
A suggestion would be to test often in other browsers as well....I would recommend every time you go to take a little break check it out in the other browsers to see if there are any issues, and then make a note to fix them and allow your website to be rendered properly in all browsers.
You really don't want to exclude any user based on his/her browser preference, so make sure
it works across the board!
edit
Also a good point from one of the other users...IE6 is in the process of being phased out, however if you are looking to have any users in a corporate environment you don't want to exclude testing this either!
You need to test your css in all the major browsers, that includes IE (6, 7 and 8), Firefox, Chrome and even Safari and Opera.
You can probably get away with just using the latest versions of Firefox, Chrome etc. as they auto-update and so users are less likely to be using older version (though it's not unknown).
IE is a problem because so many users - particularly corporate users - are running older versions.
Choose one, it doesn't really matter which as long as it has good development tool support, to develop in and get the site looking good in that. Then test in the others. Which order you do this and how much effort you want to expend will depend totally on your target audience. From my experience Firefox with Firebug and even (dare I say it) IE8 with it's built in developer tools are good choices. The advantage here is that you'll cover the majority of users with these. However as the browser market is getting more fragmented you will need to test in others.
This is an interesting question, I'm going to assume that you have a process that means that first you develop your page and then you do cross browser testing to make sure it works everywhere - so the question then becomes which one is going to get you to the best starting point for getting to working "everywhere" (definition of which will depend somewhat on your target audience).
This used to be easy - according to my (then) staff Firefox had good standards support and the best tools - so get it right in firefox first then adapt to cope with everything else, now its a lot less clear as IE8 has a very decent set of dev tools (and is better behaved than its predecessors) and Chrome is now getting into the act - again with a good set of tools and extensions.
My gut feeling is probably Firefox, Chrome, IE8 in that order - but I'm not doing anywhere near enough CSS work to assert that that's right.
You develop in Firefox (you have firebug to adjust things), you test in safari/chrome & opera (all of them is ok with standards so you have low chances to have bugs in those) and you debug in IE. Because is impossible to have a fully functional in ALL browser from one try :D
I use my main browser (Chrome) for basic progress, and frequently check all other browsers for bugs and layout problems.
I think If we choose firefox and IE 6.0 both for website design, the site will be look almost same for all browsers, because rest of IE 6 & 7 all browsers' HTML rendering pattern is almost same. So If we make css from start considering firefox and IE 6.0, bugs would be in less numbers and In this way we can make all browser compatible website.
Please give me feedback
I do it in ie6, the most primitive browser which is still in use.
I think any thing that will work on ie6 will work on any browser.
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.