I am a user of the content management system (TYPO3) that does not allow me to add something to the head of the html document. Is it possible to define a css style sheet and script in the body so that I do not duplicate corresponding styles and javascript everywhere in the html code that I add?
Technically, it's not valid to place a style tag inside the body, but most, if not all browsers will actually implement it.
I've always been under the impression that a link tag should be inside the head according to the specs, but given a quick test, it looks like using a link tag inside the body validates as HTML 5, so that might be an option. See Alohci's comment about this below.
And yes, you can place a script tag inside your body.
You can add a script in the <body>, but css should be in the <head>.
Major browsers recognize <style> in the <body>, but it's not valid.
Use Content Element of HTML type to do that with TYPO3 backend if there is no other possibility.
Of course as suggested in other answers you should not add CSS in the body, so maybe it will be just better to use inline styles for required elements?
<div style="color: red">title</div>
Related
Basically what i want to do is grab all CSS that is referenced in an external stylesheet e.g <link rel="stylesheet" href="css/General.css"> and append it to any existing styling for each HTML element in my page. (make all CSS inline)
The reason for this is because i need to call .html() to grab a div and send to server to be made into a PDF. The downside with this tool is that it only recognises inline CSS.
Are there any ways to do this?
Edit: the question that was linked to mine as a "possible duplicate" spoke only of putting everything in the <style> tag. while that may be useful, im mainly concerned with loading into the style="" html atribute
In the past I've used window.getComputedStyle(element); for this purpose. It will return a map of all styles applied to the element, which you can then loop across and apply as an inline style. I wouldn't apply them to the actual DOM if you can avoid it (just create a document fragment / concat it in the style of the string you're sending up). It will be a performance nightmare to actually apply that many inline styles to an element.
Using computed styles still might not be enough, as there are vendor prefixed styles in the user agent stylesheet. If you send up markup from Firefox to PhantomJS(webkit), you will obviously not get the same looking element.
I am using a link generated from a RSS converter (webrss.com), which sits inside a javascript tag at the end of my html. I have needed to convert an RSS feed to HTML for displaying on some digital signage. It works great, except I am having trouble overriding its default styles. I can change .li and .a styles but not font-size in the body or html tags.
I have looked everywhere for a solution and have tried using !important in my CSS but it isn't working. I would like to use an external style sheet and have it override all styles in the js tag at the end of my html.
Is this possible? I'm new to this and am stuck, please help!
Possible they are setting some of the styles inline on the elements eg. <span style="font-size:12px">contents</span> using JS themselves. If they are, there is no way to override it with CSS you'll have to use js your self to override their styles.
Basically, specificity and valid css can be your issue.
Specificity: You can inspect element to see what styles are applying. Assuming your css code is valid, it will show up for the selected element, below the css rules taking precedence above your own. Something like "li {font-size: 11px !important;}" should take precedence above all others, unless there is a more specific selector using the important piece as well.
Validity: For all html elements (li, a, body, html), you select them by just writing them out (ie "html {color: red;}" NOT ".html {color: red;}". I see you've mentioned .li and .a in your question, which may have just been an accident. Note that the dot is not necessary unless it is a class name assigned (ie. ). Check if your css is even listed in the inspector for that element to check if your css is valid.
You can override inline styles with css. The important tag trumps the inline style. See http://css-tricks.com/override-inline-styles-with-css/
The best way to override rule in JS is using CSSOM, I found this lib may help:
https://github.com/cssobj/cssobj
It's render CSSOM from JS, and you can change rules directly from JS.
I have an entire page that will be PHP included onto an already established website. The website will include my site after the <body> tag on their own site. I do not have access to the <head> section of the page. I am including my <link> and <script> tags in my page (so after the <body> of the parent page). I can change the title dynamically with javascript after the fact.
However, the CSS from the parent page is causing some interference with some of my elements that aren't explicitly styled. I would like a blanket way to stop CSS from cascading to my own elements without using an iframe. Is there a CSS reset that will work? How about a javascript solution? Would HTML5 scoped styles fix this issue eventually?
I can't give you a good answer. The closest I can think of is to take one of the CSS Reset scripts and apply them to your root <div>.
It's still a long list of things you're cancelling but at least it's maintained by someone else...
You can try by wrapping content and appending CSS rules only to wrapped content, for example.
CSS
#wrapper1 .className{/* RULES */}
#wrapper1 div{/* RULES */}
#wrapper2 .className{/* OTHER RULES */}
#wrapper2 div{/* OTHER RULES */}
HTML
<div id="wrapper1">content 1</div>
<div id="wrapper2">content 2</div><!-- CONTENT YOU APPEND LATER -->
Another solution, not the best1 is maybe to use jQuery and replace all class-es or ID-s in body when content is changed, here again you should define CSS before.
There is one thing I must note, in my experience appending HTML as pure text (like innerHtml='html') get right CSS rules in Google Chrome and Mozilla, but on IE you need to use proper JS and append content differently to get those CSS rules used. By different I mean like creating element should really be creating new element with JS function.. that was before I am not sure anymore if this thing is changed.
I'm implementing a system for my customer along the lines of attaching a tracking element to the DOM whenever specific errors are thrown (it simply has to have a certain value in a data-trkError attribute). My first thought was to use a
<span data-trkError="BLAH" style="display: none;"></span>
But then it occurred to me that this feels intuitively like what the meta tag should be usable for. However, this pretty much needs to be appended to a specific div in the DOM, ie within the body. Is this a problem? Is there anything standard-breaking or not-best-practises about a meta tag in the body tree?
Cheers
I agree that meta would fit better than an empty span. However (even if you could use them in body), note that you can’t just use custom meta keywords. In HTML5, only defined/registered values are valid.
But you can have meta elements in body, if they are used for Microdata or RDFa. For example, RDFa extends HTML5:
If the #property RDFa attribute is present on the link or meta elements, they MUST be viewed as conforming if used in the body of the document. More specifically, when link or meta elements contain the RDFa #property attribute and are used in the body of an HTML5 document, they MUST be considered flow content.
So you could create (or reuse an existing) vocabulary for your metadata. But, depending on your use case, this might be overkill.
As an alternative to span I’d use the script element as data block:
The script element allows authors to include dynamic script and data blocks in their documents. The element does not represent content for the user.
For example:
<script type="text/plain"> <!-- or whichever MIME type suits your need -->
<!-- your data -->
<!-- you could of course use data-* attributs on this script element, too -->
</script>
The <meta>-tag is part of the 4.2 Document metadata. Therefor it can only appear in the <head>-section of a document. Your solution using a <span> or a <div> or even a list for multiple errors is just fine for your purpose.
I am looking for a tag that i can use to mark out a position in the html, which i can then find later using JQuery. However, I need the tag to be as useless as possible: even empty divs and spans can cause the layout to change depending on the CSS rules you set. For that matter, even rubbish tags that html doesn't understand seem to acquire styles from css, and I don't think there is any way to find comments via DOM traversal?
This tag will be used to mark out the start and end of a chunk of HTML to be Ajaxed. I do not want to wrap the whole chunk in a div or span (which i what i'm doing now), because this can affect how the CSS cascades and i want the fact that the html is marked out as a chunk to be completely transparent to the programmer (me).
Any ideas?
edit: I just thought of using empty script tags. Those should be completely inert and invisible. I shall look into it
edit: How could i forget about display: none? stupid stupid stupid
Script tags
Anchor tags <a name...>
Can you use comment tags: <!-- whatever -->? Parser would allow you to distinguish it.
Given that you're talking about trying to use comments or <script> tags it seems that you don't want the content of your "chunk" to be visible to the user? If so, why can't you just wrap it like this:
<div style="display:none;" id="myChunk1">...your content...</div>
That won't interfere with the layout. If you have multiple "chunks" on the page use class="chunkClass" instead of setting the style inline.
Using jQuery you can easily get access to the content, delete the whole chunk, replace it, make it visible, etc.
If one extra <div> or <span> is screwing up your layout there's probably something else going on with your CSS.
[Responding to the title, not the actual scenario] If PHP is involved, <?php ?> makes a dandy no-op tag; e.g.,
<p>No space between this<?php
?>that.</p>
will render as
No space between thisthat.
(except this facility does not do the Right Thing for embedded PHP multi-line tags, so the preceding was coded without any embedded newlines).