Path: csiph.com!usenet.pasdenom.info!weretis.net!feeder1.news.weretis.net!news.solani.org!.POSTED!not-for-mail From: Thomas 'PointedEars' Lahn Newsgroups: comp.lang.javascript Subject: Re: Parse CSS styles and swap background position value Date: Tue, 03 Feb 2015 15:37:31 +0100 Organization: PointedEars Software (PES) Lines: 107 Message-ID: <2677580.U53eFOF1Mr@PointedEars.de> References: <8be9bcae-a221-46e1-8e0f-ec41632517a4@googlegroups.com> <54cf68f5$0$2870$e4fe514c@news2.news.xs4all.nl> <1609092.d9bYY2oEu8@PointedEars.de> <54cf7dfa$0$2962$e4fe514c@news2.news.xs4all.nl> <7622963.yZKU775dzf@PointedEars.de> Reply-To: Thomas 'PointedEars' Lahn Mime-Version: 1.0 Content-Type: text/plain; charset="UTF-8" Content-Transfer-Encoding: 8Bit X-Trace: solani.org 1422974291 6069 eJwFwYEBwCAIA7CXpoXCztEC/59g4uCiwug0H58MaxfTKhpRdlXEfKizJ1F9Wn6Iy7VN0v8AJwkRyA== (3 Feb 2015 14:38:11 GMT) X-Complaints-To: abuse@news.solani.org NNTP-Posting-Date: Tue, 3 Feb 2015 14:38:11 +0000 (UTC) User-Agent: KNode/4.14.2 X-User-ID: eJwFwYEBACAEBMCVKK+MQ/z+I3SH7ervmMMNBBlizc64tYLK8zwNGUpIBQyNa+tWJ47tKN0zLTWEr6cjH2FIFc4= Cancel-Lock: sha1:U02mZh7LmwU6Pp1oD0rpWE3crZU= X-NNTP-Posting-Host: eJwNwgERwDAIA0BLpISsyCmU+Zew3X+4oH6oEOP9lYbBg8y5R+bdrGVrvJKwoQaXlge7NtgfF7oQvw== Xref: csiph.com comp.lang.javascript:26782 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). >> 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 . Contrast that with “I” which is always written with a capital letter.) -- PointedEars FAQ: | SVN: Twitter: @PointedEars2 | ES Matrix: Please do not cc me. / Bitte keine Kopien per E-Mail.