I'm trying to understand how and where ionic 4 is injecting the styling for the web components into the dom. I'm not interested in changing it via the CSS variables but I want to be able to inspect the component and see where the styling is coming from. For example on https://ionicframework.com/docs/demos/api/alert/index.html?ionic:mode=ios
If you inspect the button:
I can see the stlying being applied but I can't see where all the styling is coming from, it's not in the css bundle, style tags on the page or directly on the element or applied to the shadow-root. Normally the host styling is part of the component e.g.
So where is the :host styling being defined and how/where is it being injected into the DOM?
So as far as I know all the styles you apply to your component are usually set innerHTML. You already found the style tag which is the first tag after the component. This is super full with stylings as always thats why you usually see just a snippet. That depends on the browser but to see all the stylings you may have to do a double click into the stylings between the style tags.
Usually when I want to read something like this I copy it into my editor and take a look there:
As you can see all your stylings are defined there. Stenciljs also load some general stylings to make sure everything looks proper. These are instantiated into your head section:
So I think Ionic 4 is using: https://developers.google.com/web/updates/2019/02/constructable-stylesheets
Which is why the styling isn't visible directly in the DOM. Credit to Fraser for working this out.
Normally css files are put inside <head></head>, what if I put it inside <body></body>, what difference will it make?
Just to add on to what jdelStrother has mentioned about w3 specs and ARTstudio about browser rendering.
It is recommended because when you have the CSS declared before <body> starts, your styles has actually loaded already. So very quickly users see something appear on their screen (e.g. background colors). If not, users see blank screen for some time before the CSS reaches the user.
Also, if you leave the styles somewhere in the <body>, the browser has to re-render the page (new and old when loading) when the styles declared has been parsed.
The most recent versions of the HTML spec now permits the <style> tag within body elements. https://www.w3.org/TR/html5/dom.html#flow-content
Also the scoped attribute which used to be prerequisite to have a style tag in the body is now obsolete.
This means, that you can use the style tag everywhere you want, the only implications are decreased page performance due to possible reflows/repaints once the browser hits styles further down in the page tree.
Obsolete answer:
The <style> tag isn't allowed within <body> according to the w3 specs. (You can, of course, apply inline styles via <div style="color:red"> if necessary, but it's generally considered poor separation of style & content)
Putting CSS in body means it is loaded later. It is a technique some use to let the browser start drawing the interface faster (i.e., it removes a blocking step). This is important for user experience on SmartPhones.
I do my best to keep one small css on the <head> and I move the rest at the bottom. For example, if a page uses JQuery UI CSS, I always move it at the bottom of the <body>, just before the links to JQuery javascript. At least, all the non Jquery item can already be drawn.
Head is designed for (Quoting the W3C):
"information about the current
document, such as its title, keywords
that may be useful to search engines,
and other data that is not considered
document content"
See the Global structure of an HTML document. As CSS is not document content, it should be in the head.
Also every other Web developer will expect to see it there, so don't confuse things by putting it in the body, even if it works!
The only CSS you should put in the body is inline CSS, though I usually avoid inline styles.
The standards (HTML 4.01: the style element) clearly specifies that the style tag is only allowed inside the head tag. If you put style tags in the body tag the browsers will try to make the best of it anyway, if possible.
It's possible that a browser would ignore a style tag in the body if you specify a strict document type. I don't know if any current browser does this, but I wouldn't count on all future versions to be so relaxed about where you place the style element.
Although the style tag is not allowed in the body, the link tag is, so as long as you are referencing an external stylesheet, all browsers should render and use the CSS correctly when used in the body.
Source: https://html.spec.whatwg.org/multipage/semantics.html#the-link-element
In addition to earlier answers, though putting a style code block inside the element may work in modern browsers (though that still doesn't make it right), there's always a danger, particularly with older browsers that the browser will render the code as text unless the style section's included within a CDATA section.
Of course the other thing with putting it inside the element, other than inline styles, is that as it doesn't meet with the W3C HTML/XHTML specs is that any page with it within the body will fail on the W3C validator. It's always easier to bug-hunt unexpected display problems if all your code is valid, making it easier to spot mistakes. An invalid HTML element can adversely effect the rending of any and all element beyond where it occurs in the code, so you can get unexpected effects having elements in places where they shouldn't be, because when a browser finds an invalid element, it just makes it's best guess as to how it should display it, and different browsers may make different decisions in how they render it.
Whether you use a transitional or a strict doctype, it would still be invalid according to the (X)HTML specs.
Two conflicting answers:
From MDN page on link tag:
A <link> element can occur either in the <head> or <body>
element, depending on whether it has a link type that is body-ok. For
example, the stylesheet link type is body-ok, and therefore a
<link rel="stylesheet"> is permitted in the body. This isn't however
best practice; it makes more sense to separate your <link> elements
from your body content, putting them in your head.
From CSS The Definitive Guide (4th Edition/2017) page 10
To successfully load an external stylesheet, link must be placed inside the head element but may not be placed in any other element.
You would actually defeat the purpose of using CSS by putting the styles in the body. The point would be to separate content from presentation (and function). This way, any changes to style can be done in the stylesheet, not in the content. Once you use the inline style method, every page that has inline styling needs to changed one by one. Tedious, and risky since you could miss a page or three, or ten.
Using a stylesheet, you only need to change the stylesheet; the changes propagate automagically to every HTML page that links to the stylesheet.
neonble's point is also another great reason; if you mess up the HTML by adding CSS inline, rendering becomes a problem. HTML doesn't throw exceptions to your code. Instead it goes out and renders it the best way it can, and moves on.
Adhering to web standards by using a stylesheet makes for a better website. And when you need help because things on your page aren't exactly that way you want them, placing your CSS in the head as opposed to the body makes for much better troubleshooting by yourself and for anyone you ask for help from.
The difference is.
The loading of the page is asynchronous, so if you have external stylesheet it will load the css file immediately when it reach the link tag, that is why it is good to have at the top in head.
What difference will it make?
Pros: Sometimes easier to apply certain attributes in certain places, especially if code is being generated on the fly (such as building via php and each of a dynamically sized list needs its own class... such as for item timings for transforms).
Cons: Slightly slower, may not work someday in the distant future.
My General opinion on it:
Don't do it it you don't have to, but if you do have to, don't lose any sleep over it.
Putting the <style> in the body works well with all modern browsers.
I had been using this in eBay.
If it works, don't kick it.
I would like to be able to prevent a CSS file from applying to the inside of a DIV tag.
The CSS file is included in the <head> section of a HTML document. I cannot remove the file or change it. All I have control of is the inside of that DIV tag. The HTML document is generated with MediaWiki, so I'm not allowed to use iFrames. I cannot host my content anywhere else, but I can take external resources such as CSS and javascript, upload them, and include them in the inside of my DIV.
Currently, I have Jquery, and I can include all sorts of external libraries.
Using jQuery to find the <link rel="stylesheet" href=...> and then .remove()ing it does work, but that messes up the rest of the page, which I am prevented from doing by a LOT of red tape.
Is there a way to "javascriptically" do something to the stylesheet such that it applies only to anything that's not inside my DIV? Maybe using the :not() selector?
I have no idea, and I have never touched the not selector before. Please help. Thank you.
You can't make prevent CSS from applying to a part of the document, even if you could change it (which is doable with Javascript as long as you don't care about users with no Javascript). You have two options basically:
Override the CSS. Probably the least painful way is to take some CSS reset stylesheet and prefix every rule so that #1 it only applies to your div, #2 it has high enough specificity to override all MediaWiki rules. You can then apply your own styles on top of that.
Make the div not part of the document. You could create an iframe in Javascript and move the contents of the DIV there. (Shadow DOM would be a nicer approach but there is not much browser support yet.)
I am using a python library to convert HTML page into PDF.
It does it correctly, except it only handles inline styling. It does not reflect the styling applied to DOM elements using external style sheets.
So, as a solution I am thinking of adding those CSS styling from all the external CSS stylesheets into the head tag of the html file and then send it to get converted into pdf.
But, I am not sure how? Can anyone give me any ideas or atleast suggestion on how to go around fixing that? Or, if they know a better solution.
Much appreciate
Is the python running outside or client-side? You can examine the solution here # http://www.xportability.com/XEPOnline/FOTestSuite.html. While this does a lot more, you can reach through that page to the included Javascript. Look for flattenstyle.js for inspiration.
Because our handling is different, we actually copy a selected div element to another hidden div and "flatten" the style by extracting styles we want. What you could do is run such a javascript on page load and save out the div and not destroy it, then you have most all the print styling in the HTML.
Normally HTML page contains following tags
<script>
<link>
<style>
I found number of times that changing the sequence of those tags, mess up with page layout.
So what would be the reason and what are the points to avoid this situation?
EDIT
After looking the answer of #Anurag, I'm actually assuming that we don't have a case where we have two definition of the same css class, in different style or link tag.
My major concern is css and script sequence. Whether we should have all the css class before we write any JavaScript or it doesn't matter at all (that I don't think).
For example jqtouch floaty extension.
In that if I define the .floaty class before the JavaScript tag, then it don't work.
Hope you get my point.
The order of the <link> and <style> tags is most important in this case.
The <link> tag(s) will hold the reference to your style sheets, where you defined most of your page layout.
The <style> tag will define exceptions or additions on the definitions made in your style sheets.
So, you first need to know what's the default, before you can add something or make an exception on it. That's why the <link> tag(s) should appear before the <style> tag(s).
The style definitions (sheets and inline) are applied in sequence. The last definition overrides previous definitions.
Then we also have the <script> tag(s). These have nothing to do with messing up your layout.
As a rule of thumb, I always declare them after my <link> tags. Why? First show your visitor a nice looking page, the scripts should be used to support additional functionality.
I can't tell you specifically without seeing more of your HTML. However, if I may make a recommendation, I would suggest not inlining any of the style or scripts into your HTML. There are a number of reasons why you don't want to do this, but other articles and websites do a much better job of explaining why you don't want to.
And, by not inlining, it may fix the problems you are currently experiencing.
Order is important for all of these tags.
<script> tags are executed sequentially unless using the async or defer attributes, so a script tag that appears later in the page can override the functions/variables/.. that were previously declared.
Likewise stylesheets are applied sequentially and have specificity rules about how to handle conflicts etc. For instance, the style attribute takes precedence over everything and if a style appears later, then it overrides the previous style. For instance,
<style>
.page {
background-color: #CCC;
}
</style>
<style>
.page {
background-color: #222;
}
</style>
The color of the page will be #222.