Develop Reference

Method to check for css background-size support

I'm working on a site that primarily uses the background-size:cover property for the background. However I'd like to support IE 7/8, I'm aware I could use IE conditional comments but checking for the property support would be more useful since it could support other old browsers as oppose to just IE.
I have the solution to the background issue, but I need to know when to add it with js depending on if there's support for the background-size property.
My question is, whats the best method to check for css background-size property in old browsers?
I have seen a few related questions but they all require using Modernizer, I'd prefer not using an extra library unless its the only option.
Thanks.

if( 'backgroundSize' in document.documentElement.style) would be the easiest way to go about it.

CSS3 Javascript Library for Gradients?

Is there a way to create gradients using CSS3 and then - by using javascript (or server side?) - I will be able to support IE or other unsupported browsers? I mean - the js library will convert the gradient to PNG background..
Is there something like that?

I couldn't find a way to convert CSS gradients to PNG, I assume you'll have to construct them beforehand and display the correct background depending on the user-agent (i.e. PNG background for older browsers).
However, if you're looking for a way to create gradients in CSS3 for all browsers, try this website:
http://robertnyman.com/2010/02/15/css-gradients-for-all-web-browsers-without-using-images/
It will give you the recipe for gradients on all browsers.

Actually it is possible using the URL(data...) And passing base64 bitmap data defining your png on the fly as it were. See http://www.patternify.com/ for an example of this technique in action

I found also this cool tool:
http://www.colorzilla.com/gradient-editor/
It gives you the ability to customize a gradient (with a lot of features) and it supports all browsers! Cool!

Rotating an image

I'd like to rotate an image on a webpage through four orientations at 90 degrees apart. I'd prefer this to happen on the client machines. Can this be done using css? Or will I need to use JavaScript, I need to rotate a background image, a pattern which is repeated on the page.

#tada; you can use css3 rotate property as petah said
div{
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg);
-ms-transform:rotate(90deg);
}
& for IE you can use IE filter:
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
for more check these links:
http://snook.ca/archives/html_and_css/css-text-rotation
http://css-tricks.com/snippets/css/text-rotation/

CSS3 works, but my concern would be legacy compatibility. According to this matrix, it's not going to work on IE pre version 9.
ImageMagick is an obvious solution, but that's server side so it really doesn't solve your challenge.
I think I'd lean toward Jquery Rotate, which is a very well-done plugin that certainly maintains a simplicity advantage on the presentation layer over a pure CSS solution. On the basis of compatibility, it's quite a way ahead of pure CSS3 right now. <sarcasm>Thanks, Microsoft.</sarcasm>

You can using CSS3
Check out http://davidwalsh.name/css-transform-rotate
-moz-transform:rotate(120deg);
-webkit-transform:rotate(120deg);
-o-transform:rotate(120deg);
-ms-transform:rotate(120deg);
transform:rotate(120deg);

Is there a way to get border-radius and gradient backgrounds in IE?

I am wondering if there is any work-arounds using javascript or whatever to get IE to show border-radius or gradient background?

I came across this by looking for fixes to using 'gradients and border-radius' in IE9. And yes while its true you can now use both in IE9, you sadly cannot use them together.
The issue is documented in a a few places:
http://abouthalf.com/2010/10/25/internet-explorer-9-gradients-with-rounded-corners/
http://frugalcoder.us/post/2010/09/15/ie9-corner-plus-gradient-fail.aspx
IE9 border-radius and background gradient bleeding
The issue seems to be related to border-radius not playing nice with IE's old filter gradients. Sadly the release of IE9 did not bring proper CSS gradients.

jquery for at least the radius / corners item.
For gradient backgrounds see this.

You don't need to use jQuery for rounded corners, there are solutions that will make browsers behave well even in the event of javascript being disabled.
Check out http://css3pie.com/, provides a pretty simple solution (htc file) for making this work. As monn indicated IE9 gradient and radius don't work together. Css3Pie is intended to let you dev with css3 markup but provides backups for IE back to IE6.
There's also css3please and compass (for ruby).
This issue has recently been discussed in the HTML5 Boilderplate issue queue (HTML5 Boilerplate is a well-vetted collaboration to bring together the best techniques in modern web markup as a starting point for any platform).
https://github.com/paulirish/html5-boilerplate/issues#issue/354
Here's a demo of the problem & solution:
http://frugalcoder.us/post/2010/09/15/ie9-corner-plus-gradient-fail.aspx

This is quite new: https://github.com/bfintal/jQuery.IE9Gradius.js
Just include the script last in your head tag and it should handle the rest. See readme notes

Can an image be rotated by JavaScript without canvas or AJAX?

I've seen a few JavaScript image rotators that use either the HTML5 canvas element or an AJAX call to a server-side script, but is it possible to do it without using those methods? Internet Explorer doesn't support canvas (I'm aware of excanvas, but I'd like to do without if possible) and I'm not sure if AJAX will be fluid enough. If there is a way, are there any open source scripts, examples, or resources that you could point me to?

Alas, CSS does not support rotating images in any way, shape or form (unless you count CSS Transforms, which are only supported by Safari 4 and Firefox 3.1).
Your best bet is to use Raphael's image() and rotate(), which should support all semi-modern browsers (using SVG) and most versions of IE (using VML).

This jQuery plugin works in major browsers including IE: http://wilq32.googlepages.com/wilq32.rollimage222 . It makes use of excanvas, but at least it allows you to evaluate if that method is good enough for your purposes.

Yes, via CSS Transform:
var degree=180;
document.getElementById('image_name').style.transform='rotate('+degree+'deg)';

Google is your friend:
http://www.walterzorn.com/rotate_img/rotate_img.htm
But the downside of this technique (as mentioned) is that it uses hacks by inserting a huge number of DIVS so it could slow down the browser a good bit. Use with caution. Problems like this are why the canvas tag was created in the first place.