Browser Kompatibilität
Links und Übersichten. Was funktioniert wo ?
SVG / Animation
<style> td, th { border: 1px solid #ccc; } td { padding: .25em .5em; } .table-td-pro { background: lightgreen; } .table-td-con { background: lightcoral; } .table-td-partial-1 { background: orange; } .table-td-partial-2 { background: yellow; } </style> </head> <body> <table width="100%"> <tbody> <tr> <th>Einbindung</th> <th><p>Browser</p></th> <th>:hover</th> <th>link</th> <th>keyframe animation</th> <th>SMIL animation</th> <th>javascript animation</th> <th>Media Query</th> </tr> <tr> <th rowspan="8">Inline</th> <td>Safari</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja</td> </tr> <tr> <td>Chrome</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja</td> </tr> <tr> <td>Firefox</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja</td> </tr> <tr> <td>Opera</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja</td> </tr> <tr> <td>Edge</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja</td> <td class="table-td-partial-1">Teilweise <sup>1</sup></td> <td class="table-td-con">nein</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja</td> </tr> <tr> <td>IE 11</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja</td> <td class="table-td-partial-2">Teilweise <sup>2</sup></td> <td class="table-td-con">nein</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja</td> </tr> <tr> <td>IE 10</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja</td> <td class="table-td-partial-2">Teilweise <sup>2</sup></td> <td class="table-td-con">nein</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja</td> </tr> <tr> <td>IE 9</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja</td> <td class="table-td-con">nein</td> <td class="table-td-con">nein</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja</td> </tr> <tr> <th rowspan="8">Object, Embed, iframe</th> <td>Safari</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja</td> </tr> <tr> <td>Chrome</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja, abhängig vom Elternelement</td> </tr> <tr> <td>Firefox</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja, abhängig vom Elternelement</td> </tr> <tr> <td>Opera</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja, abhängig vom Elternelement</td> </tr> <tr> <td>Edge</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja</td> <td class="table-td-partial-1">Teilweise <sup>1</sup></td> <td class="table-td-con">nein</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja, abhängig vom Elternelement</td> </tr> <tr> <td>IE 11</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja</td> <td class="table-td-partial-2">Teilweise <sup>2</sup></td> <td class="table-td-con">nein</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja, abhängig vom Elternelement</td> </tr> <tr> <td>IE 10</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja</td> <td class="table-td-partial-2">Teilweise <sup>2</sup></td> <td class="table-td-con">nein</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja, abhängig vom Elternelement</td> </tr> <tr> <td>IE 9</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja</td> <td class="table-td-con">nein</td> <td class="table-td-con">nein</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja, abhängig vom Elternelement</td> </tr> <tr> <th rowspan="8"><img></th> <td>Safari</td> <td class="table-td-con">nein</td> <td class="table-td-con">nein</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja</td> <td class="table-td-con">nein</td> <td class="table-td-pro">ja, abhängig vom Elternelement</td> </tr> <tr> <td>Chrome</td> <td class="table-td-con">nein</td> <td class="table-td-con">nein</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja</td> <td class="table-td-con">nein</td> <td class="table-td-pro">ja, abhängig vom Elternelement</td> </tr> <tr> <td>Firefox</td> <td class="table-td-con">nein</td> <td class="table-td-con">nein</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja</td> <td class="table-td-con">nein</td> <td class="table-td-pro">ja, abhängig vom Elternelement</td> </tr> <tr> <td>Opera</td> <td class="table-td-con">nein</td> <td class="table-td-con">nein</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja</td> <td class="table-td-con">nein</td> <td class="table-td-pro">ja, abhängig vom Elternelement</td> </tr> <tr> <td>Edge</td> <td class="table-td-con">nein</td> <td class="table-td-con">nein</td> <td class="table-td-partial-1">Teilweise <sup>1</sup></td> <td class="table-td-con">nein</td> <td class="table-td-con">nein</td> <td class="table-td-pro">ja, abhängig vom Elternelement</td> </tr> <tr> <td>IE 11</td> <td class="table-td-con">nein</td> <td class="table-td-con">nein</td> <td class="table-td-partial-2">Teilweise <sup>2</sup></td> <td class="table-td-con">nein</td> <td class="table-td-con">nein</td> <td class="table-td-pro">ja, abhängig vom Elternelement</td> </tr> <tr> <td>IE 10</td> <td class="table-td-con">nein</td> <td class="table-td-con">nein</td> <td class="table-td-partial-2">Teilweise <sup>2</sup></td> <td class="table-td-con">nein</td> <td class="table-td-con">nein</td> <td class="table-td-pro">ja, abhängig vom Elternelement</td> </tr> <tr> <td>IE 9</td> <td class="table-td-con">nein</td> <td class="table-td-con">nein</td> <td class="table-td-con">nein</td> <td class="table-td-con">nein</td> <td class="table-td-con">nein</td> <td class="table-td-pro">ja, abhängig vom Elternelement</td> </tr> <tr> <th rowspan="8">CSS Background</th> <td>Safari</td> <td class="table-td-con">nein</td> <td class="table-td-con">nein</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja</td> <td class="table-td-con">nein</td> <td class="table-td-pro">ja, abhängig vom Elternelement</td> </tr> <tr> <td>Chrome</td> <td class="table-td-con">nein</td> <td class="table-td-con">nein</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja</td> <td class="table-td-con">nein</td> <td class="table-td-pro">ja, abhängig vom Elternelement</td> </tr> <tr> <td>Firefox</td> <td class="table-td-con">nein</td> <td class="table-td-con">nein</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja</td> <td class="table-td-con">nein</td> <td class="table-td-pro">ja, abhängig vom Elternelement</td> </tr> <tr> <td>Opera</td> <td class="table-td-con">nein</td> <td class="table-td-con">nein</td> <td class="table-td-pro">ja</td> <td class="table-td-pro">ja</td> <td class="table-td-con">nein</td> <td class="table-td-pro">ja, abhängig vom Elternelement</td> </tr> <tr> <td>Edge</td> <td class="table-td-con">nein</td> <td class="table-td-con">nein</td> <td class="table-td-partial-1">Teilweise <sup>1</sup></td> <td class="table-td-con">nein</td> <td class="table-td-con">nein</td> <td class="table-td-pro">ja, abhängig vom Elternelement</td> </tr> <tr> <td>IE 11</td> <td class="table-td-con">nein</td> <td class="table-td-con">nein</td> <td class="table-td-partial-2">Teilweise <sup>2</sup></td> <td class="table-td-con">nein</td> <td class="table-td-con">nein</td> <td class="table-td-pro">ja, abhängig vom Elternelement</td> </tr> <tr> <td>IE 10</td> <td class="table-td-con">nein</td> <td class="table-td-con">nein</td> <td class="table-td-partial-2">Teilweise <sup>2</sup></td> <td class="table-td-con">nein</td> <td class="table-td-con">nein</td> <td class="table-td-pro">ja, abhängig vom Elternelement</td> </tr> <tr> <td>IE 9</td> <td class="table-td-con">nein</td> <td class="table-td-con">nein</td> <td class="table-td-con">nein</td> <td class="table-td-con">nein</td> <td class="table-td-con">nein</td> <td class="table-td-pro">ja, abhängig vom Elternelement</td> </tr> </tbody> </table> <legend class="table-td-partial-1">1: Opacity und Fill funktionieren, transform nicht. Weiteres wurde nicht geprüft.</legend> <legend class="table-td-partial-2">2: Opacity funktioniert, transform und Fill nicht. Weiteres wurde nicht geprüft.</legend>
