Method and system for generating an auto-completion list for a cascading style sheet selector
An auto-completion list for a cascading style sheet (CSS) selector is generated based on user input and contextual information associated with a target document. The user input that triggers the generation of the auto-completion list is entered while creating a CSS selector. A CSS block in the target document is parsed to determine the contextual information associated with the target document corresponding to the user input. The contextual information and the user input are analyzed to determine appropriate elements to add to the CSS selector to complete CSS selector syntax. The appropriate elements are provided in the auto-completion list. The auto-completion list is displayed proximate the location where the user entered the input that triggered generation of the auto-completion list. The user may then select one of the elements displayed in the auto-completion list to add the selected element to the CSS selector syntax.
1. A computer-implemented method for populating an auto-complete list for a cascading style (CSS) selector, the method comprising:
receiving a user input that triggers generation of the auto-completion list for the CSS selector, wherein the user input is in a CSS selector of a target mark-up language document;
parsing the portion of the target mark-up language document that precedes the user input that triggered the generation of the auto-completion list for the CSS selector to determine contextual information associated with the CSS selector;
when the determined contextual information indicates a new class, populating the auto-completion list with class attribute values indicated in the parsed portion of the target mark-up language document that precedes the user input that triggered the generation of the auto-completion list for the CSS selector;
when the determined contextual information indicates a new ID, populating the auto-completion list with ID attribute values indicated in the parsed portion of the target mark-up language document that precedes the user input that triggered the generation of the auto-completion list for the CSS selector;
when the determined contextual information indicates a pseudo-class, populating the auto-completion list with pseudo-classes indicated in the parsed portion of the target mark-up language document that precedes the user input that triggered the generation of the auto-completion list for the CSS selector; when the determined contextual information indicates a property associated with a rule, populating the auto-completion list with properties associated with the target mark-up language document and the CSS selector, wherein selection of a property in the auto-completion list causes the auto-completion list to populate with acceptable values of the selected property derived from the parsed target mark-up language document; and
when the determined contextual information indicates a new tag,
determining whether selector elements precede the user input,
when selector elements do not precede the user input, populating the auto-completion list with tags indicated in the parsed portion of the target mark-up language document that precedes the user input that triggered the generation of the auto-completion list for the CSS selector, and
when selector elements precede the user input, populating the auto-completion list with tags located in a schema of the target mark-up language document.
2. The computer-implemented method of claim 1 , wherein the user input includes at least one member of a group comprising: a hash, a tab, a space, a period, a curly bracket, and a colon.
3. The computer-implemented method of claim 1 , wherein parsing the portion of the target mark-up language document that precedes the user input that triggered the generation of the auto-completion list for the CSS selector to determine contextual information associated with the CSS selector includes at least one member of a group comprising: parsing the portion of the target mark-up document proximate the location of the user input, parsing the CSS selector, and parsing an element preceding the user input.
4. The computer-implemented method of claim 1 , wherein selection of a property in the auto-completion list causes the auto-completion list to populate with acceptable serial values of the selected property.
5. The computer-implemented method of claim 4 , where a tool tip is displayed that includes guidance for selecting the serial values of the selected property.
6. A computer-readable storage medium having computer executable instructions for populating an auto-complete list for a cascading style (CSS) selector, the instructions comprising:
receiving a user input that triggers generation of the auto-completion list for the CSS selector, wherein the user input is in a CSS selector of a target mark-up language document;
parsing the portion of the target mark-up language document that precedes the user input that triggered the generation of the auto-completion list for the CSS selector to determine contextual information associated with the CSS selector;
obtaining, from the parsed portion of the target mark-up language document that precedes the user input that triggered the generation of the auto-completion list for the CSS selector, at least one member of a group comprising: a class attribute value, ID attribute values, pseudo-classes, a property and tags; and
based on the determined contextual information, populating the auto-completion list with the at least one member of the group comprising: the class attribute value, the ID attribute values, the pseudo-classes, a property and the tags wherein selection of a property in the auto-completion list causes the auto-completion list to populate with acceptable values of the selected property derived from the parsed target mark-up language document.
7. The computer-readable storage medium of claim 6 , wherein the user input includes at least one member of a group comprising: a hash, a tab, a space, a period, a curly bracket, and a colon.
8. The computer-readable storage medium of claim 7 , wherein parsing the portion of the target mark-up language document that precedes the user input that triggered the generation of the auto-completion list for the CSS selector to determine contextual information associated with the CSS selector includes at least one member of a group comprising: parsing the portion of the target mark-up document proximate the location of the user input, parsing the CSS selector, and parsing an element preceding the user input.
9. The computer-readable storage medium of claim 6 , wherein when the determined contextual information indicates a property associated with a rule, populating the auto-completion list with properties associated with the target mark-up language document and the CSS selector.
10. The computer-readable storage medium of claim 6 , wherein selection of a property in the auto-completion list causes the auto-completion list to populate with acceptable serial values of the selected property.
11. The computer-readable storage medium of claim 10 , where a tool tip is displayed that includes guidance for selecting the serial values of the selected property.
12. A system for populating an auto-complete list for a cascading style (CSS) selector, the system comprising:
a processor; and
a memory having computer-executable instructions, the instructions being configured for:
receiving a user input that triggers generation of the auto-completion list for the CSS selector, wherein the user input is in a CSS selector of a target mark-up language document;
parsing the portion of the target mark-up language document that precedes the user input that triggered the generation of the auto-completion list for the CSS selector to determine contextual information associated with the CSS selector;
obtaining, from the parsed portion of the target mark-up language document that precedes the user input that triggered the generation of the auto-completion list for the CSS selector, at least one member of a group comprising: a class attribute value, ID attribute values, pseudo-classes, a property and tags; and
based on the determined contextual information, populating the auto-completion list with the at least one member of the group comprising: the class attribute value, the ID attribute values, the pseudo-classes, a property and the tags, wherein selection of a property in the auto-completion list causes the auto-completion list to populate with acceptable values of the selected property derived from the parsed target mark-up language document.
13. The computer-readable storage medium of claim 12 , wherein parsing the portion of the target mark-up language document that precedes the user input that triggered the generation of the auto-completion list for the CSS selector to determine contextual information associated with the CSS selector includes at least one member of a group comprising: parsing the portion of the target mark-up document proximate the location of the user input, parsing the CSS selector, and parsing an element preceding the user input.
14. The system of claim 12 , wherein when the determined contextual information indicates a property associated with a rule, populating the auto-completion list with properties associated with the target mark-up language document and the CSS selector.
15. The system of claim 12 , wherein selection of a property in the auto-completion list causes the auto-completion list to populate with acceptable serial values of the selected property.
16. The system of claim 15 , where a tool tip is displayed that includes guidance for selecting the serial values of the selected property.