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

Groups > comp.lang.javascript > #26779

Re: Parse CSS styles and swap background position value

Show all headers | View raw

On Monday, February 2, 2015 at 6:18:05 PM UTC+1, Thomas 'PointedEars' Lahn wrote:
[...]

> Now that I have given sufficient warning for the *general* case ;-), 
> I should point out that, because of the restrictions in the CSS3 module 
> specifications for background property values *so far*, this is a *special* 
> case where you could find the pertinent declarations, and tell apart the 
> property names and value *without* a full-blown CSS parser, under the 
> following conditions:
> 
> - Every background property declaration (even the last one in a ruleset,
>   where it is optional) is terminated with a semicolon (otherwise, newlines
>   complicate everything);
> 
> - Property values do not contain semicolons (there is the syntactical   
>   possibility for semicolons in "data" URIs for the "background-image"
>   property value or "background" property value component, for example);
> 
> - Property values do not contain substrings that match a "background"
>   or "background-position" property declaration.
> 
> And then I am rather certain (also tested positive on the example code) that 
> you can use
> 
>   /\bbackground(-position)?\s*:\s*([^;]+)\s*;/gi
> 
> for matching.

I was very close to that regular expression :-) Anyway, that one helped me. Thanks.

> Still, the difficulty here is to tell apart the parts of the property value 
> for exchanging their value ("$2").  Again, *iff* you can make sure that 
> *all* percentages in the matched property values relate to horizontal 
> background-position (which usually is _not_ the case: they can also be 
> something that precedes a URI-encoded value for the background image; a 
> radius, position or color stop of a gradient; the background size, or an 
> RGB[A]/HSL[A] background color component, or the vertical background-
> position - did I miss anything?), then you could use
> 
>   ... = value.replace(/\b(?:(left)|(right)|(\d+)%)\b/gi,
>     function (match, left, right, percentage) {
>       return (left
>         ? "right"
>         : (right ? "left" : (100 - percentage) + "%")));
>     });
> 
> But this does not work already in the case of
> 
>   background: url(example1.png) repeat-x right 50%;
> 
> And the "right" value can be anywhere in the property value:
> 
> <http://www.w3.org/TR/css3-background/#ltbg-layergt>
> 
> Specifically, you have to exclude the cases where you found a percentage and 
> either "left" or "right" (in any order) because that percentage, in the 
> aforementioned context, refers to the *vertical* position instead.

That's true. Having values anywhere in property brings complexity for parsing.

> As is obvious now, even though it is generally possible to use regular 
> expressions in this case, many conditions have to be met in order to make it 
> possible.

That's all true what You 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. This indicates some discipline in CSS, but it will work. As a basic step it should be sufficient. Later I will extend parsing to be more flexible.

> 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.

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.

Because of all these reasons I think that at basic level I can just parse CSS and use regular expressions to do the changes. Later the solution could be improved, I think.

Thank You for above suggestions described in Your response.

-- 
Cezary Tomczyk
http://www.ctomczyk.pl/

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