Path: csiph.com!news.mixmin.net!weretis.net!feeder1.news.weretis.net!news.solani.org!.POSTED!not-for-mail
From: Thomas 'PointedEars' Lahn <PointedEars@web.de>
Newsgroups: comp.lang.javascript
Subject: Re: Change font size in multiple classes
Date: Mon, 07 Sep 2015 20:35:27 +0200
Organization: PointedEars Software (PES)
Lines: 103
Message-ID: <3400727.VFMSXGhhqZ@PointedEars.de>
References: <l8-dnaGgOJ9fWXrInZ2dnUU7-VOdnZ2d@westnet.com.au> <5339258.obARhecIma@PointedEars.de> <uu2dnR50F5xHTHHInZ2dnUU7-cudnZ2d@westnet.com.au>
Reply-To: Thomas 'PointedEars' Lahn <cljs@PointedEars.de>
Mime-Version: 1.0
Content-Type: text/plain; charset="UTF-8"
Content-Transfer-Encoding: 8Bit
X-Trace: solani.org 1441651135 28545 eJwFwQEBwCAMAzBLlG0tyIH99S+BpIJgK1nMclmWjAB/dOS+bo6BeRK1mvfEt6BUTx+Utx4PfBCh (7 Sep 2015 18:38:55 GMT)
X-Complaints-To: abuse@news.solani.org
NNTP-Posting-Date: Mon, 7 Sep 2015 18:38:55 +0000 (UTC)
User-Agent: KNode/4.14.2
X-User-ID: eJwFwYEBwDAEBMCVRPA1Dnn2H6F3fuPEg4WH+fo+zqZ+kzTJFq5dQSgq0P0VZuh2lI93ckmBJ9QwVadl+ANuQxZe
Cancel-Lock: sha1:N9WP3PLE84iUrfH2B7i0fmWZXjo=
X-NNTP-Posting-Host: eJwFwQEBADAEBMBKhmfiMPSPsDuIHXuuBlMstgdVTJActZtUUMfs2Y60Dp3ZdLksNPw4/AMrjhFm
Xref: csiph.com comp.lang.javascript:28660

Andrew Poulos wrote:

> On 6/09/2015 10:07 PM, Thomas 'PointedEars' Lahn wrote:
>> Andrew Poulos wrote:
>>> Within the HTML there's a STYLE element with a selector for every SPAN
>> […]
>>> […]
>>> I'm not sure whether I should
>>>
>>> - find all the "span.text" selectors
>>> - find and modify the font-size selector
>>>
>>> or
>>>
>>> - find all the SPAN elements
>>> - get and modify the font size directly
>>>
>>> Is one way "better" than the other or is there another way to do this?
>>
>> If there are many “span” elements, the former is more efficient than the
>> latter; insofar it is better.
> 
> Ok, the number of "span.text" selectors matches the number of SPAN
> elements but its better to work through the STYLE element than the HTML
> looking for SPAN elements.

ACK.  Note that this can be greatly simplified nowadays (and with the proper 
emulation of ECMAScript Array methods, such as provided by my JSX):

  var rules = [];

  [].forEach.call(document.styleSheets, function (styleSheet) {
    rules = rules.concat([].slice.call(
      styleSheet.cssRules || styleSheet.rules));
  });

  var relevantRules = rules.filter(function (rule) {
    return /(?:^|\s)span\.text\d+Font\d+\s*(?:,|$)/.test(rule.selectorText);
  });

“relevantRules” can further be filtered to contain only the rules that have 
the “font-size” property set, and/or you can .forEach() on it, and do the 
test in the pseudo-loop.
 
>> There is another way to do this.
> 
> What way would you recommend? Currently I working through the
> styleSheets and changing in pixel dimensioned font size to EMs.

Given that you are modifying a stylesheet based on previous declared 
property values, and that you need to support IE 8, this is the best 
approach.  (In our company, we have discontinued support for IE 8 on most of 
our platforms, based on the fact that its users constitute less than 1 % of 
our visitors and customers.)

Otherwise I would have recommended to consider adding a CSS3 style rule to 
override declarations for all “span” elements whose “class” attribute value 
contains a class name that begins with “text”:

  span[class^="text"],
  span[class~=" text"] {
    property-you-want-to-override: new-value !important;
  }

<http://www.w3.org/TR/css3-selectors/#attribute-substrings>

You can do this statically, or with client-side scripting.  The most 
efficient and compatible way to augment stylesheets with client-side 
scripting is to append a new “style” element:

  var style = document.createElement("style");
  style.type = "text/css";
  var styleText = 'span[…] …';

  if (typeof style.styleSheet != "undefined")
  {
    /* older MSHTML */
    style.styleSheet.cssText = styleText;
  }
  else
  {
    style.appendChild(document.createTextNode(styleText));
  }

  (document.head || document.getElementsByTagName("head")[0])
    .appendChild(style);

If the third party is using “!important” in their stylesheet, you may have 
to add more simple selectors in the rule’s selector in order to increase 
the selector’s specificity.

Bear in mind that “!important” declarations in the user stylesheet always 
have the greatest weight.

<http://www.w3.org/TR/CSS2/cascade.html#cascade>
<http://specificity.keegan.st/>
<http://www.w3.org/QA/Tips/color>

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