CSS Conditional Use of @import

Say I have 2 separate CSS; desktop.css and ipad.css Now desktop.css is already called across 100 diff HTMLs and I want t开发者_开发知识库o apply a new ipad.css on these 100 htmls now. Now in desktop.css, can I use a @import at the top saying

@import "ipad.css"

Then in ipad.css, I use a @media check for iPad using

@media only screen and (device-width : 768px) 
{  
/* All iPad style definitions here */
}

My question is;

1. Is this approach fine and will it work i.e. sepearte CSS will get applied to desktop Vs iPad?

2. Since I am writing @import, will the ipad.css get loaded always even if it is desktop and will that have a huge impact on performance (page loading)

Please suggest any other approach (except using link media=.device-width..) since I do not want to update anything within the html page itself.

Thank you.

Is this approach fine and will it work i.e. sepearte CSS will get applied to desktop Vs iPad?

No. It makes the assumption that the iPad and only the iPad will have a device-width of 768px.

Since I am writing @import, will the ipad.css get loaded always even if it is desktop and

The media query is inside the imported file so the file will have to be loaded because the browser can be aware there is a media query.

will that have a huge impact on performance (page loading)

There will be an additional HTTP request. However much data is in the file will have to be loaded. 'huge' is a relative concept though.

Please suggest any other approach

Apply the media query to the @import statement itself.