Just wondering if it's possible somehow to make the CSS content property insert html code instead string on :before or :after an element like:
.header:before{
content: 'Back';
}
this would be quite handy...It could be done through Javascript but using css for this would really make lives easier :)
Unfortunately, this is not possible. Per the spec:
Generated content does not alter the document tree. In particular, it is not fed back to the document language processor (e.g., for reparsing).
In other words, for string values this means the value is always treated literally. It is never interpreted as markup, regardless of the document language in use.
As an example, using the given CSS with the following HTML:
<h1 class="header">Title</h1>
... will result in the following output:
BackTitle
As almost noted in comments to #BoltClock's answer, in modern browsers, you can actually add some html markup to pseudo-elements using the (url()) in combination with svg's <foreignObject> element.
You can either specify an URL pointing to an actual svg file, or create it with a dataURI version (data:image/svg+xml; charset=utf8, + encodeURIComponent(yourSvgMarkup))
But note that it is mostly a hack and that there are a lot of limitations :
You can not load any external resources from this markup (no CSS, no images, no media etc.).
You can not execute script.
Since this won't be part of the DOM, the only way to alter it, is to pass the markup as a dataURI, and edit this dataURI in document.styleSheets. for this part, DOMParser and XMLSerializer may help.
While the same operation allows us to load url-encoded media in <img> tags, this won't work in pseudo-elements (at least as of today, I don't know if it is specified anywhere that it shouldn't, so it may be a not-yet implemented feature).
Now, a small demo of some html markup in a pseudo element :
/*
** original svg code :
*
*<svg width="200" height="60"
* xmlns="http://www.w3.org/2000/svg">
*
* <foreignObject width="100%" height="100%" x="0" y="0">
* <div xmlns="http://www.w3.org/1999/xhtml" style="color: blue">
* I am <pre>HTML</pre>
* </div>
* </foreignObject>
*</svg>
*
*/
#log::after {
content: url('data:image/svg+xml;%20charset=utf8,%20%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2260%22%20width%3D%22200%22%3E%0A%0A%20%20%3CforeignObject%20y%3D%220%22%20x%3D%220%22%20height%3D%22100%25%22%20width%3D%22100%25%22%3E%0A%09%3Cdiv%20style%3D%22color%3A%20blue%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%3E%0A%09%09I%20am%20%3Cpre%3EHTML%3C%2Fpre%3E%0A%09%3C%2Fdiv%3E%0A%20%20%3C%2FforeignObject%3E%0A%3C%2Fsvg%3E');
}
<p id="log">hi</p>
In CSS3 paged media this is possible using position: running() and content: element().
Example from the CSS Generated Content for Paged Media Module draft:
#top-center {
content: element(heading);
}
.runner {
position: running(heading);
}
.runner can be any element and heading is an arbitrary name for the slot.
EDIT: to clarify, there is basically no browser support so this was mostly meant to be for future reference/in addition to the 'practical answers' given already.
It is not possible probably because it would be so easy to XSS. Also, current HTML sanitizers that are available don't disallow content property.
(Definitely not the greatest answer here but I just wanted to share an insight other than the "according to spec... ")
If you have the ability to add a HTML elsewhere on the page, you can reposition it over the area where your CSS content shows up.
So you add your CSS content:
.cssClass::after {
content: "Content and Words and Things";
color: #0000EE;
}
I added hyperlink blue so it looks like a link.
Then you add an href that has no text in between the tags with an id or class that you can reference. It can be anywhere as long as it's on the same page.
<a id="link" href="#"></a>
And then position the link over the content where you want it:
a#link{
height: 20px;
width: 100%;
left: 0;
top: 5%;
position: absolute;
}
Related
I need to show an html block if the specific link is available without using javascript.
In other words I need to reverse behaviour of object tag with data attribute, for example:
<object data="error.src">My content</object>
Shows content if error.src is not available.
There's no way to do this without some JavaScript.
You can use some css like this to hide/display object with specific data attribute:
object{
display:none;
}
object[data="error.src"]{
display:block;
}
I'd like to my own HTML tags but I don't want new tags that might use the same name to cause them to break in the future.
Is this a good idea? Could I use a namespace to avoid conflicts?
Example:
HTML :
<b:HGroup>
<span>item 1</span><span>item 2</span><span>item 3</span>
</b:HGroup>
CSS:
#namespace b "library://ns.example.com/framework/1";
b|HGroup {
display:inline-block;
vertical-align: middle;
}
I read a related question and it suggests DTD. I'd rather not create a DTD but if it's necessary, then I'd like to define it inline. Also, I'd like it to be run as HTML5, not XHTML.
Note:
I do NOT want to use div plus a class.
As far as I understand it, it looks like custom elements I've written will not be overwritten by future elements of the same name if I explicitly register my custom element. Here is a quote from the W3:
Because element registration can occur at any time, a non-custom
element could be created that might in the future become a custom
element after an appropriate definition is registered. Such elements
are called undefined potentially-custom elements. If such a definition
is ever registered, the element will be upgraded, becoming a custom
element.
I've included a full page prototype based on the answers and I can't get it to attach any CSS to any element with a namespace. I've included some JS I found on one of the links but commented out part of it that was giving me errors. My main concern is getting elements with namespaces to be styled by the CSS with namespaces. From how I understand it that should work without JS.
<!DOCTYPE html>
<html xmlns:xhtml="http://www.w3.org/1999/xhtml"
xmlns:s="http://www.w3.org/2002/spark"
xmlns:space="http://www.w3.org/2002/space"
xmlns:spaced="http://www.w3.org/2002/spaced">
<head>
<script>
"use strict";
const inDocument = document.querySelector("example-element");
const outOfDocument = document.createElement("example-element");
// Before the element definition, both are HTMLElement:
//console.assert(inDocument instanceof HTMLElement);
//console.assert(outOfDocument instanceof HTMLElement);
//class ExampleElement extends HTMLElement {};
//customElements.define("example-element", HTMLElement);
//class ExampleElement3 extends HTMLElement {}
//customElements.define("element3", ExampleElement3);
//document.body.appendChild(outOfDocument);
</script>
<style>
#namespace s url(http://www.w3.org/2000/spark);
#namespace space url(http://www.example.com/2000/spark-space);
#namespace spaced "http://www.example.com/2002/spark-spaced";
example-element {
color: red;
display:block;
}
element2 {
color:green;
font-weight:bold;
}
s|element3 {
color:yellow;
}
space-element {
color:yellow;
}
space|space-element {
display:block;
color:yellow;
}
spaced|spaced-element {
display:block;
color:yellow;
}
</style>
</head>
<body>
<example-element>example-element</example-element>
<element2>element 2</element2>
<space-element>space element</space-element>
<s:element3>s namespace element 3</s:element3>
<space:space-element>space namespace el</space:space-element>
<spaced:spaced-element>spaced namespace el</spaced:spaced-element>
</body>
</html>
Custom HTML elements are supported by HTML5, but according to the specs they should contain a - character :
The name must contain a dash (-). So for example, <x-tags>,
<my-element>, and <my-awesome-app> are all valid names, while <tabs>
and <foo_bar> are not. This restriction allows the parser to
distinguish custom elements from regular elements but also ensures
forward compatibility when new tags are added to HTML.
See this article for a good introduction.
Applying CSS to custom HTML elements works the same way as applying CSS to standard HTML elements :
custom-element {
font-weight: bold;
background-color: #ff0;
}
<custom-element>
This is a custom HTML element
</custom-element>
You have a well researched question here. In doing so, you've eliminated all of the "valid" solutions.
You can definitely do what you have proposed, which (harmlessly*) breaks the standards. To be future proof, all HTML standards allow for unknown elements, instructing browsers to ignore them (essentially, they all become <span> elements) since there's no indication of what to do with them, though CSS can indeed affect them. This will work in ALL browsers, even Mosaic and the original IE (though CSS won't work in such ancient browsers).
As you already noted, the "proper" way to do this would be to define your own Document Type Definition (DTD) that can then be included at the top of your ~HTML document with the <!DOCTYPE> tag. This is probably overkill, but it is technically the right approach.
Another solution (that you've also eliminated) would be to use <span class="HGroup"> for inline elements and <div class="HGroup"> for block elements since these elements don't actually do anything by default.
A variant of that solution is to override the action of some otherwise useless tag and disable its standard properties in CSS, <s> for example:
s {
text-decoration: none; /* remove line-through */
display: inline-block;
vertical-align: middle;
}
(* The "harm" you can run into with custom element names is that if you don't specify a DTD (your own or else an existing one with an exact version), a future version of the HTML standard could theoretically define some undesired property for your custom element.)
Let's say I have a CSS sheet that holds information for how a site that shows system statuses is presented. Depending on the status of the site, one of the following will be an attribute to the status:
#green_status
{
color: white;
text-align: left;
background: url(images/green.jpg) no-repeat;
}
#yellow_status
{
color: white;
text-align: left;
background: url(images/yellow.jpg) no-repeat;
}
#red_status
{
color: white;
text-align: left;
background: url(images/red.jpg) no-repeat;
}
and an XML document that stores details for individual sites and their statuses
<site>
<name>New Site</name>
<headerImage>header image goes here</headerImage>
<systemStatus color="green">Normal</systemStatus>
<networkNotes>System status is normal</networkNotes>
</site>
I am going to use XML DOM to select values from the XML to populate elements of the page. Though after some testing I am still finding that I can change the text of the system's status but not the bar color without actually changing the site's attributes.
I'd like to be able to just change the XML file and set <systemStatus color"red">SYSTEM IS DOWN</systemStatus> and have that change not only the text, but the bar color to "red.jpg" without having to go in to the html and manually edit the status.
So far in order to solve this, I've added the 'color="green, yellow, red"' attribute to my XML elements, added 2 new statuses to the CSS (indicated by the first code block of this question), and have so far been unable to connect the dots.
Is there a way that I can make it to where the changes only need to be made to the XML file to change both the text & bar color for the system status of that site? The end goal here is to be able to just change the XML attribute and text of the systemStatus and change both the bar & the text on the site.
Use the CSS3 attribute selector.
<systemStatus color="green">
CSS:
systemStatus[color='green'] {
background-color:#2f2;
}
You can link a CSS stylesheet to an XML file using this processing instruction:
<?xml-stylesheet href="my-style.css"?>
... rest of document here...
More details about it can be found here: http://www.w3.org/Style/styling-XML
With that, you can add styling to any element and even use attributes in the selector:
systemStatus[color="red"] {
color: red;
}
I think you can also use special selectors like :first-child and such.
Afaik, there is no way to include Javascript in an XML file, but you should be able to tranform the XML into another XML if the current XML doesn't have the structure you need.
In the transformation you can add the elements and properties you need to be able to style it. See also Xml to Xml transformation using XSLT.
What everybody else said, plus you can set the content via CSS too:
systemStatus[color='green']::after {
content: "ALL IS WELL";
}
I suggest using a descriptive term for the attribute rather than explicitly a color, so that you can change your mind later about what the display should be without changing the nomenclature. Something like
<systemStatus status="ok"/>
and in CSS
systemStatus[status="ok"] {
color: green;
background-color: white;
}
XML does not specify any display or formatting, so if you really want to show a text as green, you need to do that using the display language (e.g. HTML or XSL-FO).
You can specify a tag to contain (X)HTML fragment, either as XHTML fragment, e.g.
<site xmlns:h="http://www.w3.org/1999/xhtml">
...
<systemStatus><h:p class="ok" style="color: green;">Normal</h:p></systemStatus>
...
</site>
or as CDATA:
<site>
...
<systemStatus><![CDATA[<p class="ok" style="color: green;">Normal</p>]]></systemStatus>
...
</site>
Your host display language (HTML+Javascript in your case) has to then insert this into the host document's DOM as an (X)HTML fragments or textually with element.innerHTML.
Be careful about inserting with innerHTML from untrusted source though, if the data in the XML file comes untrusted source, they may potentially contain Javascript code, which may then be executed when inserted into the host HTML.
Is there a way to achieve Backspace functionality in HTML? Do we have any special tags for this?
An example showing the need for such a thing can be found in StackOverflow itself. Please refer to Get current stack trace in Java. In the top answer, #jinguiy is trying to express Thread.currentThread().getStackTrace() but because of the site's interpretation of links an unwanted space has been introduced.
If there is a way to include a backspace this can be avoided.
This is just one example, but in many contexts where we can't control certain part of the output, having a backspace functionality in HTML can be quite useful.
You can use a negative margin:
HTML:
<span>this is</span> <span class="backspace">a test</span>
CSS:
.backspace { margin-left: -4px; }
Demo: http://jsfiddle.net/Guffa/HsCPd/
HTML is stateless, so there is no possibility of backspace functionality with HTML alone. You could do something with javascript to achieve a similar effect.
Another approach, would be to buffer your output before sending it, and then process the buffered output. You could roll your own backspace tag, and then when processing the buffer, delete the backspace tag, and the character/tag before it.
As I know HTML has no tags to do it. You need to add some other language to your code to do such things.
I don't think there's such a functionality in HTML... but, depending on the effect you're trying to achieve (is it a matter of visualization only?), you could act on word-spacing or letter-spacing
You can also use other techniques, like setting a negative margin on the elements.
In the specific example you linked, the space is due to this rule in the CSS:
p code {
padding: 1px 5px;}
If you remove it with firebug, the space disappears, cause there isn't a space (try to copy and paste the text)
Instead, if the matter is that there are unwanted spaces in the text, you can try with javascript (here an example) or processing the text with a server side language
Gulta's answer is best. Here is how to do this all within your html source:
<!-- horizontal backspace; adjust the amount of space by changing 4px -->
<style type="text/css">span.backspace{margin-left: -4px}</style>
<!-- The above sets up a "backspace command" in html in the style css-->
this is<span class="backspace"></span>a test
<!-- which can be placed any where after, and will output
this isa test
-->
if you searching for simple and effective method to let user go back from your webpage
you can use this JavaScript code
head section
<script>
function goBack()
{
window.history.back()
}
</script>
and insert HTML in your body
<input type="button" value="Back" onclick="goBack()">
W3schools Source
how can i create my own html tags in HTML or HTML5 so i can make my own html tag and css library
such as
<mymenu> ul li or some text </mymenu>
<heading> Yeah My Own Heading</heading>
is their a way to do that? if yeah please tell me how i am really curious about it. and tell me what problems should i will be having after making my personalize tags (if you know any) .
The "proper" way of doing this is to use classes: <div class="mymenu">. That being said, every browser I know of will display your <mymenu> tag just fine and you can style it however you want:
mymenu {
display : block;
background : teal;
}
demo: http://jsfiddle.net/cwolves/DPMCM/2/
Note that IE<9 will not immediately display this properly. To get around that, simply use the following JS anywhere on your page (before the elements are created):
document.createElement('mymenu');
which will tell the IE CSS engine that a mymenu tag exists.
This is html, not xml. The proper way of doing it is to use a <div> and apply your own .mymenu class that you can style to look like a menu, or a heading class that defines how that should look.
It is possible to do custom elements in < IE9, but it requires (sans javascript) being careful with doctypes, namespaces and, to be completely proper xhtml, a matching DTD.
Something like this...
<!DOCTYPE html SYSTEM "http://your.domain/xhtml-custom.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'
xmlns:custom="http://your.domain/"
xml:lang='en-US'>
Where the DTD contains things like...
<!ENTITY % attrs "%coreattrs; %i18n; %events;">
<!ENTITY % custom "custom:attribution | custom:quote ">
<!ENTITY % block "p | div | isindex |fieldset | table | %custom; ">
<!ENTITY % Flow "(#PCDATA | %block; | form )*">
<!ENTITY % custom "custom:attribution | custom:quote">
<!ELEMENT custom:attribution %Flow;>
<!ATTLIST custom:attribution %attrs;>
...and so on.
You end up in a situation where a namespace (such as custom:customtag) is required, and targetting it with CSS needs to escape the colon...
custom\:customtag { display:block; }
...which is too much bother - given the whole point of using custom elements is to produce more semantic markup.
I investigated this in detail back in the days of IE6 when xhtml seemed like it may be the future and solved all the problems, but never sought to implement it anywhere for the shear cumbersome nature of the solution.
And the world mostly gave up on xhtml as being too much trouble anyway.
At the end of the day custom elements for better semantics are hardly worth it because no matter what you do your markup will likely be compromised by presentation needs as (and I've been trying to do it for decades now) you just can't separate content from presentation completely online.
Yes, there is a way!
CSS Code:
mymenu {
display : block;
background : black;
}
heading {
font-family: cursive;
/* MORE CUSTOMIZE */
}
HTML Code:
<mymenu> ul li or some text </mymenu>
<heading> Yeah My Own Heading</heading>
Or if you want to customize h1..
h1 {
/*etc..*/
}
Checkout The Story of the HTML5 Shiv here:
http://paulirish.com/2011/the-history-of-the-html5-shiv/
You could use the same method for enabling your custom tags.
But don't. It is just stupid. Use span or div with classes.
Create a tag in CSS, without a class (.) or id (#).
CSS:
mymenu {
/* Styling Here */
}
heading {
/* Styling Here */
}
HTML:
<mymenu> ul li or some text </mymenu>
<heading> Yeah My Own Heading </heading>
To do this you can use css to create custom tags:
c-r {
color:red;
}
I do this on Custom Markup. Check it out because it may already have what you want.