According to the w3 XHTML specification, the label attribute specifies a shorter label for the option. However (using the try-it tool with FF3.5), I can't see any effect. Hence my question: what does this attribute really do?
EDIT
It seems that it overrides the label used in the dropdown list. The contents of the option are (as far as I know) only used as the default for the value. Does this (in IE7+) make the following two declarations equivalent?
<option label="Volvo">Volvo (Latin for 'I roll')</option>
and
<option label="Volvo" value="Volvo (Latin for 'I roll')">Whatever....</option>
Note: The label attribute is only supported by IE 7+. Try in IE and you will see the difference.
The label attribute defines a shorter version of the text which will appear for its option in the drop-down list of the select menu.
label is defined as an optional attribute of the option tag, meaning implementation of and support for the attribute is not required to be compliant with the W3C standard. More information can be found here about the option tag:
http://www.w3schools.com/tags/att_option_label.asp
And, here is the link to the W3C specification:
http://www.w3.org/TR/html4/interact/forms.html#edef-OPTION
(Edit):
#Martijn the only usefulness I see is that it allows the developer to define an option tag and the label sets the "viewable text", and close it shorthand, rather than having to also specify a separate closing option tag. This would result in less code/data sent to the browser/device, which might have implications in mobile applications.
Related
When looking at the elements of a page that I am analyzing using Chrome DevTools, I am seeing the following weird display:
What is that "(1)" in the end? Since the source is user agent stylesheet, I can't drill down any further.
In the Elements panel, I see similar weirdness:
I thought parentheses were not permitted in CSS selector names. What is the "primaryNavId:(primaryLi1)" being used above?
UPDATE:
A more detailed screencap of the "inherited from" line (Styles pane):
When I click on the "inherited from" line, I get the following in the Styles pane:
UPDATE 2 - FIREFOX INSPECT:
Firefox displays the same information in the Elements pane for the item in question, but the Styles panel shows it differently, as follows:
What a mess. Now I understand why you tagged your original question (and this one) css-selectors.
To start, browser developer tools naïvely assume that classes and IDs don't contain any special CSS selector characters and can therefore be represented in CSS selector notation without any escape sequences. So what you get is something that looks like a selector, but on closer inspection is actually malformed. You can see evidence of this in pretty much every browser's developer tools. The breadcrumb navigation, for example, in every one of them will list the li element as li followed by a period (for a class selector) followed by the class name without any escape sequences. Evidently the same appears to hold true for IDs.
It would seem that Google Chrome uses this same notation for "Inherited from" labels. Firefox is smart enough to only list the element's element type (which is far more predictable), i.e. "Inherited from li", and display the actual style rule and the actual selector from the source CSS, but its breadcrumb navigation suffers from the same problem making it kind of moot.
What you're looking at in the element inspector, however, is not a selector. It's an HTML class attribute. The syntactic rules are completely different. And that's why I said that this answer of mine that you previously linked to was completely irrelevant to your original question. But I can see why you're confused, seeing as HTML and CSS are closely related and CSS has dedicated class and ID selectors. (I suspect there wouldn't be any confusion if we were forced to use quoted attribute selectors for all attributes from the beginning — but attribute selectors weren't even around until CSS2.)
As to why the class name that's reflected in the Styles pane is different from the one that's reflected in the element inspector, the reason for that is not clear. Either you're inspecting different elements altogether, or something else is at play (and judging by the cryptic-looking class names, it may well be some funky client-side scripting framework voodoo magic).
I accessibility guidance for my CSS-only tooltip — http://chantastic.github.io/tip.css/
This is how you use it:
<span data-tip-content="this is a tip" data-has-tip>Hover here</span>
The current API
To avoid the browsers default rendering of title, I'm using data-tip-content for tooltip text. By doing that, I'm also losing the accessibility benefits of title (Related SO Question).
My Current Work around
I'd like to add aria-label as a content source, making use look like this:
<span aria-label="this is a tip" data-has-tip>Hover here</span>
My Question
Does aria-label make sense in this case? Is there an accessibility interest that this will not cover?
I am very new to accessibility and would appreciate experience-based feedback. Thank you.
If you think there is a better solution, please consider these constraints:
CSS-only. Many JS-tooltips simply remove and restore the title-attr on mousenter/mouseleave. I'm not interested in a JS solution.
No Additional Markup. This library is intended to be minimal and simple. It uses :after, :before, and content to avoid the requirement for additional markup blocks.
Two-Attribute API. This library only requires the addition of 2 attributes.
The aria-label attribute specifies a label for the element, typically an accessible name for an input element that would otherwise lack an explicit label, because the user is expected to infer its role from the visual context. Although its description refers to the HTML title attribute and tooltips, it’s not really meant to be used for things like CSS tooltips. Rather, it is useful for labelling elements instead of using the title attribute, which has some drawbacks in such use.
However, there is unfortunately no ARIA attribute that would be more suitable. There is odd asymmetry: ARIA has aria-label for direct labeling and aria-labelledby for indirect labeling, i.e. for specifying an element that contains a label for the current element, but for descriptions, there is just the indirect aria-describedby.
So this boils down to using aria-label, given your current approach and markup. In a different approach, where the tooltip text is element content and not an attribute value, you could use aria-describedby.
P.S. The attribute data-has-tip looks redundant here, since you can use, both in CSS and in scripting, just the presence of a data-tip-content attribute instead.
Is there a way to see exactly which declaration is affecting an element. Rather than looking at a million properties in the Firebug inspector, where depending on how many classes something is assigned may contain a lot of declarations that are lower precedence and therefore not applied. It can get lengthy to find which particular declaration is in fact affecting your element. I see long ignored declarations like this:
ul {
color: green;
}
"Computed style" will show you the end result of all the hierarchies, but not where the style derives from. Maybe I'm missing something simple. Thanks much!
JSBIN
Edit:
I've heard that I should be able to expand attributes in the Computed tag, however I don't see where that option is available. I can see that the font-size is 13.333px, but no option to see where that's coming from.
Yes, in Firebug select the element and then click on the 'Computed' tab (when viewing the HTML frame). Here you will see a list of CSS properties than can be expanded to show the location of the relevant CSS.
The Computed side panel can give you this info.
Note that it just shows the CSS trace - i.e. the styles that are affecting a specific CSS property - for those properties, which are actually changed by the CSS rules of your stylesheet. Though it can display all computed values for an element. To hide the unchanged ones you can uncheck the option Show User Agent CSS.
Also please ensure that you have a current version of Firefox installed (current stable is 20.0.1). Firebug internally uses some APIs for the style tracing, which are just available on newer versions of Firefox.
In Chrome DevTools there is 'computed style' panel which shows you the list of styles for an element property and their locations. For example see the screenshot for text-decoration property.
After looking through everything except the Gecko source, I'm somewhat confused by the following behavior. I wanted to see if I could style a text input based on a user-inputted value, and eventually ended up with this CSS:
input[value="password"] {
border:1px solid red;
}
The problem is, it seems the value of an input is only checked on the elements creation, as seen in this example.
Is it possible to accomplish this without the use of Javascript? Why would a browser not update styles accordingly?
It doesn’t work, because attribute selectors “match elements which have certain attributes defined in the source document” (Attribute selectors in CSS 2.1). Things are a bit more complicated really, because calling setAttribute('value','password') on the input element causes a match in many browsers (not IE). But this is irrelevant if you don’t use JavaScript.
There is, however, an indirect way, though it is mostly theoretical for the time being, due to limited browser support and to complications in implementations. You could write:
<style>
input:valid { border: 1px solid red; }
</style>
<input pattern=password id=x>
This uses the HTML5 pattern attribute, in this case specifying a regular expression that is merely a fixed string with no wildcards, and the CSS3 Basic UI :valid pseudo-class that tests whether the element’s state satisfies validity constraints. This is not suitable for normal use (e.g., no support in IE 9), but in special situations in controlled environments, things like this might be usable.
However, browsers that support such features tend to have their own reporting of validity errors, like special color around the box when the value is invalid, and I don’t think you can change that in CSS – JavaScript might help, but… So the reporting might conflict with your goals here. Moreover, it seems that browsers supporting these features treat the element’s state as valid when the box is empty. This is odd, and attempts to work around this my making the input obligatory (HTML5 attribute required) seem to open new cans of worms rather than fix. But maybe in some cases you could use just some initial value, say value="?", that the user is expected to replace by this input.
No. CSS cannot check the value of an input field past what is available in the HTML structure.
When you're typing into an input field, you're not actually changing the attribute in the HTML.
This does not work because you're not actually changing the value attribute of the element. For example, look at this fiddle:
http://jsfiddle.net/jblasco/J9xSd/
It does work, because the value attribute is actually changed. Simply typing in the field, or updating it through the Javascript method you used, does not change it. Which is normally useful, for getting the default value later, but perhaps not-so-useful in this sense.
Yo everyone
My question is quite simple: I need to style the red border (or shadow?) of the inputs that couldn't be validated (like email). Is there any new CSS trick to do that?
If you still don't understand what I am telling you, then this is the color that needs changing:
See https://developer.mozilla.org/en/CSS/%3Ainvalid for Firefox details, although presumably the parts without "-moz" apply to other browsers too:
The :invalid CSS pseudo-class is applied automatically to <input>
elements whose contents fail to validate according to the input's type
setting. This allows you to easily have invalid fields adopt an
appearance that helps the user identify and correct errors.
By default, Gecko does not apply a style to the :invalid pseudo-class.
However it does apply a style (a red "glow" using the box-shadow
property) to the :-moz-ui-invalid pseudo-class, which applies in a
subset of cases for :invalid.