SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Processing a StyleSheet using JavaScript??

    Hello,

    I am looking for a way to process a stylsheet using JavaScript.

    Let's assume I have a string under the variable of "stylsheet". So all the content of the stylesheet is in a single string (This is where I've got to so far).

    Now I need to process that string to seperate all the various rulesets.

    So I would like to end up with an array of rulesets. So, for example... stylesheet[0] would be:

    Code:
    [selector] {
      [PropertyName1]: [Value];
      [PropertyName2]: [Value];
      [PropertyName3]: [Value];
    }
    So I want to seperate all rulesets and ignore any css comments (/*BLAH BLAH BLAH)*/). I also want it to ignore things like "@charset "utf-8";" or "@import" ... But this is a secondary objective so not too important.

    I hope what I've said is understandable.

    Can anybody help?
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Jimmy,

    Doing what you want would take a lot of regex and validation. Purely because everyone writes their own CSS a different way etc.

    I recall there being a javascript way of accessing the data you want. http://www.quirksmode.org/dom/getstyles.html


  3. #3
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It might be better if I tell you what I am trying to do.

    Basically I've made a script which enhances the various code blocks on my page. It takes the content within each <pre> element and puts it into an ordered list with corresponding styles (defined in an external stylesheet).

    Basically each <pre> element gets replaced with this basic structure:

    Code HTML4Strict:
     
    <div class="code">
       <ol>
           <li>//code here...</li>
           <li>//code here...</li>
           <li>//code here...</li>
       </ol>
    </div>

    One of the corresponding CSS declerations might be like this:

    Code CSS:
     
    div.code {
      padding: 10px;
    }

    So, the stylesheet and the script are linked to in the <head> of the document. It all works great up until specificity gets in the way!

    Obviously I have other stylesheets with other rules. This is just fictional but hopefully you'll get the idea: - One of the other stylesheets has this rule in:

    (note that all content within the html is surrounded by a div with an ID of "content")

    Code CSS:
    #content div {
       padding: 10px;
    }

    The rule above is has a higher specificity level than the "div.code" rule so the 10px padding is applied instead of the 20px.

    I could fix this by making the codeblocks have IDs of "code" but it is likely that there will be multiple code blocks within a single page so IDs cannot be used ... Classes are the only option.

    The other solution would be to somehow grab all the data from the stylesheet (via ajax) and go through each rule and apply it inline on the corresponding element thus making that the applied rule. - So 20px would work.. not 10px (on the padding example above)

    I hope you understand...

    Thanks
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •