PHPXRef 0.7.1 : MediaWiki-1.24.0 : /docs/uidesign/child-selector-emu.html source

[Summary view] [Print] [Text view]
   1  <!DOCTYPE html>
   2  <html>
   3  <head>
   4      <title>CSS Child selector emulation for IE 6</title>
   5      <style>
   6          /** Common rules **/
   7          body  { background-color: #CCC; }
   8          table { border:1px black solid; }
   9          caption {
  10              background-color: #98fb98;
  11              border:1px solid #40FF40;
  12          }
  13  
  14          /** "old" rules" **/
  15          table.global th,
  16          table.global td
  17          {
  18              border: 1px red solid;
  19              background-color:white;
  20              padding:1em;
  21          }
  22          table.global th
  23          {
  24              background-color: #ffc0cb;
  25          }
  26  
  27          /** second table. Try to emulate child selector */
  28          table.childemu th,
  29             table.childemu td {
  30              border: 1px red solid;
  31              background-color:white;
  32              padding:1em;
  33          }
  34          table.childemu th
  35          {
  36              background-color: #ffc0cb;
  37          }
  38  
  39          /** Reset style applied in childemu classes */
  40          /** TODO: find the real default value!! */
  41          table.childemu tr * th,
  42          table.childemu tr * td {
  43              border: none;
  44              background-color: transparent;
  45              padding: 0;
  46          }
  47  
  48  
  49          /** child selector emulation */
  50      </style>
  51  </head>
  52  <body>
  53  <p>
  54  The following table show how nested tables inherit colors from the wikitable class (here it was renamed "global").
  55  </p>
  56  <table class="global">
  57  <caption>Global table</caption>
  58  <tr>
  59      <th>TH: should have pink bg</th>
  60  </tr>
  61  <tr>
  62      <td>TD: white bg</td>
  63  </tr>
  64  <tr>
  65      <td>
  66          <table class="nested">
  67          <caption>Nested table</caption>
  68          <tr>
  69              <th>Nested TH: transparent</th>
  70              <td>Nested TD: transparent</td>
  71          </tr>
  72          </table>
  73      </td>
  74  </tr>
  75  </table>
  76  
  77  <p>
  78  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>.
  79  </p>
  80  <table class="childemu">
  81  <caption>Global table</caption>
  82  <tr>
  83      <th>TH: should have pink bg</th>
  84  </tr>
  85  <tr>
  86      <td>TD: white bg</td>
  87  </tr>
  88  <tr>
  89      <td>
  90          <table class="nested">
  91          <caption>Nested table</caption>
  92          <tr>
  93              <th>Nested TH: transparent</th>
  94              <td>Nested TD: transparent</td>
  95          </tr>
  96          </table>
  97      </td>
  98  </tr>
  99  </table>
 100  <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>
PHP Cross Reference of MediaWiki-1.24.0

/docs/uidesign/ -> child-selector-emu.html (source)
