This event was held at Evernote's office which I had not been to before. They have a nice space. Johnathan Hebert now works there so expect his group to meet there going forward. Everything in Tim's talk was new for me. There was no rehashing of the CSS stuff everyone has seen already. The first example was of sibling selection.
<html>
<head>
<title>Whatever</title>
<style type="text/css" media="all">
#two ~ p {
color: blue;
}
</style>
</head>
<body>
<div>
<p id="one">one</p>
<p id="two">two</p>
<p id="three">three</p>
<p id="four">four</p>
</div>
<p id="five">five</p>
</body>
</html>
The copy in the "three" and "four" paragraphs is going to be colored blue. The tilde ensures it. It finds a match for "two" and then finds all of the adjacent siblings (other paragraph tags in this case) downstream that have the same wrapping parental DOM element and applies its style there. The "five" is outside of the div wrapping the first four paragraph tags so it will not have its text turned blue. If a plus symbol were to be used in lieu of the tilde then the plus symbol would be the "next sibling selector" and only the "three" would get blue text. "Why should I care?" you ask. One of the interesting loopholes/exploits this sort of thing affords takes shape in allowing DOM elements to be on/off clickable like checkboxes or radio buttons. One of Tim's examples had a "Hello Austin" (note not "Hello World" ...comic commentary?) checkbox wherein the checkbox itself was hidden and one just clicked the "Hello Austin" copy to make the checkbox check and uncheck. How would you even know if the state was on or off if you couldn't see the hidden element? Well, the words "Hello Austin" would change color when checked! Alright, how does one pull that off? In Tim's example the copy was pulled out to a label that immediately followed the checkbox and was associated to it by way of having a for setting identical to the checkbox's id setting. This means that whenever the label itself is clicked, the checkbox behaves as though it were clicked directly. The checkbox is then hidden with the CSS you might expect and the specific state of being checked gets its own styling by way of the checked pseudoselector and it is this styling that uses the tilde to try to find a label immediately downstream in the DOM.
<html>
<head>
<title>Whatever</title>
<style type="text/css" media="all">
input[type=checkbox]:checked ~ label {
color: blue;
}
input[type=checkbox] {
display: none;
}
</style>
</head>
<body>
<input id="enabler" type="checkbox">
<label for="enabler">Hello Austin</label>
</body>
</html>
More to come...
No comments:
Post a Comment