Q:

@import browser compatibility 2013

I've been reading up about responsive design and am going to start implementing a new CSS set-up on my site.  This has lead me to thinking about the best way to call all these different CSS files.  I'll have a different CSS for different screen widths. 
I am debating two options:

connecting to all the files from each web page with LINK tags.  My only problem with this is the ongoing maintenance (and having to add all these links to start with); I know this isn't the end of the world but seems a little bit intensive on the maintenance side. 
the other way would to have just one LINK tag on each web page, pointing at a 'feeder' CSS.  This 'feeder' CSS file would include all the links to my other CSS files using @imports.  This would mean maintenance would be a breeze.  I could add/re-order/delete the CSS files in just one place for the entire site.  Great!  

However this leads on to compatibility of the @import function [or lack of it in older browsers].  
I've looked around and the articles I've seen have been at least a couple of years old. 
So, to get to the nub: what percentage of browsers that are being used now [July 2013] support this and can I safely forget about the browsers that wont be able to interpret @import? 
If not, what can I do to keep maintenance of CSS files down to a minimum. ( Something more elegant than "find and replace on current site"). 

A:

Instead of worrying about @imports, you should just combine and minify all of your CSS files that cannot be served via a CDN:
<link rel="stylesheet" href="styles-84e599dcbd6c60fa0af76aaa18a5d75f.css" />

It'll load faster, use up less bandwidth, and will work on any browser that supports stylesheets. 
There are many ways to do this.  If you're not using any web framework (or are using Node.js), take a look at Grunt. 
As for your actual question, unless you're planning to support browsers older than IE5.5, @import will work just fine.  But I strongly recommend the minified stylesheet approach.