When we view normalize.css http://necolas.github.io/normalize.css/ source code, we can see the following:
[hidden], template {
display: none;
}
What is the meaning of [hidden] ?
[attribute] is a selector for elements that have an attribute attribute.
[hidden] matches elements like this <p hidden>Hidden paragraph</p>.
The value doesn't matter, as long as the attribute exists. [lang] matches elements like this for example <p lang="pt-br">Paragráfo</p>.
P.S.: [attribute=value] also works. e.g. [headers="numberHeader"] for matching <td headers="numberHeaders">...</td>
According to a fast google search, I found the following
/*
* Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3,
* and Safari 4.
* Known issue: no IE 6 support.
*/
[hidden] {
display: none;
}
so obviously, you use the "hidden" attribute when you want something not to show up in your (e.g. html) code.
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'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 have an html code as below :
<div id="select_a_boundary" class="dataset_select2">Homes name</div>
I wrote a xpath expression for the same:
//div[#id = 'select_a_boundary' and #class = 'dataset_select2']
What will be the equivalent CSS Selectors for the same?
First of all if you are using id, you don't require to use class, secondly if you are willing yo select an element with an id select_a_boundary you can use
#select_a_boundary {
/* Styles goes here */
}
Demo
Note: Am not selecting the element which has that id and that class as
here, id is sufficient as it has to be unique, if you are using the id
for multiple elements than it's invalid
As per your comment
div[id=select_a_boundary][class=dataset_select2] {
color: red;
}
Demo X-Path Equivalent
Or an easier one (Credits: Jack)
#select_a_boundary.dataset_select2 {
color: red;
}
Note: Still I would recommend you to use #select_a_boundary is more
than enough
The equivalent of your expression in CSS is this:
#select_a_boundary.dataset_select2 {
/* whatever */
}
Because identifiers in a single document should be unique, you can even narrow it down to:
#select_a_boundary {
/* whatever */
}
One important thing to realize is that although XPath and CSS selectors have many similarities, they're two different things.
For instance, there's no XPath equivalent of :active or :hover for instance. Properly matching by class names is also more cumbersome with XPath.
On the other hand, CSS can't match things like "all paragraphs with an anchor child" which is trivial in XPath using //p[a].
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.
IE 7 applies its own font color to disabled inputs. How can I override this and set my own font color?
IE7 supports the [attr] selector, so you can simply use:
input[disabled]
{
color: red;
}
This may cause issues with DHTML (you'll have to try it), in which case you may want to additionally set a class when working on dynamic elements:
input.disabled,
input[disabled]
{
color: red;
}
Note that [attr] is the "has attribute" selector, there are a bunch of other selectors in the CSS spec. Because disabled is a boolean attribute, you only have to check for its existence rather than any particular value.
Give your input a class and add the styling via css.
Html:
<input class="dis" disabled="disabled" value="something"></input>
CSS
.dis{color:red;}
Working Example: http://jsfiddle.net/TQUhD/1
As Diodeus comments :disabled is not supported in IE: http://reference.sitepoint.com/css/pseudoclass-disabled
There is no style for disabled. CSS3 supports :disabled, but IE7 doesn't.
kmb385's suggestion is probably the best you can do.
No need to overrride CSS use class based approach and play with events works perfectly
You can do one thing:
<button class="disabled" onmousedown="return checkDisable();" >
function checkDisable() {
if($(this).hasClass('disabled') { return false;}
}