Patent Application
20130159839
Originally, markup languages such as the Hypertext Markup Language (HTML) were formatted manually with in-line formatting codes. That is, appearance attributes such as font, size, color, placement, and others would be set within the HTML elements. This approach proved to be inadequate for systematic and organized control of appearance, and content and appearance were difficult to separate. As a result, the World Wide Web Consortium (W3C) established the Cascading Style Sheet (CSS) language. The CSS language consists of a grammar for specifying style rules. An HTML page can link to a CSS style sheet (“style sheet” hereafter), and when the HTML page is rendered, the browser applies style rules in the style sheet to determine the appearance of the HTML page. Different pages may link to the same style sheet, thus allowing a website to have a unified appearance and style.
By design, the CSS language allows multiple rules to apply to a same markup page element, in which case, rules are prioritized according to specificity, order of appearance, source (e.g., embedded, imported, or linked, browser default), etc. This cascading of styles allows a same style sheet to be used for many different pages. As websites have increased in complexity, so too have style sheets. Recently, it is not uncommon for a style sheet to have thousands of style rules. However, large style sheets have disadvantages. Because a style sheet can be transmitted from a web server to a browser many times, a large style sheet can cause significant communications overhead. At the browser, large style sheets can take significant time to process and apply, thus increasing the render time for the related page. Animated pages that are repeatedly rendered can be a problem; the style sheet must be parsed and applied for each loop of animation.
The need to reduce the size of style sheets has been recognized. Previous approaches to style sheet compression include minification, where knowledge of the lexical rules of the CSS language is used to minify a style sheet by removing whitespace, removing comments, etc. It is also possible to compress colors and font weights. However, these techniques are of limited benefit. Minified CSS code is difficult to maintain, and rates of compression can be negligible.
Techniques related to semantic compression of CSS style sheets are discussed below.
The following summary is included only to introduce some concepts discussed in the Detailed Description below. This summary is not comprehensive and is not intended to delineate the scope of the claimed subject matter, which is set forth by the claims presented at the end.
Embodiments relate to semantic compression of cascading style sheets. Starting with a markup page having markup elements and a reference to a cascading style sheet, based on the reference to the cascading style sheet, the cascading style sheet is retrieved. The cascading style sheet has a plurality of style rules. The cascading style sheet is applied to the markup page to identify one or more of the style rules to be modified or omitted (e.g., rules that are redundant with respect to the markup page or inapplicable to the markup page). A compressed cascading style sheet is generated by excluding the identified rules from the compressed cascading style sheet or modifying the identified rules. The compressed cascading style sheet can then be applied to the markup sheet with similar effect as the uncompressed cascading style sheet.
Many of the attendant features will be explained below with reference to the following detailed description considered in connection with the accompanying drawings.
The present description will be better understood from the following detailed description read in light of the accompanying drawings, wherein like reference numerals are used to designate like parts in the accompanying description.
Embodiments discussed below relate to semantic compression of CSS style sheets. Discussion will begin with an overview of how information about the context in which a style sheet will be rendered can be leveraged to rework the style sheet in a manner that fits its immediate use. Server-based and client-based applications of the technique will then be described, followed by details about different types of context information and how they can be used to identify target style rules. Note that the techniques described herein can be applied to any type of markup language, including past and future versions, such as HTML, extensible HTML, extensible markup language (XML), or any other markup language to which CSS code can be applied. In addition, the techniques can be applied to any CSS code that complies with past or future definitions of the CSS language (e.g., CSS4, should it arise). The techniques can also be applied to other languages that are sufficiently similar to the CSS language.
The CSS compressor 100 in effect performs part of the process that a browser would use to render a markup page. The CSS compressor 100 may use any of the known techniques for CSS parsing and markup parsing to parse the input style sheet 102 and input markup page 104, forming respective data structures or objects in memory that represent the inputs. For example, the input markup page 104 may be represented as a document object model (DOM) instance, and the input style sheet 102 may be represented as hash tables storing the individual style rules. The CSS compressor 100 uses the data structures or objects representing the input to determine how and whether the style rules apply to the elements of the input markup page 104. Again, known techniques for applying style rules can be used. Details on priority and conflict resolution (i.e., cascading) of style rules are described elsewhere.
As the style rules are applied and the rendering process is partially simulated, information about the individual style rules is accumulated in the data structure or object that represents the style sheet. For example, style rules that are not used for the particular input markup page 104 are marked or identified. According to the DOM representation of the input markup page 104, style rules that as a whole have a same effect on an entire subtree of the DOM instance (e.g., through inheritance) can be consolidated to a style rule that applies to the root element of that subtree, modified to have a selector of a corresponding class, etc. Style rules that only apply to a single element can be condensed to a single style rule with an appropriate selector having the corresponding declarations. In embodiments described in detail later, other or additional information about the context within which the input markup page 104 will be rendered is taken into account. For example, script code embedded or linked in the input markup page 104 may be parsed and analyzed to identify markup elements, a browser type or version may be used to help tune the rule-application process (e.g., a browser might not support the target of a style rule), etc.
Finally, when the CSS compressor 100 has finished identifying semantic optimizations for the input style sheet 102, the CSS compressor 100 outputs a compressed style sheet 108. The compressed style sheet 108 is a version of the input style sheet 102, but with select style rules omitted, refactored, rearranged, etc. according to the analysis discussed above. In the example of
The process may be performed by a web server or a web browser. At step 130 a style sheet that is to be compressed is received, along with context information relating to use of the style sheet. At step 132 the style sheet is parsed and analyzed with reference to the context information. Again, existing techniques for applying CSS code can be modified to parse the style sheet. At step 134 the style sheet is analyzed, building information about how the style rules in the style sheet apply to the current context and also building information about the style sheet itself. At step 136 target style rules are selected, and at step 138 the target style rules are handled accordingly, e.g., they are removed, modified, reordered, consolidated, etc. At step 140 a compressed style sheet with the remaining and reordered or modified style rules is outputted and stored in memory or storage for later use with respect to the corresponding web page(s). Note that semantic modification of a style rule refers to changing the semantic (substantive) content of a style rule, as opposed to merely changing the lexical content (e.g., removing whitespace). For example, modifying semantic content of a style rule may include adding a declaration, removing a declaration, adding or removing a class, element (tag) name, ID to the selector, etc.
Although client-side compression might not have the network-bandwidth savings of the server-based approach of
The context information 200 may also include script information 204. The script information 204 may be a JavaScript (JS) script, for example, linked or embedded in a web page to be rendered. Given a JS script, a script interpreter 206 might analyze or execute the JS script to identify document elements in the page model 208 that are added, removed, or modified by the JS script. The CSS compressor might also recognize that the JS script generates CSS styles to be added to the DOM of the web page (using JQueries), which can also inform the CSS analysis; a script-generated style rule might moot a style rule in the input style sheet 102. One approach is to execute the is script and allow it to modify the page model 208, and then apply style rules to the resulting page model 208.
The context information 200 may include other information, such as session settings and parameters, server default settings, etc. For example, the server may have a default setting of ignoring style rules with certain properties. The user may have a session variable that indicates that imprecise rendering is acceptable, thus allowing some style rules to be modified or omitted. In one embodiment, the context information 200 may contain information about pages of a model-view-controller (MVC) system. For example, the fact that a page is part of an MVC system may trigger compression. As discussed above, the markup code (e.g., HTML) and JS code being used is analyzed. The CSS compressor 100 may then revise the corresponding style sheet, for example by tracking the classes and identifiers of the HTML and JS code and cross referencing them against the corresponding style sheet, then making choices about which specific declarations are redundant (and can be removed) in parent or children selectors. In one embodiment, markup can be prioritized for compression based on specificity of cascading style rules.
The memory and/or storage 224 may be in the form of volatile and/or non-volatile computer or device readable media, storing information to implement embodiments described above. This media is deemed to include at least media such as optical storage (e.g., compact-disk read-only memory (CD-ROM)), magnetic media, flash read-only memory (ROM), or any current or future means of storing digital information for ready interchange with the computing device 220. The stored information can be in the form of machine executable instructions (e.g., compiled executable binary code), source code, bytecode, or any other information that can be used to enable or configure computing devices to perform the various embodiments discussed above. This is also deemed to include at least volatile memory such as random-access memory (RAM) and/or virtual memory storing information such as central processing unit (CPU) instructions during execution of a program carrying out an embodiment, as well as non-volatile media storing information that allows a program or executable to be loaded and executed. The embodiments and features can be performed on any type of computing device, including portable devices, workstations, servers, mobile wireless devices, and so on.
