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

Groups > comp.lang.javascript > #40306

Re: Get ::before value

Show all headers | View raw

On Saturday, 17 July 2021 at 03:36:36 UTC+2, Andrew Poulos wrote:
> On 17/07/2021 9:15 am, Andrew Poulos wrote: 
> > On 17/07/2021 12:43 am, Julio Di Egidio wrote: 
> >> On Friday, 16 July 2021 at 09:53:08 UTC+2, Andrew Poulos wrote: 
> >>> Some content gets generated by CSS and I need to get the "live" value. 
> >>> 
> >>> The element in question has this CSS 
> >>> 
> >>> ::before { 
> >>> counter-increment: num; 
> >>> content: counter(num) ". "; 
> >>> } 
> >>> 
> >>> I tried 
> >>> getComputedStyle(elem, '::before').getPropertyValue('content'); 
> >>> and it returns 
> >>> counter(num) ". " 
> >>> and not the "live" value I was expecting (hoping). 
> >>> 
> >>> How can I get the actual text that is displayed? 
> >> 
> >> As far as I can tell, there is no way to access that value. Indeed, 
> >> you cannot even select the generated text (I mean, not even with your 
> >> mouse). 
> >> 
> >> See also here: 
> >> <https://stackoverflow.com/questions/532073/how-can-i-read-the-applied-css-counter-value> 
> > 
> > Thanks for link. 
> > 
> >> The obvious work-around is to generate the numbering from JS, i.e. 
> >> just do not use that CSS: or do, but then be prepared to compute the 
> >> same on the scripting side some other way, and make also sure that who 
> >> writes the CSS talks to who writes the JS and vice versa... 
> > 
> > Funny that the browser knows what text to display but I will need to 
> > script some workaround to get it.
> 
> I guess it's something similar with the "numbers" for ordered list items 
> in that you can't query what a browser is actually displaying. 

Right.  I suppose it has to do with how the browser is structured, anyway the docs (MDN) are quite explicit (though it's a bit all over the place), that it's stuff that doesn't make it to the DOM nor to the "accessibility tree", e.g. see here: <https://developer.mozilla.org/en-US/docs/Web/CSS/content#accessibility_concerns>  In particular, I take that to mean that not even a screen reader would see that part.

I think the bottom line is to use these features only as lightweight "graphic effects", when e.g. the numbering is not significant, just decorative.  Similarly for CSS animations and other effects: if e.g. sequencing or synchronisation is a requirement, CSS is just not the way to go.  Indeed, the fact that some of this stuff doesn't even make it to the DOM nor to accessibility tree to me is signal that it shouldn't be used at all, unless it really does not matter.

Anyway, my 2c.

Julio

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

Thread

Get ::before value Andrew Poulos <ap_prog@hotmail.com> - 2021-07-16 17:52 +1000
  Re: Get ::before value Julio Di Egidio <julio@diegidio.name> - 2021-07-16 07:43 -0700
    Re: Get ::before value Andrew Poulos <ap_prog@hotmail.com> - 2021-07-17 09:15 +1000
      Re: Get ::before value Andrew Poulos <ap_prog@hotmail.com> - 2021-07-17 11:36 +1000
        Re: Get ::before value Julio Di Egidio <julio@diegidio.name> - 2021-07-17 05:29 -0700
          Re: Get ::before value Julio Di Egidio <julio@diegidio.name> - 2021-07-21 07:14 -0700
  Re: Get ::before value "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2021-07-18 08:27 -0700
    Re: Get ::before value Julio Di Egidio <julio@diegidio.name> - 2021-07-20 04:06 -0700
      Re: Get ::before value "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2021-07-20 08:11 -0700
        Re: Get ::before value Julio Di Egidio <julio@diegidio.name> - 2021-07-21 07:29 -0700

csiph-web