I was looking at some Polymer code (link) and stumbled upon something new to me: a dollar sign $ in an html attribute name e.g.
<div class="item" wide-layout$="{{wide}}">
Also, a CSS selector is used:
.item[wide-layout] .title { ... }
How is the $ sign interpreted in the element attribute ?
Thanks for your time folks!
Using $ on the element binds a property to an attribute. You can read more here.
wide in your scenario is probably a Boolean property on the element.
When wide = true, a wide-layout DOM attribute will be added to the element so it can be targeted via CSS.
The dollar sign tells Polymer that some code will change the attribute, may it be class or any specific property on a Polymer element.
The code can be a function or a simple variable.
Example:
<shopping-cart class$="[[colorDependingOnItem(onSale, typeOfBrand)]] row-element">
So the class can now change dynamically depending on what the method colorDependingOnItem returns, based on the two properties onSale and typeOfBrand.
Related
I'm reading some code and there is a piece of html that reads:
<div id="uniqueId1234" data-target=".uniqueId1234">
...
</div>
and then earlier on in the same html file there is a span element that seems to use this div as a class:
<span class="uniqueId1234">
...
</span>
Can someone explain how this works? I thought that a class was something created in a css file. Sorry if this is a dumb question.
This is likely part of some piece of Javascript code or a library that listens for some type of change or event on your element with the data-target attribute.
When this event is triggered, it can then use the value of that attribute as a selector for performing some other logic as seen in this basic jQuery-based example below:
// When an element containing your data-target attribute is clicked
$('[data-target]').click(function(){
// Find the appropriate target (i.e. ".uniqueId1234")
var target = $(this).data('target');
// Then use it as a selector for some type of operation
$(target).toggle();
});
Classes are very common within CSS to style multiple elements, but they can also commonly be used as a mechanism in Javascript as well, which is likely the case in your scenario here.
What does it mean to set data-target attribute of a div to the id of that div?
Nothing standard. data-* attributes are designed to hold custom data for custom code (typically client side JS) to process.
I thought that a class was something created in a css file.
Classes are an HTML feature used to put elements into arbitrary groups. They are commonly used when writing CSS, but also client side JS and other code.
I have a WebApp where I need to manipulate certain elements using a CSS file. The CSS classes contain square brackets and other special characters. At least chrome doesn't seem to accept them directly.
<div class="profileElement profile[~redString]">123</div>
Is this class even valid? Is there a way to use the classname? I want:
.profile[~redString]{
color: red; }
When I escape the ~ with a backslash chrome allows me to inject (F12 -> Elements -> the plus symbol on the top right) it to the page but displays the css in grey, meaning the class does not exist in the page.
Is that class valid?
If so, how would I use it?
Is this class even valid?
It depends on what you're validating against.
profile[~redString] is a valid HTML class name, exemplified by putting the markup through a validator.
However, .profile[~redString] is not a valid CSS selector, because the ~ is a special symbol as you have found out, and it's not in a place where the CSS parser would expect it. When you escape it, you get
.profile[\~redString]
which is a valid selector, but with a completely different meaning. It represents an element with a class name profile, as well as an attribute called ~redString. It does not represent an element with a class name that is exactly profile[~redString].
To match this element, you need to escape the square brackets as well. This will result in the entire stream of characters being treated as a single identifier:
.profile\[\~redString\]
Alternatively, you can use an attribute selector instead to make things cleaner:
[class~="profile[~redString]"]
Notice the ~= in this CSS2.1 attribute selector, which works similarly to a class selector.
See both selectors in action:
:first-child.profile\[\~redString\],
:last-child[class~="profile[~redString]"] {
color: red;
}
<div>
<div class="profileElement profile[~redString]">123</div>
<div class="profileElement profile[~redString]">456</div>
</div>
I understood that in the newer Polymer release 0.8 binding to an attribute inside a tag should be followed after $ sign. And it works like so:
<tag attribute$="{{DATA}}">
e.g. this works great:
href$="{{url}}"
But it doesn't work when the attribute gets more complex, e.g. in my code example:
<a style$="background-image: url({{backgroundimage}});">
which is a String data attribute.
Is it supported in 0.8 like it was in 0.5 ?
Complex bindings like that are not currently supported in 0.8. Instead you'd probably want to create a computed property and use that.
Btw, you only need to use $={{ }} syntax if you need work with an attribute that doesn't have a corresponding property on an element. Because HTMLAnchorElement (the <a> tag) has an href property, you don't have to use a dollar sign in that case, you can just create a regular binding using href={{url}}.
To put it another way:
href="{{site}}" means "bind this.site to element.href"
href$="{{site}}" means "bind this.site to element.attributes.href.value"
You usually only need the $ syntax when working with boolean attributes like hidden or disabled. Or in the case where an element does not have a corresponding property in JavaScript.
The element is similar to:
<input type="text" class="information">
There is no id for the element.
There is only one text type element inside the information class. I want to be able to enter text into this html element by using casperjs which works on top of phantomjs.
The XPath obtained from chrome developer tools is similar to:
//*[#id="abcid"]/div/div[1]/input
abcdid is the id of the div element which comprises of the text box and a few other elements. But I need a more reliable XPath. I'm not very experienced with finding XPaths so forgive me if the answer is too obvious.
If you want to use XPath selectors for nearly all CasperJS functions, you need to provide it as an object. If the selector is provided as a string it will be automatically assumed that it is a CSS selector.
You can build the XPath selector object yourself:
{
type: 'xpath',
path: '//input[#class="information"]'
}
or just use a XPath utility by first requiring it at the beginning of your script and then using it:
var x = require('casper').selectXPath;
// later ...
var text = casper.fetchText(x('//input[#class="information"]'));
Regarding your selector:
If there is only one input with the information class then you can use the XPath
//input[#class="information"]
or the CSS selector
input.information[type='text']
If the input has other classes too, the CSS selector will work as is, but the XPath selector must be changed to
//input[contains(#class,"information")]
I saw here square brackets that are used in class names:
<input class="validate[required,custom[onlyLetter],length[0,100]]" name="firstname" type="text" />
What do these square brackets mean?
The square brackets are used as an attribute selector, to select all elements that have a certain attribute value. In other words, they detect attribute presence.
Example 1:
img[alt="picName"] {width:100px;}
would affect only
<img src="picName.png" alt="picName" />
in your code, and won't affect
<img src="picName.png" alt="picName2" />
Example 2:
The following affects all elements with title attribute specified:
[title] {border:1px dotted #333;}
Example 3:
This CSS
p[class~="fancy"]
will affect the following html
<p class="fancy">Hello</p>
<p class="very fancy">Hola</p>
<p class="fancy maybe">Aloha</p>
but won't affect this:
<p class="fancy-fancy">Privet</p>
Example 4:
[lang|="en"]
will affect elements with lang attribute, which is hyphen-separated list of words beginning with “en”, like
<div lang="en">Tere</div>
<div lang="en-gb">GutenTag</div>
Examples 5, 6, 7:(CSS3)
The following attribute selector affects link elements whose href attribute value starts with the string “http:”.
a[href^="http:"]
The following attribute selector affects image elements whose src attribute values ends with the string “.png”.
img[src$=".png"]
The following attribute selector affects any input element whose name attribute value contains the string “choice”.
input[name*="choice"]
That is most likely used by some sort of validator or validation library. The class here means that validate this field denoted by validate keyword and then:
required it is required field
custom validation type; allow only letters
length should be between 0 to 100 chars
Well, this information is used by the jQuery validation library you posted the link to :)
Apart from the use-case / example given by the OP for brackets in class names, there is also another use case which Harry Roberts proposed (and later stopped proposing) in his blog a while back: grouping related classes in your markup where the square brackets could be used to group
two or more related class attributes to make them easier to notice
when scanning an HTML file
...
and that looks something like this:
<div class="[ foo foo--bar ] baz">
where:
There must be more than one ‘set’ of classes.
One ‘set’ must contain more than one class.
He also noted that adding the brackets is completely valid according to the html5 spec
There are no […] restrictions on the tokens authors can use in the
class attribute…
Just to reiterate:
The brackets in the class attributes - while being valid CSS class names are not actually meant to be used in the CSS1 - but rather to help readability in the HTML.
Notes:
1
Although technically, they can be used when escaped,
.\[ {
color: red;
}
<div class="[">Hi there</div>
Nothing. Brackets are a legal character for class names with no special meaning whatsoever.
In standard HTML, they have no particular meaning. It's just more text.
To the jQuery Validation plugin, they do.
Example:
[what-ever] {
color: red;
}
<p what-ever>Hello</p>
This will color Hello red. You can use square-bracket as class names
There is no particular rule within a class name. In your example they are almost certainly being used by a JavaScript validation framework. This is because in HTML you can't simply add your own attributes to tags, therefore the validation framework is exploiting the fact that CSS class names can contain such characters in order to 'store' the validation rules within the class name. There won't actually be any corresponding class in the style-sheet - this is just a trick to work around the limitations of HTML.