Ok, this is a really strange case, I've got a page where I'm styling a "custom" tag.
<comment>This is a comment</comment>
In production, I output a simple style in the html template so it doesn't show up:
<style type="text/css">
comment {display:none;}
</style>
The strange thing is that if I edit the <style> node in Chrome's dev tools and add something insignificant, like one space ... it works all of a sudden. Here's a picture of the comment node's style when the page first loads:
And then this is after I add one space to the style element
Any thoughts on what might be going on?
Make sure to register your custom element and separate it with a dash (-):
document.registerElement('x-comment');
Your element must contain a dash, otherwise the browser won't be able to recognize it as a custom element.
From the specs:
The custom element type identifies a custom element interface and is a
sequence of characters that must match the NCName production, must
contain a U+002D HYPHEN-MINUS character, and must not contain any
uppercase ASCII letters. [...]
Related
So I found out recently that just like
<p> and <a>
you can use your own like
<o> and <k>
and style them in a css sheet by just using
o {} and k {}
which is pretty cool but unlike
<a> which you can href to
you can't do this with
<o> because <o href="url"></o> just doesn't work, even when adding the styling for cursor hover and o:focus {etc..} and o:hover {etc..}
Could anyone explain why? I got around it by using spans but it would be cool to be able to use any combination of letters for custom tags which have href functionality
Stay away from defining your own tags. XML offers users the ability to define their own tags, while HTML (especially HTML5) wants the user to use the pre-defined tags consistently.
The reason why you can't use href on just anything you like is because HTML just doesn't allow it. You use <a>s when placing links, <span>s to style certain word(s) of a text.
http://www.w3schools.com/tags/tag_span.asp
For the simple reason that if you define a "custom" element like this:
<o href="url">go to page x</o>
you probably mean a behavior like this:
go to page x
But what we are "supposing" can't be simply "predicted" by the browser; so, basically, the browser wouldn't know how to manage those attributes which you are giving to your custom tag...
Indeed, when you use something like <o>...</o> "tag" you are NOT defining a REAL custom tag; you are just placing a markup: whose regard the browser is simply "trasparent" (indeed doesn't do anything) just shows what is inside (if "showable") as if the "custom tag" wasn't there (we might say a "null" inline element). It can be managed, of course, trought CSS and Javascript that will specify the rest...
To build a real custom element you should place it in the register trought Javascript, with a specific sintax for the name, defining (trought Javascript) attributes and behavoirs...
I just wonder why should I use "class=" identificator instead of my own "tag"()?
Class example
<span class="red"> Hello there! (using class)</span>
.red {color: red;}
Tag example
<div id="reddiv">
<red>Hello, there (using own tag)</red>
</div>
#reddiv red {color: red;}
Its much more easier for me to use my own tags, since its faster to write.
Can you please tell me if doing it in first/second way has any negative/possitive sides?
While this may work in most browsers, your HTML then loses context. When an application like a search engine (or screen readers or anything else that looks at the source) parses your document, what is it to make of a tag named 'red' or 'purple' or 'job'? It won't have context, so you'll lose out. HTML uses a set of predefined tags that have meaning, you can venture out of it but you'll lose the advantage of everyone instantly understanding (all or part) of your document.
If this document is part of a data transfer framework and not on the public web, you should look at XML.
There are many advantages of using class.
First of all, with class, we use css styles which gives a lot more configuration options than simple HTML tags.
We give all the styles and formatting at one olace and just call the class everywhere we want to apply those, which in big projects like ERP, makes a big difference in code size.
The css style is more compatible with latest versions of browsers and a lot of old HTML formatting and style tags are deprecated in latest versions of HTML.
HTML tags behave differently under different browsers and different document modes. Where css will give same result everywhere.
The css classes can be applied to all the relevant tags on page at once just by defining it somewhere at the top of page.
You should also not forget that predefined tags have a lot of default properties and your custom tags none. So you would need to define everthing over again for all elements apart from span.
Also, you can have more than one class on an element, so <span class="red bold">Red</span> is possible.
You can remove, change and swap between classes to change dynamical the element style or behavior, what you can't do with tags.
Tag is element that needs class to set it behavior and style.
Custom elements are created using document.registerElement():
var reds = document.registerElement('red');
document.body.appendChild(new reds());
I would like to define a snippet of CSS in my page like this:
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
</style>
I keep reading that it should be defined within the <head> element, but it seems to work fine when inline. Can someone confirm if this is okay?
For HTML 4 the spec says:
The STYLE element allows authors to put style sheet rules in the head of the document. HTML permits any number of STYLE elements in the HEAD section of a document.
Reference: http://www.w3.org/TR/html4/present/styles.html#h-14.2.3.
Their specification of "head of the document", rather than simply 'document' strongly suggests that elsewhere is inappropriate.
For HTML 5, however, this is relaxed and the style element can be placed within the document itself:
The style element allows authors to embed style information in their documents. The style element is one of several inputs to the styling processing model. The element does not represent content for the user.
Reference: http://www.w3.org/TR/html5/semantics.html#the-style-element.
Most browsers put it anywhere in the page, but just be aware that it only takes effect from that point onwards. Also, it's not valid HTML if you don't put it in the head element.
Also, it's considered best practise to put it in the head element as it improves page render times.
It is not strictly valid unless you are using HTML5 and the scoped attribute.
https://www.w3schools.com/tags/tag_style.asp
https://www.w3schools.com/tags/att_scoped.asp
Although all browsers that I know of will accept the tag anywhere in the document.
It is not OK.
While some browsers might (mistakenly) care about it when not in the HEAD element, this is not behavior you should rely on, as it is counter to the HTML standard and may or may not work in the future for any given browser.
Edit: Update: In HTML 5, style elements can be scoped to only apply to a subtree, in which case they don't need to be in the head element.
They still, however, need to be in front of any other content they apply to, so the same principle applies.
Can I write some style css code for every • code I use in my page, for example font-size: 16px;? Thanks.
No, you cannot. You cannot style text content, no matter how it’s encoded (either as direct characters or as entities).
The closest thing you can do is put <span class="bullet">•</span> into the document and style the class bullet.
Others have answered the main question; you cannot specify a CSS Rule based on text content (just on HTML elements, classes, and ids).
What you could do is use Javascript, or server-side rendering to do a .Replace() to wrap the character with the necessary HTML tags (replace just the character with a wrapped version of the character).
Here's a quick proof-of-concept; it could easily avoid the jQuery (it's a crutch of mine), and you might play around a bit with how the character is encoded in the Javascript (I had to copy/paste it in to work).
The key portion is:
.replace("•","<span class='bullet'>•</span>")
No. With CSS you can only address elements but not certain characters (ok, there are exceptions like :first-letter). You would need to put it into an element like span:
<span class="bullet">•</span>
Then you can use the selector span.bullet to style these elements:
span.bullet {
font-size: 16px;
}
I'm editing books/articles in HTML. These texts were printed once and I scan them, convert them into an intermediate XML-Format and then I transform them into HTML (by XSLT). Because some of those texts are extinct from the market today and are only available through the major libraries I want to publish them in a way so that people could possibly cite them by referring to the page numbers in the original document. For this purpose my intermediate XML-format has an element that marks a page-break. Right now I'm working on the XML->HTML transformations and I'm wondering myself how to transform these page breaks in HTML. They should not appear in the final HTML by default (so a simple | doesn't fit) but I plan to wrap these documents with some lightweight JavaScript that will show the markers when needed. I thought about <span>s with a | in it that are hidden by default.
Is there a better, possibly 'semantic' way to this problem?
Page breaks are very much a thing of layout, and HTML isn't designed to describe layout, so you aren't going to find anything that is semantic for this within the language.
The best you can hope for is some sort of kludge.
Since a page break can occur in the middle of a paragraph, and <p> elements can contain only inline elements you can eliminate most of the options from the outset.
The two possibilities that suggest themselves to me are <span> and <a>. The former has no semantics, that latter is designed to be linked to (with a name attribute) or from (with an href attribute), and you could consider a page from an original document something that you might wish to link to.
No matter what element you use, I wouldn't include a marker in it and then hide it with CSS. That sort of presentational flag is something I would consider adding via :before in a stylesheet (combined with a descendent selector for a body class that can be toggled with JS since you want the toggle)
Alternatively, if you want to take a (very) broad view of the meaning of "HTML" you could consider the l element (from the defunct XHTML 2 drafts) and markup each line of the original document. Adding a class would indicate where a new page began (and you could use CSS counters and borders to clearly indicate each page and number it should you so wish). Pity the browser vendors refused to get behind a real semantic markup language and favoured HTML 5 instead.
Use a <div class="Page"> for each page, and have a stylesheet containing:
.Page {
page-break-after: always;
}
Maybe you can use an xml tag not parsed/interpreted by html like <pagebreak/>.
In this way viewing the html the tag will be not rendered but using jQuery or any other Javascript library, transform, when asked, these particular tags in standard or whatsoever visual mark.
I think this can be a semantic approach...