-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.

Improve this question
8
  • For your question, and the requirements you have, I doubt there are any right answer... Commented May 21, 2015 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. Commented May 21, 2015 at 14:49
  • Can you give me a hint on how to do that? Commented May 21, 2015 at 14:52
  • Why can't you use iFrame, <Style scoped> or external CSS preprocesors ? i assume you also cannot use object Commented May 21, 2015 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 Commented May 21, 2015 at 14:54

2 Answers 2

Reset to default
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!

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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.

Improve this answer

1 Comment

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)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.