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.
Related
I'm making a tutorial website. Some HTML, CSS, and JS is presented and then in a box its result is shown - basically what Codepen does. I've been just storing a separate doc in a demo directory and then using an iframe on the tutorial page; is there any way to do this inline? Something like:
<style>
p{color: red;}
</style>
<demo>
<p>text</p>
</demo>
and have the paragraph render inline, ignoring the color: red that was specified in the parent page CSS. It's just cumbersome editing a separate file and using iframe and I guess Codepen is a little more convenient but it's an extra thing to embed. I would appreciate any help.
I have a question about how content-hiding feature is implemented on thefreedictionary.com site.
I don't understand how does it work.
If you visit the following URL with AdBlock enabled,
http://encyclopedia.thefreedictionary.com/stack+overflow
the main content will be hidden.
Even if JavaScript is disabled (I'm using "NoScript" FireFox add-on), the main content will still be hidden.
Let's look at the main content div:
<div id="content" class="yt">
The path to this div is the following (the image is clickable):
Please note that the class name (yt in my case) is different on every page refresh, so your class name may contain another 2 letters.
By looking at "Rules" and "Computed" tabs in Firefox Developer Tools we can see that .yt class has its display attribute set to none.
It is easy to check that it is this checkbox that controls the visibility of main content.
My question is: Where does this css line come from?
It looks like a css data URI, but I can't find data URIs in html file.
The html file refers to "all.css" which also does not contain setting .yt display to none.
JavaScript is disabled, so display property could not be changed dynamically by a script.
I'm interesting, what trick is being used here.
Could someone explain please?
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
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.
I am using a cms system that allows me to write html in a source box, a bit like wordpress. There is a div currently showing on my site that i cannot directly access the html or css of so i am un-able to get rid of it. Is it possible for me to write something with html that will allow me to hide this div ?
You can try using document.addEventListener inside a <script> tag to change the properties of the interested <div> block after the page is completed loaded.
Considering your below line:
.......css of so i am un-able to get rid of it.
lets say id of div is div1 then on the main HTML page which you have access to, add below lines :
<style>
#div1 { display:none }
</style>
Not very sure on this but logically this should work!!