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.
Related
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 have an ionic/angular app which autogenerates a custom tag element with a different _ngcontent attribute each time e.g.:
<tag _ngcontent-hgr-c2>...</tag> (1st refresh)
<tag _ngcontent-agj-c7>...</tag> (2nd refresh)
<tag _ngcontent-cfx-c5>...</tag> (3rd refresh)
Is there a way to use regex to target the custom tag attribute?
This didn't work:
tag[^=_ngcontent-] {
color: red !important;
}
Nor did just targetting the tag app e.g.:
tag {
color: red !important;
}
According to this answer, there is kind of regex in CSS, but it can be only applied to attribute's value, not to attribute itself. The W3C documentation says the same, so because Angular creates custom attributes, I'm afraid that it can be hard to achieve by regex.
If you want to style your tag like in the second example you can do it by defining its styles in global styles.scss. This is not the best solution, but should work.
This angular-blog article recently helped me understand the idea behind the style ecapsulation.
Unfortunately, there is no wildcarding support in CSS for attribute names.
If you have access to the application code which generates the custom tags, you should add classes to these elements (if the app supports it).
See also this question.
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.)
I want a link that does nothing. I don't want this:
<a href="#">
because then the URL becomes something.com/whatever/#.
The only reason I want a link is so the user can see that they can click on the text. JavaScript is being used to perform some action so I don't need the link to go anywhere but I need it to look like a link!
I could use some data attribute and tell me CSS to make elements look like links if they have this attribute but it seems a bit overkill.
The following will prevent your href from being ran
<a href="#" onclick="return false;">
If you are using jQuery, event.preventDefault() can be used
Try this:
link
In HTML5, this is very simple. Just omit the href attribute.
<a>Do Nothing</a>
From MDN on the a tag href attribute:
href
This was the single required attribute for anchors defining a hypertext source link, but is no longer required in HTML5.
What about the hand cursor on hover?
The default styles for a browser may not change the cursor to a pointer, for a tags with no href. You can universally change this with the following CSS.
a {
cursor: pointer;
}
<a>Do Nothing</a>
However it's probably better to be more-selective about it, and apply it to only the elements you intend to add event handlers to.
What about making it tab-focusable?
Just add tabindex="0" to the element.
<a tabindex="0">Do Nothing</a>
Does it makes sense to use an a tag without a link?
Usually no, it's probably better to use a button element instead, and style it with CSS. But whatever you use, avoid using an arbitrary element like div when possible, as this is not semantic at all.
Don't make it a link (although it is prefered to do it) and style it with CSS so that it looks like a link:
p.not-a-link { text-decoration: underline; cursor: pointer }
Or even better just make it a link and let the javascript function which is used e.preventDefault() to prevent the link.
Also add the link to the href so that users without JS enabled will still be able to use it (as a fallback).
Link text - that's what I usually use
Proper:
Link
We can achieve that using javascript void which normally involves evaluation of an expression and returning undefined, which includes adding javascript:void(0); on the href.
The void operator is usually used merely to obtain an undefined primitive value, usually using “void(0)” (which is equivalent to “void 0”). In these cases, the global variable undefined can be used instead (assuming it has not been assigned to a non-default value).
a {
text-decoration: initial;
}
This link actually does nothing when clicked
#Curt's answer will work, but you can use a cursor style in css to make it look like a link without the bother of generated a bogus link. Use hand or pointer depending on browser conformance.
Cross browser conformant pointer css (from cursor style guide):
element {
cursor: pointer;
cursor: hand;
}
one way which no one has mentioned is to point the href to an empty local file location like so
<a href='\\'>my dead link</a>
why? If you use a framework such as react or angular, the compiler will spit out some warnings which can make your log or console dirty. This technique will also prevent robots or spiders from incorrectly linking things.
just remove the href attribute. it's not necessary.
<a> a link </a>
What if you use only css?
pointer-events: none;
span, a {
color: black;
cursor: default;
pointer-events: none;
text-decoration: none;
}
<span>Normal text --> Link to google click me <-- another text</span>
Text goes here
When clicked this link will do nothing except display a little javascript:void(0) in the corner
DONT USE <a>... instead use <span class='style-like-link'>
and then use the class to style it however you want.
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.