-1

I have a site.css and something similar to mobile.css. What I am building is a webpage where you can preview the app you've made. Imagine it like a site devided in half where one half has a panel with controls while the other one has the preview (div), curently designed as a mobile phone.

So what I am actually doing is a mobile phone on my site (preview), but the problem is that I dont know how to use the mobile.css file in the preview div only.

Is there a way to import a CSS file for one div (and its children)?

A simplified look of my page: https://jsfiddle.net/kc8rgde2/1/

<iframe>, <style scoped> or external CSS preprocesors are not an option.

EDIT: I kinda decided to go with SASS as it was the easiest to understand and Visual Studio had a nice extension for it.

Thank you for all the help.

Ales
  • 56
  • 6
  • For your question, and the requirements you have, I doubt there are any right answer... – Jacob G May 21 '15 at 14:48
  • How about re-loading CSS through jQuery? Make the selectors specific for `#preview-mobile` in that CSS, and (re-)load that on changes. – Mave May 21 '15 at 14:49
  • Can you give me a hint on how to do that? – Ales May 21 '15 at 14:52
  • Why can't you use iFrame, – Jacob G May 21 '15 at 14:53
  • iFrame - huge amount of problems with my models and angular Style scoped - not supported on most browsers CSS preprocesors - not my project so i am not really allowed to install anything – Ales May 21 '15 at 14:54
  • @Hopless http://stackoverflow.com/questions/2024486/is-there-an-easy-way-to-reload-css-without-reloading-the-page http://stackoverflow.com/questions/13721183/reload-css-stylesheets-with-javascript http://nv.github.io/css_auto-reload/ – Mave May 21 '15 at 14:57
  • Flagged there is no possible answer to this question based on your specification. –  May 21 '15 at 15:08
  • Well thats no what i am looking for. What I need is to apply the CSS from the mobile CSS file (mobile.css) to the phone, what you suggested is more like refreshing the content (which i am doing with angularJS) – Ales May 21 '15 at 15:14

2 Answers2

0

I had an idea. It could work, and it needs a lot of testing.Check this fiddle -> https://jsfiddle.net/kc8rgde2/2/

Basically, as you can see, in the fiddle there's no bootstrap loaded. I load bootstrap, and access the file using the CDN link from an AJAX request.

The response of the ajax, is the content of the bootstrap css file (minified version) - (check the console!)

What i do after, is replacing all the classes (dots) with ("#phonePreview .") and this prepends the phone preview div id to all the classes. 

$(document).ready(function() {   
   $.when($.get("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"))
  .done(function(response) {
    var res = response.replace(/\./g,'#phonePreview .')
    console.debug (res);
    $('<style />').text(res).appendTo($('body'))
});
})

Prepending the parent id means that the classes are applied only to #phonePreview children.

It's just a starting point, but with some work it could work!

Nick
  • 13,493
  • 8
  • 51
  • 98
0

If you want to use styles specifically for devices under a certain size you could use media queries:

@media only screen and (max-width: 431px) {

.myDiv {
style: style;
style: style;
}

#div2 {
style: style;
style: style;
}

}

max-width: 431px means devices that are 431px or lower in width. You could also use height and change it to min-width.

  • Well this is not the right answer as my mobile device would be displayed on a normal display and not a mobile one. But I already did what i wanted to do with a CSS preprocessor (which i didnt really want, but as long as it works so awesomely i have no problem :D) – Ales May 22 '15 at 11:57