Here's a minimal working example of what I'm experiencing:
index.html
<head> <link rel="stylesheet" href="main.css"> </head>
<p> This is a test </p>
main.css
p {color:purple;}
#import "background.css";
background.css
p {background-color:yellow;}
Trying this in Vivaldi and Firefox, the style in background.css isn't applied. Shouldn't it be though? If I swap the two lines in main.css, #importing background.css first, it does get applied. But why would this matter? Shouldn't background.css be applied in either case?
Note this is the same issue being described in this question and this question, but the answers there don't get at the heart of the question—they recommend importing in the correct order in the HTML file, bypassing this issue altogether.
As already defined in CSS1:
In CSS1, all '#import' statements must occur at the start of a style
sheet, before any declarations. This makes it easy to see that rules
in the style sheet itself override rules in the imported style sheets.
A style sheet that is imported into another one has a lower ranking in the cascading order: the importing style sheet overrides the imported one. Programmers may recognize this as the same model as in Java, Modula, Object-Pascal, Oberon and other modular programming languages.
In CSS1 you should put the #import function at the top of the document (but after any #charset declaration).
The css syntax should be:
#import url|string list-of-mediaqueries;
This can all be found here: https://www.w3schools.com/cssref/pr_import_rule.php
I have a very specific case where I'm trying to provide date-format hints for date-inputs, but remove those hints when the browser is going to provide a native date-picker. I tried this, which works on all modern browsers:
<style>
input[type="date"] + .date-format-hint { display:none; }
</style>
<form>
<input type="date" id="my-date" />
<span class="date-format-hint">Please use mm/dd/yyyy as your date format</span>
</form>
I tried testing in MSIE 8 (yes, I really do have to do this for #reasons) and the date-format-hint disappears. Checking the CSS style console, it appears that the CSS rule is applying and hiding the hint.
But the runtime type of the input element is actually text and not date. If I check it with javascipt, I can see it's text and can fix everything up, but the idea here was to avoid having to use javascript for something CSS could do.
I tried to create a js-fiddle, but MSIE8 totally chokes on that site so I hand-built a simple proof-of-concept which does not hide the hint element. I must have something subtly different between my real-world page and the test-page. Maybe I'm missing the DOCTYPE declaration (it's in real-world but not test) or any of several other CSS files being included in the real-world that aren't in the test.
But if MSIE 8 is evaluating the CSS selector based upon what's in the document "text" and not the runtime DOM data, then it might explain the behavior I'm seeing.
Are there other likely explanations?
I have found a potential workaround, which is to adjust the CSS style to:
<style>
input[type="date"] + .date-format-hint {
display:none;
display:inline\0/; /* Trick MSIE 8 into doing the right thing */
}
</style>
Note that display:initial\0/; doesn't work because MSIE 8 doesn't support initial.
When running MSIE 8 in MSIE 7 mode, the style doesn't apply at all which is ... something, I guess.
Is this the best I can do? Or am I missing something really fundamental, here?
Edit 2022-08-17
I forgot to mention that I had already tried something like this, and it did not seem to work:
<style>
input[type="date"] + .date-format-hint {
display:none;
}
input[type="text"] + .date-format-hint {
display:inline;
}
</style>
I was hoping that having two matching rules in the CSS would cause MSIE 8 to choose the latter, but it appears not to do that and prefers the former date-based rule.
I have external links in the top menu of my website.
I want to open these links in new tabs. I could achieve it using target=_blank in HTML. Is there a similar CSS property or anything else?
As c69 mentioned there is no way to do it with pure CSS.
but you can use HTML instead:
use
<head>
<base target="_blank">
</head>
in your HTML <head> tag for making all of page links which not include target attribute to be opened in a new blank window by default.
otherwise you can set target attribute for each link like this:
test-link
and it will override
<head>
<base target="_blank">
</head>
tag if it was defined previously.
Unfortunately, no.
In 2013, there is no way to do it with pure CSS.
Update: thanks to showdev for linking to the obsolete spec of CSS3 Hyperlinks, and yes, no browser has implemented it. So the answer still stands valid.
There are a few ways CSS can 'target' navigation.
This will style internal and external links using attribute styling, which could help signal visitors to what your links will do.
a[href="#"] { color: forestgreen; font-weight: normal; }
a[href="http"] { color: dodgerblue; font-weight: normal; }
You can also target the traditional inline HTML 'target=_blank'.
a[target=_blank] { font-weight: bold; }
Also :target selector to style navigation block and element targets.
nav { display: none; }
nav:target { display: block; }
CSS :target pseudo-class selector is supported - caniuse, w3schools, MDN.
a[href="http"] { target: new; target-name: new; target-new: tab; }
CSS/CSS3 'target-new' property etc, not supported by any major browsers, 2017 August, though it is part of the W3 spec since 2004 February.
W3Schools 'modal' construction, uses ':target' pseudo-class that could contain WP navigation. You can also add HTML rel="noreferrer and noopener beside target="_blank" to improve 'new tab' performance. CSS will not open links in tabs for now, but this page explains how to do that with jQuery (compatibility may depend for WP coders).
MDN has a good review at Using the :target pseudo-class in selectors
Another way to use target="_blank" is:
onclick="this.target='_blank'"
Example:
<a href="http://www.url.com" onclick="this.target='_blank'">Your Text<a>
This is actually javascript but related/relevant because .querySelectorAll targets by CSS syntax:
var i_will_target_self = document.querySelectorAll("ul.menu li a#example")
this example uses css to target links in a menu with id = "example"
that creates a variable which is a collection of the elements we want to change, but we still have actually change them by setting the new target ("_blank"):
for (var i = 0; i < 5; i++) {
i_will_target_self[i].target = "_blank";
}
That code assumes that there are 5 or less elements. That can be changed easily by changing the phrase "i < 5."
read more here: http://xahlee.info/js/js_get_elements.html
While waiting for the adoption of CSS3 targeting…
While waiting for the adoption of CSS3 targeting by the major browsers, one could run the following sed command once the (X)HTML has been created:
sed -i 's|href="http|target="_blank" href="http|g' index.html
It will add target="_blank" to all external hyperlinks. Variations are also possible.
EDIT
I use this at the end of the makefile which generates every web page on my site.
I'm using the IE 11 (version 11.0.9431.0), to test our current website and see how it would work when IE 11 will be released with Windows 8.1 mid-October.
What I see on almost all pages is the following message:
HTML1514: Extra "<body>" tag found. Only one "<body>" tag should exist per document.
When I look through the source code, there is no second <body> anywhere. Is this a IE 11 bug? Is this something I should take seriously? The pages work fine btw...
Thanks.
EDIT:
I don't have access to that website anymore, therefore I can't try any new solutions you guys are posting.
If you placed some element (that should appear only inside body) before the <body> tag, the <body> is inserted automatically by the parser (the "Anything else" paragraph) - and this is still valid HTML because body has optional both opening and closing tags. That would mean that the actual <body> is the second one the parser sees. Couldn't this be your case?
My guess is you probably have if IE statements, something like:
<!--[if IE 9]> <body class="ie ie9 lte9"> <![endif]-->
They don't actually work in IE10, let alone IE11 so that's why you'd be getting the extra tag found.
The problem (which is present in IE 10, too) is caused by the element
<script type="text/javascript" src="/_clients/binck_nl/data/js/analytics.js?nl_1377516473" ></script>
It probably modifies the DOM so that IE gets confused.
it's probably your body tag in the css. Replace the body-tag in the css with a class for example .bodystyle {} and refere in your html to it with the tag. That should do the trick.
Hi this may be a very late for suggesting. But, just to help others the probable cause may be any iframe coming in the page which has body tag
I had this same effect showing up in IE10 and IE11 saying there was an extra body tag in the console. What fixed it for me was that I found an element outside of the body that was a div for a spinner while the page loads that should have been within the body.
My guess is that it may be content in the header part which Edge wants in the body part. (If you have a header part).
This works in any other browser but Edge.
I solved this by removing: <header><title>something</title></header> from the tag body. Now edge no longer complains.
I want to create something like
<menu>
<lunch>
<dish>aaa</dish>
<dish>bbb</dish>
</lunch>
<dinner>
<dish>ccc</dish>
</dinner>
</menu>
Can it be done in HTML5?
I know I can do it with
<ul id="menu">
<li>
<ul id="lunch">
<li class="dish">aaa</li>
<li class="dish">bbb</li>
</ul>
</li>
<li>
<ul id="dinner">
<li class="dish">ccc</li>
</ul>
</li>
</ul>
but it is so much less readable :(
You can use custom tags in browsers, although they won’t be HTML5 (see Are custom elements valid HTML5? and the HTML5 spec).
Let's assume you want to use a custom tag element called <stack>. Here's what you should do...
STEP 1
Normalize its attributes in your CSS Stylesheet (think css reset) -
Example:
stack{display:block;margin:0;padding:0;border:0; ... }
STEP 2
To get it to work in old versions of Internet Explorer, you need to append this script to the head (Important if you need it to work in older versions of IE!):
<!--[if lt IE 9]>
<script> document.createElement("stack"); </script>
<![endif]-->
Then you can use your custom tag freely.
<stack>Overflow</stack>
Feel free to set attributes as well...
<stack id="st2" class="nice"> hello </stack>
I'm not so sure about these answers. As I've just read:
"CUSTOM TAGS HAVE ALWAYS BEEN ALLOWED IN HTML."
http://www.crockford.com/html/
The point here being, that HTML was based on SGML. Unlike XML with its doctypes and schemas, HTML does not become invalid if a browser doesn't know a tag or two. Think of <marquee>. This has not been in the official standard. So while using it made your HTML page "officially unapproved", it didn't break the page either.
Then there is <keygen>, which was Netscape-specific, forgotten in HTML4 and rediscovered and now specified in HTML5.
And also we have custom tag attributes now, like data-XyZzz="..." allowed on all HTML5 tags.
So, while you shouldn't invent a whole custom unspecified markup salad of your own, it's not exactly forbidden to have custom tags in HTML. That is however, unless you want to send it with an +xml Content-Type or embed other XML namespaces, like SVG or MathML. This applies only to SGML-confined HTML.
I just want to add to the previous answers that there is a meaning to use only two-words tags for custom elements.
They should never be standardised.
For example, you want to use the tag <icon>, because you don't like <img>, and you don't like <i> neither...
Well, keep in mind that you're not the only one. Maybe in the future, w3c and/or browsers will specify/implement this tag.
At this time, browsers will probably implements native style for this tag and your website's design may break.
So I'm suggesting to use (according to this example) <img-icon>.
As a matter of fact, the tag <menu> is well defined ie not so used, but defined. It should contain <menuitem> which behave like <li>.
As Michael suggested in the comments, what you want to do is quite possible, but your nomenclature is wrong. You aren't "adding tags to HTML 5," you are creating a new XML document type with your own tags.
I did this for some projects at my last job. Some practical advice:
When you say you want to "add these to HTML 5," I assume what you really mean is that you want the pages to display correctly in a modern browser, without having to do a lot of work on the server side. This can be accomplished by inserting a "stylesheet processing instruction" at the top of the xml file, like <?xml-stylesheet type="text/xsl" href="menu.xsl"?>. Replace "menu.xsl" with the path to the XSL stylesheet that you create to convert your custom tags into HTML.
Caveats: Your file must be a well-formed XML document, complete with XML header <xml version="1.0">. XML is pickier than HTML about things like mismatched tags. Also, unlike HTML, tags are case-sensitive. You must also make sure that the web server is sending the files with the appropriate mime type "application/xml". Often the web server will be configured to do this automatically if the file extension is ".xml", but check.
Big Caveat: Finally, using the browsers' automatic XSL transformation, as I've described, is really best only for debugging and for limited applications where you have a lot of control. I used it successfully in setting up a simple intranet at my last employer, that was accessed only by a few dozen people at most. Not all browsers support XSL, and those that do don't have completely compatible implementations. So if your pages are to be released into the "wild," it's best to transform them all into HTML on the server side, which can be done with a command line tool, or with a button in many XML editors.
Creating your own tag names in HTML is not possible / not valid. That's what XML, SGML and other general markup languages are for.
What you probably want is
<div id="menu">
<div id="lunch">
<span class="dish">aaa</span>
<span class="dish">bbb</span>
</div>
<div id="dinner">
<span class="dish">ccc</span>
</div>
</div>
Or instead of <div/> and <span/> something like <ul/> and <li/>.
In order to make it look and function right, just hook up some CSS and Javascript.
Custom tags can be used in Safari, Chrome, Opera, and Firefox, at least as far as using them in place of "class=..." goes.
green {color: green} in css works for
<green>This is some text.</green>
<head>
<lunch>
<style type="text/css">
lunch{
color:blue;
font-size:32px;
}
</style>
</lunch>
</head>
<body>
<lunch>
This is how you create custom tags like what he is asking for its very simple just do what i wrote it works yeah no js or convoluted work arounds needed this lets you do exactly what he wrote.
</lunch>
</body>
For embedding metadata, you could try using HTML microdata, but it's even more verbose than using class names.
<div itemscope>
<p>My name is <span itemprop="name">Elizabeth</span>.</p>
</div>
<div itemscope>
<p>My name is <span itemprop="name">Daniel</span>.</p>
</div>
Besides writing an XSL stylesheet, as I described earlier, there is another approach, at least if you are certain that Firefox or another full-fledged XML browser will be used (i.e., NOT Internet Explorer). Skip the XSL transform, and write a complete CSS stylesheet that tells the browser how to format the XML directly. The upside here is that you wouldn't have to learn XSL, which many people find to be a difficult and counterintuitive language. The downside is that your CSS will have to specify the styling very completely, including what are block nodes, what are inlines, etc. Usually, when writing CSS, you can assume that the browser "knows" that <em>, for instance, is an inline node, but it won't have any idea what to do with <dish>.
Finally, its been a few years since I tried this, but my recollection is that IE (at least a few versions back) refused to apply CSS stylesheets directly to XML documents.
The point of HTML is that the tags included in the language have an agreed meaning, that everyone in the world can use and base decisions on - like default styling, or making links clickable, or submitting a form when you click on an <input type="submit">.
Made-up tags like yours are great for humans (because we can learn English and thus know, or at least guess, what your tags mean), but not so good for machines.
Polymer or X-tags allow you to build your own html tags. It is based on native browser's "shadow DOM".
In some circumstances, it may look like creating your own tag names just works fine.
However, this is just your browser's error handling routines at work. And the problem is, different browsers have different error handling routines!
See this example.
The first line contains two made-up elements, what and ever, and they get treated differently by different browsers. The text comes out red in IE11 and Edge, but black in other browsers.
For comparison, the second line is similar, except it contains only valid HTML elements, and it will therefore look the same in all browsers.
body {color:black; background:white;} /* reset */
what, ever:nth-of-type(2) {color:red}
code, span:nth-of-type(2) {color:red}
<p><what></what> <ever>test</ever></p>
<p><code></code> <span>test</span></p>
Another problem with made-up elements is that you won't know what the future holds. If you created a website a couple of years ago with tag names like picture, dialog, details, slot, template etc, expecting them to behave like spans, are you in trouble now!
This is not an option in any HTML specification :)
You can probably do what you want with <div> elements and classes, from the question I'm not sure exactly what you're after, but no, creating your own tags is not an option.
As Nick said, custom tags are not supported by any version of HTML.
But, it won't give any error if you use such markup in your HTML.
It seems like you want to create a list. You can use unordered list <ul> to create the rool elements, and use the <li> tag for the items underneath.
If that's not what you want to achieve, please specify exactly what you want. We can come up with an answer then.
You can add custom attribute through HTML 5 data- Attributes.
For example: Message
That is valid for HTML 5. See http://ejohn.org/blog/html-5-data-attributes/ to get details.
You can just do some custom css styling, this will create a tag that will make the background color red:
redback {background-color:red;}
<redback>This is red</redback>
you can use this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MyExample</title>
<style>
bloodred {color: red;}
</style>
</head>
<body>
<bloodred>
this is BLOODRED (not to scare you)
</bloodred>
</body>
<script>
var btn = document.createElement("BLOODRED")
</script>
</html>
I found this article on creating custom HTML tags and instantiating them. It simplifies the process and breaks it down into terms anyone can understand and utilize immediately -- but I'm not entirely sure the code samples it contains are valid in all browsers, so caveat emptor and test thoroughly. Nevertheless, it's a great introduction to the subject to get started.
Custom Elements : Defining new elements in HTML