HTML and CSS Reference
In-Depth Information
li:nth-child(odd) {
background: #CCC;
color: green;
}
</style>
</head>
<body>
<details>
<summary>Closest Store Locations</summary>
<ul>
<li><p>500 Ford Street, East Lanford IL 12345</p></li>
<li><p>13 West Nectar Road, Brunswick FL 12345</p></li>
<li><p>275 Bimba Drive, Clifton PA 12345</p></li>
</ul>
</details>
</body>
</html>
If you preview this in your browser, you'll see that you can open and collapse the information, which is a pretty
useful UI element that can also be styled via CSS. You can even add some attributes like
open
, which allows the
browser to open the
details
element by default when the document loads. You can even nest details and summary
elements inside one another to create a very complex stack of UI elements. As you can see from Figure
11-10
, at the
time of this writing, the
details
element is supported only in Chrome, Safari 6, and Android 4.0. Keep an eye on this
element, though, because adoption should take off very soon.
Figure 11-10.
The support for the details and summary element. Source:
http://caniuse.com/#feat=details
.
You may be asking yourself, “Wait! How do we know where the user is?” That's a great question, and I'm happy to
introduce you to the next section.
Geolocation
Another huge addition to the modern web stack is the Geolocation API. Geolocation data is the latitude and longitude
coordinates of your user. Traditionally, you would need to leverage web services like
http://maxmind.com
and go
through a process of looking up a user's IP address and tying it to an approximate location. This is not fault-proof
in that it's up to the Internet service provider (ISP) to assign that IP to a user. (This would be Verizon, Comcast, and
