Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #26782

Re: Parse CSS styles and swap background position value

Show all headers | View raw

Cezary Tomczyk wrote:

> On Monday, February 2, 2015 at 6:18:05 PM UTC+1, Thomas 'PointedEars' Lahn
> wrote:
> [...]
> However, I am going to do it starting from basic level. I mean, I will
> assume that position values will be always at the end of the background
> property.

Even if so, which coordinate, if any, comes first, is determined by the 
components of the value.

  background: … right 50%;

is equivalent to

  background-: … 100% 50%;

and

  background: … 50% top;

is equivalent to

  background: … 50% 0%;

which is equivalent to

  background: … center top;

and 

  background: … top;

Finally, the initial value is “0% 0%” which is equivalent to “left top”.  
That is, in order to exchange left-aligned for right-aligned background-
position, you have to set “100% 0%” if you find background-image but not any 
“background-position” values in the ruleset *or* rulesets that match the 
same elements.  For that you need a ruleset parser (to consider only the 
last valid declaration), and to find the rulesets to pass to that parser you 
need a full CSS parser (so as not to mistake media queries for them).

<http://www.w3.org/TR/css3-background/#background-position>

>> It is a lot easier to use the CSSOM instead (document.styleSheets, the
>> return value of document.defaultView.getComputedStyle(...), or the
>> "style" property): there you have the rulesets and declarations already
>> parsed, and can access the "backgroundPosition" or "backgroundPositionX"
>> property value directly where it should always be retrievable in
>> percentages.
> [...]
> 
> I agree, it's a lot of easier to use the CSSOM instead, but there are
> several reasons that doesn't allow me to do that in that way.
> 
> 1. Processing of the CSS file will be done in NodeJS. This means that
> there is no way to use CSSOM there in the way as browser is using it.

Doubtful given PhantomJS.

> 2. I want to keep processed version in the same format as original version
> for better debugging purpose.
> 
> 3. I've used PhantomJS to get all CSS properties/values from CSSOM and it
> works. However, I can get all necessary details but then again I need to
> build new CSS so that it will look as original file. I think the solution
> here might become too complex.

While it is rather simple to retrieve the CSS code from a CSS stylesheet 
object in the CSSOM –

  [].map.call(
    document.styleSheets[0].cssRules,
    function (rule) {
      return rule.cssText;
    }).join("\n")

– the result does not need to look like the original stylesheet indeed.
In particular, the retrieved values are the computed ones.

But why would that matter?  What is your use-case?

> Because of all these reasons I think that at basic level I can just parse
> CSS and use regular expressions to do the changes. 

If you have a CSS parser.  Otherwise the probability is greater than zero 
that you break the code this way or that the result is inconsistent.

> Later the solution could be improved, I think.

Improved solutions will become increasingly similar to a CSS parser.  BTDT.

> Thank You for above suggestions described in Your response.

You are welcome.

(Even the polite form of „you“ – which I suppose is what you wanted to 
convey – is not written with a “Y” in modern English, except at the start of 
a sentence.  See also
<http://english.stackexchange.com/questions/30185/you-versus-you-as-polite-form-of-writing>.  Contrast that with “I” which is always written with a 
capital letter.)

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not cc me. / Bitte keine Kopien per E-Mail.

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

Parse CSS styles and swap background position value Cezary Tomczyk <cezary.tomczyk@gmail.com> - 2015-01-31 10:39 -0800
  Re: Parse CSS styles and swap background position value Erwin Moller <erwinmollerusenet@xs4all.nl> - 2015-02-02 13:09 +0100
    Re: Parse CSS styles and swap background position value Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-02-02 14:01 +0100
      Re: Parse CSS styles and swap background position value Erwin Moller <erwinmollerusenet@xs4all.nl> - 2015-02-02 14:39 +0100
        Re: Parse CSS styles and swap background position value Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-02-02 18:17 +0100
          Re: Parse CSS styles and swap background position value Cezary Tomczyk <cezary.tomczyk@gmail.com> - 2015-02-03 01:59 -0800
            Re: Parse CSS styles and swap background position value "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2015-02-03 11:39 +0100
            Re: Parse CSS styles and swap background position value Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-02-03 15:37 +0100
              Re: Parse CSS styles and swap background position value Cezary Tomczyk <cezary.tomczyk@gmail.com> - 2015-02-04 08:55 +0100
              Re: Parse CSS styles and swap background position value John Harris <niam@jghnorth.org.uk.invalid> - 2015-02-04 15:09 +0000
                Re: Parse CSS styles and swap background position value Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-02-04 16:19 +0100
          Re: Parse CSS styles and swap background position value Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-02-03 12:44 +0100

csiph-web