This question already has answers here:
CSS3's attr() doesn't work in major browsers
(5 answers)
Closed 8 years ago.
The spec says:
The attr() function returns the value of an attribute on the element for use as a value in a property. If used on a pseudo-element, it returns the value of the attribute on the pseudo-element's originating element.
http://www.w3.org/TR/css3-values/#attr
However, this doesn't seem to work. When I use background-image: url(attr(href)); I get string "attr(href)" as attribute value, not the value itself.
http://jsfiddle.net/x2Rpt/1/
Any ideas why this is broken?
It's not broken; it's just that no browser has implemented the CSS3 version of attr(). Currently, implementations only exist for the one that was introduced in CSS2.1, which is limited to the content property for generated and replaced content.
Your syntax seems correct otherwise, until and unless changes are made to the spec.
Related
This question already has answers here:
CSS3's attr() doesn't work in major browsers
(5 answers)
Closed 5 years ago.
I want to useattr()function in some span, but I won't use ::after and ::before pseudo-elements. For example:
<span size="36">Text</span>
<style>
span[size]{
font-size: attr(size pt);
}
</style>
Is it possible to do so using CSS or SASS or LESS?
The attr() returns a string and as such the only property it will practically work on as of today is the content property.
In your case it will return the string 36 and will therefore not be properly applied.
Its syntax has an experimental second parameter, <type-or-unit>, where one amongst other should be able to choose the returned value's data type, though no browser support it yet.
A side note, both SASS and LESS compiles into CSS and aren't able extend the CSS into something CSS can't already do.
This question already has an answer here:
Is it possible to use CSS vars in CSS3 selectors?
(1 answer)
Closed 7 years ago.
Keep in mind that this is not a duplicated question, to probe it go and read the http://www.w3.org/TR/css-variables/ if you read it says:
This version: http://www.w3.org/TR/2015/CR-css-variables-1-20151203/ If you read the date it says that is from 2015/12/03 so it's very recent, probably there is the confussion. The question that it says that was asked first does not work in the same way and was asked two years ago, e.g.(it uses a prefix -webkit- so it means that it wont work in all browsers that support the Native CSS Variables) The kind of variables i'm talking is something new, to understand why am i saying this, you need to read the articles of the links below, also my question cover another things that aren't answered in the question that was asked two years ago.
Also the second question below is updated now.
Maybe some people already know that there is a new implementation of variables for CSS, they bring a whole new way to write CSS code, at this moment the browser support is very low, but this have a great future.
I had read some information that explains more about CSS variables, so if you need info about it:
http://philipwalton.com/articles/why-im-excited-about-native-css-variables/
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
http://www.w3.org/TR/css-variables/
There are a few things that i still don't have clear:
Is there another method to change the values of a variable, that not be the media queries? e.g. using :hover or javascript?
Can i use variables to define Selectors?
Is there another method to change the values of a variable, that not
be the media queries and selectors?
I assume you mean changing the value of a CSS variable outside of a rule set.
Yes, you can. You can assign a CSS variable through the style property and the setProperty or setPropertyValue methods.
document.body.style.setProperty('--bg', 'red');
body {
background: var(--bg);
}
Can i use variables to define Selectors?
No. It wouldn't make sense to do so: from which element should it retrieve the value of the variable? Using variable values in properties could make more sense, but you can't neither.
To retrieve the value of a CSS variable you can only use var(), which can only be used in values.
The value of a custom property can be substituted into the value of another property with the var() function.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
What does a star-preceded property mean in CSS?
I downloaded CSS file for one of jQuery scripts and it look like this
.usual div {
*margin-top:-15px;
clear:left;
background:snow;
font:10pt Georgia;
}
what is the use of star sign?
This is a hack for IE7 and under. Only those browsers will respond to the CSS rule, as it's considered invalid to all other browsers.
It's a hack to, in this case, change positioning in certain versions of IE.
The CSS standard says to ignore properties whose names are preceded with some character, but some versions of Internet Explorer ignore this. Some you might see are:
*someproperty: somevalue - IE7 and earlier affected
_someproperty: somevalue - IE6 and earlier affected
#someproperty: somevalue - I forget. Probably the same effect as *.
You should probably use conditional comments instead, however.
This question already has answers here:
Detecting IE version using CSS Capability/Feature Detection
(18 answers)
Closed 5 months ago.
In the son of suckerfish drop down menu:
http://www.htmldog.com/articles/suckerfish/dropdowns/example/
You see this rule
w\idth: 13.9em;
This can't be a typo as it appears various times in the css. What is it for?
This is called a CSS Hack.
Some browser will ignore the \ and treat that as a width property; other browsers will ignore the entire property.
You can see a complete list here.
It's called the Modified Box Model Hack.
From the linked site:
as explained above in the section on the SBMH is hidden from IE5.x/Win because of the character escape. IE5/Mac and IE6/Win which implement the CSS box model correctly, therefore, properly get a width of 100px.
It's a "box model hack" to workaround the incorrect box model for older IE versions.
Read more about this specific hack here: http://css-discuss.incutio.com/wiki/Box_Model_Hack
It likely has to do with the box model hack. Read here for more info: http://webdesign.about.com/od/css/a/aaboxmodelhack.htm
This question already has answers here:
Detecting IE version using CSS Capability/Feature Detection
(18 answers)
Closed 5 months ago.
I have been looking at a hack to solve a CSS problem I have. I have used one to create a custom rule for Internet Explorer.
margin-top:45px;
*margin-top:0px;
Does this hack apply to all IE browsers? Does this hack appear in any versions of Firefox or Safari?
This applies to IE7 and below. But be aware that this is not valid CSS, and it could break at any time. See here for a more comprehensive list of the various CSS hacks and which browsers they affect.
Although Internet Explorer 7 corrected its behavior when a property name is prefixed with an underscore or a hyphen, other non-alphanumeric character prefixes are treated as they were in IE6. Therefore, if you add a non-alphanumeric character such as an asterisk (*) immediately before a property name, the property will be applied in IE and not in other browsers. Unlike with the hyphen and underscore method, the CSS specification makes no reservations for the asterisk as a prefix, so use of this hack could result in unexpected behavior as the CSS specifications evolve.
I'd strongly recommend reconsidering whether you really need this hack, and if there isn't a better way to do what you want.