I am creating a mobile simulator that mocks the appearance and functionality of an iPhone (and other devices later) in a web browser, using 100% javascript, HTML5, and CSS, with the simulator fully functional with only client side code.
While trying to accomplish this task with as little modification as necessary to the original app projects themselves to be hosted in the simulator, I am injecting the <script> and <link> tags into the head of the page, then loading the html into a <div> screen.
The problem is that when I load in a new css file, it (obviously) overrides the one I'm using to style the page, and therefor some elements are affected (ex the background changes color).
My question is: Is there any way to limit the "scope" of an external .css file to apply only to objects within the <div> screen? Would it make any difference if instead of me injecting it into the <head> of the page, I inject it into a <style> element in the <div> screen?
UPDATE Support for this feature has been dropped. Please seek other options
Original Post:
You may want to look at scoped styles; see http://css-tricks.com/saving-the-day-with-scoped-css/.
The basic idea is
<div>
<style scoped>
#import "scoped.css";
</style>
</div>
However, you are on the bleeding edge here in terms of browser support. See http://caniuse.com/style-scoped.
One alternative would be to use an iframe.
Simply wrap all you css code inside the selector for parent element, say it's a div with id of foo you'd do the following:
div#foo{
//All your css
}
And convert it as less to css, it will prepend the right selectors. Note that you'll need to take care manually of things like #media queries and so on.
While writing this, the <style scoped> is deprecated by the Chrome team.
As a result I experimented with some approaches and released https://github.com/thgreasi/jquery.scopeLinkTags .
Note: you should only have to use this approach in case that you can't control the imported CSS file. If you can use SASS/LESS/anything to pre-process your CSS, you should prefer that.
A simple way is adding pre-class before all selector in css file.
I find a grunt script can do this:
https://github.com/ericf/grunt-css-selectors
This is how i do it if not using preprocessor in my project. Search for a online preprocessor then load copy paste the css under the parent class/id
.parent{
// copy paste here
}
Example
Find a preprocessor for example https://beautifytools.com/scss-compiler.php works very well for me (I have no affiliation with the given link)
if you are using from a URL add the URL using the load URL button.
Wrap the css code under parent and hit compile then minify.
I had a similar issue and found that Shadow DOMÂ can solve it easily.
let output = d.querySelector('#output')
let shadow = output.attachShadow({
mode: 'closed'
});
shadow.innerHTML = HTMLcontent // HTMLÂ content and style injected
Source
Related
Yii2 positions JS files at the bottom of <body> by default, and it can be changed via public $jsOptions = ['position' => \yii\web\View::POS_*]; setting.
But how to do the same for CSS? I would like CSS to be positioned right before JS scripts at the bottom of a page. Something like:
public $cssOptions = ['position' => \yii\web\View::POS_END];
But this does not work.
Reason for this is site optimization by recommendations of Google PageSpeed.
EDIT:
Looks like yii2 does not support it, but maybe there is some technic or extension that allows to keep AssetBundle's logic, and also gives an ability to choose desired position for CSS?
In yii 2, if you register CSS then it will be added in head tag only. you can't add it below body tag. If you will add manually then it is possible but there is one problem with this solution. The third party extension which you will install, they will register their CSS in the head. So, I will suggest you to add CSS at the head section :)
AFAIK it's not possible right now using $cssOptions or registerCssFile().
You need to add it manually in layout in desired position.
I am creating a small screen plugin that any user can implement on your website. It is similar to those chat rooms like Zopim and tawk.to, where the user takes a certain code javascript and paste on the website importing a box screen.
In my case, I am taking some precautions as:
Creating divs with unlikely names of someone using (id="____Plug___Box")
All the css of sub-divs, must first call the previous div and then the current div #___Plug___Box #BoxInside
But why am I doing this? because I have a little fear of an external CSS affect my plugin.
In my case I say to the user to implement my javascript code always in the bottom of the page (to stay away from that kind of thing), I'm doing the right way? Is there anything else I should implement in my code to prevent any interference of external CSS?
In the case of Zopim he seems to use css-inline, it would be a good thing?
User always can overwrite your code. But you can provide random id prefix and create all elements from js side. Also using inline CSS will help.
var idPrefix = 'myPl'+(Math.rand() * 1000);
$('<div/>', {
style: 'color: red;',
id: idPrefix+'-wrapper',
html: $('<span/>', {'class': idPrefix+'-header'})
});
I suggest using core classes for js manipulation and supporting classes for display that can be overwritten.
<span class="myPl-js-click-for-action myPl-css-color-red">Click this red text</span>
I have a large HTML page, which includes many CSS files.
When I try to debug that HTML page with Firebug, it shows more <div>s than what I see in source code. Also, there are some tags that are greyed out. In the pictures what is underlined with green color are elements that don't exist in the source code.
Why is that? Is it because CSS files are "including" those "new" <div>s?
I've never seen that CSS files can insert <div>s or <a>s into an HTML page.
Source code edited with Notepad:
Firebug does not change your HTML, nor does CSS add <div>s (though it can create pseudo-elements like e.g. ::before).
If the additional elements are not included in your HTML output, they must be created dynamically through a JavaScript on your page.
Are you using any libraries? If so, which ones are you using? Sometimes libraries add elements to perform whatever actions they were created to do.
These elements that you can see here, is the added elements by either JavaScript or any other library based on Javascript.
Ex:
suppose we have a div in HTML like this
<div id="example"></div>
and we have written a code,
<script>
$( document ).ready(function() {
$('#example').html('<p>example html</p>')
});
</script>
Then in this case if you check the source code you will get.
<div id="example"></div>
and if you check the same page using Firebug or Inspect Element you will get
<div id="example"><p>example html</p></div>
Hope its clear now.
I am editing a HTML website template, and I need to change the banner height so I edited external CSS. However, somehow it is taking an inline CSS height property so there is a space left in between.
Please let me know, if I have not written any inline CSS (and there is no inline CSS in html page), from where is that height property coming from.
Code I see in console is:
<div style="display: block; height: 445px;" id="camera" class="camera-wrap camera_wrap">
And my code is:
<div id="camera" class="camera-wrap">
<div data-src="images/Battery-Banner.jpg">
I have no idea why it is taking class camera_wrap twice.
Usually JS plugins put dynamic css that is calculated during runtime. It will be placed in inline style tag. Otherwise any static code will go to external css file. Try checking how plugin is calculating that height and than modify your HTML/css.
Try viewing the HTML source in your browser (not using inspect element, use view-source). This will show you the markup prior to any other client side processing aka. JavaScript. If the inline style isn't there when you view source then that indicates that it may be a rogue bit of JavaScript that is adding it in.
In any case can you please provide more information on the issue? Possibly a little more background on what type of website, what parts it has CSS, JS etc. With more information we may be able to help more.
If your source is showing 1 class, and when you are using inspect element it is showing other classes, then it is definitely added by js/jquery plugin.
If you want to overwrite other class css properties, either use !important in your class or use deeper dom traversing like #camera.camera-wrap{}. Than this will be given higher priority. Try which works for you.
Dumb question with a simple answer, I think.
I am building a site that has a completely different layout on one page from the rest. On one page, the design requires a liquid vertical layout, so I need the following code: *{height:100%;}On the other pages I just want the default height.
I tried to add a class to the html tag, which works in the html, but not in the CSS file. I tried:
*.myClass
and
html.myClass
but it doesn't seem to work.
I can't seem to find any info on this online. Is it even possible to add classes to the html tag?
I am using wordpress, so I can easily check to see which page I'm on and add myClass.
I guess I could also use #import to get a different style sheet based on the page I'm on, but that seems like a longwinded way of doing things.
How can I specify height:100% as a value of the html tag on specific pages only?
Can anyone point me in the right direction?
Thanks,
J
Perhaps .myClass, .myClass body {height: 100%}?
It is indeed possible to add a class to the <html> tag.
Live Demo (see code)
This will work, because I just applied this in one of my projects earlier today. :)
html,body {
height:100%
}
If you have pages that require the default height, then don't load this css style. You can place it in a separate CSS file.