css-fixme/cssfixme.htm at master · webcompat/css-fixme · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html><html><head>
<title>CSS:fixme</title>
<script src="js/css-browserside.js">/* This is the CSS rework parser, converted from Node.js - code to something that runs in browsers with browserify */</script>
<style type="text/css">pre strong{
        background: yellow;
        color:black;
    }
    textarea{width: 100%; min-height: 200px;}</style>
</head>
<body>
    <p>This tool attempts to fix non-standard CSS by adding standardised equivalents to all declarations that use <em>-webkit-</em>prefixed properties and values that have standardised equivalents. The standardised syntax is not always same as the -webkit- syntax, so getting everything right is a challenge. Please test this tool with various <em>-webkit-</em> prefixed CSS constructs and let me <a href="mailto:hsteen@mozilla.com">know</a> if you find problems.</p>
    <p>Note: some <em>-webkit-</em> prefixed properties do not (yet?) have standardised equivalents. This tool will deliberately not add pseudo-standard code on the assumption that the standards will one day match the current -webkit- implementation.</p>
    <p>This uses the <a href="https://github.com/reworkcss/rework">ReworkCSS</a> library for parsing and stringifying CSS.</p>
    <p>Paste CSS in this box to see what needs fixing:</p>
    <textarea></textarea><br><button type="button" id="do_fixup">Add standard equivalents for prefixed CSS</button> <label><input type="checkbox" name="compact">Compact output (whitespace only after closing brace)</label>
    <pre id="fixedcss"></pre>
    <!--
TODO:     -webkit-border-radius: 50% 2px;
    border-radius: 50% / 2px; ??
     -->
<script src="js/css-fixme.js"></script>
</body>
</html>