| Index: trunk/phase3/docs/uidesign/child-selector-emu.html |
| — | — | @@ -0,0 +1,101 @@ |
| | 2 | +<!DOCTYPE html> |
| | 3 | +<html> |
| | 4 | +<head> |
| | 5 | + <title>CSS Child selector emulation for IE 6</title> |
| | 6 | + <style type="text/css"> |
| | 7 | + /** Common rules **/ |
| | 8 | + body { background-color: #CCC; } |
| | 9 | + table { border:1px black solid; } |
| | 10 | + caption { |
| | 11 | + background-color: #98fb98; |
| | 12 | + border:1px solid #40FF40; |
| | 13 | + } |
| | 14 | + |
| | 15 | + /** "old" rules" **/ |
| | 16 | + table.global th, |
| | 17 | + table.global td |
| | 18 | + { |
| | 19 | + border: 1px red solid; |
| | 20 | + background-color:white; |
| | 21 | + padding:1em; |
| | 22 | + } |
| | 23 | + table.global th |
| | 24 | + { |
| | 25 | + background-color: #ffc0cb; |
| | 26 | + } |
| | 27 | + |
| | 28 | + /** second table. Try to emulate child selector */ |
| | 29 | + table.childemu th, |
| | 30 | + table.childemu td { |
| | 31 | + border: 1px red solid; |
| | 32 | + background-color:white; |
| | 33 | + padding:1em; |
| | 34 | + } |
| | 35 | + table.childemu th |
| | 36 | + { |
| | 37 | + background-color: #ffc0cb; |
| | 38 | + } |
| | 39 | + |
| | 40 | + /** Reset style applied in childemu classes */ |
| | 41 | + /** TODO: find the real default value!! */ |
| | 42 | + table.childemu tr * th, |
| | 43 | + table.childemu tr * td { |
| | 44 | + border: none; |
| | 45 | + background-color: transparent; |
| | 46 | + padding: 0; |
| | 47 | + } |
| | 48 | + |
| | 49 | + |
| | 50 | + /** child selector emulation */ |
| | 51 | + </style> |
| | 52 | +</head> |
| | 53 | +<body> |
| | 54 | +<p> |
| | 55 | +The following table show how nested tables inherit colors from the wikitable class (here it was renamed "global"). |
| | 56 | +</p> |
| | 57 | +<table class="global"> |
| | 58 | +<caption>Global table</caption> |
| | 59 | +<tr> |
| | 60 | + <th>TH: should have pink bg</th> |
| | 61 | +</tr> |
| | 62 | +<tr> |
| | 63 | + <td>TD: white bg</td> |
| | 64 | +</tr> |
| | 65 | +<tr> |
| | 66 | + <td> |
| | 67 | + <table class="nested"> |
| | 68 | + <caption>Nested table</caption> |
| | 69 | + <tr> |
| | 70 | + <th>Nested TH: transparent</th> |
| | 71 | + <td>Nested TD: transparent</td> |
| | 72 | + </tr> |
| | 73 | + </table> |
| | 74 | + </td> |
| | 75 | +</tr> |
| | 76 | +</table> |
| | 77 | + |
| | 78 | +<p> |
| | 79 | +With child selector we could limit the wikitable styling to the direct childs of the table. Unfortunately, Internet Explorer 6.0 does not support child selector. See <a href="https://bugzilla.wikimedia.org/show_bug.cgi?id=33752">our bug #33752</a>. |
| | 80 | +</p> |
| | 81 | +<table class="childemu"> |
| | 82 | +<caption>Global table</caption> |
| | 83 | +<tr> |
| | 84 | + <th>TH: should have pink bg</th> |
| | 85 | +</tr> |
| | 86 | +<tr> |
| | 87 | + <td>TD: white bg</td> |
| | 88 | +</tr> |
| | 89 | +<tr> |
| | 90 | + <td> |
| | 91 | + <table class="nested"> |
| | 92 | + <caption>Nested table</caption> |
| | 93 | + <tr> |
| | 94 | + <th>Nested TH: transparent</th> |
| | 95 | + <td>Nested TD: transparent</td> |
| | 96 | + </tr> |
| | 97 | + </table> |
| | 98 | + </td> |
| | 99 | +</tr> |
| | 100 | +</table> |
| | 101 | +<p><strong>NOTE:</strong>The nested caption keep the green background. The nested table keep the black border. This is because those declarations are global so we did not reset them.</p> |
| | 102 | + |
| Property changes on: trunk/phase3/docs/uidesign/child-selector-emu.html |
| ___________________________________________________________________ |
| Added: svn:eol-style |
| 1 | 103 | + native |