Very new to CSS webkit animation, and very keen on learning it! And also plenty clueless!!!
So the couple of questions:
What is the best walkthrough/tutorial/official site for CSS webkits?
Do I need to install webkit before I can program it in my CSS files?
Thanks and regards!
Parijat
WebKit is a rendering engine, used in Safari and Chrome. If you have either of those browsers you don't have to install anything. They have several articles about animation on their blog, but I'd also encourage you to Google it because there are lots of other useful articles out there too.
I would recommend you to google for css3 animations.There are a LOT of tutorials. There is also one on w3schools.com. Read those to learn animations.
Webkit is a rendering engine and is used by chrome/safari. So instead of specific search for webkit, unless necessary, i would recommend you to go through searching for css3 tutorials.
For beginning, there are css3 animation generating websites, do look into those, they're helpful in visualizing dynamically what happens with changes in element values.
CSS3 animation generating websites : http://www.css3maker.com/css3-animation.html , http://css3generator.com/
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 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.
Filters like
img {filter:flipV;}
I'm guessing are pretty old, I just was asked by a colleague why they weren't working for him in FF. I assume they were an IE only thing that died out a while back?
Yes, it is IE-only. They didn't die-out, they were just a bad idea to begin with.
They were the only way to do some things in IE, for example PNG transparency in IE6...so they're still around. Web developers everywhere are hoping they die :)
Even in the latest jQuery UI files you can find it being used for Alpha transparency: http://dev.jqueryui.com/browser/trunk/themes/base/jquery.ui.theme.css
By no means are they gone...unfortunately. At this point, I'm hoping they don't stick something like this into IE9 and call it a "feature"...
You may find this article interesting. While filter is IE only, there is a Firefox equivalent (opacity) which is part of the CSS3 recommendation.
They are pretty old and work only in IE. Bad, don't use them unless you are targetting only IE (not good again). There are some things in CSS3 not supported by IE, you can sometimes use these filters to get around things.
For example, box shadow effect can be easily done with CSS3 but IE again does not support that, you can use these filters for IE and normal CSS3 for other browsers to create a cross-browser solution.
Recently I been doing some Web UI work, and it is frustrating to deal with all the compatibility issues, and the unexpected browser (FF, IE, Safari) behaviors.
Event bubbling
creating and destroying elements
dynamically adding elements with behaviors (that did not initially execute)
interacting with modals
z-index
I seek to understand how and why browsers work the way they do, and how they are built. Also any pointers or links about best practices. Thanks
I have a (pretty long..) summery on the subject in how browsers work. You can also see the resources list for other references.
Here's some informative links about how browsers work, and some information/guides about CSS and cross-browser compatibility:
How Web Browsers Work
How Web Browsers Work (less technical)
CSS and Browser Compatibility
CSS Compatibility Guide
And some detailed information about the specific things you're interested in:
Event Bubbling and Browser Information About It
Adding Elements to the DOM; Adding and Removing Elements Dynamically
Modals; Cross-browser Modals
z-index
Really, just use prototype or JQuery. The extra 12MB or so will drastically simply your development.
YUI theater has a bunch of great content. Watch the Crockford videos for more on Javascript / DOM issues.
YUI Theater
For CSS cross browser compatibility, a CSS Reset can help tame the madness a bit ("The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.").
As for inconsistencies with JavaScript bubbling, events, and behaviors, you could use a framework to help alleviate some of the pain. One of the goals of these frameworks is "write once, run anywhere [any browser]". JQuery is the most popular library at the moment. Google can help you find other frameworks.
As of right now I believe only Firefox support -moz-border-radius property. I am surprised that twitter uses it.
Are any other browsers planning on supporting this or does CSS3 have something like this in the works?
Edit: I also found -webkit-border-top-left-radius and then the CSS3 version
So when is CSS3 coming out?
CSS3 has border-radius.
For now, Mozilla- and WebKit-based browsers have experimental support, -moz-border-radius and -webkit-border-radius. It's not bad to use them now, as long as you understand they are temporary measures until they are properly implemented. I would expect it's not too long before you see full support for border-radius in Mozilla, Firefox and IE. (Well, hopefully IE.)
Update: as of August 2016, with border-radius being natively available in all native desktop browsers (and most mobile browsers, not to mention), the stringency of using -moz-border-radius, -webkit-border-radius and similar is being slowly relaxed.
Because the CSS3 spec hasn't been finalised, Mozilla and Webkit decided to implement their own method of rounded corners, doing it in the correct way, by adding the vendor-specific tag at the front.
This is done so that when the CSS3 is FINALLY released, should they change how border-radius is supposed to work (eg: the order of the parameters), then none of the sites using the vendor-specific methods will be broken. Mozilla and WebKit can just go ahead and implement the W3C style and developers can slowly move over to that.
It's not too surprising that you're seeing some websites using it, especially for something like rounded corners where it's not going to make a massive difference to the user experience. And I mean, it's just IE users who are missing out, and they deserve everything they get.
It bugs me when people talk about CSS3 coming out. It's not a complete spec like the previous ones. It has been broken up into separate modules that may increment their versions independently.
So Selectors Level 4 may make Recommendation before CSS Backgrounds and Borders Level 3 does.
So, will CSS3 arrive? Eventually, but not all a once. So don't wait for it, start using it now (where applicable).
CSS3 has something like this in the works.
According to this, IE 8 will not support border-radius.
Any CSS property that starts with a dash (e.g. -moz, -webkit) is a browser-specific property.
This allows browser vendors to experiment with new CSS properties. Doing so is a common part of the process for writing new CSS specs, to allow web developers to see how the properties work and raise issues.
Hence you’ll find a lot of CSS 3 properties, like border-radius currently implemented in some browsers with vendor-specific extensions.
There’s nothing particularly wrong with using these on production sites, as long as you’re aware they’ll only work in the one browser.
CSS 3 should be out any decade now :)
Browser-based properties are only meant for interim fixes for that particular browser, and are supposed to be deprecated when either the W3C adopts them into CSS, or not. I wouldn't rely on them to be cross-browser or even be kept for the particular browser.