demo.xhtml
author dglazman
Tue, 16 Mar 2010 07:12:02 -0500
branchtrunk
changeset 46 62cddb244f1f
parent 45 df5e85b9024b
child 49 4b91d1dc3197
permissions -rw-r--r--
[svn r50] get rid of extra ws in selectors
6
1970643e981b [svn r9] XHTML demo page
dglazman
parents:
diff changeset
     1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
1970643e981b [svn r9] XHTML demo page
dglazman
parents:
diff changeset
     2
<html xmlns="http://www.w3.org/1999/xhtml">
1970643e981b [svn r9] XHTML demo page
dglazman
parents:
diff changeset
     3
<head><meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />
35
f25ec50003ff [svn r39] better title for robots...
dglazman
parents: 34
diff changeset
     4
  <title>Demo of JSCSSP, a CSS parser in JavaScript</title>
6
1970643e981b [svn r9] XHTML demo page
dglazman
parents:
diff changeset
     5
18
4a3dc3774171 [svn r22] moving stylesheet to a style element
dglazman
parents: 17
diff changeset
     6
  <style type="text/css">@charset 'iso-8859-1';
43
83dbf00720eb [svn r47] interactive demo
dglazman
parents: 42
diff changeset
     7
		pre {
83dbf00720eb [svn r47] interactive demo
dglazman
parents: 42
diff changeset
     8
		  background-color: #FFFFCC;
83dbf00720eb [svn r47] interactive demo
dglazman
parents: 42
diff changeset
     9
		  border: 2px silver solid;
83dbf00720eb [svn r47] interactive demo
dglazman
parents: 42
diff changeset
    10
		  padding: 1em;
83dbf00720eb [svn r47] interactive demo
dglazman
parents: 42
diff changeset
    11
		  -moz-border-radius: 11px;
83dbf00720eb [svn r47] interactive demo
dglazman
parents: 42
diff changeset
    12
		  -webkit-border-radius:11px
83dbf00720eb [svn r47] interactive demo
dglazman
parents: 42
diff changeset
    13
		}
83dbf00720eb [svn r47] interactive demo
dglazman
parents: 42
diff changeset
    14
		body { font-family: sans-serif; margin: 1em }
83dbf00720eb [svn r47] interactive demo
dglazman
parents: 42
diff changeset
    15
		h1 { background-color: silver }
83dbf00720eb [svn r47] interactive demo
dglazman
parents: 42
diff changeset
    16
		h2 { background-color: lightgrey }
83dbf00720eb [svn r47] interactive demo
dglazman
parents: 42
diff changeset
    17
		h1, h2 { margin: 0px; padding: 4px }}
83dbf00720eb [svn r47] interactive demo
dglazman
parents: 42
diff changeset
    18
	</style>
6
1970643e981b [svn r9] XHTML demo page
dglazman
parents:
diff changeset
    19
  <script type="application/x-javascript"  src="cssParser.js"></script>
1970643e981b [svn r9] XHTML demo page
dglazman
parents:
diff changeset
    20
  <script type="application/x-javascript">
43
83dbf00720eb [svn r47] interactive demo
dglazman
parents: 42
diff changeset
    21
    function doit() {
6
1970643e981b [svn r9] XHTML demo page
dglazman
parents:
diff changeset
    22
      var source = document.getElementById("source");
43
83dbf00720eb [svn r47] interactive demo
dglazman
parents: 42
diff changeset
    23
      ss = source.value;
6
1970643e981b [svn r9] XHTML demo page
dglazman
parents:
diff changeset
    24
1970643e981b [svn r9] XHTML demo page
dglazman
parents:
diff changeset
    25
      var parser = new CSSParser();
1970643e981b [svn r9] XHTML demo page
dglazman
parents:
diff changeset
    26
      var sheet = parser.parse(ss, false, true);
43
83dbf00720eb [svn r47] interactive demo
dglazman
parents: 42
diff changeset
    27
      if (sheet) {
83dbf00720eb [svn r47] interactive demo
dglazman
parents: 42
diff changeset
    28
	      var serialization = document.getElementById("serialization");
83dbf00720eb [svn r47] interactive demo
dglazman
parents: 42
diff changeset
    29
	      serialization.textContent = sheet.cssText;
83dbf00720eb [svn r47] interactive demo
dglazman
parents: 42
diff changeset
    30
      }
83dbf00720eb [svn r47] interactive demo
dglazman
parents: 42
diff changeset
    31
      else
83dbf00720eb [svn r47] interactive demo
dglazman
parents: 42
diff changeset
    32
        serialization.textContent = "";
6
1970643e981b [svn r9] XHTML demo page
dglazman
parents:
diff changeset
    33
  }
1970643e981b [svn r9] XHTML demo page
dglazman
parents:
diff changeset
    34
  </script>
1970643e981b [svn r9] XHTML demo page
dglazman
parents:
diff changeset
    35
</head>
1970643e981b [svn r9] XHTML demo page
dglazman
parents:
diff changeset
    36
<body onload="onLoad()">
20
24e6997f9947 [svn r24] typo...
dglazman
parents: 18
diff changeset
    37
  <h1>JSCSSP, a CSS parser in JavaScript</h1>
12
598cc6e236b1 [svn r16] title to demo
dglazman
parents: 10
diff changeset
    38
  <h2>Author: <a href="http://glazman.org/weblog">Daniel Glazman</a></h2>
15
d6bce0a24d57 [svn r19] prose
dglazman
parents: 14
diff changeset
    39
  <p>Warning, it's a work in progress. One detail though: no regexps for parsing inside...</p>
13
eeab3bc03049 [svn r17] work in progress in demo
dglazman
parents: 12
diff changeset
    40
  <p>The current document has the following stylesheet attached:</p>
43
83dbf00720eb [svn r47] interactive demo
dglazman
parents: 42
diff changeset
    41
  <textarea style="margin: auto; width: 100%" rows="15" id="source">/* JSCSSP test */
45
df5e85b9024b [svn r49] interactive demo
dglazman
parents: 43
diff changeset
    42
pre { background-color: #FFFFCC; 
df5e85b9024b [svn r49] interactive demo
dglazman
parents: 43
diff changeset
    43
      /* shorthands */ border: 2px silver solid; padding: 1em;
df5e85b9024b [svn r49] interactive demo
dglazman
parents: 43
diff changeset
    44
      /* at least one of the 2 following properties not recognized by your browser
df5e85b9024b [svn r49] interactive demo
dglazman
parents: 43
diff changeset
    45
         but parsed and preserved by JSCSSP */
df5e85b9024b [svn r49] interactive demo
dglazman
parents: 43
diff changeset
    46
      -moz-border-radius: 11px; -webkit-border-radius:11px
df5e85b9024b [svn r49] interactive demo
dglazman
parents: 43
diff changeset
    47
    }
43
83dbf00720eb [svn r47] interactive demo
dglazman
parents: 42
diff changeset
    48
83dbf00720eb [svn r47] interactive demo
dglazman
parents: 42
diff changeset
    49
body { font-family: sans-serif; margin: 1em }
83dbf00720eb [svn r47] interactive demo
dglazman
parents: 42
diff changeset
    50
h1 { background-color: silver }
83dbf00720eb [svn r47] interactive demo
dglazman
parents: 42
diff changeset
    51
h2 { background-color: lightgrey }
83dbf00720eb [svn r47] interactive demo
dglazman
parents: 42
diff changeset
    52
h1, h2 { margin: 0px; padding: 4px }
83dbf00720eb [svn r47] interactive demo
dglazman
parents: 42
diff changeset
    53
83dbf00720eb [svn r47] interactive demo
dglazman
parents: 42
diff changeset
    54
/* escapes */
83dbf00720eb [svn r47] interactive demo
dglazman
parents: 42
diff changeset
    55
83dbf00720eb [svn r47] interactive demo
dglazman
parents: 42
diff changeset
    56
.f\00C4 oo { p\roperty: value; content: "foo \
83dbf00720eb [svn r47] interactive demo
dglazman
parents: 42
diff changeset
    57
bar" }</textarea>
83dbf00720eb [svn r47] interactive demo
dglazman
parents: 42
diff changeset
    58
  <p><button onclick="doit()">Parse and Reserialize below</button></p>
14
bfc281b33cdd [svn r18] prose
dglazman
parents: 13
diff changeset
    59
  <p><a href="http://sources.disruptive-innovations.com/jscssp/">JSCSSP</a> is called to parse the
bfc281b33cdd [svn r18] prose
dglazman
parents: 13
diff changeset
    60
     stylesheet and here's how JSCSSP reserializes it:</p>
7
eb074342725d [svn r10] XHTML demo page
dglazman
parents: 6
diff changeset
    61
  <pre id="serialization"/>
6
1970643e981b [svn r9] XHTML demo page
dglazman
parents:
diff changeset
    62
</body>
7
eb074342725d [svn r10] XHTML demo page
dglazman
parents: 6
diff changeset
    63
</html>