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.
Related
Is there anyway to check if a given CSS property is supported? For example, I want to do an animation on a page using perspective-origin, but if not available I would just alter the size instead.
there are many css-hacks for browsers but for that you need to handle yourself each css property for all browsers
CSS Hacks
but if you want automatically handled all the browser for CSS3 and html5 then use Modernizr
Supported browsers
It support IE6+, Firefox 3.5+, Opera 9.6+, Safari 2+, Chrome. On mobile, support iOS's mobile Safari, Android's WebKit browser, Opera Mobile, Firefox Mobile.
Use http://caniuse.com/ website to check how your property is supported by different versions of web-browsers. You can load different styles according to client's browser version.
Also, you can emulate not-supported properties in old browsers by using CSS3PIE (http://css3pie.com/).
you can include modernizr.js which will be helpful for your issue.
you may visit the following link which was helpful when i was learning about it.
http://css-tricks.com/video-screencasts/126-using-modernizr/
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.
I am a little new to CSS and CSS animations. I am tired of optimizing my webpages specifically for IE (all versions). Is there some javascript library of something of the same sort that can enable CSS -webkit syntaxes in IE?
I find it easy and good designing for webkit browsers like chrome but IE needs special focus.
Thanks in advance.
The Internet Explorer 10 supports some more CSS3 features. Did you to obmit the prefix? If this doesn't work there is nothing you can do. You may need to wait for the Internet Explorer 11.
However I would not recommend to concentrate your work for the IE. Better try to make run your app on Firefox, Safari, Opera and co.
Have also a look to the blog post Adapting your WebKit-optimized site for Internet Explorer 10 by Microsoft.
have a look at css3pie.com it can render as from IE6. Hope this helps you.
I have a question regarding css3 animation. I know that it works well in all browsers except Internet Explorer(IE-7/8/9). How can I make it work in the older versions of IE as well?
You may find useful cssSandpaper – a CSS3 JavaScript Library.
Similar to disabling JavaScript in browsers, is there a way to disable support for various CSS3 properties in Firefox or Chrome to quickly confirm a page is rendering OK if support for certain properties isn't there? I know it's only a presentation layer, but I'm just hoping there's a more efficient way to test against this without using old browsers, especially if Modernizr is being utilised.
A project called deCSS3 manages to disable a large majority of CSS3 properties through the use of a bookmarklet that overrides and neutralises their usage with !important rules.
A recent addition to the project is "Modernizr class toggling" for an added level of testing when Modernizr is utilised.
Even if there were a way to do so, would it help? Each browser has its own quirks, so there is no guarantee that e.g.:
Firefox - CSS3 = Older Browser
CSS3 isn't a set of additions to CSS2, it replaces CSS2. The backgrounds and borders module in CSS3 includes border and background as well as border-radius and box-shadow. If you 'turn off' CSS3 you turn off all CSS, and even if you could disable the new stuff Tom's answer is correct - that wouldn't leave you testing anything that actually exists in the real world.
If you need a way to "turn off CSS3" then I don't think you're thinking about/implementing progressive enhancement/graceful degradation properly. You should be starting with non-CSS3 stuff, then enhancing your site with it. When you build the non-CSS3 foundation and test it in your target browsers, then adding CSS3 shouldn't change anything (browsers ignore styles they don't recognize). If you sandbox your CSS3 in its own stylesheet, then you can tell old versions of IE to completely ignore it (or, if you're using stuff that's only partially supported in IE9, can tell all versions of IE to ignore it) to save a download.
That said, CSS is handled by the core rendering engine, so in order to view a page without CSS3, you have to view it in a browser that doesn't support CSS3. It sucks, it means you have to have several browsers, and even virtual machines (or physical machines) to test very well, but such is the state of web development, unfortunately. Theoretically, you should be testing in several browsers, anyway, and already know that IE6-8 have their own quirks that don't even relate to CSS3, and should already be set up to test them (so, therefore, if you need to test old versions of other browsers, you can install them in your IE test environment).
There's a useful add-on for Firefox called "User Agent Switcher" which allows you to bump your browser rendering down to an older version of IE (the iPhone rendering is also pretty useful). That should help you double check.