I'm developing a website for a customer, and I've tested it with the major browsers on Windows.
Now I'm facing some little differences between Chrome Win and Chrome Mac (same version).
These are really minor things, but the customer spotted them, so I'm wonder.. there is some reset I can do via css to make the two version as similar as possible?
I think I've to work with the -webkit prefix of the browser default, do you know any good walkthrough?
I mean: there is some base .css I could use to reset Chrome and to force it to render as similar as possible even cross-platform?
Thanks!
UPDATE: the differences I mention involves mainly font-sizes letterspacing and something related with the height and line-height of the elements.
What you're running into is default browser css definitions. It's always a good idea to reset or normalize your CSS when starting a project so all browsers behave the same way with the base elements.
http://meyerweb.com/eric/tools/css/reset/ << reset. Sets all common CSS to 0. This one can be difficult to use since it means styling EVERY element you want to use. ie lists no longer have any default padding or list style.
http://necolas.github.com/normalize.css/ << Normalize gives you some default settings, but still tries to bring all modern browsers to the same starting point.
When it comes to prefixes really only some of the CSS attributes use them. There is a good explanation here: http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm
List of which browsers use which prefix:
Android: -webkit-
Chrome: -webkit-
Firefox: -moz-
Internet Explorer: -ms-
iOS: -webkit-
Opera: -o-
Safari: -webkit-
Also keep in mind some CSS properties need to be defined differently for older versions of IE using filters. Opacity is one of those.
Related
I have a small question, I am new to CSS and I have pretty stupid question. Why everybody add -webkit for Chrome and Safari, -moz for Mozzila Firefox and so on, I used just "transition:" and value and it worked on Mozzila, Chrome and Opera too. So what's the reason to add it?
Thanks.
that's for older versions of those browsers which only respond to the prefixed settings and are still installed on some computers.
Web world changes a lot, and before there was official support for CSS3 (such as the transition you are using), there were fallbacks, and shims to add these features specific to browsers.
The reason people would still use -moz & -webkit is to include support for older browsers. You should read up on the pains of doing this especially for internet explorer. So if you don't want to leave your ie9 customers behind, you should try and include appropriate CSS for them. transition isn't going to cut it for these browsers.
This question already has answers here:
Why do browsers create vendor prefixes for CSS properties?
(2 answers)
Closed 3 years ago.
I just downloaded a css file from this website and it contains properties such as -webkit-transform and -moz-transform. What does the dash mean and under what circumstances is it required?
For the nity grity does the phrase "vendor prefix" refer to the - or the content between the - and - (exuding the - and -) or the content between the - and - (including the - themselves)?
In other words does vender prefix refer to the dash itself or only the content between the dashes or the dashes with the content between them?
-webkit- and -moz- here are called vendor prefixes; they generally indicate a browser-specific feature of CSS, or one that’s under development/still a draft and can’t be considered a standard yet. When these features are used “ahead of time”, the only way to make it work in every browser is sometimes to provide a different rule with a different prefix for each one — that’s what you see in the project. The idea is that eventually, though, the feature will be standardized, browsers will drop the prefixes, and life will go on.
-webkit-gradient, for example, was the first way to define a gradient in CSS, but was replaced by a completely different linear-gradient and radial-gradient syntax.
A convenient way to find out what browsers support a certain feature and what prefixes you need if you’re using it before a definitive standard or global unprefixed browser support is Can I Use….
Some common prefixes are:
-webkit- for WebKit-based browsers, including Chrome/Chromium and Safari
-moz- for Firefox
-ms- for Internet Explorer (9 and up)
-o- for Opera (pre-WebKit)
They are called vendor prefixes. Different browsers have different prefixes:
-webkit- - Webkit based browsers such as Safari and Chrome
-moz- - Gecko based browsers such as Firefox
-ms- Internet Explorer
-o- Presto based browsers such as Opera
Vendor prefixes are used to denote experimental CSS features. They are used when a specific property or spec is not considered stable, and may change in the future. By using a prefix, the browser can experiment with that feature without the risk that developers will make use of the property and sites will break if the behaviour or syntax changes. Once the spec becomes final, the prefix is removed, and some browser will remove support for the prefixed version.
The official guidance from the W3C is that prefixes should be used until the spec from which the property or feature is from reaches Candidate Recommendation.
The general best practice is to use all vendor prefixes one after another, and the unprifixed version last.
Mozilla and Chrome (now they're moving to the Blink engine) have changed policy to hiding the feature behind a flag, rather than using a prefix. This means the feature will not be available to use unless the user enables that flag.
For more information, see this wiki page from the CSS Working Group: http://wiki.csswg.org/spec/vendor-prefixes
Do I need some special DOCTYPE when I want to use CSS3 ? I have div with dashed border and I want to set border-image (only can with CSS3), but when I set border-image:url(.., nothing happens.
Some browsers may only support CSS 3 features in Standards Mode, but a standards mode triggering Doctype should be considered business as usual and not "special".
Keep in mind that CSS 3 is a collection of specifications that have not yet reached recommendation stage. They are very new and browser support is far from universal (and isn't a binary state of 'supports CSS 3 or not' — the current versions of all the major web browsers support some of CSS 3 (for different values of 'some'). Your problem could simply be that you aren't using a browser that supports border-image.
border-image currently works in Safari
and Firefox 3.1 (Alpha). The syntax to
use it is:
border-image: url(border.png) 27 27 27
27 round round;
See demonstration page
CSS3 is not available on all browsers at this time. Right now, only Chrome, Opera, and Safari support it. CSS3 commands will not work on IE; you'll have to find other work-arounds or wait until browsers catch up with the standards.
Most likely the border-image did not show up, because you didn't use the correct prefixes.
Right now, just "border-image" is not supported by major browsers, hence you need to add the prefix for the browser.
E.g.
-webkit-border-image
-moz-border-image
-o-border-image
-webkit - for WebKit-based browsers such as Google Chrome and Safari
-moz - for Firefox
-o - for Opera
You do not need a specific DOCTYPE, but border-image is only supported in some browsers. You can also use:
-webkit-border-image
-moz-border-image
-khtml-border-image
-o-border-image
to broaden the range of support for browsers. CSS3 has not been implemented as a standard across all current browsers, so using specific CSS tags is the best way to go for now.
Support is very limited and inconsistent across the browsers that do support it. Check Quirksmode (bottom of the table) to see the bad news http://www.quirksmode.org/css/background.html
I've noticed that Safari and Chrome behave the same when it comes to HTML and CSS. However, there are differences between Firefox and Safari (and hence, Chrome as well).
Sometimes things can look great in Firefox, but the CSS misbehaves in Safari and Chrome. The cause of the mis-behaviour can be attributed to "anything" (as opposed to in IE 6 and 7, mis-behaviours are usually caused by excessive paddings/margins that cause elements to float out of position). For example, while debugging CSS of a website for Safari the following attributes have caused cross-browser misbehaviours:
position
height
width
padding
margin
Is there a common pattern to Chrome and Safari CSS debugging?
Can you guys offer insight into the differences between Safari and Firefox that may help me with my cross browser debugging?
Thanks
Typically, and anecdotally, the majority of large differences between cross-browser rendering of the same page are due to:
invalid (x)html, use the on-line html validator from the W3 to ensure the validity of the mark-up.
lack of establishing a base-line for CSS (as #Jeroen suggests: use a css reset).
use of CSS which varies in support from browser-to-browser, particularly the newer CSS 3 (transitions, column-count and box-reflect1 particularly, though there are many, many others).
This may, or may not be, a proposal for inclusion in CSS3 by the World Wide Web Consortium, the only references I've found for it are exclusively with the -webkit vendor prefix, which suggests that it's probably a proprietary extension. I can, however, hope that others will follow suit. It's so much easier to apply reflections with css than with js/php...
I have noticed differences, but not that dramatic. As usual, most differences can easily be overcome / avoided by using a css-reset. Do you use one on the pages you are talking about?
This css difference is because, there is a default styles difference for firefox and chrome browsers. click this links for default css sheets
http://hg.mozilla.org/mozilla-central/file/tip/layout/style/html.css
http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
While developing the webpage itself we have to make sure of overriding this default styling commonly for both browsers. using the browser extensions like -webkit and -moz etc..
After development and in debugging state, we need to override this default styles. I don't think we have any common debugging for this. correct me if i am wrong.
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.