HTML and CSS Reference
In-Depth Information
5.1.2. Controlling visibility of views using CSS
Now that you have the three views implemented in one HTML file, you need the ability to
switch among the different views. You will do this by turning off the visibility of the pre-
vious view and turning on the visibility of the next view. (You won't need to make these
changes to the CSS file, because you should have already copied the Manning-supplied
CSS file to your server's directory. See “ Prerequisites .”)
Step 4a: Enable navigation between views by using CSS to define <- <section> visibility rules
In order to have only one view visible at a time, the application's CSS file defines rules to
control the visibility of each view's <section> element:
section {
display : none;
The first rule declares that a section element should be invisible wherever a section
element is defined.
In order to make a specific view visible, the application defines some counteracting rules:
body . list section . list ,
body . add section . add ,
body . settings section . settings {
display : block ;
These rules declare that a <section> element should be visible when a <body> element
and its embedded <section> element have a class attribute in common (either list ,
add , or settings) . In this situation, the <section> element would also match the
first rule, but the more specific rule will override the first rule.
To see how this works, consider what happens when the user wants to switch views.
When the user taps the Add Task button on the navigation bar, the application changes the
<body> 's class attribute to add . Because the <body> 's class attribute now matches
the <section> with a class attribute of add , the section.add element becomes
visible, and all other <section> s are rendered invisible.
Search WWH ::

Custom Search