dépôts / lhc / web / wiklou.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 393a8c8)
design file for nested tables CSS
authorAntoine Musso <hashar@users.mediawiki.org>
Thu, 19 Jan 2012 17:22:36 +0000 (17:22 +0000)
committerAntoine Musso <hashar@users.mediawiki.org>
Thu, 19 Jan 2012 17:22:36 +0000 (17:22 +0000)
See:
Bug 33752 - Wikitable uses CSS not supported in IE6
r107669

docs/uidesign/child-selector-emu.html [new file with mode: 0644] patch | blob

diff --git a/docs/uidesign/child-selector-emu.html b/docs/uidesign/child-selector-emu.html
new file mode 100644 (file)
index 0000000..8294b6d
--- /dev/null
+++ b/docs/uidesign/child-selector-emu.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html>
+<head>
+       <title>CSS Child selector emulation for IE 6</title>
+       <style type="text/css">
+               /** Common rules **/
+               body  { background-color: #CCC; }
+               table { border:1px black solid; }
+               caption {
+                       background-color: #98fb98;
+                       border:1px solid #40FF40;
+               }
+
+               /** "old" rules" **/
+               table.global th,
+               table.global td
+               {
+                       border: 1px red solid;
+                       background-color:white;
+                       padding:1em;
+               }
+               table.global th
+               {
+                       background-color: #ffc0cb;
+               }
+
+               /** second table. Try to emulate child selector */
+               table.childemu th,
+               table.childemu td {
+                       border: 1px red solid;
+                       background-color:white;
+                       padding:1em;
+               }
+               table.childemu th
+               {
+                       background-color: #ffc0cb;
+               }
+
+               /** Reset style applied in childemu classes */
+               /** TODO: find the real default value!! */
+               table.childemu tr * th,
+               table.childemu tr * td {
+                       border: none;
+                       background-color: transparent;
+                       padding: 0;
+               }
+
+
+               /** child selector emulation */
+       </style>
+</head>
+<body>
+<p>
+The following table show how nested tables inherit colors from the wikitable class (here it was renamed "global").
+</p>
+<table class="global">
+<caption>Global table</caption>
+<tr>
+       <th>TH: should have pink bg</th>
+</tr>
+<tr>
+       <td>TD: white bg</td>
+</tr>
+<tr>
+       <td>
+               <table class="nested">
+               <caption>Nested table</caption>
+               <tr>
+                       <th>Nested TH: transparent</th>
+                       <td>Nested TD: transparent</td>
+               </tr>
+               </table>
+       </td>
+</tr>
+</table>
+
+<p>
+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>.
+</p>
+<table class="childemu">
+<caption>Global table</caption>
+<tr>
+       <th>TH: should have pink bg</th>
+</tr>
+<tr>
+       <td>TD: white bg</td>
+</tr>
+<tr>
+       <td>
+               <table class="nested">
+               <caption>Nested table</caption>
+               <tr>
+                       <th>Nested TH: transparent</th>
+                       <td>Nested TD: transparent</td>
+               </tr>
+               </table>
+       </td>
+</tr>
+</table>
+<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>
+
Wiklou, le Wiki du Wiklou