I know I can just put the <link> tag in the body and apparently it works, but I know it's not "valid" html and I want to avoid issues with strict browsers like firefox, which ignore every behavior a web designer expects if it's not defined in the official specification.
So is there some official way to load a stylesheet in the body area of the html?
You can add your css in the head dynamically as well like below:
jsCode:
var head = document.getElementsByTagName("head")[0],
cssLink = document.createElement("link");
cssLink.href = "path/to/filenam.css";
cssLink.id="dynamic-css";
cssLink.media="screen";
cssLink.type="text/css";
head.appendChild(cssLink);
document.head.appendChild( linkElement );
…where linkElement is your style link. Nobody's forcing you to add stuff to the body, just add it to the head.
It is valid to link to a stylesheet in the body
The stylesheet keyword may be used with link elements. This keyword creates an external resource link that contributes to the styling processing model. This keyword is body-ok.
https://html.spec.whatwg.org/multipage/semantics.html#body-ok
https://html.spec.whatwg.org/multipage/links.html#link-type-stylesheet
Actually in older versions of HTML it was illegal to put a link element in the body element and must be only in the head section of the HTML document. From this link, there is a section that states this
it may only appear in the HEAD section of a document
So, just simply load the stylesheet into the head element, there is no possible reason for you, or for anyone to write illegal documents that do not satisfy the rules of W3.org.
<head>
<link rel="stylesheet" href="~/css/file.css" />
</head>
However, there is another question that you might be interested in reading, and in which condition you can add link element to the body section. Read the answer here.
Related
This question already has answers here:
Does <STYLE> have to be in the <HEAD> of an HTML document?
(10 answers)
Closed 9 years ago.
So first off, I know that the <link> tag to link a CSS external style sheet should be in the <head> section, and that it is very unorthodox to place it outside the head.
However, I am using head and footer includes for modular web design, and there are some CSS stylesheets which apply to certain pages and not others.
Having placed some <link> tags within the <body> section of a certain page, thanks to the sweet accommodation of modern browsers I have so far experienced nothing wrong except in IE.... but, personally I don't care too much about IE at the moment.
So, apologies to the HTML purists, but I must ask: what negative consequences are there for linking CSS external stylesheets outside of <head>?
In my research, people have usually just stuck to referencing w3schools as stating "link your CSS stylesheet in the head", but not elaborating too much on why: Do <link href=""> tags only go in the <head> tag?
"Validity" is given as one answer, but what does that entail? Search engine friendliness? I don't see any benefit to me if search engines read my stylesheets or not...
Quoted from the HTML 4.01 Specification
This element defines a link. Unlike A, it may only appear in the HEAD section of a document, although it may appear any number of times.
The HTML5 specification however does not mention the tag must appear in the HEAD section. So if you use them inside the body make sure you use the HTML5 DOCTYPE e.g.
<!DOCTYPE html>
The HTML5 specification states the following.
A link element must have a rel attribute.
And also
Note
If the rel attribute is used, the element is restricted to the head
element.
<Link> element defines the relationship between the current document and another resource i.e. style sheet.
<head> tag is the container for all head elements like script,link, title and meta tags. These head elements are not being displayed in the document when viewed in browser.
We can place the <link> elements in the body section also but we can't place the other html elements in the <head> section. For example if include <a> element in the <head> section then we can't view i in browser as it's not part of the document <body> section.
Best practice is to keep the <link> elements at the top of the document i.e in <head> section so that all elements which has styles in style sheet will get applied before loading the page itself. If we keep <link> at the bottom or middle of the <body> section then document will display all the content first and styles will get applied later.
I am writing a Chrome Extension where a small panel appears on top of the existing website. When I go to certain websites, I notice that the CSS of my panel has been over-written by the website's CSS. I am currently using Eric Meyer's CSS Reset but it does not seem to be doing the trick. Is there something else I can do?
Here's a nifty 'hack' with iframes, where you don't actually instantiate an iframe:
Append an iframe to the DOM, this will be a container for your do dad
Walk into the iframe and add your HTML code to the innerHTML of the body
It looks like this:
var iframe = document.createElement('iframe');
document.documentElement.appendChild(iframe); //fastest way to append to DOM: http://jsperf.com/insertbefore-vs-appendchild/2
iframe.contentDocument.body.innerHTML = 'Normal link!!';
I'm not familiar with Chrome extensions themselves. But you could try scoping your panel within an 'id':
<div id='my-panel'>
PANEL GOES HERE
</div>
And then in the CSS just have #my-panel as the first selector for all of your css. Take the reset css and add the #my-panel identifier to each element defined there too. Might be tedious... but would ensure you're resetting all of your elements, and virtually guarantee that they'll be reset at a higher priority than anything the website might be defining.
An extension that I just wrote ran into similar problems. I've made most of them disappear, but not all of them. I think that I know why, but I haven't gotten around to fixing the exceptions (this is just a school assignment as of now).
Here is what I found: when a stylesheet is injected through the extension manifest or by the background page, it is treated as a user stylesheet, giving it cascade priority over the default browser stylesheet only. Adding !important directives to your rules will not help, at least in my experience. User stylesheets (added by an extension or manually) can contain !important directives, but they are not honoured by Chrome for some reason -- just check how they show up in the Chrome DevTools, without !important. Adding id attributes won't help either, as specificity will only trump where priority is equal otherwise.
What does work for me:
var ninjaCSS = document.createElement("link");
ninjaCSS.setAttribute("rel", "stylesheet");
ninjaCSS.setAttribute("type", "text/css");
ninjaCSS.setAttribute("href", chrome.extension.getURL('ninja.css'));
document.getElementById("head").appendChild(ninjaCSS);
This code is included in a JavaScript file that is listed in the manifest as a content script, and should run at document load. The CSS file is not listed in the manifest, but is included in the extension folder. Now the stylesheet is on an equal footing with the the other author stylesheets.
Of course, that is just the beginning. You can now give all elements in your panel an id attribute (you probably already have). Whether you use a style reset or not is up to you. But you will have to make sure that your styles specify every single rule that a stylesheet in the wild might try to manipulate. If you do not plan to change a rule from its default, you must still specify that default value. Even if the default value is "none";
Finally, you must bravely ignore all warnings that the !important directive is best used sparingly. Quite the opposite applies here. When you add !important to every one of your style rules, it will be as if you had not used it at all as far as your panel's cascade is concerned. On the other hand, you will now be the boss of your panel. Trust me, somebody is going to tack an !important directive on, say, their button:hover background-image rule. Leading your well-crafted buttons to inexplicably morph into concert images of a 1985 bon jovi concert -- but only when the mouse is hovering, so no worries, right?
appendChild solutions works for me (Devin G Rhode and jCyCle answers). But I noticed these solutions just add the attribute xmlns="http://www.w3.org/1999/xhtml". So I tested my code just by adding this xmlns attribute to my link tag (directly, not using JS) and it works too, don't know why.
Failing:
<link rel="stylesheet" type="text/css" href="filesystem:chrome-extension://................/temporary/Content/Styles/style.css" />
Working:
<link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" type="text/css" href="filesystem:chrome-extension://.............../temporary/Content/Styles/style.css" />
I know that internal CSS should be in the <head></head> section of a (X)HTML document, but does it need to be before/after certain <meta> or <title> elements or can it be any order?
According to the HTML5 spec, non-scoped <style> elements can go basically anywhere in the <head>.
It doesn't matter. As long as it's in the head, it can be before all the <meta> tags, or after the <title> and <script>s.
In short: <style> elements can be anywhere in the <head> element.
The elements in the head tag can be placed in any order.
Any order, if memory serves. However, I've generally experienced the common practice to be after the meta data and title
I assume that it is valid in any order, but you can confirm using: W3C's validator: http://validator.w3.org/
As long as elements in the head tag doesn't rely on each other (for example when a script relies on another script being loaded first), the order doesn't matter.
The browser will be looking for the meta tag that contains the content type and encoding, before decoding the file, so it's good to have that early in the file.
I am working on a site (www.eticket24.at) and have to create an external CSS for both the header and footer.
If I view the header, for example, seperately in FireFox by going to www.eticket24.at/header.php, it looks fine — the CSS is all there, and it's styled the way it should be. However, in IE8, if I do the same, the style is gone compeletely. It works on the index page, but not when I view it alone.
I am using link rel="stylesheet" href="http://www.eticket24.at/et24_header.css to include the CSS at the top of my header.php page. Same goes for my footer.php page.
So, what's the problem with Internet Explorer this time? Why won't it behave?
Thanks.
header.php doesn’t return a full HTML page, so maybe Internet Explorer is borking on that. Even though Firefox renders it, I don’t think you can necessarily expect all browsers to do so.
As ifaour mentioned, you might want to move your <link> tags into the <head> tag, as they’re not meant to go in <body>.
Your link is inside the body of the page... try putting it inside the <head /> section. Also add type="text/css" to the <rel /> tag.
It's because when you're vewing the header on its own, Firefox will correct the incomplete markup and make the page a valid html document with the <html><body>...</body></html> tags.
IE will not do this, so the styles will not be applied as it doesn't know to do this on an invalid page.
This is also why the page looks correct on the live site.
I included all the css inside the .php files themselves instead of linking them and changed some div names (from to , and to . This helped because css styling of the divs before were being overridden by the other companys css styling, so I had to create my own unique div names, instead of the standard HTML5 ones
I'm having problems with the content loaded with AJAX inside a DIV.
I need custom CSS for the loaded content, but using <style> tag inside the div (or anywhere outside the <head>) does not respect the W3C standards.
Even more, in IE8 using <style> inside the div is not working as expected.
How can we solve this situation?
You could have the AJAX response modify the the contents of the <head> tag and add a new style tag. Your response would have two parts to it, the HTML and the CSS. The CSS should be added to the document before the HTML to ensure it is used.
Check out this post for adding CSS to the head: i prepend the css to the end of head tag
I'm assuming you have already been able to load something with AJAX into your page. Just convert your response to a JSON response with two parts, the CSS and the HTML. The JSON Spec might help too. You will need to escape any HTML or CSS that you send as a response.