why ::marker pseudo-element not support all CSS properties like other pseudo-elements?
can anyone explain me in brief.
Found out today that ::marker pseudo-element not support all CSS properties like background, display, etc but "font-size", "color", and "content" properties are working like charm.
The CSS Lists specification explains:
NOTE: It is expected that future specifications will extend this list of properties and relax the restriction on which properties can take effect. However at the moment outside marker box layout is not fully defined, so to avoid future compatibility problems only these properties are allowed.
Because this selector selects marker of a list item. Like the buller for example. That means that it allows you only to customize the bullet, not the list itself. Thats why you cant apply properties like display, because you are effecting the marker itself. This can be helpful
Related
I know that I can do add color, padding... by styling the input. Are there vendor pseudo elements to style the text itself like there are for placeholder? I want to like translateY the text in the input but not using vertical-align or affecting input's height.
I've searched before, and just now searched again, but I don't believe there are any vendor pseudo elements targeting the values of text inputs like there are for placeholder text.
Being able to apply CSS transform properties to text input values is, to the best of my knowledge, not currently possible with CSS only. There may be some way to achieve what you want with JS, but I haven't seen it done before.
This post delves into the issue, offers some creative workarounds, and may provide you with useful guidance: Is there a way to style part of an input field's value?
Well, this is pretty straightforward. If Chrome's Developer Tools is showing me that a style is overridden, how to see what CSS rule is overriding it?
I want to know if is there anything like "Show me what overrides this".
OBS: Please, don't point me to Firebug.
Use the Computed Style panel of the element inspector. Expand the property of interest to see the list of applicable rules, and which one won.
You can simply look at the ones with the same name which aren't striked out, remember the listing is by importance.
Or you can view the computed styles. They will be the actually applied styles.
crtrl + shift + c and inspect the element. Then find the style without a line through it, in the box in the down right corner.
the override is in most cases at the top (and without a line through it, as this style is the "winning" one).
Do the "::before" and "::after" pseudo elements not work on image elements?
Here's an example I put together...I'm just trying to get a yellow background behind the image here:
http://dabblet.com/gist/3861878
I saw this "answered" (but no other details) in another post, but can't seem to find anything about it elsewhere.
CSS 2.1 spec says:
Note. This specification does not fully define the interaction of
:before and :after with replaced elements (such as IMG in HTML). This
will be defined in more detail in a future specification.
http://www.w3.org/TR/CSS21/generate.html
So it it'd be wise to avoid using this. Behavior across the browsers is uncertain and can change in future.
I want to know if the element is showing vertical scrollbars or not, and if it is possible to do this with CSS only.
This only needs to work for Firefox by the way.
If you mean using selectors to test, no, there isn't such a selector in standard CSS (because the presence of scrollbars is calculated during rendering), nor can I find any selectors in this list of Mozilla vendor extensions that do what you're looking for.
No, CSS cannot accomplish as this requires to be able to monitor the element, not apply styles.
Using jQuery
var element = $("#yourdiv");
if(element.get(0).scrollHeight > element.height()) {
console.log('scroll bar is visible');
}
Okay, so this is more of a question that has lots of solutions that are not CSS, but I'm looking for doing this more from a theoretical perspective. I have an application for it, but its not worth coding it out in any other way.
The (Fun) Question
How do you color the text of an element using the text of the element? I have an element, all on it's own, which will contain a hex value for a color, and I want the text to be that color, but I want to do it only using CSS (likely only can be done using CSS 3).
Sample HTML
<div class="color_contents">#0000FF</div>
So, I've tried to use the attr() with no success, but I'm not sure I'm using the right contents (I've tried text, textContent, and innerText to no avail). Doesn't need to be cross-browser, but just a way to accomplish it.
Currently, there is no way to use CSS to access an element's text content, not even with the CSS3 modules available today.
Regarding this:
So, I've tried to use the attr() with no success, but I'm not sure I'm using the right contents (I've tried text, textContent, and innerText to no avail). Doesn't need to be cross-browser, but just a way to accomplish it.
attr() only looks at element attributes (foo="bar"). Since text content isn't an attribute of an HTML element (despite being a member of the corresponding DOM object), you can't query for it using that function.
There isn't a similar function for accessing an element's text content.
You could do something like this. It's a bit hacky, but all CSS
div.color_0000FF:before{
color:#0000FF;
content: "#0000FF";
}
HTML
<div class="color_0000FF"></div>
Example: http://jsfiddle.net/s8vLy/
The content/attr CSS properties can only be used with :before and :after pseudo-elements.
CSS3 will support attr access from other properties, see https://developer.mozilla.org/en/CSS/attr.
However when/if CSS3 attr goes live, you will still not be able to acces the "contents" of a element from CSS, simply because thats not what CSS is designed for.
Bottom line, use javascript :)