We Keep Coding

Is inbuild use of javascript in css

I have heard that HTML5 uses some sort of javascript within... Does CSS3 also does that, I don't think the transitions can work otherwise..
Reason of asking, I don't want any javascript in my CSS part.. I am trying to build a pure css library like pureio and bootstrap, they both contain javascript also although..

HTML5 doesn't have any javascript within as such.
Some new elements when implemented by the browser may however have some of the HTML5 features rendered using JS or at least provide a JS API as per specification.
Like any other HTML version prior that, otherwise we wouldn't be able to bind events or control HTML elements via Javascript.
And for CSS no, of course not there is no JS dependencies. How would CSS work when JS is disabled?
And remember browsers have access to the all computer power. It wouldn't make a lot of sense to ignore that and do everything in Javascript.

Performance and DOM Loading using vendor specific prefixes for CSS3

I've been curious for a while with this now.
The css3 properties are not yet standardized, yet can be implemented by browsers, using a prefix for the particular browser.
For example, border-radius can be used, and it works fine on modern browsers. However, for previous versions of the browser vendors, we can use the vendor specific properties like -moz, -webkit, etc. prefixes to work.
Now, for my page, I have used gradients and border-radius, made a couple of classes that use them and applied these classes throught.
Which of the following is better to do?
Using javascript to find whether the support is there, and use the properties if they are supported, if above is false, check the user agent and apply vendor specific properties accordingly.
Using all the browser prefixes in the classes and let the browser use whichever suits it.
What I am curious and concerned about, is the performance and time for DOM loading.

Which of the following is better to do?
Using javascript to find whether the support is there, and use the properties if they are supported, if above is false, check the user agent and apply vendor specific properties accordingly.
Using all the browser prefixes in the classes and let the browser use whichever suits it.
Option 1 consists of using JavaScript to detect support, then conditionally writing out the CSS code with or without the prefixes and letting the browser apply the styles.
Option 2 consists of simply using CSS and relying on the browser to ignore prefixes/declarations it doesn’t understand.
As you can see, option 1 introduces an extra layer (JavaScript) which is not necessary if you just want to use some CSS3 features where possible. Option 2 will be the most performant solution.

As always with this kind of question, the answer is - it depends. It depends on which prefixes you're using, how often they occur in the HTML, which browser you're testing against, etc.
The solution is to write the code, profile it, and find out. Very often, you will find that the performance is acceptable either way.

I use option 2 - add all the browser prefixes (as well as the non-prefixed version) to the CSS:
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
Browsers will skip declarations they don't understand without any problems (although your CSS won't validate) while still applying the styles. It's probably best to use a CSS generator to avoid having to type out every prefix.
You should avoid using Javscript to detect CSS features since this breaks separation of concerns - CSS is for presentation and Javascript is for behaviour.

detect css transitions while javascript is disabled

I have been using modernizr with javascript to decide whether css transitions is available, but is there a way to check if css transitions are working, without using javascript?

I think the only scenario where that would make sense is a browser without CSS animation support and with JS disabled. There you could display some message like "Please upgrade your browser or enable JS."
You could try server-side UserAgent sniffing there, but I wouldn't recommend it. First of all, it's not reliable and second it's simply not worth the effort. Anyone using such a browser is used to limited functionality.

Do something if web browser is IE, in JavaScript

Where do I place this script in my HTML for it to work? And what changes do I have to make to it?
<script type="text/javascript">
var browser=navigator.appName;
if(browser="Microsoft Internet Explorer")
{
document.getElementById("html").innerHTML="\
<body><p>Your browser is IE.</p></body>";
}
</script>

Could I make a slightly alternate suggestion, skipping the spoofable UA string, and using a Microsoft-implemented (and standards-compliant) strategy:
<!--[if ie]>
<script type="text/javascript">
document.getElementyId("html").innerHTML = "<body><p>Your browser is IE.</p></body>";
</script>
<![endif]-->
To use this put it in the head of the document. I don't think it can be placed inside script tags (since it's based on html comment syntax, not JavaScript).
This uses conditional comments (Quirksmode.org link).

If at all possible, I would suggest avoiding direct browser detection.
Almost every case where someone wants to detect a specific browser (usually IE), it is because there is a particular feature that they want to use which isn't available in that browser, or has bugs.
But browser detection fails as a strategy here for a number of reasons:
You don't know whether a future version of that browser may correct the problem, in which case your code to fix the issue may itself cause problems.
If another browser also has a problem with that feature, you would have to detect that browser as well. Taken to the logical extreme, since no two browsers have exactly the same set of features, you end up having to detect every possible combination of browser, version and operating system.
Browser detection is virtually impossible to guarantee to be accurate. Most browser detection scripts are based on hacks that trigger quirks that only affect a particular browser, and most are pretty un-reliable.
Even just IE detecting isn't good enough. There is a big difference between IE6, IE7 and IE8. And IE9 is just around the corner, which will be massively different again.
So what should you do instead of browser detection?
Detect the feature. There are a number of ways of doing this, but the best solution I know of is a script called Modernizr. Place this script in your site, and your page will be given a bunch of CSS classes and Javascript properties which you can use to determine whether a given feature is available or not.For example, if you want to use gradients on your site, most browsers can use CSS for this, but IE and older versions of other browsers cannot. For these browsers you easily can use a background image instead. Modernizr will give you a CSS class of either cssgradients or no-cssgradients, and you can style these two classes accordingly.
Add the missing features to the browser. This is more tricky, but for certain features it can be done, particularly for IE. A good example is CSS3Pie which is a hack that allows IE to use the CSS border-radius feature (and one or two other features too) which is available in all other browsers. There are whole range of other little scripts like this which can improve the functionality of IE.
Use a library like JQuery which does all this work for you. With JQuery, you can be much more confident that most of your Javascript code is going to work across all browsers.
If you must use browser detection to tell if the user is running IE (and I accept that there are some occasions when it is necessary), then use conditional comments, as per #David Thomas's answer. But do so sparingly, after considering any other ways around it.

if(browser=="Microsoft Internet Explorer")
== for comparison, = for assignment
Place it in the head tags.

Detect support for multiple background images?

I really want to make use of multiple background support (Webkit, Firefox 3.6+), but I would like to provide an alternative solution for browsers that don't support it. (IE, Firefox 3.5-).
Is there any way to detect support for this CSS feature? Or will I have to resort to browser sniffing?
EDIT: Javascript solutions are welcome

I know this is a relatively old question but I thought I would add a JS snippet that can be used to sniff this. The code is taken from the Modernizr source but has been modified a bit:
function multipleBgTest(){
var el_style = document.createElement("div").style;
el_style.cssText = 'background:url(//:),url(//:),red url(//:)';
// If the UA supports multiple backgrounds, there should be three occurrences
// of the string "url(" in the return value for el_style.background
return new RegExp("(url\\s*\\(.*?){3}").test(el_style.background);
}
If the function returns true then it is supported otherwise it will return false.

Use http://www.modernizr.com/. This is a piece of javascript that will set up classes depending on what features the browser have. You can then use these classes in CSS.

No there is no way in pure css to detect if multiple backgrounds are supported. But you can specify default background and then specify multiple backgrounds which resolves error with processing value and keeps old if it isn't supported.