Question

Say I have an existing CSS for desktop (desktop.css). I want to include iPad Safari css.

In desktop.css, can we just do a condtional import at the end..

@media only screen and (device-width : 768px) 
{  
@import "ipad.css"
}

In ipad.css, we will have only iPad relevant styles..
/* iPad Styles */

i.e. if it is an iPad user, the ipad.css would get imported, else it would be ignored.

What is the best approach?

Answer 1

In desktop.css, can we just do a condtional import at the end..

Actually, no, @imports have to come before any other style declarations.

But in your case, if you import your iPad styles at the beginning they’ll probably all get overridden by your desktop styles. So you’re better off using another <link> element with that media query and pointing to your ipad.css instead:

<link rel="stylesheet" media="only screen and (device-width: 768px)" href="ipad.css">