Generating CSS shorthand properties

• US 8,468,449 B1
• Filed: 12/08/2011
• Issued: 06/18/2013
• Est. Priority Date: 12/08/2011
• Status: Active Grant

• Current Assignee: Microsoft Technology Licensing LLC (Microsoft Corporation)
• Original Assignee: Microsoft Corporation
• Inventors: Hall, Matthew T.
• Primary Examiner(s): RIES, LAURIE ANNE
• Application Number:
  US13/314,204
• Publication Number:
  US 20130151951A1
• Time in Patent Office: 558 Days
• Field of Search: 715/234, 715/235, 715/236, 715/237, 715/239, 715/241
• US Class Current: 715/273
• CPC Class Codes: G06F 40/154 Tree transformation for tree-structured or markup documents, e.g. XSLT, XSL-FO or stylesheets

Abstract

An authoring tool for CSS retains original user syntax and generates CSS markup that minimizes a total number of properties in the markup. A directed graph is generated from the original user markup. Nodes in the graph can be collapsed and expanded to convert between longhand and shorthand properties. User input updating property values can result in the generation of compact CSS code that retains syntactical features of the original user syntax.

Claims

1. A system comprising:

at least one processor of a computing device;

a memory of the computing device; and

at least one module loaded into the memory causing the at least one processor to;

receive CSS input;

generate a directed graph in memory from the CSS input;

receive user input changing at least one CSS statement in the CSS input;

modify the directed graph in memory to reflect the user input changing the at least one CSS statement;

convert between longhand and shorthand CSS properties by walking nodes in the modified directed graph;

generate CSS output, the CSS output minimizing a total number of properties in the generated CSS output.

2. The system of claim 1, further comprising:

at least one module loaded into the memory causing the at least one processor to;

use a node in the directed graph that minimizes property declarations specifying semantic properties within a shorthand group, the shorthand group comprising a subgraph of connected nodes in the directed graph comprising shorthand properties and terminal properties having at least one incoming edge originating from components of the shorthand properties.

3. The system of claim 1, further comprising:

at least one module loaded into the memory causing the at least one processor to;

collapse a set of terminal properties into a shorthand property in response to determining that specified values for all terminal properties in the set of terminal properties of each component of the shorthand property having outgoing edges within the directed graph comply with a set of collapsing rules.

4. The system of claim 3, wherein the set of collapsing rules comprise:

in response to determining that;

all the terminal properties to which the shorthand property has outgoing edges are specified within the group of CSS statements;

the importance of all the terminal properties for the collapse group match;

all the terminal properties or none of the terminal properties for the collapse group have a value of “

inherit”

;

all the terminal properties or none of the terminal properties for the collapse group have a value of “

initial”

;

all the terminal properties for the collapse group have an identical value;

collapsing the set of terminal properties into a shorthand property.

5. The system of claim 4, further comprising:

at least one module loaded into the memory causing the at least one processor to;

select a compact syntactical format for a group of CSS statements by selecting shorthand properties generated by a collapse group having a fewest number of property declarations, wherein a collapse group comprises a group of property declarations that can be specified in a single property declaration.

6. The system of claim 5, further comprising:

at least one module loaded into the memory causing the at least one processor to;

preserve existing CSS syntax in a group of CSS statements by adding nodes to the directed graph, the added nodes storing an actual syntactical representation of the CSS syntax in at least one CSS statement.

7. The system of claim 1, further comprising:

a directed graph comprising a template for collapsing properties into shorthand properties created from characteristics of the CSS rules.

8. A method of generating CSS markup comprising:

receiving at least one template for collapsing properties into shorthand properties, the at least one template comprising a directed graph created from characteristics of CSS language rules;

receiving by a processor of a computer, user input comprising CSS markup statements;

generating a directed graph from the received CSS markup statements;

receiving further user input changing at least one CSS markup statement in the received CSS markup statements;

in response to receiving the further user input, changing at least one node in the directed graph generated from the received CSS markup statements to create a modified direct graph;

converting between longhand and shorthand CSS properties in the CSS markup statements by walking nodes in the at least one template and extracting values from the directed graph generated from the received CSS markup statements;

generating at least one updated CSS markup statement, the at least one updated CSS markup statement minimizing a total number of properties appearing in the at least one updated CSS markup statement.

9. The method of claim 8, wherein the directed graph created from characteristics of CSS language rules comprises internal and external nodes, the internal and external nodes representing shorthand or terminal property components, a terminal property component comprising symbols that are not replaceable by other properties.

10. The method of claim 8, wherein the directed graph created from characteristics of CSS language rules comprises internal and external nodes, the internal and external nodes representing shorthand or terminal CSS properties, a terminal property comprising symbols that are not replaceable by other properties.

11. The method of claim 8, further comprising:

generating a compact CSS markup statement by selecting anode in the directed graph that minimizes property declarations specifying semantic properties within a shorthand group, the shorthand group comprising a subgraph of connected nodes in the directed graph, wherein the subgraph comprises shorthand properties and terminal properties having at least one incoming edge originating from components of the shorthand properties.

12. The method of claim 8, further comprising:

collapsing a set of terminal properties into a shorthand property in response to determining that specified values for all terminal properties in the set of terminal properties of each component of the shorthand property having outgoing edges within the directed graph to more than one terminal property are equal.

13. The method of claim 8, further comprising:

selecting a compact syntactical format for the CSS statement by computing a sum of property declarations that each of the shorthand properties within the a collapse group collapse to and selecting the property declaration for which the sum is less than a theoretical minimum for the shorthand collapse group.

14. The method of claim 8, further comprising:

building a dictionary mapping existing property declaration names to corresponding property declarations.

15. A computer-readable storage medium comprising computer-executable instructions which when executed cause at least one processor of a computing device to:

receive a first set of CSS statements;

generate a directed graph from the received first set of CSS statements, the directed graph comprising internal and external nodes, anode of the directed graph representing a shorthand property component, a terminal property component comprising symbols that are not replaceable by other symbols, a shorthand property or a terminal property comprising symbols that are not replaceable by other properties;

receive user input updating a value of a property in the received CSS statement;

convert between longhand and shorthand CSS properties in the CSS markup statements by walking nodes in at least one template comprising a directed graph created based on characteristics of CSS and extracting values from the directed graph generated from the received CSS markup statements;

generate an updated CSS statement that preserves syntax of the received CSS statement, the updated CSS statement minimizing a total number of properties appearing in the updated CSS statement.

16. The computer-readable storage medium of claim 15, comprising further computer-executable instructions, which when executed cause at least one processor to:

minimize the total number of properties in the updated CSS statement by selecting a node in the directed graph that minimizes property declarations specifying semantic properties within a shorthand group comprising a subgraph of connected nodes in the directed graph comprising shorthand properties and terminal properties having at least one incoming edge originating from components of the shorthand properties.

17. The computer-readable storage medium of claim 16, comprising further computer-executable instructions, which when executed cause at least one processor to:

select a compact syntactical format for the updated CSS statement by computing a sum of property declarations that each of the shorthand properties within the a collapse group collapse to and selecting the property declaration for which the sum is less than a theoretical minimum for the shorthand collapse group.

18. The computer-readable storage medium of claim 15, comprising further computer-executable instructions, which when executed cause at least one processor to:

collapse a set of terminal properties into a shorthand property in response to determining that specified values for all terminal properties in the set of terminal properties of each component of the shorthand property having outgoing edges within the directed graph to more than one terminal property are equal.

19. The computer-readable storage medium of claim 15, comprising further computer-executable instructions, which when executed cause at least one processor to:

preserve existing CSS syntax in the received CSS statement by adding nodes to the directed graph, the added nodes storing an actual syntactical representation of the CSS syntax in the received CSS statement.

20. The computer-readable storage medium of claim 19, comprising further computer-executable instructions, which when executed cause at least one processor to:

generate the updated CSS statement using the actual syntactical representation of the CSS syntax stored in the directed graph in the updated CSS statement.