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.
Related
This question already has an answer here:
Using HTML attributes as CSS property values [duplicate]
(1 answer)
Closed 9 years ago.
I would like to do this in HTML:
text
and in CSS:
a {
background-image: url(attr(href));
}
It doesn't seem to work for me. Is it even possible?
Not possible in static CSS file. However you can have dynamically generated CSS by any server side language such as PHP.
Or use Sass or LESS if you need variables in CSS.
This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
Combine CSS Attribute and Pseudo-Element Selectors?
http://jsfiddle.net/BC3Td/
I have tested this in firefox and opera and there are no issues, however chrome, safari and mobile safari all ignore the second pseudo element css and default to the first, can anyone shed light on what is happening here?
and how can this be achieved without adding classes/id's?
ANSWER:
This is a webkit bug, the fix is relatively simple, if you add the following css (or any css rule that involves purely the (non-pseudo) element then it will fix itself.
#test-div a[href*="tel"],
#test-div a[href*="mail"] { display:block; }
How weird?
updted (working) fiddle is here: http://jsfiddle.net/BC3Td/3/
Sounds like a bug in Webkit selection. The psudeo selector does work if the element is also selected directly however (an effective no op used here):
http://jsfiddle.net/BC3Td/2/
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.
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:
Purpose of asterisk before a CSS property
(6 answers)
Closed 3 years ago.
I know what an asterisk does in a selector for CSS (What does an Asterisk do?), but what does it do in a property name? Here is an example of CSS used by YUI. I don't know what the *display does.
.yui-button .first-child
{
display:block;
*display:inline-block;
}
It is a syntax error. So in CSS, it makes the property name invalid and stops it being parsed.
Thanks to bugs in browsers, it is sometimes ignored. This effectively causes the property to apply only to browsers featuring that particular bug — IE7.
In general, it should be avoided in favour of conditional comments.
It's an IE hack. The second declaration will be applied by IE7 and older (thus overriding the first declaration), while other browsers will ignore it and continue applying the first declaration instead.
Also, this is invalid CSS syntax.
its like the underscore for ie6. but for ie7
if you put the asterisk the property will only be used in ie7 and older browsers.
its an hack...
It's one of the IE hacks. Internet Explorer parses CSS in a slightly different way, allowing for certain hacks that will be ignored in other browsers. Google for it. You can target different versions of IE with different hacks.