I'm wondering if there's any way to write CSS specifically for Safari using only CSS. I know there has to be something out there, but I haven't found it yet.
I think the question is valid. I agree with the other responses, but it doesn't mean it's a terrible question. I've only ever had to use a Safari CSS hack once as a temporary solution and later got rid of it. I agree that you shouldn't have to target just Safari, but no harm in knowing how to do it.
FYI, this hack only targets Safari 3, and also targets Opera 9.
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari 3.0 and Opera 9 rules here */
}
There are some hacks you can use in the CSS to target only Safari, such as putting a hash/pound (#) after the semi-colon, which causes Safari to ignore it. For example
.blah { color: #fff; }
.blah { color: #000;# }
In Safari the colour will be white, in everything else it will be black.
However, you shouldn't use hacks, as it could cause problems with browsers in the future, and it may have undesired effects in older browsers. The safest way is to either use a server side language (such as PHP) which detects the browser and then serves up a different CSS file depending upon the browser the user is using, or you can use JavaScript to do the same, and switch to a different CSS file.
The server-side language is the better option here, as not everyone has JavaScript enabled in their browser, which means they wouldn't see the correct style. Also JavaScript adds an overhead to the amount of information which needs to load before the page is properly displayed.
Safari uses WebKit, which is very good with rendering CSS. I've never come across anything which doesn't work in Safari, but does in other modern browsers (not counting IE, which has it's own issues all together). I would suggest making sure your CSS is standards compliant, as the issue may lie in the CSS, and not in Safari.
So wait, you want to write CSS for Safari using only CSS? I think you answered your own question. Webkit has really good CSS support. If you are looking for webkit only styles, try here.
You'd have to use JavaScript or your server to do user-agent sniffing in order to send CSS specifically to Safari/WebKit.
#media screen and (-webkit-min-device-pixel-ratio:0) {}
This seems to target webkit(including Chrome)... or is this truly Safari-only?
This really depends on what you are trying to do. Are you trying to do something special just in safari using some of the CSS3 features included or are you trying to make a site cross browser compliant?
If you are trying to make a site cross browser compliant I'd recommend writing the site to look good in safari/firefox/opera using correct CSS and then making changes for IE using conditional CSS includes in IE. This should (hopefully) give you compatibility for the future of browsers, which are getting better at following the CSS rules, and provide cross browser compatibility. This is an example.
By using conditional stylesheets you can avoid hacks all together and target browsers.
If you are looking to do something special in safari check out this.
Related
I'm using a lot of **!important** in my CSS to override Twitter Bootstrap defaults. I wonder if it will work across all devices.
Does **!important** give me same results in all browsers?
From my personal experience !important supported by every browser that supports CSS. But you have to check This before use it.
It was part of the CSS spec and has been around forever, and was always easy enough to implement that browsers appear to have gotten it right on the first try.
Here are the browser will support !important
IE5.5+, Firefox 1+, Safari 3+, Chrome 1+.
Our website looks great in all browsers except IE 6-8. We're not even using many CSS3 features. These are just plain old IE rendering bugs (like margins and padding). Before trying to apply a bunch of IE specific fixes, I was wondering if anyone knows of a javascript library that I could apply to fix a bunch of these typical bugs?
Update: Like I mentioned, we're not necessarily using any "modern" CSS3 features nor HTML5, so these are just typical IE 8 bugs where IE renders things differently than all the other browsers.
Go for excellent normalize.css reset that takes care of most of it (also used by HTML5 Boilerplate)
Normalize.css is a customisable CSS file that makes browsers render
all elements more consistently and in line with modern standards. We
researched the differences between default browser styles in order to
precisely target only the styles that need normalizing.
As for getting support of CSS3 for browsers that don't support it, check out CSS3Pie
You don't need JavaScript; just use a CSS reset file: http://yuilibrary.com/yui/docs/cssreset/
That will work across most browsers to not only fix IE issues, but also make your site render more uniformly over different browsers.
You might wanna take a look at this one: https://code.google.com/p/ie7-js/
or this: https://code.google.com/p/html5shiv/
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 :)
Can anyone tell me the best way to ensure asp.net sites look the same when view in IE, Chrome or Firefox?
I've just finished one which in testing seems fine in IE but not the other 2.
I have not used CSS on this site as its not that big, I just formatted the masterpage as I wanted it.
Could that be the problem?
I usually code for Firefox first. That makes things match almost 100% in Chrome, Safari and IE9 usually. Then I go through and test in IE 8 and 7. Minor adjustments are typically made within the same CSS file. For example, IE7 usually needs to have dimensions of a container explicitly set, where most modern day browsers don't require it and render things properly.
In those rare cases that you do need to style something specifically for one or more versions of IE, use conditional comments. Here are some good links on conditional comments and how to target specific browsers and versions:
http://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx
http://www.quirksmode.org/css/condcom.html
Unfortunately you will need to use CSS to get this to look similar in all browsers. I say similar as it is unlikely you will ever get it looking exactly the same.
Basically you will need to use the conditional CSS tags http://www.javascriptkit.com/dhtmltutors/csshacks.shtml
I would recommend spliting out the style to the a CSS and getting that working in Chrome and Firefox. Then use the tutorial linked and add in IE hacks to make it look better.
There isn't an easy way of making a site look the same in all the browsers. As caveman_dick said, maybe it's even impossible. You have to use CSS and sometimes javascript...
But to help you, you can use some programs that simulate different browsers engines, so that you could see how your site behaves. Just google browser simulator. :)
I dont understand why the HTML5 website I am working on is different in all browsers. I know it must be CSS, but I dont know what.
on Chrome: http://slackmoehrle.com/chrome.png
on Safari: http://slackmoehrle.com/safari.png
on IE 7: http://slackmoehrle.com/ie7.png
on FireFox Mac: http://slackmoehrle.com/firefox.png
the style sheet can be found here: http://slackmoehrle.com/css.css
Can anyone shed any insight?
Many are saying that browser detection is not a good method, but I dont see what to do to make this all work in the various browsers
UPDATE:
without using a CSS reset: http://slackmoehrle.com/test/without-reset/
with using a CSS reset: http://slackmoehrle.com/test/with-reset/
Have a look at using a CSS reset stylesheet
My personal favorite is Meyer's: http://meyerweb.com/eric/tools/css/reset/
The only real problem with browser detection is the fact that if newer version of browser will support some new features (rounded borders for example), but you still will be doing some workarounds.
Better approach is to use feature detection, so you will be able to use some specific browser capabilities if it has support of them and some graceful degradation pattern when something isn't supported.
For CSS most pragmatic approach is to have reset CSS included for all browsers, then have some common CSS rules which look the same in all browser and additional CSS files for different browsers which contain rules that should be different for different engines.
From my latest experience it's almost always possible to maintain only two versions of these DIFF files - one for Firefox, Safari, Chrome and another for IE family. And use feature detection for JS.
First of all, no version of IE can handle the new elements of HTML5 without javascript help. Only modern browsers can and IE is not a modern browser.
As far as the other browsers go, I'll have to look more but I've not had any issue with any sites I've done but, then, I don't use CSS resets and set all the CSS on the elements myself.