HTML and CSS Reference
In-Depth Information
This is very useful if you would like to style experiences based on the kind of features
available. For example, we notice the class name called no-touch in the html ele-
ment. This means the browser this page was loaded in, did not support touch inter-
faces. If touch was supported, then we could make all links with slightly more pad-
ding to account for large fingers trying to click on them. Let us add styles to our css/
style.css file to do this, as follows:
.touch a {
padding: 0.25em;
background: #CEC3A1;
border-radius: 0.5em;
display: inline-block;
}
Here is how our site looks on a browser that supports touch events (on the left-hand
side) and one that does not (on the right-hand side):
Search WWH ::




Custom Search