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

Groups > comp.lang.javascript > #25997

Re: DOM style object property names with vendor prefixes

Show key headers only | View raw

Chris Beall wrote:

> On Mon, 27 Oct 2014 17:20:22 -0400, Thomas 'PointedEars' Lahn
> <PointedEars@web.de> wrote:

Please do not post attribution novels.
 
>> Chris Beall wrote:
>>> But, for bleeding-edge functions, it often becomes necessary to add
>>> vendor-specific prefixes.
>>
>> But preferably not with client-side DOM scripting.  In general, CSS
>> properties should be specified in a stylesheet that is merely triggered
>> with scripting, for example by toggling CSS class names on elements.
> 
> I've noticed that modifying style sheets seems to be less used, but I'm
> uncertain as to why modifying element attributes would be preferred.

Not just any attribute, but the “class” attribute.  It was designed for 
that, too.  You can use the “className” and (more recently) the “classList” 
properties to modify it.

> Could you elaborate?

(Do not ask a Yes-or-No question unless you want either Yes or No for an 
answer.)

It is prudent to separate scripts and stylesheets.  There are several 
advantages:

1. You can switch several stylesheet property values at once that way,
   context-sensitively.

2. You can do it as a fallback in case a more complex CSS selector is not
   supported.

3. A selector can apply to more than one element, so you do not need to
   duplicate code, which makes maintenance easier.

> Usage example: A long list, such as a timeline of events.  Events fall
> into different buckets, some of which are not mutually exclusive, and
> these are identified by class names on each list item.  To allow the user
> to filter the list, excluding (hiding) items in a certain bucket, I can
> either (and I'm sure there are other ways...):
>   - find each item in the list with class'X' and change it to class
> 'Xprime' (which has been previously styled as display: none)
>   - find the CSS style for the specified class and change its display
> property to 'none'.
> I've chosen the latter, and have detected no downside.  Note that I am
> changing only a single property in a single DOM object, rather than
> changing the class in many DOM objects.

Your own deliberations show that with the “className”/“classList” approach 
you would only change the class of one DOM object as well.

Here, one advantage of the former approach is that you can modify the 
stylesheet to use CSS transitions by replacing

  li.hidden {
    display: none;
  }

with, e.g.,

  li {
    opacity: 1;
    width: 42px;
    transition: all 0.25s;
  }

  li.hidden {
    opacity: 0;
    width: 0;
    transition: all 0.25s;
  }

You could then even use, e.g., LESS to make it more obvious and, with mix-
ins, be more compatible without writing much more:

  li {
    width: 42px;
    .opacity(1);
    .transition(all 0.25s);

    &.hidden {
      width: 0;
      .opacity(0);
      .transition(all 0.25s);
    }
  }

And you would not have to change a single line of script code to make it 
happen, because the script only toggles the “hidden” CSS class on the 
element and that would not have changed.

Or consider a descendant element’s CSS properties changing considerably 
because the classes of an ancestor element changed.  It is much more 
difficult, less efficient, and the result is less intuitive if you scripted 
the style properties directly (BTDT).
 
>>> When I say 'seems to become' I am referring to the results of
>>> experimentation on my part, which may be erroneous and which is
>>> complicated by the fact that some browsers don't seem to support
>>> modification of vendor-specific values at all.
>> Such as?
> 
> So far: IE, Chrome, Safari.  I'm probably not using the right DOM names.
> More investigation needed.

ACK.  I was more interested in the properties whose value appeared to be 
constant.

>>> I would appreciate authoritative references.
>> Since both are OSS: UTSL.  You can also use the auto-completion built
>> into the corresponding developer tools to find out.
>>
>> <http://devtoolsecrets.com/> (also in the FAQ)
> 
> Excellent!  Thanks you,

You're welcome.

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

DOM style object property names with vendor prefixes "Chris Beall" <Chris_Beall@prodigy.net> - 2014-10-27 16:30 -0400
  Re: DOM style object property names with vendor prefixes "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2014-10-27 14:07 -0700
    Re: DOM style object property names with vendor prefixes "Chris Beall" <Chris_Beall@prodigy.net> - 2014-10-27 17:43 -0400
    Re: DOM style object property names with vendor prefixes Andrew Poulos <ap_prog@hotmail.com> - 2014-10-28 09:48 +1100
      Re: DOM style object property names with vendor prefixes "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2014-10-27 22:45 -0700
        Re: DOM style object property names with vendor prefixes Andrew Poulos <ap_prog@hotmail.com> - 2014-10-28 19:31 +1100
          Re: DOM style object property names with vendor prefixes "Chris Beall" <Chris_Beall@prodigy.net> - 2014-10-28 09:59 -0400
          Re: DOM style object property names with vendor prefixes Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-10-28 15:26 +0100
          Re: DOM style object property names with vendor prefixes Andrew Poulos <ap_prog@hotmail.com> - 2014-10-31 12:29 +1100
  Re: DOM style object property names with vendor prefixes Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-10-27 22:20 +0100
    Re: DOM style object property names with vendor prefixes "Chris Beall" <Chris_Beall@prodigy.net> - 2014-10-27 18:11 -0400
      Re: DOM style object property names with vendor prefixes Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-10-27 23:45 +0100
        Re: DOM style object property names with vendor prefixes "Chris Beall" <Chris_Beall@prodigy.net> - 2014-10-27 20:38 -0400
          Re: DOM style object property names with vendor prefixes Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-10-28 19:49 +0100
            Re: DOM style object property names with vendor prefixes "Chris Beall" <Chris_Beall@prodigy.net> - 2014-10-28 17:56 -0400
              Re: DOM style object property names with vendor prefixes Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-10-29 21:07 +0100
                Re: DOM style object property names with vendor prefixes "Chris Beall" <Chris_Beall@prodigy.net> - 2014-10-30 12:50 -0400
                Re: DOM style object property names with vendor prefixes Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-10-30 19:13 +0100
                Re: DOM style object property names with vendor prefixes "Chris Beall" <Chris_Beall@prodigy.net> - 2014-10-30 17:17 -0400
                Re: DOM style object property names with vendor prefixes Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-10-31 20:35 +0100
        Re: DOM style object property names with vendor prefixes "Chris Beall" <Chris_Beall@prodigy.net> - 2014-10-27 23:19 -0400
          Re: DOM style object property names with vendor prefixes John Harris <niam@jghnorth.org.uk.invalid> - 2014-10-28 10:11 +0000
            Re: DOM style object property names with vendor prefixes Tim Streater <timstreater@greenbee.net> - 2014-10-28 11:42 +0000
              Re: DOM style object property names with vendor prefixes "Chris Beall" <Chris_Beall@prodigy.net> - 2014-10-28 09:52 -0400
            Re: DOM style object property names with vendor prefixes "Chris Beall" <Chris_Beall@prodigy.net> - 2014-10-28 09:49 -0400
              Re: DOM style object property names with vendor prefixes John Harris <niam@jghnorth.org.uk.invalid> - 2014-10-29 15:48 +0000
          Re: DOM style object property names with vendor prefixes Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-10-28 15:54 +0100
        Re: DOM style object property names with vendor prefixes Scott Sauyet <scott.sauyet@gmail.com> - 2014-10-30 08:12 -0700
  Re: DOM style object property names with vendor prefixes Joao Rodrigues <groups_jr-1@yahoo.com.br> - 2014-10-29 15:23 -0200
    Re: DOM style object property names with vendor prefixes Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-10-29 21:47 +0100
      Re: DOM style object property names with vendor prefixes Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-10-30 07:32 +0100
    Re: DOM style object property names with vendor prefixes "Chris Beall" <Chris_Beall@prodigy.net> - 2014-10-30 10:47 -0400

csiph-web